Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +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 { Threshold } from "@/types/graph";
import { useCallback, useEffect, useMemo } from "react"; import { useCallback, useEffect, useMemo } from "react";
import Chart from "react-apexcharts"; import Chart from "react-apexcharts";
import { isMobileOnly } from "react-device-detect";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
import useSWR from "swr"; import useSWR from "swr";
@ -36,11 +37,11 @@ export function ThresholdBarGraph({
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
if (val == 0) { if (val == 1) {
return; 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([], { return date.toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour", hour12: config?.ui.time_format != "24hour",
hour: "2-digit", hour: "2-digit",
@ -96,10 +97,10 @@ export function ThresholdBarGraph({
size: 0, size: 0,
}, },
xaxis: { xaxis: {
tickAmount: 4, tickAmount: isMobileOnly ? 3 : 4,
tickPlacement: "on", tickPlacement: "on",
labels: { labels: {
offsetX: -30, offsetX: -18,
formatter: formatTime, formatter: formatTime,
}, },
axisBorder: { axisBorder: {
@ -110,9 +111,11 @@ export function ThresholdBarGraph({
}, },
}, },
yaxis: { yaxis: {
show: false, show: true,
labels: {
formatter: (val: number) => Math.ceil(val).toString(),
},
min: 0, min: 0,
max: threshold.warning + 10,
}, },
} as ApexCharts.ApexOptions; } as ApexCharts.ApexOptions;
}, [graphId, threshold, systemTheme, theme, formatTime]); }, [graphId, threshold, systemTheme, theme, formatTime]);
@ -278,7 +281,7 @@ export function CameraLineGraph({
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
if (val == 0) { if (val == 1) {
return; return;
} }
@ -326,10 +329,10 @@ export function CameraLineGraph({
size: 0, size: 0,
}, },
xaxis: { xaxis: {
tickAmount: 4, tickAmount: isMobileOnly ? 3 : 4,
tickPlacement: "between", tickPlacement: "on",
labels: { labels: {
offsetX: -30, offsetX: isMobileOnly ? -18 : 0,
formatter: formatTime, formatter: formatTime,
}, },
axisBorder: { axisBorder: {
@ -340,7 +343,10 @@ export function CameraLineGraph({
}, },
}, },
yaxis: { yaxis: {
show: false, show: true,
labels: {
formatter: (val: number) => Math.ceil(val).toString(),
},
min: 0, min: 0,
}, },
} as ApexCharts.ApexOptions; } 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] = { 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); return Object.values(series);
@ -125,7 +125,7 @@ export default function GeneralMetrics({
} }
series[key].data.push({ series[key].data.push({
x: statsIdx, x: statsIdx + 1,
y: stats.cpu_usages[detStats.pid.toString()].cpu, y: stats.cpu_usages[detStats.pid.toString()].cpu,
}); });
}); });
@ -153,7 +153,7 @@ export default function GeneralMetrics({
} }
series[key].data.push({ series[key].data.push({
x: statsIdx, x: statsIdx + 1,
y: stats.cpu_usages[detStats.pid.toString()].mem, y: stats.cpu_usages[detStats.pid.toString()].mem,
}); });
}); });
@ -182,7 +182,7 @@ export default function GeneralMetrics({
series[key] = { name: key, data: [] }; 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) : []; return Object.keys(series).length > 0 ? Object.values(series) : [];
@ -207,7 +207,7 @@ export default function GeneralMetrics({
series[key] = { name: key, data: [] }; 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); return Object.values(series);
@ -236,7 +236,7 @@ export default function GeneralMetrics({
} }
series[key].data.push({ series[key].data.push({
x: statsIdx, x: statsIdx + 1,
y: stats.cpu_usages[procStats.pid.toString()].cpu, y: stats.cpu_usages[procStats.pid.toString()].cpu,
}); });
} }
@ -266,7 +266,7 @@ export default function GeneralMetrics({
} }
series[key].data.push({ series[key].data.push({
x: statsIdx, x: statsIdx + 1,
y: stats.cpu_usages[procStats.pid.toString()].mem, y: stats.cpu_usages[procStats.pid.toString()].mem,
}); });
} }