fix: dashboard intl settings

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

@@ -1,32 +1,43 @@
 import LineChart from '@/components/charts/line-chart';
+import { getLocale, useIntl } from '@umijs/max';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
 const TypeKeyMap = {
   cpu: {
     label: 'CPU',
+    type: 'CPU',
+    intl: false,
     color:
       'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
   },
   memory: {
-    label: 'Memory',
+    label: 'dashboard.memory',
+    type: 'Memory',
+    intl: true,
     color:
       'linear-gradient(90deg,rgba(249, 248, 113,.8) 0%,rgba(255, 199, 92,0.7) 100%)'
   },
   gpu: {
     label: 'GPU',
+    type: 'GPU',
+    intl: false,
     color: 'rgba(84, 204, 152,0.8)'
   },
   gpu_memory: {
-    label: 'VRAM',
+    label: 'dashboard.vram',
+    type: 'VRAM',
+    intl: true,
     color:
       'linear-gradient(90deg,rgba(84, 204, 152,0.8) 0%,rgba(0, 168, 143,.7) 100%)'
   }
 };
 
 const UtilizationOvertime: React.FC = () => {
+  const intl = useIntl();
+  const locale = getLocale();
   const data = useContext(DashboardContext)?.system_load?.history || {};
   const [result, setResult] = useState<
     { time: string; value: number; type: string }[]
@@ -52,30 +63,38 @@ const UtilizationOvertime: React.FC = () => {
   const labelFormatter = (value: any) => {
     return `${value}%`;
   };
-  const generateData = () => {
+  const generateData = useCallback(() => {
     const list: { value: number; time: string; type: string }[] = [];
     _.each(typeList, (type: any) => {
       const dataList = _.map(_.get(data, type, []), (item: any) => {
+        const value = _.get(item, 'value', 0);
+        const time = dayjs(item.timestamp * 1000).format('HH:mm:ss');
+        const itemtype = _.get(TypeKeyMap, [type, 'intl'], false)
+          ? intl.formatMessage({
+              id: _.get(TypeKeyMap, [type, 'label'], '')
+            })
+          : _.get(TypeKeyMap, [type, 'label'], '');
         return {
-          value: _.round(item.value, 2) || 0,
-          time: dayjs(item.timestamp * 1000).format('HH:mm:ss'),
-          type: _.get(TypeKeyMap, [type, 'label'], ''),
+          value,
+          time,
+          type: itemtype,
           color: 'red'
         };
       });
       list.push(...dataList);
     });
     setResult(list);
-  };
+  }, [data, locale]);
 
   useEffect(() => {
     generateData();
-  }, [data]);
+  }, [data, locale]);
 
   return (
     <>
       <LineChart
         data={result}
+        locale={locale}
         labelFormatter={labelFormatter}
         slider={sliderConfig}
       />