Gradient descent training + Added all dataset + graphs improvements

resources/js/components/PerceptronIterationsErrorsGraph.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ChartData } from 'chart.js';
 import { Bar } from 'vue-chartjs';
-import { colors } from '@/types/graphs';
+import { colors, gridColor, gridColorBold } from '@/types/graphs';
 import type { Iteration } from '@/types/perceptron';
 
 const props = defineProps<{
@@ -17,6 +17,7 @@ function getPerceptronErrorsPerIteration(): ChartData<
 >[] {
     const datasets: ChartData<'bar', (number | [number, number] | null)[]>[] =
         [];
+    const epochAverageError: number[] = [];
 
     const backgroundColors = colors;
 
@@ -27,6 +28,7 @@ function getPerceptronErrorsPerIteration(): ChartData<
             dataset = {
                 label: exampleLabel,
                 data: [],
+                order: 1,
                 backgroundColor:
                     backgroundColors[
                         iteration.exampleIndex % backgroundColors.length
@@ -35,6 +37,11 @@ function getPerceptronErrorsPerIteration(): ChartData<
             datasets.push(dataset);
         }
         dataset.data.push(iteration.error);
+
+        // Epoch error
+        epochAverageError[iteration.iteration - 1] =
+            (epochAverageError[iteration.iteration - 1] || 0) +
+            iteration.error ** 2 / 2;
     });
 
     // Sort dataset by label (Exemple 0, Exemple 1, ...)
@@ -44,6 +51,23 @@ function getPerceptronErrorsPerIteration(): ChartData<
         return aIndex - bIndex;
     });
 
+    // Epoch error
+    const epochErrorDataset = {
+        type: 'line',
+        label: "Erreur de l'époque",
+        data: [],
+        backgroundColor: '#fff',
+        borderColor: '#fff',
+        order: 0,
+        tension: 0.3,
+    };
+
+    epochAverageError.forEach((error) => {
+        epochErrorDataset.data.push(error);
+    });
+
+    datasets.push(epochErrorDataset);
+
     return datasets;
 }
 </script>
@@ -68,6 +92,15 @@ function getPerceptronErrorsPerIteration(): ChartData<
                 y: {
                     stacked: true,
                     beginAtZero: true,
+                    grid: {
+                        color: function (context) {
+                            if (context.tick.value == 0) {
+                                return gridColorBold;
+                            } 
+
+                            return gridColor;
+                        },
+                    },
                 },
             },
         }"