Merge pull request #2815 from andrewbaldwin44/feature/echarts-background

Locust UI Charts Should Change Color Based on Theme
locustio · Aug 1, 2024 · d5765cd · d5765cd
2 parents 3a5c33b + b5812bb
commit d5765cd
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 46 deletions.
diff --git a/locust/webui/src/components/LineChart/LineChart.tsx b/locust/webui/src/components/LineChart/LineChart.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import {
   init,
-  registerTheme,
   dispose,
   ECharts,
   EChartsOption,
@@ -10,6 +9,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';
@@ -40,25 +40,7 @@ interface ILineChartZoomEvent {
   batch?: { start: number; end: number }[];
 }
 
-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 },
-  },
-});
-
 const createOptions = ({ charts, title, seriesData, colors }: ICreateOptions) => ({
-  legend: {
-    icon: 'circle',
-    inactiveColor: CHART_TEXT_COLOR,
-    textStyle: {
-      color: CHART_TEXT_COLOR,
-    },
-  },
   title: {
     text: title,
     x: 10,
@@ -98,10 +80,6 @@ const createOptions = ({ charts, title, seriesData, colors }: ICreateOptions) =>
     axisPointer: {
       animation: true,
     },
-    textStyle: {
-      color: CHART_TEXT_COLOR,
-      fontSize: 13,
-    },
     backgroundColor: 'rgba(21,35,28, 0.93)',
     borderWidth: 0,
     extraCssText: 'z-index:1;',
@@ -111,11 +89,6 @@ const createOptions = ({ charts, title, seriesData, colors }: ICreateOptions) =>
     splitLine: {
       show: false,
     },
-    axisLine: {
-      lineStyle: {
-        color: CHART_AXIS_COLOR,
-      },
-    },
     axisLabel: {
       formatter: formatLocaleTime,
     },
@@ -124,14 +97,6 @@ const createOptions = ({ charts, title, seriesData, colors }: ICreateOptions) =>
   yAxis: {
     type: 'value',
     boundaryGap: [0, '5%'],
-    splitLine: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: CHART_AXIS_COLOR,
-      },
-    },
   },
   series: seriesData,
   grid: { x: 60, y: 70, x2: 40, y2: 40 },
@@ -163,17 +128,18 @@ const getSeriesData = ({ charts, lines }: { charts: IUiState['charts']; lines: I
     data: charts[key],
   }));
 
-const createMarkLine = (charts: ICharts) => ({
+const createMarkLine = (charts: ICharts, isDarkMode: boolean) => ({
   symbol: 'none',
   label: {
     formatter: (params: DefaultLabelFormatterCallbackParams) => `Run #${params.dataIndex + 1}`,
   },
-  lineStyle: { color: CHART_AXIS_COLOR },
+  lineStyle: { color: isDarkMode ? '#5b6f66' : '#000' },
   data: (charts.markers || []).map((timeMarker: string) => ({ xAxis: timeMarker })),
 });
 
 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);
 
@@ -264,11 +230,58 @@ export default function LineChart({ charts, title, lines, colors }: ILineChart)
         xAxis: { data: charts.time },
         series: lines.map(({ key }, index) => ({
           data: charts[key],
-          ...(index === 0 ? { markLine: createMarkLine(charts) } : {}),
+          ...(index === 0 ? { markLine: createMarkLine(charts, isDarkMode) } : {}),
         })),
       });
     }
-  }, [charts, chart, lines]);
+  }, [charts, chart, lines, isDarkMode]);
+
+  useEffect(() => {
+    if (chart) {
+      const chartTextColor = isDarkMode ? '#b3c3bc' : '#000';
+      const chartAxisColor = isDarkMode ? '#5b6f66' : '#000';
+
+      chart.setOption({
+        backgroundColor: isDarkMode ? '#27272a' : '#fff',
+        textStyle: { color: chartTextColor },
+        title: {
+          textStyle: { color: chartTextColor },
+        },
+        legend: {
+          icon: 'circle',
+          inactiveColor: chartTextColor,
+          textStyle: {
+            color: chartTextColor,
+          },
+        },
+        tooltip: {
+          textStyle: {
+            color: chartTextColor,
+            fontSize: 13,
+          },
+        },
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+              color: chartAxisColor,
+            },
+          },
+        },
+        yAxis: {
+          axisLine: {
+            lineStyle: {
+              color: chartAxisColor,
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: isDarkMode ? '#4c4c52' : '#ddd',
+            },
+          },
+        },
+      });
+    }
+  }, [chart, isDarkMode]);
 
   return <div ref={chartContainer} style={{ width: '100%', height: '300px' }}></div>;
 }
diff --git a/locust/webui/src/components/SwarmCharts/SwarmCharts.tsx b/locust/webui/src/components/SwarmCharts/SwarmCharts.tsx
@@ -12,7 +12,15 @@ const percentilesToChartLines = swarmTemplateArgs.percentilesToChart
     }))
   : [];
 
-const percentileColors = ['#9966CC', '#8A2BE2', '#8E4585', '#E0B0FF', '#C8A2C8', '#E6E6FA'];
+const percentileColors = [
+  '#eeff00',
+  '#9966CC',
+  '#8A2BE2',
+  '#8E4585',
+  '#E0B0FF',
+  '#C8A2C8',
+  '#E6E6FA',
+];
 
 const availableSwarmCharts: ILineChartProps[] = [
   {

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]} />,
     );