Switched To point for datasets

resources/js/pages/PerceptronViewer.vue

@@ -12,10 +12,11 @@ import {
     PointElement,
     LineElement,
 } from 'chart.js';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import LinkHeader from '@/components/LinkHeader.vue';
 import type {
     Dataset,
+    DatasetPoint,
     InitializationMethod,
     Iteration,
     PerceptronType,
@@ -49,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const selectedDatasetName = ref<string>('');
-const dataset = computed<number[][]>(() => {
+const dataset = computed<DatasetPoint[]>(() => {
     const selected = props.datasets.find(
         (d) => d.label === selectedDatasetName.value,
     );
@@ -72,15 +73,12 @@ const cleanedDataset = computed<
     }[] = [];
     // Separate data into each dataset based on value of the last column (label)
     dataset.value.forEach((row) => {
-        const label = row[row.length - 1];
-        const dataPoint = { x: row[0], y: row[1] };
-
-        let dataset = cleanedDataset.find((d) => d.label === label);
+        let dataset = cleanedDataset.find((d) => d.label === row.label);
         if (!dataset) {
-            dataset = { label, data: [] };
+            dataset = { label: row.label, data: [] };
             cleanedDataset.push(dataset);
         }
-        dataset.data.push(dataPoint);
+        dataset.data.push({ x: row.x, y: row.y });
     });
     return cleanedDataset;
 });