Add Speed/SNR Chart Gird Widget

gui/src/components/dynamic_components.vue

@@ -32,8 +32,7 @@ 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";
+import grid_stats_chart from "./grid/grid_stats_chart.vue";
 
 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
@@ -63,7 +62,8 @@ class gridWidget {
     this.id = id;
   }
 }
-//Array of grid widgets, do not change array order as it'll affect saved configs
+//Array of grid widgets
+//Order can be changed so sorted correctly, but do not change ID as it'll affect saved configs
 const gridWidgets = [
 new gridWidget(
     grid_activities,
@@ -247,8 +247,16 @@ new gridWidget(
     "Stats",
     19,
   ),
-
-  //New new widget ID should be 20
+  new gridWidget(
+    grid_stats_chart,
+    { x: 0, y: 114, w: 6, h: 30 },
+    "Speed/SNR graph",
+    false,
+    true,
+    "Stats",
+    20,
+  ),
+  //Next new widget ID should be 21
 ];
 
 

gui/src/components/grid/grid_stats_chart.vue

@@ -0,0 +1,105 @@
+<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 { ref, computed, onMounted, nextTick, toRaw } 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 { Line, Scatter } from "vue-chartjs";
+
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+// https://www.chartjs.org/docs/latest/samples/line/segments.html
+const skipped = (speedCtx, value) =>
+  speedCtx.p0.skip || speedCtx.p1.skip ? value : undefined;
+const down = (speedCtx, value) =>
+  speedCtx.p0.parsed.y > speedCtx.p1.parsed.y ? value : undefined;
+
+var transmissionSpeedChartOptions = {
+  //type: "line",
+  responsive: true,
+  animations: true,
+  maintainAspectRatio: false,
+  cubicInterpolationMode: "monotone",
+  tension: 0.4,
+  scales: {
+    SNR: {
+      type: "linear",
+      ticks: { beginAtZero: false, color: "rgb(255, 99, 132)" },
+      position: "right",
+    },
+    SPEED: {
+      type: "linear",
+      ticks: { beginAtZero: false, color: "rgb(120, 100, 120)" },
+      position: "left",
+      grid: {
+        drawOnChartArea: false, // only want the grid lines for one axis to show up
+      },
+    },
+    x: { ticks: { beginAtZero: true } },
+  },
+};
+
+const transmissionSpeedChartData = computed(() => ({
+  labels: state.arq_speed_list_timestamp,
+  datasets: [
+    {
+      type: "line",
+      label: "SNR[dB]",
+      data: state.arq_speed_list_snr.value,
+      borderColor: "rgb(75, 192, 192, 1.0)",
+      pointRadius: 1,
+      segment: {
+        borderColor: (speedCtx) =>
+          skipped(speedCtx, "rgb(0,0,0,0.4)") ||
+          down(speedCtx, "rgb(192,75,75)"),
+        borderDash: (speedCtx) => skipped(speedCtx, [3, 3]),
+      },
+      spanGaps: true,
+      backgroundColor: "rgba(75, 192, 192, 0.2)",
+      order: 1,
+      yAxisID: "SNR",
+    },
+    {
+      type: "bar",
+      label: "Speed[bpm]",
+      data: state.arq_speed_list_bpm.value,
+      borderColor: "rgb(120, 100, 120, 1.0)",
+      backgroundColor: "rgba(120, 100, 120, 0.2)",
+      order: 0,
+      yAxisID: "SPEED",
+    },
+  ],
+}));
+
+</script>
+
+<template>
+          <Line
+            :data="transmissionSpeedChartData"
+            :options="transmissionSpeedChartOptions"
+          />
+</template>