Merge pull request #3086 from andrewbaldwin44/task/offset-graph-legend

Web UI: Offset Graph Legend so There's no Overlap on Mobile / Narrow Screens

Author: cyberw

Diff for: locust/webui/src/components/LineChart/LineChart.tsx

@@ -73,7 +73,10 @@ export default function LineChart<ChartType extends IBaseChartType>({
     );
     initChart.on('datazoom', onChartZoom(initChart));
 
-    const handleChartResize = () => initChart.resize();
+    const handleChartResize = () => {
+      initChart.resize();
+      initChart.setOption({ xAxis: { splitNumber: window.innerWidth < 900 ? 2 : 7 } });
+    };
     window.addEventListener('resize', handleChartResize);
 
     initChart.group = 'swarmCharts';

Diff for: locust/webui/src/components/LineChart/LineChart.utils.ts

@@ -114,6 +114,8 @@ export const createOptions = <ChartType extends Pick<ICharts, 'time'>>({
         type: 'time',
         min: (charts.time || [new Date().toISOString()])[0],
         startValue: (charts.time || [])[0],
+        splitNumber: window.innerWidth < 900 ? 2 : 7,
+        minInterval: 1,
         axisLabel: {
           formatter: formatTimeAxis,
         },
@@ -143,6 +145,9 @@ export const createOptions = <ChartType extends Pick<ICharts, 'time'>>({
       },
     },
   },
+  legend: {
+    top: 25,
+  },
 });
 
 export const createMarkLine = <ChartType extends Pick<ICharts, 'markers'>>(charts: ChartType) => ({