From 9ffdba956ee79b05d0ff67579d5dc291b7786d9b Mon Sep 17 00:00:00 2001 From: FredTsang <979738295@qq.com> Date: Sun, 8 Jun 2025 07:34:51 +0800 Subject: [PATCH] (feat)(chat-sdk) extract formatByDataFormatType() (#2287) * feat(Chat/constants.ts): rm unused code * feat(chat-sdk): extract formatByDataFormatType() --- webapp/packages/chat-sdk/src/Chat/constants.ts | 15 --------------- .../chat-sdk/src/components/ChatMsg/Bar/index.tsx | 11 ++++------- .../src/components/ChatMsg/MetricCard/index.tsx | 7 ++----- .../components/ChatMsg/MetricTrend/MetricInfo.tsx | 7 ++----- .../ChatMsg/MetricTrend/MetricTrendChart.tsx | 9 +++------ .../src/components/ChatMsg/Pie/PieChart.tsx | 7 ++----- .../src/components/ChatMsg/Table/index.tsx | 7 ++----- webapp/packages/chat-sdk/src/utils/utils.ts | 5 +++++ 8 files changed, 20 insertions(+), 48 deletions(-) diff --git a/webapp/packages/chat-sdk/src/Chat/constants.ts b/webapp/packages/chat-sdk/src/Chat/constants.ts index 1c7174ab8..6838dbbb7 100644 --- a/webapp/packages/chat-sdk/src/Chat/constants.ts +++ b/webapp/packages/chat-sdk/src/Chat/constants.ts @@ -1,18 +1,3 @@ -export const THEME_COLOR_LIST = [ - '#3369FF', - '#36D2B8', - '#DB8D76', - '#47B359', - '#8545E6', - '#E0B18B', - '#7258F3', - '#0095FF', - '#52CC8F', - '#6675FF', - '#CC516E', - '#5CA9E6', -]; - export enum SemanticTypeEnum { MODEL = 'MODEL', DIMENSION = 'DIMENSION', diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx index 8b46dc6dc..7c8474ee0 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx @@ -1,7 +1,7 @@ import { CHART_BLUE_COLOR, CHART_SECONDARY_COLOR, PREFIX_CLS } from '../../../common/constants'; import { MsgDataType } from '../../../common/type'; import { - formatByDecimalPlaces, + formatByDataFormatType, getChartLightenColor, getFormattedValue, } from '../../../utils/utils'; @@ -94,7 +94,7 @@ const BarChart: React.FC = ({ return value === 0 ? 0 : metricField.dataFormatType === 'percent' - ? `${formatByDecimalPlaces(metricField.dataFormat?.needMultiply100 ? +value * 100 : value, metricField.dataFormat?.decimalPlaces || 2)}%` + ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat) : getFormattedValue(value); }, }, @@ -115,10 +115,7 @@ const BarChart: React.FC = ({ ? '-' : metricField.dataFormatType === 'percent' || metricField.dataFormatType === 'decimal' - ? `${formatByDecimalPlaces( - metricField.dataFormat?.needMultiply100 ? +item.value * 100 : item.value, - metricField.dataFormat?.decimalPlaces || 2 - )}${metricField.dataFormatType === 'percent' ? '%' : ''}` + ? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat) : getFormattedValue(item.value) }` ) @@ -151,7 +148,7 @@ const BarChart: React.FC = ({ return value === 0 ? 0 : metricField.dataFormatType === 'percent' - ? `${formatByDecimalPlaces(metricField.dataFormat?.needMultiply100 ? +value * 100 : value, metricField.dataFormat?.decimalPlaces || 2)}%` + ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat) : getFormattedValue(value); }, }, diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx index 82e02ef31..eab02fad7 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx @@ -1,5 +1,5 @@ import { PREFIX_CLS } from '../../../common/constants'; -import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils'; +import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils'; import ApplyAuth from '../ApplyAuth'; import { MsgDataType } from '../../../common/type'; import PeriodCompareItem from './PeriodCompareItem'; @@ -52,10 +52,7 @@ const MetricCard: React.FC = ({ data, question, loading, onApplyAuth }) = {typeof value === 'string' && isNaN(+value) ? value : dataFormatType === 'percent' || dataFormatType === 'decimal' - ? `${formatByDecimalPlaces( - dataFormat?.needMultiply100 ? +value * 100 : value, - dataFormat?.decimalPlaces || 2 - )}${dataFormatType === 'percent' ? '%' : ''}` + ? formatByDataFormatType(value, dataFormatType, dataFormat) : isNumber ? formatMetric(value) || '-' : formatNumberWithCN(+value)} diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx index 01d11b749..b521a31f9 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx @@ -1,5 +1,5 @@ import { PREFIX_CLS } from '../../../common/constants'; -import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils'; +import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils'; import { AggregateInfoType, ColumnType } from '../../../common/type'; import PeriodCompareItem from '../MetricCard/PeriodCompareItem'; import { SwapOutlined } from '@ant-design/icons'; @@ -29,10 +29,7 @@ const MetricInfo: React.FC = ({ aggregateInfo, currentMetricField }) => {
{dataFormatType === 'percent' || dataFormatType === 'decimal' - ? `${formatByDecimalPlaces( - dataFormat?.needMultiply100 ? +value * 100 : value, - dataFormat?.decimalPlaces || 2 - )}${dataFormatType === 'percent' ? '%' : ''}` + ? formatByDataFormatType(value, dataFormatType, dataFormat) : isNumber ? formatMetric(value) : formatNumberWithCN(+value)} diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx index 021f2ab65..42744f90a 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx @@ -1,6 +1,6 @@ import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants'; import { - formatByDecimalPlaces, + formatByDataFormatType, getFormattedValue, getMinMaxDate, groupByColumn, @@ -134,7 +134,7 @@ const MetricTrendChart: React.FC = ({ return value === 0 ? 0 : metricField.dataFormatType === 'percent' - ? `${formatByDecimalPlaces(value, metricField.dataFormat?.decimalPlaces || 2)}%` + ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat) : getFormattedValue(value); }, }, @@ -156,10 +156,7 @@ const MetricTrendChart: React.FC = ({ ? '-' : metricField.dataFormatType === 'percent' || metricField.dataFormatType === 'decimal' - ? `${formatByDecimalPlaces( - item.value, - metricField.dataFormat?.decimalPlaces || 2 - )}${metricField.dataFormatType === 'percent' ? '%' : ''}` + ? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat) : getFormattedValue(item.value) }
` ) diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Pie/PieChart.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Pie/PieChart.tsx index 05c9fde9b..04b0b24b3 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/Pie/PieChart.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Pie/PieChart.tsx @@ -1,6 +1,6 @@ import { PREFIX_CLS, THEME_COLOR_LIST } from '../../../common/constants'; import { MsgDataType } from '../../../common/type'; -import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils'; +import { formatByDataFormatType, getFormattedValue } from '../../../utils/utils'; import type { ECharts } from 'echarts'; import * as echarts from 'echarts'; import { useEffect, useRef } from 'react'; @@ -55,10 +55,7 @@ const PieChart: React.FC = ({ const value = params.value; return `${params.name}: ${ metricField.dataFormatType === 'percent' - ? `${formatByDecimalPlaces( - metricField.dataFormat?.needMultiply100 ? +value * 100 : value, - metricField.dataFormat?.decimalPlaces || 2 - )}%` + ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat) : getFormattedValue(value) }`; }, diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx index 1cf1aeda6..288906b24 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx @@ -1,4 +1,4 @@ -import { formatByDecimalPlaces, formatByThousandSeperator } from '../../../utils/utils'; +import { formatByDataFormatType, formatByThousandSeperator } from '../../../utils/utils'; import { Table as AntTable } from 'antd'; import { MsgDataType } from '../../../common/type'; import { CLS_PREFIX } from '../../../common/constants'; @@ -42,10 +42,7 @@ const Table: React.FC = ({ data, size, loading, question, onApplyAuth })
{`${ value - ? formatByDecimalPlaces( - dataFormat?.needMultiply100 ? +value * 100 : value, - dataFormat?.decimalPlaces || 2 - ) + ? formatByDataFormatType(value, dataFormatType, dataFormat) : 0 }%`}
diff --git a/webapp/packages/chat-sdk/src/utils/utils.ts b/webapp/packages/chat-sdk/src/utils/utils.ts index 4d7e46568..f9f6892c3 100644 --- a/webapp/packages/chat-sdk/src/utils/utils.ts +++ b/webapp/packages/chat-sdk/src/utils/utils.ts @@ -1,6 +1,11 @@ import moment, { Moment } from 'moment'; import { NumericUnit } from '../common/constants'; import { isString } from 'lodash'; +import { ColumnType } from '../common/type'; + +export function formatByDataFormatType(value: number | string, type: ColumnType['dataFormatType'], dataFormat: Partial = {}) { + return `${formatByDecimalPlaces(dataFormat?.needMultiply100 ? +value * 100 : value, dataFormat?.decimalPlaces || 2)}${type === 'percent' ? '%' : ''}`; +} export function formatByDecimalPlaces(value: number | string, decimalPlaces: number) { if (value === null || value === undefined || value === '') {