Refactor and optimizations

resources/js/components/PerceptronIterationsErrorsGraph.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ChartData } from 'chart.js';
+import type { ChartDataset } from 'chart.js';
 import { computed, ref } from 'vue';
-import { Bar } from 'vue-chartjs';
+import { Chart } from 'vue-chartjs';
 import { colors, gridColor, gridColorBold } from '@/types/graphs';
 import type { Iteration } from '@/types/perceptron';
 import Toggle from './ui/toggle/Toggle.vue';
@@ -11,16 +11,16 @@ const props = defineProps<{
     isRegression: boolean;
 }>();
 
+type ErrorValue = number | [number, number] | null;
+type ErrorDataset = ChartDataset<'bar' | 'line', ErrorValue[]>;
+
 const epochErrorOnly = ref<boolean>(false);
 
 /**
  * Datasets of the iterations with the form { label: `Exemple ${exampleIndex}`, data: [error for iteration 1, error for iteration 2, ...] }
  */
-const datasets = computed<
-    ChartData<'bar', (number | [number, number] | null)[]>[]
->(() => {
-    const datasets: ChartData<'bar', (number | [number, number] | null)[]>[] =
-        [];
+const datasets = computed<ErrorDataset[]>(() => {
+    const datasets: ErrorDataset[] = [];
     const epochAverageError: number[] = [];
 
     const backgroundColors = colors;
@@ -60,14 +60,14 @@ const datasets = computed<
 
     // Sort dataset by label (Exemple 0, Exemple 1, ...)
     datasets.sort((a, b) => {
-        const aIndex = parseInt(a.label.split(' ')[1]);
-        const bIndex = parseInt(b.label.split(' ')[1]);
+        const aIndex = parseInt((a.label ?? '').split(' ')[1]);
+        const bIndex = parseInt((b.label ?? '').split(' ')[1]);
         return aIndex - bIndex;
     });
 
     // Epoch error
-    const epochErrorDataset = {
-        type: 'line',
+    const epochErrorDataset: ErrorDataset = {
+        type: 'line' as const,
         label: "Erreur quadratique moyenne de l'époque",
         data: [],
         backgroundColor: '#fff',
@@ -88,7 +88,8 @@ const datasets = computed<
 </script>
 
 <template>
-    <Bar
+    <Chart
+        type="bar"
         class="bg-primary dark:bg-transparent!"
         :options="{
             responsive: true,