Add generic to LineChart

locustio · Jul 25, 2024 · 56df7c4 · 56df7c4
1 parent 6817858
commit 56df7c4
Showing 1 changed file with 35 additions and 15 deletions.
diff --git a/locust/webui/src/components/LineChart/LineChart.tsx b/locust/webui/src/components/LineChart/LineChart.tsx
@@ -10,30 +10,29 @@ import {
   TooltipComponentOption,
 } from 'echarts';
 
-import { IUiState } from 'redux/slice/ui.slice';
 import { ICharts } from 'types/ui.types';
 import { formatLocaleString, formatLocaleTime } from 'utils/date';
 
-interface ILine {
+interface ILine<ChartType> {
   name: string;
-  key: keyof ICharts;
+  key: keyof ChartType;
 }
 
-interface ICreateOptions {
+interface ICreateOptions<ChartType> {
   title: string;
   seriesData: EChartsOption['Series'][];
-  charts: ICharts;
+  charts: ChartType;
   colors?: string[];
 }
 
-export interface ILineChartProps {
+export interface ILineChartProps<ChartType = ICharts> {
   title: string;
-  lines: ILine[];
+  lines: ILine<ChartType>[];
   colors?: string[];
 }
 
-interface ILineChart extends ILineChartProps {
-  charts: ICharts;
+interface ILineChart<ChartType> extends ILineChartProps<ChartType> {
+  charts: ChartType;
 }
 
 interface ILineChartZoomEvent {
@@ -51,7 +50,12 @@ registerTheme('locust', {
   },
 });
 
-const createOptions = ({ charts, title, seriesData, colors }: ICreateOptions) => ({
+const createOptions = <ChartType extends Pick<ICharts, 'time'>>({
+  charts,
+  title,
+  seriesData,
+  colors,
+}: ICreateOptions<ChartType>) => ({
   legend: {
     icon: 'circle',
     inactiveColor: CHART_TEXT_COLOR,
@@ -155,15 +159,21 @@ const createOptions = ({ charts, title, seriesData, colors }: ICreateOptions) =>
   },
 });
 
-const getSeriesData = ({ charts, lines }: { charts: IUiState['charts']; lines: ILine[] }) =>
+const getSeriesData = <ChartType,>({
+  charts,
+  lines,
+}: {
+  charts: ChartType;
+  lines: ILine<ChartType>[];
+}) =>
   lines.map(({ key, name }) => ({
     name,
     type: 'line',
     showSymbol: true,
     data: charts[key],
   }));
 
-const createMarkLine = (charts: ICharts) => ({
+const createMarkLine = <ChartType extends Pick<ICharts, 'markers'>>(charts: ChartType) => ({
   symbol: 'none',
   label: {
     formatter: (params: DefaultLabelFormatterCallbackParams) => `Run #${params.dataIndex + 1}`,
@@ -172,7 +182,12 @@ const createMarkLine = (charts: ICharts) => ({
   data: (charts.markers || []).map((timeMarker: string) => ({ xAxis: timeMarker })),
 });
 
-export default function LineChart({ charts, title, lines, colors }: ILineChart) {
+export default function LineChart<ChartType extends Pick<ICharts, 'time' | 'markers'> = ICharts>({
+  charts,
+  title,
+  lines,
+  colors,
+}: ILineChart<ChartType>) {
   const [chart, setChart] = useState<ECharts | null>(null);
 
   const chartContainer = useRef<HTMLDivElement | null>(null);
@@ -184,7 +199,12 @@ export default function LineChart({ charts, title, lines, colors }: ILineChart)
 
     const initChart = init(chartContainer.current, 'locust');
     initChart.setOption(
-      createOptions({ charts, title, seriesData: getSeriesData({ charts, lines }), colors }),
+      createOptions<ChartType>({
+        charts,
+        title,
+        seriesData: getSeriesData<ChartType>({ charts, lines }),
+        colors,
+      }),
     );
     initChart.on('datazoom', datazoom => {
       const { batch } = datazoom as ILineChartZoomEvent;
@@ -264,7 +284,7 @@ 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<ChartType>(charts) } : {}),
         })),
       });
     }