mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
Add scatter grid widget
This commit is contained in:
parent
8b0ce23beb
commit
da9301c211
2 changed files with 103 additions and 2 deletions
|
@ -31,7 +31,9 @@ import grid_ping from "./grid/grid_ping.vue";
|
||||||
import grid_freq from "./grid/grid_frequency.vue";
|
import grid_freq from "./grid/grid_frequency.vue";
|
||||||
import grid_beacon from "./grid/grid_beacon.vue";
|
import grid_beacon from "./grid/grid_beacon.vue";
|
||||||
import grid_mycall_small from "./grid/grid_mycall small.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 { stateDispatcher } from "../js/eventHandler";
|
||||||
|
import { Scatter } from "vue-chartjs";
|
||||||
|
|
||||||
let count = ref(0);
|
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
|
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",
|
"Audio",
|
||||||
18,
|
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 20
|
||||||
//New new widget ID should be 19
|
|
||||||
];
|
];
|
||||||
|
|
||||||
function updateFrequencyAndApply(frequency) {
|
function updateFrequencyAndApply(frequency) {
|
||||||
|
|
91
gui/src/components/grid/grid_scatter.vue
Normal file
91
gui/src/components/grid/grid_scatter.vue
Normal file
|
@ -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>
|
Loading…
Reference in a new issue