administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-29 16:41:16 +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]); }, [t, timeFormat]);
const updateTimesRef = useRef(updateTimes);
useEffect(() => {
updateTimesRef.current = updateTimes;
}, [updateTimes]);
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
return formatUnixTimestampToDateTime( const times = updateTimesRef.current;
updateTimes[Math.round(val as number)], const ts = times[Math.round(val as number)];
{ if (isNaN(ts)) {
timezone: config?.ui.timezone, return "";
date_format: format, }
locale, 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(() => { const options = useMemo(() => {
@ -211,18 +218,25 @@ export function EventsPerSecondsLineGraph({
}); });
}, [t, timeFormat]); }, [t, timeFormat]);
const updateTimesRef = useRef(updateTimes);
useEffect(() => {
updateTimesRef.current = updateTimes;
}, [updateTimes]);
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
return formatUnixTimestampToDateTime( const times = updateTimesRef.current;
updateTimes[Math.round(val as number) - 1], const ts = times[Math.round(val as number) - 1];
{ if (isNaN(ts)) {
timezone: config?.ui.timezone, return "";
date_format: format, }
locale, 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(() => { const options = useMemo(() => {

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

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