Skip to content

Commit 9ffdba9

Browse files
FredZengFredZeng
authored
(feat)(chat-sdk) extract formatByDataFormatType() (#2287)
* feat(Chat/constants.ts): rm unused code * feat(chat-sdk): extract formatByDataFormatType()
1 parent df70a3c commit 9ffdba9

File tree

8 files changed

+20
-48
lines changed

8 files changed

+20
-48
lines changed

‎webapp/packages/chat-sdk/src/Chat/constants.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
1-
export const THEME_COLOR_LIST = [
2-
'#3369FF',
3-
'#36D2B8',
4-
'#DB8D76',
5-
'#47B359',
6-
'#8545E6',
7-
'#E0B18B',
8-
'#7258F3',
9-
'#0095FF',
10-
'#52CC8F',
11-
'#6675FF',
12-
'#CC516E',
13-
'#5CA9E6',
14-
];
15-
161
export enum SemanticTypeEnum {
172
MODEL = 'MODEL',
183
DIMENSION = 'DIMENSION',

‎webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CHART_BLUE_COLOR, CHART_SECONDARY_COLOR, PREFIX_CLS } from '../../../common/constants';
22
import { MsgDataType } from '../../../common/type';
33
import {
4-
formatByDecimalPlaces,
4+
formatByDataFormatType,
55
getChartLightenColor,
66
getFormattedValue,
77
} from '../../../utils/utils';
@@ -94,7 +94,7 @@ const BarChart: React.FC<Props> = ({
9494
return value === 0
9595
? 0
9696
: metricField.dataFormatType === 'percent'
97-
? `${formatByDecimalPlaces(metricField.dataFormat?.needMultiply100 ? +value * 100 : value, metricField.dataFormat?.decimalPlaces || 2)}%`
97+
? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
9898
: getFormattedValue(value);
9999
},
100100
},
@@ -115,10 +115,7 @@ const BarChart: React.FC<Props> = ({
115115
? '-'
116116
: metricField.dataFormatType === 'percent' ||
117117
metricField.dataFormatType === 'decimal'
118-
? `${formatByDecimalPlaces(
119-
metricField.dataFormat?.needMultiply100 ? +item.value * 100 : item.value,
120-
metricField.dataFormat?.decimalPlaces || 2
121-
)}${metricField.dataFormatType === 'percent' ? '%' : ''}`
118+
? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat)
122119
: getFormattedValue(item.value)
123120
}</span></div>`
124121
)
@@ -151,7 +148,7 @@ const BarChart: React.FC<Props> = ({
151148
return value === 0
152149
? 0
153150
: metricField.dataFormatType === 'percent'
154-
? `${formatByDecimalPlaces(metricField.dataFormat?.needMultiply100 ? +value * 100 : value, metricField.dataFormat?.decimalPlaces || 2)}%`
151+
? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
155152
: getFormattedValue(value);
156153
},
157154
},

‎webapp/packages/chat-sdk/src/components/ChatMsg/MetricCard/index.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PREFIX_CLS } from '../../../common/constants';
2-
import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
2+
import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils';
33
import ApplyAuth from '../ApplyAuth';
44
import { MsgDataType } from '../../../common/type';
55
import PeriodCompareItem from './PeriodCompareItem';
@@ -52,10 +52,7 @@ const MetricCard: React.FC<Props> = ({ data, question, loading, onApplyAuth }) =
5252
{typeof value === 'string' && isNaN(+value)
5353
? value
5454
: dataFormatType === 'percent' || dataFormatType === 'decimal'
55-
? `${formatByDecimalPlaces(
56-
dataFormat?.needMultiply100 ? +value * 100 : value,
57-
dataFormat?.decimalPlaces || 2
58-
)}${dataFormatType === 'percent' ? '%' : ''}`
55+
? formatByDataFormatType(value, dataFormatType, dataFormat)
5956
: isNumber
6057
? formatMetric(value) || '-'
6158
: formatNumberWithCN(+value)}

‎webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { PREFIX_CLS } from '../../../common/constants';
2-
import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
2+
import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils';
33
import { AggregateInfoType, ColumnType } from '../../../common/type';
44
import PeriodCompareItem from '../MetricCard/PeriodCompareItem';
55
import { SwapOutlined } from '@ant-design/icons';
@@ -29,10 +29,7 @@ const MetricInfo: React.FC<Props> = ({ aggregateInfo, currentMetricField }) => {
2929
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
3030
<div className={`${prefixCls}-indicator-value`}>
3131
{dataFormatType === 'percent' || dataFormatType === 'decimal'
32-
? `${formatByDecimalPlaces(
33-
dataFormat?.needMultiply100 ? +value * 100 : value,
34-
dataFormat?.decimalPlaces || 2
35-
)}${dataFormatType === 'percent' ? '%' : ''}`
32+
? formatByDataFormatType(value, dataFormatType, dataFormat)
3633
: isNumber
3734
? formatMetric(value)
3835
: formatNumberWithCN(+value)}

‎webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants';
22
import {
3-
formatByDecimalPlaces,
3+
formatByDataFormatType,
44
getFormattedValue,
55
getMinMaxDate,
66
groupByColumn,
@@ -134,7 +134,7 @@ const MetricTrendChart: React.FC<Props> = ({
134134
return value === 0
135135
? 0
136136
: metricField.dataFormatType === 'percent'
137-
? `${formatByDecimalPlaces(value, metricField.dataFormat?.decimalPlaces || 2)}%`
137+
? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
138138
: getFormattedValue(value);
139139
},
140140
},
@@ -156,10 +156,7 @@ const MetricTrendChart: React.FC<Props> = ({
156156
? '-'
157157
: metricField.dataFormatType === 'percent' ||
158158
metricField.dataFormatType === 'decimal'
159-
? `${formatByDecimalPlaces(
160-
item.value,
161-
metricField.dataFormat?.decimalPlaces || 2
162-
)}${metricField.dataFormatType === 'percent' ? '%' : ''}`
159+
? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat)
163160
: getFormattedValue(item.value)
164161
}</span></div>`
165162
)

‎webapp/packages/chat-sdk/src/components/ChatMsg/Pie/PieChart.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { PREFIX_CLS, THEME_COLOR_LIST } from '../../../common/constants';
22
import { MsgDataType } from '../../../common/type';
3-
import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
3+
import { formatByDataFormatType, getFormattedValue } from '../../../utils/utils';
44
import type { ECharts } from 'echarts';
55
import * as echarts from 'echarts';
66
import { useEffect, useRef } from 'react';
@@ -55,10 +55,7 @@ const PieChart: React.FC<Props> = ({
5555
const value = params.value;
5656
return `${params.name}: ${
5757
metricField.dataFormatType === 'percent'
58-
? `${formatByDecimalPlaces(
59-
metricField.dataFormat?.needMultiply100 ? +value * 100 : value,
60-
metricField.dataFormat?.decimalPlaces || 2
61-
)}%`
58+
? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
6259
: getFormattedValue(value)
6360
}`;
6461
},

‎webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { formatByDecimalPlaces, formatByThousandSeperator } from '../../../utils/utils';
1+
import { formatByDataFormatType, formatByThousandSeperator } from '../../../utils/utils';
22
import { Table as AntTable } from 'antd';
33
import { MsgDataType } from '../../../common/type';
44
import { CLS_PREFIX } from '../../../common/constants';
@@ -42,10 +42,7 @@ const Table: React.FC<Props> = ({ data, size, loading, question, onApplyAuth })
4242
<div className={`${prefixCls}-formatted-value`}>
4343
{`${
4444
value
45-
? formatByDecimalPlaces(
46-
dataFormat?.needMultiply100 ? +value * 100 : value,
47-
dataFormat?.decimalPlaces || 2
48-
)
45+
? formatByDataFormatType(value, dataFormatType, dataFormat)
4946
: 0
5047
}%`}
5148
</div>

‎webapp/packages/chat-sdk/src/utils/utils.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import moment, { Moment } from 'moment';
22
import { NumericUnit } from '../common/constants';
33
import { isString } from 'lodash';
4+
import { ColumnType } from '../common/type';
5+
6+
export function formatByDataFormatType(value: number | string, type: ColumnType['dataFormatType'], dataFormat: Partial<ColumnType['dataFormat']> = {}) {
7+
return `${formatByDecimalPlaces(dataFormat?.needMultiply100 ? +value * 100 : value, dataFormat?.decimalPlaces || 2)}${type === 'percent' ? '%' : ''}`;
8+
}
49

510
export function formatByDecimalPlaces(value: number | string, decimalPlaces: number) {
611
if (value === null || value === undefined || value === '') {

0 commit comments

Comments
 (0)