fix: complete i18n in charts (#62)

* feat: i18n

* docs: update changelog

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.0.7](https://github.com/Erda-FE/dashboard-configuration/pull/57/commits/1dfd74dd17d1a5b8144dd153192ce8597c5a2974) (2021-01-20)
+
+### Bug Fixes
+
+* fix that i18n in validating required fields 
+
+
 ## [2.0.6](https://github.com/Erda-FE/dashboard-configuration/pull/56/commits/a2adaca0778d3c15cc198b03d4a0ad5fbf476644) (2021-12-15)
 
 

src/components/DcCharts/chart-funnel/option.ts

@@ -2,18 +2,24 @@ import { get, map, merge, set } from 'lodash';
 import { getCustomOption } from 'src/components/DcCharts/common/custom-option';
 import { getCommonFormatter } from 'src/common/utils';
 import getDefaultOption from './default-option';
+import DashboardStore from 'src/stores/dash-board';
 
 export function getOption(data: DC.StaticData, config: DC.ChartConfig) {
   const { option: _option = {} } = config || {};
   const option = merge(getDefaultOption(), getCustomOption(data, config));
   const { metricData = [], legendData = [], unit } = data || {};
+  const locale = DashboardStore.getState((s) => s.locale);
 
   if (legendData.length) {
     set(option, ['legend', 'data'], legendData);
   }
 
   const series = map(metricData, (_data) => ({
     ..._data,
+    data: map(_data.data, (x: any) => ({
+      ...x,
+      name: x?.i18n?.alias?.[locale] || x.name,
+    })),
     label: {
       show: true,
       position: 'inside',

src/components/DcCharts/chart-line/option.ts

@@ -12,7 +12,7 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
   const { metricData = [], xData, time, valueNames = [] } = data;
   const { optionProps = {}, dataSourceConfig = {}, option = {} } = config;
   const { typeDimensions, valueDimensions } = dataSourceConfig;
-  const textMap = DashboardStore.getState((s) => s.textMap);
+  const locale = DashboardStore.getState((s) => s.locale);
 
   // 多个维度，多个数值
   const isMultipleTypeAndMultipleValue = (typeDimensions?.length || 0) > 1 && (valueDimensions?.length || 0) > 1;
@@ -55,9 +55,9 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
   };
   map(metricData, (value, i) => {
     const yIndex = option?.yAxis?.[i] ? i : 0;
-    const { axisIndex, name, tag, alias = '', unit: _unit, ...rest } = value;
+    const { axisIndex, name, tag, alias = '', i18n, unit: _unit, ...rest } = value;
     if (tag || name) {
-      legendData.push({ name: tag || name });
+      legendData.push({ name: i18n?.alias?.[locale] || tag || name });
     }
     const yAxisIndex = yIndex || 0;
     const areaColor = areaColors[i];
@@ -74,7 +74,7 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
         });
 
     series.push({
-      name: value.tag || seriesName || value.name || value.key,
+      name: i18n?.alias?.[locale] || value.tag || seriesName || value.name || value.key,
       yAxisIndex,
       label: {
         normal: {
@@ -103,7 +103,7 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
     yAxis[yAxisIndex] = {
       show: yAxisIndex === 0,
       // 轴线名
-      name: yAxisNames[yAxisIndex] || valueNames[yAxisIndex] || name || '',
+      name: yAxisNames[yAxisIndex] || valueNames[yAxisIndex] || i18n?.alias?.[locale] || name || '',
       // 轴线名位置
       nameLocation: 'center',
       // 轴线名离轴线间距

src/components/DcCharts/chart-metric/index.tsx

@@ -6,6 +6,7 @@ import { ceil, isNumber, map, uniqueId } from 'lodash';
 import ChartEditorStore from 'src/stores/chart-editor';
 import { getCommonFormatter } from 'src/common/utils';
 import dcRegisterComp from 'src/components/dc-register-comp';
+import DashboardStore from 'src/stores/dash-board';
 import './index.scss';
 
 interface IResult {
@@ -14,27 +15,36 @@ interface IResult {
   value?: number | string;
   status?: string;
   color?: string;
+  i18n?: {
+    alias: {
+      zh: string;
+      en: string;
+    };
+  };
 }
 
 interface IProps {
   viewId: string;
   results: IResult[];
 }
 
-const Metric = ({ results = [], viewId }: IProps) => (
-  <React.Fragment>
-    <section className="dc-metric-panel">
-      {map(results, ({ name, value, unit, color }) => (
-        <div className="dc-metric-item" key={uniqueId(viewId)}>
-          <span className={`dc-metric-value ${color ? `color-${color}` : ''}`}>
-            {`${isNumber(value) ? getCommonFormatter(unit, ceil(value, 2)) : value || '--'}`}
-          </span>
-          <span className="dc-metric-name">{name || ''}</span>
-        </div>
-      ))}
-    </section>
-  </React.Fragment>
-);
+const Metric = ({ results = [], viewId }: IProps) => {
+  const locale = DashboardStore.getState((s) => s.locale);
+  return (
+    <React.Fragment>
+      <section className="dc-metric-panel">
+        {map(results, ({ name, i18n, value, unit, color }) => (
+          <div className="dc-metric-item" key={uniqueId(viewId)}>
+            <span className={`dc-metric-value ${color ? `color-${color}` : ''}`}>
+              {`${isNumber(value) ? getCommonFormatter(unit, ceil(value, 2)) : value || '--'}`}
+            </span>
+            <span className="dc-metric-name">{i18n?.alias?.[locale] ?? name}</span>
+          </div>
+        ))}
+      </section>
+    </React.Fragment>
+  );
+};
 
 export default ({ data: { metricData: results, proportion }, option, ...rest }: any) => {
   const viewMap = ChartEditorStore.useStore((s) => s.viewMap);

src/components/DcCharts/chart-pie/option.ts

@@ -2,12 +2,14 @@ import { get, map, merge, reduce, set } from 'lodash';
 import { getCustomOption } from 'src/components/DcCharts/common/custom-option';
 import { getCommonFormatter } from 'src/common/utils';
 import getDefaultOption from './default-option';
+import DashboardStore from 'src/stores/dash-board';
 
 export function getOption(data: DC.StaticData, config: DC.ChartConfig) {
   const { option: _option = {} } = config || {};
   const option = merge(getDefaultOption(), getCustomOption(data, config));
   const { metricData = [], legendData = [], unit } = data || {};
   const isShowTotal = get(config, ['optionProps', 'isShowTotal']);
+  const locale = DashboardStore.getState((s) => s.locale);
 
   if (legendData.length) {
     set(option, 'legend.data', legendData);
@@ -16,15 +18,23 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig) {
   return merge(
     option,
     {
-      series: map(metricData, (item) => ({
-        ...item,
-        type: 'pie',
-        radius: isShowTotal ? ['50%', '70%'] : '70%',
-      })),
+      series: map(metricData, (item) => {
+        return {
+          ...item,
+          data: map(item.data, (x: any) => ({
+            ...x,
+            name: x?.i18n?.alias?.[locale] || x.name,
+          })),
+          type: 'pie',
+          radius: isShowTotal ? ['50%', '70%'] : '70%',
+        };
+      }),
       tooltip: {
         trigger: 'item',
-        formatter: ({ seriesName, name, value, percent, marker }: any) => {
-          return `${seriesName} <br/> <span> ${marker}${name} : ${getCommonFormatter(
+        formatter: (record: any) => {
+          const { seriesName, name, value, percent, marker, data } = record;
+          const { i18n } = data;
+          return `${seriesName} <br/> <span> ${marker}${i18n?.alias?.[locale] ?? name} : ${getCommonFormatter(
             unit,
             value,
           )} (${percent}%) </span>`;

src/components/DcCharts/chart-table/index.tsx

@@ -6,10 +6,23 @@ import { Table as AntdTable } from 'antd';
 import { get, map } from 'lodash';
 import { Copy } from 'src/common/utils/copy';
 import dcRegisterComp from 'src/components/dc-register-comp';
+import DashboardStore from 'src/stores/dash-board';
 
 interface IProps {
   results: Array<{ [k: string]: any }>;
-  cols: Array<{ title: string; dataIndex: string; unit?: string; copy?: boolean; render?: any }>;
+  cols: Array<{
+    title: string;
+    dataIndex: string;
+    unit?: string;
+    copy?: boolean;
+    render?: any;
+    i18n?: {
+      alias: {
+        en: string;
+        zh: string;
+      };
+    };
+  }>;
   dataSource?: any[];
 
   [k: string]: any;
@@ -20,11 +33,13 @@ const fixedWidth = 150;
 const ChartTable = ({ results = [], cols = [], dataSource, ...rest }: IProps) => {
   const { Comp: Table, config } = dcRegisterComp.getComp<typeof AntdTable, IProps['results']>('table', AntdTable);
   const rowClick: DC_COMPONENT_TABLE.IRowClick | undefined = get(rest, 'config.optionProps.rowClick');
+  const locale = DashboardStore.getState((s) => s.locale);
   const { onBoardEvent } = rest;
   const isOverLimit = cols.length > fixedLimit;
   const _cols = map(cols, (col, index) => {
     let r = {
       ...col,
+      title: col?.i18n?.alias?.[locale] || col?.title,
       key: col.dataIndex,
       ellipsis: true,
     };