139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
import "chartjs-adapter-date-fns";
|
|
|
|
import type React from "react";
|
|
|
|
import {
|
|
Chart as ChartJS,
|
|
Filler,
|
|
Legend,
|
|
LinearScale,
|
|
LineElement,
|
|
PointElement,
|
|
TimeSeriesScale,
|
|
Tooltip
|
|
} from "chart.js";
|
|
import { Line } from "react-chartjs-2";
|
|
|
|
import { useDevice } from "@app/core/providers/useDevice.js";
|
|
|
|
export const Metrics = (): JSX.Element => {
|
|
const { nodes, hardware } = useDevice();
|
|
|
|
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
|
|
|
|
ChartJS.register(
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Tooltip,
|
|
Filler,
|
|
Legend,
|
|
TimeSeriesScale
|
|
);
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-grow">
|
|
<Line
|
|
className="h-full w-full flex-grow"
|
|
options={{
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: "index",
|
|
intersect: false
|
|
},
|
|
line: {
|
|
datasets: {
|
|
tension: 0.5
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: "timeseries",
|
|
ticks: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
display: false
|
|
}
|
|
},
|
|
y1: {
|
|
display: false
|
|
},
|
|
y2: {
|
|
display: false
|
|
},
|
|
y3: {
|
|
display: false
|
|
}
|
|
},
|
|
plugins: {}
|
|
}}
|
|
data={{
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
fill: true,
|
|
label: "airUtilTx",
|
|
yAxisID: "y",
|
|
data: myNode?.deviceMetrics.map((metric) => {
|
|
return {
|
|
x: metric.timestamp,
|
|
y: metric.airUtilTx
|
|
};
|
|
}),
|
|
backgroundColor: "rgba(102, 126, 234, 0.25)",
|
|
borderColor: "rgba(102, 126, 234, 1)",
|
|
pointBackgroundColor: "rgba(102, 126, 234, 1)"
|
|
},
|
|
{
|
|
fill: true,
|
|
label: "channelUtilization",
|
|
yAxisID: "y1",
|
|
data: myNode?.deviceMetrics.map((metric) => {
|
|
return {
|
|
x: metric.timestamp,
|
|
y: metric.channelUtilization
|
|
};
|
|
}),
|
|
backgroundColor: "rgba(237, 100, 166, 0.25)",
|
|
borderColor: "rgba(237, 100, 166, 1)",
|
|
pointBackgroundColor: "rgba(237, 100, 166, 1)"
|
|
},
|
|
{
|
|
fill: true,
|
|
label: "batteryLevel",
|
|
yAxisID: "y2",
|
|
data: myNode?.deviceMetrics.map((metric) => {
|
|
return {
|
|
x: metric.timestamp,
|
|
y: metric.batteryLevel
|
|
};
|
|
}),
|
|
backgroundColor: "rgba(113, 234, 102, 0.25)",
|
|
borderColor: "rgba(113, 234, 102, 1)",
|
|
pointBackgroundColor: "rgba(113, 234, 102, 1)"
|
|
},
|
|
{
|
|
fill: true,
|
|
label: "voltage",
|
|
yAxisID: "y3",
|
|
data: myNode?.deviceMetrics.map((metric) => {
|
|
return {
|
|
x: metric.timestamp,
|
|
y: metric.voltage
|
|
};
|
|
}),
|
|
backgroundColor: "rgba(234, 166, 102, 0.25)",
|
|
borderColor: "rgba(234, 166, 102, 1)",
|
|
pointBackgroundColor: "rgba(234, 166, 102, 1)"
|
|
}
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|