Locust charts should change color based on theme

locustio · Jul 23, 2024 · b84fa4e · b84fa4e
1 parent 49002b6
commit b84fa4e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
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>;
 }
diff --git a/locust/webui/src/pages/tests/HtmlReport.test.tsx b/locust/webui/src/pages/tests/HtmlReport.test.tsx
@@ -1,13 +1,13 @@
-import { render } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
 import HtmlReport from 'pages/HtmlReport';
 import { swarmReportMock } from 'test/mocks/swarmState.mock';
+import { renderWithProvider } from 'test/testUtils';
 import { formatLocaleString } from 'utils/date';
 
 describe('HtmlReport', () => {
   test('renders a report', () => {
-    const { getByRole, getByText } = render(<HtmlReport {...swarmReportMock} />);
+    const { getByRole, getByText } = renderWithProvider(<HtmlReport {...swarmReportMock} />);
 
     expect(getByRole('heading', { name: 'Locust Test Report' })).toBeTruthy();
     expect(getByRole('heading', { name: 'Request Statistics' })).toBeTruthy();
@@ -20,7 +20,7 @@ describe('HtmlReport', () => {
   });
 
   test('formats the start and end time as expected', () => {
-    const { getByText } = render(<HtmlReport {...swarmReportMock} />);
+    const { getByText } = renderWithProvider(<HtmlReport {...swarmReportMock} />);
 
     expect(
       getByText(
@@ -32,7 +32,9 @@ describe('HtmlReport', () => {
   });
 
   test('does not render the download link when showDownloadLink is false', () => {
-    const { queryByRole } = render(<HtmlReport {...swarmReportMock} showDownloadLink={false} />);
+    const { queryByRole } = renderWithProvider(
+      <HtmlReport {...swarmReportMock} showDownloadLink={false} />,
+    );
 
     expect(queryByRole('link', { name: 'Download the Report' })).toBeNull();
   });
@@ -45,7 +47,7 @@ describe('HtmlReport', () => {
       traceback: '',
     };
 
-    const { getByRole, getByText } = render(
+    const { getByRole, getByText } = renderWithProvider(
       <HtmlReport {...swarmReportMock} exceptionsStatistics={[exception]} />,
     );