Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-12-19 19:06:16 +01:00
Code Issues Projects Releases Wiki Activity

Add y axis to camera stats graphs (#10854)

Browse Source 
* Add y axis to camera stats graphs

* Add y axis to gneral graph too

* Improve data label distribution

* Cleanup
This commit is contained in:
Nicolas Mowen 2024-04-07 14:36:28 -06:00 committed by GitHub
parent cf2dfd9a54
commit 12e6e43d6c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/graph/SystemGraph.tsx
View File

@ -3,6 +3,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { Threshold } from "@/types/graph";
import { useCallback, useEffect, useMemo } from "react";
import Chart from "react-apexcharts";
import { isMobileOnly } from "react-device-detect";
import { MdCircle } from "react-icons/md";
import useSWR from "swr";
@ -36,11 +37,11 @@ export function ThresholdBarGraph({
const formatTime = useCallback(
(val: unknown) => {
if (val == 0) {
if (val == 1) {
return;
}
const date = new Date(updateTimes[Math.round(val as number)] * 1000);
const date = new Date(updateTimes[Math.round(val as number) - 1] * 1000);
return date.toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour",
hour: "2-digit",
@ -96,10 +97,10 @@ export function ThresholdBarGraph({
size: 0,
},
xaxis: {
tickAmount: 4,
tickAmount: isMobileOnly ? 3 : 4,
tickPlacement: "on",
labels: {
offsetX: -30,
offsetX: -18,
formatter: formatTime,
},
axisBorder: {
@ -110,9 +111,11 @@ export function ThresholdBarGraph({
},
},
yaxis: {
show: false,
show: true,
labels: {
formatter: (val: number) => Math.ceil(val).toString(),
},
min: 0,
max: threshold.warning + 10,
},
} as ApexCharts.ApexOptions;
}, [graphId, threshold, systemTheme, theme, formatTime]);
@ -278,7 +281,7 @@ export function CameraLineGraph({
const formatTime = useCallback(
(val: unknown) => {
if (val == 0) {
if (val == 1) {
return;
}
@ -326,10 +329,10 @@ export function CameraLineGraph({
size: 0,
},
xaxis: {
tickAmount: 4,
tickPlacement: "between",
tickAmount: isMobileOnly ? 3 : 4,
tickPlacement: "on",
labels: {
offsetX: -30,
offsetX: isMobileOnly ? -18 : 0,
formatter: formatTime,
},
axisBorder: {
@ -340,7 +343,10 @@ export function CameraLineGraph({
},
},
yaxis: {
show: false,
show: true,
labels: {
formatter: (val: number) => Math.ceil(val).toString(),
},
min: 0,
},
} as ApexCharts.ApexOptions;

14
web/src/views/system/GeneralMetrics.tsx
View File

@ -99,7 +99,7 @@ export default function GeneralMetrics({
series[key] = { name: key, data: [] };
}
series[key].data.push({ x: statsIdx, y: stats.inference_speed });
series[key].data.push({ x: statsIdx + 1, y: stats.inference_speed });
});
});
return Object.values(series);
@ -125,7 +125,7 @@ export default function GeneralMetrics({
}
series[key].data.push({
x: statsIdx,
x: statsIdx + 1,
y: stats.cpu_usages[detStats.pid.toString()].cpu,
});
});
@ -153,7 +153,7 @@ export default function GeneralMetrics({
}
series[key].data.push({
x: statsIdx,
x: statsIdx + 1,
y: stats.cpu_usages[detStats.pid.toString()].mem,
});
});
@ -182,7 +182,7 @@ export default function GeneralMetrics({
series[key] = { name: key, data: [] };
}
series[key].data.push({ x: statsIdx, y: stats.gpu });
series[key].data.push({ x: statsIdx + 1, y: stats.gpu });
});
});
return Object.keys(series).length > 0 ? Object.values(series) : [];
@ -207,7 +207,7 @@ export default function GeneralMetrics({
series[key] = { name: key, data: [] };
}
series[key].data.push({ x: statsIdx, y: stats.mem });
series[key].data.push({ x: statsIdx + 1, y: stats.mem });
});
});
return Object.values(series);
@ -236,7 +236,7 @@ export default function GeneralMetrics({
}
series[key].data.push({
x: statsIdx,
x: statsIdx + 1,
y: stats.cpu_usages[procStats.pid.toString()].cpu,
});
}
@ -266,7 +266,7 @@ export default function GeneralMetrics({
}
series[key].data.push({
x: statsIdx,
x: statsIdx + 1,
y: stats.cpu_usages[procStats.pid.toString()].mem,
});
}