administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

stabilize chart options to stop ApexCharts updateOptions running on every stats tick

Browse Source
This commit is contained in:
Josh Hawkins 2026-05-28 07:46:53 -05:00
parent 50f17e6852
commit c065cdf731
2 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/components/graph/LineGraph.tsx
View File

@ -56,18 +56,25 @@ export function CameraLineGraph({
});
}, [t, timeFormat]);
const updateTimesRef = useRef(updateTimes);
useEffect(() => {
updateTimesRef.current = updateTimes;
}, [updateTimes]);
const formatTime = useCallback(
(val: unknown) => {
return formatUnixTimestampToDateTime(
updateTimes[Math.round(val as number)],
{
timezone: config?.ui.timezone,
date_format: format,
locale,
},
);
const times = updateTimesRef.current;
const ts = times[Math.round(val as number)];
if (isNaN(ts)) {
return "";
}
return formatUnixTimestampToDateTime(ts, {
timezone: config?.ui.timezone,
date_format: format,
locale,
});
},
[config?.ui.timezone, format, locale, updateTimes],
[config?.ui.timezone, format, locale],
);
const options = useMemo(() => {
@ -211,18 +218,25 @@ export function EventsPerSecondsLineGraph({
});
}, [t, timeFormat]);
const updateTimesRef = useRef(updateTimes);
useEffect(() => {
updateTimesRef.current = updateTimes;
}, [updateTimes]);
const formatTime = useCallback(
(val: unknown) => {
return formatUnixTimestampToDateTime(
updateTimes[Math.round(val as number) - 1],
{
timezone: config?.ui.timezone,
date_format: format,
locale,
},
);
const times = updateTimesRef.current;
const ts = times[Math.round(val as number) - 1];
if (isNaN(ts)) {
return "";
}
return formatUnixTimestampToDateTime(ts, {
timezone: config?.ui.timezone,
date_format: format,
locale,
});
},
[config?.ui.timezone, format, locale, updateTimes],
[config?.ui.timezone, format, locale],
);
const options = useMemo(() => {

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

@ -61,6 +61,11 @@ export function ThresholdBarGraph({
});
}, [t, timeFormat]);
const updateTimesRef = useRef(updateTimes);
useEffect(() => {
updateTimesRef.current = updateTimes;
}, [updateTimes]);
const formatTime = useCallback(
(val: unknown) => {
const dateIndex = Math.round(val as number);
@ -69,16 +74,18 @@ export function ThresholdBarGraph({
if (dateIndex < 0) {
timeOffset = 5 * Math.abs(dateIndex);
}
return formatUnixTimestampToDateTime(
updateTimes[Math.max(1, dateIndex) - 1] - timeOffset,
{
timezone: config?.ui.timezone,
date_format: format,
locale,
},
);
const times = updateTimesRef.current;
const ts = times[Math.max(1, dateIndex) - 1] - timeOffset;
if (isNaN(ts)) {
return "";
}
return formatUnixTimestampToDateTime(ts, {
timezone: config?.ui.timezone,
date_format: format,
locale,
});
},
[config?.ui.timezone, format, locale, updateTimes],
[config?.ui.timezone, format, locale],
);
const options = useMemo(() => {