fixed error graph + added toggle only epoch error

resources/js/components/PerceptronIterationsErrorsGraph.vue

@@ -1,46 +1,55 @@
 <script setup lang="ts">
 import type { ChartData } from 'chart.js';
+import { computed, ref } from 'vue';
 import { Bar } from 'vue-chartjs';
 import { colors, gridColor, gridColorBold } from '@/types/graphs';
 import type { Iteration } from '@/types/perceptron';
+import Toggle from './ui/toggle/Toggle.vue';
 
 const props = defineProps<{
     iterations: Iteration[];
 }>();
 
+const epochErrorOnly = ref<boolean>(false);
+
 /**
- * Return the datasets of the iterations with the form { label: `Exemple ${exampleIndex}`, data: [error for iteration 1, error for iteration 2, ...] }
+ * Datasets of the iterations with the form { label: `Exemple ${exampleIndex}`, data: [error for iteration 1, error for iteration 2, ...] }
  */
-function getPerceptronErrorsPerIteration(): ChartData<
-    'bar',
-    (number | [number, number] | null)[]
->[] {
+const datasets = computed<
+    ChartData<'bar', (number | [number, number] | null)[]>[]
+>(() => {
     const datasets: ChartData<'bar', (number | [number, number] | null)[]>[] =
         [];
     const epochAverageError: number[] = [];
 
     const backgroundColors = colors;
 
+    const exampleCountPerEpoch: Record<number, number> = {};
+
     props.iterations.forEach((iteration) => {
-        const exampleLabel = `Exemple ${iteration.exampleIndex}`;
-        let dataset = datasets.find((d) => d.label === exampleLabel);
-        if (!dataset) {
-            dataset = {
-                label: exampleLabel,
-                data: [],
-                order: 1,
-                backgroundColor:
-                    backgroundColors[
-                        iteration.exampleIndex % backgroundColors.length
-                    ],
-            };
-            datasets.push(dataset);
+        if (!epochErrorOnly.value) {
+            const exampleLabel = `Exemple ${iteration.exampleIndex}`;
+            let dataset = datasets.find((d) => d.label === exampleLabel);
+            if (!dataset) {
+                dataset = {
+                    label: exampleLabel,
+                    data: [],
+                    order: 1,
+                    backgroundColor:
+                        backgroundColors[
+                            iteration.exampleIndex % backgroundColors.length
+                        ],
+                };
+                datasets.push(dataset);
+            }
+            dataset.data.push(iteration.error);
         }
-        dataset.data.push(iteration.error);
+
+        exampleCountPerEpoch[iteration.epoch] = (exampleCountPerEpoch[iteration.epoch] || 0) + 1;
 
         // Epoch error
-        epochAverageError[iteration.epoch - 1] =
-            (epochAverageError[iteration.epoch - 1] || 0) +
+        epochAverageError[iteration.epoch] =
+            (epochAverageError[iteration.epoch] || 0) +
             iteration.error ** 2 / 2;
     });
 
@@ -54,7 +63,7 @@ function getPerceptronErrorsPerIteration(): ChartData<
     // Epoch error
     const epochErrorDataset = {
         type: 'line',
-        label: "Erreur de l'époque",
+        label: "Erreur quadratique moyenne de l'époque",
         data: [],
         backgroundColor: '#fff',
         borderColor: '#fff',
@@ -62,14 +71,15 @@ function getPerceptronErrorsPerIteration(): ChartData<
         tension: 0.3,
     };
 
-    epochAverageError.forEach((error) => {
-        epochErrorDataset.data.push(error);
+    epochAverageError.forEach((error, index) => {
+        const exampleCount = exampleCountPerEpoch[index] || 1; // Avoid division by zero
+        epochErrorDataset.data.push(error / exampleCount);
     });
 
     datasets.push(epochErrorDataset);
 
     return datasets;
-}
+});
 </script>
 
 <template>
@@ -111,7 +121,12 @@ function getPerceptronErrorsPerIteration(): ChartData<
                 }
                 return labels;
             }, [] as string[]),
-            datasets: getPerceptronErrorsPerIteration(),
+            datasets: datasets,
         }"
     />
+    <div class="flex items-center gap-3">
+        <Toggle v-model="epochErrorOnly" class="cursor-pointer" variant="outline" id="epoch-error-only"
+            >Afficher uniquement l'erreur quadratique moyenne de l'époque</Toggle
+        >
+    </div>
 </template>