chore: playground mutilmodel input

src/pages/dashboard/components/resource-utilization.tsx

@@ -2,7 +2,7 @@ import LineChart from '@/components/echarts/line-chart';
 import { useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { memo, useContext } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
 const chartColorMap = {
@@ -119,7 +119,7 @@ const UtilizationOvertime: React.FC = () => {
   const tooltipValueFormatter = (value: any) => {
     return !value ? value : `${value}%`;
   };
-  const generateData = () => {
+  const generateData = useMemo(() => {
     const legendData: string[] = [];
     const xAxisData: string[] = [];
     let seriesData: { value: number; time: string; type: string }[] = [];
@@ -147,16 +147,15 @@ const UtilizationOvertime: React.FC = () => {
       legendData,
       xAxisData: _.uniq(xAxisData)
     };
-  };
-  const { seriesData, legendData, xAxisData } = generateData();
+  }, [data]);
 
   return (
     <>
       <LineChart
         height={390}
-        seriesData={seriesData}
-        legendData={legendData}
-        xAxisData={xAxisData}
+        seriesData={generateData.seriesData}
+        legendData={generateData.legendData}
+        xAxisData={generateData.xAxisData}
         tooltipValueFormatter={tooltipValueFormatter}
         smooth={true}
         width="100%"