administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 13:45:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Handle limited data case

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-29 10:37:31 -06:00
parent 35e645d568
commit 0306391681
3 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,7 +36,16 @@ export function ThresholdBarGraph({
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
const date = new Date(updateTimes[Math.round(val as number) - 1] * 1000); const dateIndex = Math.round(val as number);
let timeOffset = 0;
if (dateIndex < 0) {
timeOffset = 5000 * Math.abs(dateIndex);
}
const date = new Date(
updateTimes[Math.max(1, dateIndex) - 1] * 1000 - timeOffset,
);
return date.toLocaleTimeString([], { return date.toLocaleTimeString([], {
hour12: config?.ui.time_format != "24hour", hour12: config?.ui.time_format != "24hour",
hour: "2-digit", hour: "2-digit",
@ -129,6 +138,22 @@ export function ThresholdBarGraph({
ApexCharts.exec(graphId, "updateOptions", options, true, true); ApexCharts.exec(graphId, "updateOptions", options, true, true);
}, [graphId, options]); }, [graphId, options]);
const chartData = useMemo(() => {
if (data.length > 0 && data[0].data.length >= 30) {
return data;
}
const copiedData = [...data];
const fakeData = [];
for (let i = data.length; i < 30; i++) {
fakeData.push({ x: i - 30, y: 0 });
}
// @ts-expect-error data types are not obvious
copiedData[0].data = [...fakeData, ...data[0].data];
return copiedData;
}, [data]);
return ( return (
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -138,7 +163,7 @@ export function ThresholdBarGraph({
{unit} {unit}
</div> </div>
</div> </div>
<Chart type="bar" options={options} series={data} height="120" /> <Chart type="bar" options={options} series={chartData} height="120" />
</div> </div>
); );
} }

2
web/src/views/system/CameraMetrics.tsx
View File

@ -43,7 +43,7 @@ export default function CameraMetrics({
} }
if (updatedStats.service.last_updated > lastUpdated) { if (updatedStats.service.last_updated > lastUpdated) {
setStatsHistory([...statsHistory, updatedStats]); setStatsHistory([...statsHistory.slice(1), updatedStats]);
setLastUpdated(Date.now() / 1000); setLastUpdated(Date.now() / 1000);
} }
}, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]); }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);

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

@ -57,7 +57,7 @@ export default function GeneralMetrics({
} }
if (updatedStats.service.last_updated > lastUpdated) { if (updatedStats.service.last_updated > lastUpdated) {
setStatsHistory([...statsHistory, updatedStats]); setStatsHistory([...statsHistory.slice(1), updatedStats]);
setLastUpdated(Date.now() / 1000); setLastUpdated(Date.now() / 1000);
} }
}, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]); }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);