Webui Add Scatterplot Support

locust/webui/src/components/LineChart/LineChart.tsx

@@ -25,6 +25,7 @@ export default function LineChart<ChartType extends IBaseChartType>({
   chartValueFormatter,
   splitAxis,
   yAxisLabels,
+  scatterplot,
 }: ILineChart<ChartType>) {
   const [chart, setChart] = useState<ECharts | null>(null);
   const isDarkMode = useSelector(({ theme: { isDarkMode } }) => isDarkMode);
@@ -47,6 +48,7 @@ export default function LineChart<ChartType extends IBaseChartType>({
         chartValueFormatter,
         splitAxis,
         yAxisLabels,
+        scatterplot,
       }),
     );
     initChart.on('datazoom', onChartZoom(initChart));
@@ -108,7 +110,7 @@ export default function LineChart<ChartType extends IBaseChartType>({
   useEffect(() => {
     if (chart) {
       chart.setOption({
-        series: getSeriesData<ChartType>({ charts, lines }),
+        series: getSeriesData<ChartType>({ charts, lines, scatterplot }),
       });
     }
   }, [lines]);

locust/webui/src/components/LineChart/LineChart.types.ts

@@ -14,6 +14,7 @@ export interface ILineChart<ChartType> {
   chartValueFormatter?: (value?: any) => string | number;
   splitAxis?: boolean;
   yAxisLabels?: string | [string, string];
+  scatterplot?: boolean;
 }
 
 export interface ILineChartZoomEvent {

locust/webui/src/components/LineChart/LineChart.utils.ts

@@ -3,6 +3,7 @@ import {
   DefaultLabelFormatterCallbackParams,
   LineSeriesOption,
   YAXisComponentOption,
+  ScatterSeriesOption,
 } from 'echarts';
 
 import { CHART_THEME } from 'components/LineChart/LineChart.constants';
@@ -18,9 +19,13 @@ import { formatLocaleString, formatLocaleTime } from 'utils/date';
 export const getSeriesData = <ChartType>({
   charts,
   lines,
-}: Pick<ILineChart<ChartType>, 'charts' | 'lines'>): LineSeriesOption[] =>
+  scatterplot,
+}: Pick<ILineChart<ChartType>, 'charts' | 'lines' | 'scatterplot'>):
+  | LineSeriesOption[]
+  | ScatterSeriesOption[] =>
   lines.map(({ key, name }) => ({
-    type: 'line',
+    symbolSize: 4,
+    type: (scatterplot ? 'scatter' : 'line') as any,
     name,
     data: charts[key] as LineSeriesOption['data'],
   }));
@@ -59,6 +64,7 @@ export const createOptions = <ChartType extends ILineChartTimeAxis>({
   chartValueFormatter,
   splitAxis,
   yAxisLabels,
+  scatterplot,
 }: ILineChart<ChartType>) => ({
   title: { text: title },
   dataZoom: [
@@ -95,8 +101,9 @@ export const createOptions = <ChartType extends ILineChartTimeAxis>({
     axisLabel: { formatter: formatLocaleTime },
     data: charts.time,
   },
+  grid: { left: 40, right: splitAxis ? 40 : 10 },
   yAxis: createYAxis({ splitAxis, yAxisLabels }),
-  series: getSeriesData<ChartType>({ charts, lines }),
+  series: getSeriesData<ChartType>({ charts, lines, scatterplot }),
   color: colors,
   toolbox: {
     feature: {

locust/webui/src/components/LineChart/tests/LineChart.mocks.ts

@@ -23,8 +23,13 @@ export const mockCharts = {
 export const mockFormattedTimeAxis = mockCharts.time.map(formatLocaleTime);
 
 export const mockSeriesData = [
-  { type: 'line', name: 'RPS', data: mockCharts.currentRps },
-  { type: 'line', name: 'Failures/s', data: mockCharts.currentFailPerSec },
+  { type: 'line', name: 'RPS', data: mockCharts.currentRps, symbolSize: 4 },
+  { type: 'line', name: 'Failures/s', data: mockCharts.currentFailPerSec, symbolSize: 4 },
+];
+
+export const mockScatterplotSeriesData = [
+  { ...mockSeriesData[0], type: 'scatter' },
+  { ...mockSeriesData[1], type: 'scatter' },
 ];
 
 export const mockTooltipParams = [

locust/webui/src/components/LineChart/tests/LineChart.test.tsx

@@ -25,4 +25,18 @@ describe('LineChart', () => {
 
     expect(container.querySelector('canvas')).toBeTruthy();
   });
+
+  test('renders LineChart with charts and lines as a scatterplot', () => {
+    const { container } = renderWithProvider(
+      <LineChart<ICharts>
+        charts={statsResponseTransformed.charts}
+        colors={mockChart.colors}
+        lines={mockChart.lines}
+        scatterplot
+        title={mockChart.title}
+      />,
+    );
+
+    expect(container.querySelector('canvas')).toBeTruthy();
+  });
 });

locust/webui/src/components/LineChart/tests/LineChartUtils.test.tsx

@@ -13,6 +13,7 @@ import {
   mockChartLines,
   mockCharts,
   MockChartType,
+  mockScatterplotSeriesData,
   mockSeriesData,
   mockTooltipParams,
 } from 'components/LineChart/tests/LineChart.mocks';
@@ -29,6 +30,16 @@ describe('getSeriesData', () => {
 
     expect(options).toEqual(mockSeriesData);
   });
+
+  test('should adapt a scatterplot', () => {
+    const options = getSeriesData<Partial<MockChartType>>({
+      charts: mockCharts,
+      lines: mockChartLines,
+      scatterplot: true,
+    });
+
+    expect(options).toEqual(mockScatterplotSeriesData);
+  });
 });
 
 describe('createOptions', () => {
@@ -159,6 +170,19 @@ describe('createOptions', () => {
       { ...defaultYAxis, name: yAxisLabels[1] },
     ]);
   });
+
+  test('should create a scatterplot series', () => {
+    const options = createOptions<MockChartType>({
+      ...createOptionsDefaultProps,
+      scatterplot: true,
+    });
+
+    expect(options.title.text).toBe('Test Chart');
+    expect(options.xAxis.data).toEqual(mockCharts.time);
+    expect(options.yAxis).toEqual(defaultYAxis);
+    expect(options.series).toEqual(mockScatterplotSeriesData);
+    expect(options.color).toEqual(['#fff']);
+  });
 });
 
 describe('createMarkLine', () => {