From da9301c2119b86ec17ebde30b1b8429b84b215a2 Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Sun, 14 Jan 2024 04:15:24 -0500
Subject: [PATCH] Add scatter grid widget

---
 gui/src/components/dynamic_components.vue | 14 +++-
 gui/src/components/grid/grid_scatter.vue  | 91 +++++++++++++++++++++++
 2 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 gui/src/components/grid/grid_scatter.vue

diff --git a/gui/src/components/dynamic_components.vue b/gui/src/components/dynamic_components.vue
index 5fa55898..4ab3f491 100644
--- a/gui/src/components/dynamic_components.vue
+++ b/gui/src/components/dynamic_components.vue
@@ -31,7 +31,9 @@ import grid_ping from "./grid/grid_ping.vue";
 import grid_freq from "./grid/grid_frequency.vue";
 import grid_beacon from "./grid/grid_beacon.vue";
 import grid_mycall_small from "./grid/grid_mycall small.vue";
+import grid_scatter from "./grid/grid_scatter.vue";
 import { stateDispatcher } from "../js/eventHandler";
+import { Scatter } from "vue-chartjs";
 
 let count = ref(0);
 let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
@@ -236,9 +238,17 @@ new gridWidget(
     "Audio",
     18,
   ),
+  new gridWidget(
+    grid_scatter,
+    { x: 0, y: 114, w: 6, h: 30 },
+    "Scatter graph",
+    false,
+    true,
+    "Stats",
+    19,
+  ),
 
-
-  //New new widget ID should be 19
+  //New new widget ID should be 20
 ];
 
 function updateFrequencyAndApply(frequency) {
diff --git a/gui/src/components/grid/grid_scatter.vue b/gui/src/components/grid/grid_scatter.vue
new file mode 100644
index 00000000..591db17c
--- /dev/null
+++ b/gui/src/components/grid/grid_scatter.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+// @ts-nocheck
+// reason for no check is, that we have some mixing of typescript and chart js which seems to be not to be fixed that easy
+import {  computed, onMounted } from "vue";
+import { setActivePinia } from "pinia";
+import pinia from "../../store/index";
+setActivePinia(pinia);
+
+import { useStateStore } from "../../store/stateStore.js";
+const state = useStateStore(pinia);
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { Scatter } from "vue-chartjs";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+// https://www.chartjs.org/docs/latest/samples/line/segments.html
+const scatterChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    x: {
+      type: "linear",
+      position: "bottom",
+      grid: {
+        display: true,
+        lineWidth: 1, // Set the line width for x-axis grid lines
+      },
+      ticks: {
+        display: true,
+      },
+    },
+    y: {
+      type: "linear",
+      position: "left",
+      grid: {
+        display: true,
+        lineWidth: 1, // Set the line width for y-axis grid lines
+      },
+      ticks: {
+        display: true,
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: false,
+    },
+  },
+};
+
+const scatterChartData = computed(() => ({
+  datasets: [
+    {
+      type: "scatter",
+      fill: true,
+      data: state.scatter,
+      label: "Scatter",
+      tension: 0.1,
+      borderColor: "rgb(0, 255, 0)",
+    },
+  ],
+}));
+</script>
+
+<template>
+  <div class="w-100 h-100">
+      <Scatter :data="scatterChartData" :options="scatterChartOptions" />
+    </div>
+      <!--278px-->
+</template>