Light mode support

resources/js/components/PerceptronDecisionGraph.vue

@@ -20,14 +20,18 @@ const farLeftDataPointX = computed(() => {
     if (props.cleanedDataset.length === 0) {
         return 0;
     }
-    const minX = Math.min(...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)));
+    const minX = Math.min(
+        ...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)),
+    );
     return minX;
 });
 const farRightDataPointX = computed(() => {
     if (props.cleanedDataset.length === 0) {
         return 0;
     }
-    const maxX = Math.max(...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)));
+    const maxX = Math.max(
+        ...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)),
+    );
     return maxX;
 });
 
@@ -45,7 +49,8 @@ function getPerceptronDecisionBoundaryDataset(
         networkWeights.length == 1 &&
         networkWeights[0].length == 1 &&
         networkWeights[0][0].length == 3
-    ) { // Unique, 3 weights perceptron
+    ) {
+        // Unique, 3 weights perceptron
         const perceptronWeights = networkWeights[0][0]; // We take the unique perceptron
 
         function perceptronLine(x: number): number {
@@ -132,7 +137,7 @@ function getPerceptronDecisionBoundaryDataset(
 <template>
     <Chart
         v-if="props.cleanedDataset.length > 0 || props.iterations.length > 0"
-        class="flex"
+        class="flex bg-primary dark:bg-transparent!"
         :options="{
             responsive: true,
             maintainAspectRatio: true,
@@ -189,8 +194,7 @@ function getPerceptronDecisionBoundaryDataset(
                     type: 'scatter',
                     label: `Label ${dataset.label}`,
                     data: dataset.data,
-                    backgroundColor:
-                        colors[index] || '#AAA',
+                    backgroundColor: colors[index] || '#AAA',
                 })),
 
                 // Perceptron decision boundary