Locust charts should change color based on theme

locustio · Jul 23, 2024 · 555dbe6 · 555dbe6
1 parent 49002b6
commit 555dbe6
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/locust/webui/src/components/LineChart/LineChart.tsx b/locust/webui/src/components/LineChart/LineChart.tsx
@@ -10,6 +10,7 @@ import {
   TooltipComponentOption,
 } from 'echarts';
 
+import { useSelector } from 'redux/hooks';
 import { IUiState } from 'redux/slice/ui.slice';
 import { ICharts } from 'types/ui.types';
 import { formatLocaleString, formatLocaleTime } from 'utils/date';
@@ -44,7 +45,6 @@ const CHART_TEXT_COLOR = '#b3c3bc';
 const CHART_AXIS_COLOR = '#5b6f66';
 
 registerTheme('locust', {
-  backgroundColor: '#27272a',
   textStyle: { color: CHART_TEXT_COLOR },
   title: {
     textStyle: { color: CHART_TEXT_COLOR },
@@ -174,6 +174,7 @@ const createMarkLine = (charts: ICharts) => ({
 
 export default function LineChart({ charts, title, lines, colors }: ILineChart) {
   const [chart, setChart] = useState<ECharts | null>(null);
+  const isDarkMode = useSelector(({ theme: { isDarkMode } }) => isDarkMode);
 
   const chartContainer = useRef<HTMLDivElement | null>(null);
 
@@ -270,5 +271,13 @@ export default function LineChart({ charts, title, lines, colors }: ILineChart)
     }
   }, [charts, chart, lines]);
 
+  useEffect(() => {
+    if (chart) {
+      chart.setOption({
+        backgroundColor: isDarkMode ? '#27272a' : '#fff',
+      });
+    }
+  }, [chart, isDarkMode]);
+
   return <div ref={chartContainer} style={{ width: '100%', height: '300px' }}></div>;
 }