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

Make tooltip match theme

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-03 15:28:44 -06:00
parent cb34ac5026
commit 25f001bf47
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { useTheme } from "@/context/theme-provider";
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";
@ -24,6 +25,8 @@ export default function SystemGraph({
[data], [data],
); );
const { theme, systemTheme } = useTheme();
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
const date = new Date(updateTimes[Math.round(val as number)] * 1000); const date = new Date(updateTimes[Math.round(val as number)] * 1000);
@ -71,6 +74,9 @@ export default function SystemGraph({
distributed: true, distributed: true,
}, },
}, },
tooltip: {
theme: systemTheme || theme,
},
xaxis: { xaxis: {
tickAmount: 6, tickAmount: 6,
labels: { labels: {
@ -88,7 +94,7 @@ export default function SystemGraph({
max: lastValue * 2, max: lastValue * 2,
}, },
}; };
}, [graphId, lastValue, threshold, formatTime]); }, [graphId, lastValue, threshold, systemTheme, theme, formatTime]);
useEffect(() => { useEffect(() => {
ApexCharts.exec(graphId, "updateOptions", options, true, true); ApexCharts.exec(graphId, "updateOptions", options, true, true);