Merge fa65b6eff7 into df70a3cf15

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

@@ -1,3 +1,18 @@
+export const THEME_COLOR_LIST = [
+  '#3369FF',
+  '#36D2B8',
+  '#DB8D76',
+  '#47B359',
+  '#8545E6',
+  '#E0B18B',
+  '#7258F3',
+  '#0095FF',
+  '#52CC8F',
+  '#6675FF',
+  '#CC516E',
+  '#5CA9E6',
+];
+
 export enum SemanticTypeEnum {
   MODEL = 'MODEL',
   DIMENSION = 'DIMENSION',

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 {
-  formatByDataFormatType,
+  formatByDecimalPlaces,
   getChartLightenColor,
   getFormattedValue,
 } from '../../../utils/utils';
@@ -94,7 +94,7 @@ const BarChart: React.FC<Props> = ({
             return value === 0
               ? 0
               : metricField.dataFormatType === 'percent'
-              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              ? `${formatByDecimalPlaces(metricField.dataFormat?.needMultiply100 ? +value * 100 : value, metricField.dataFormat?.decimalPlaces || 2)}%`
               : getFormattedValue(value);
           },
         },
@@ -115,7 +115,10 @@ const BarChart: React.FC<Props> = ({
                     ? '-'
                     : metricField.dataFormatType === 'percent' ||
                       metricField.dataFormatType === 'decimal'
-                    ? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat)
+                    ? `${formatByDecimalPlaces(
+                        metricField.dataFormat?.needMultiply100 ? +item.value * 100 : item.value,
+                        metricField.dataFormat?.decimalPlaces || 2
+                      )}${metricField.dataFormatType === 'percent' ? '%' : ''}`
                     : getFormattedValue(item.value)
                 }</span></div>`
             )
@@ -148,7 +151,7 @@ const BarChart: React.FC<Props> = ({
             return value === 0
               ? 0
               : metricField.dataFormatType === 'percent'
-              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              ? `${formatByDecimalPlaces(metricField.dataFormat?.needMultiply100 ? +value * 100 : value, metricField.dataFormat?.decimalPlaces || 2)}%`
               : getFormattedValue(value);
           },
         },

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

@@ -1,5 +1,5 @@
 import { PREFIX_CLS } from '../../../common/constants';
-import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils';
+import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
 import ApplyAuth from '../ApplyAuth';
 import { MsgDataType } from '../../../common/type';
 import PeriodCompareItem from './PeriodCompareItem';
@@ -52,7 +52,10 @@ const MetricCard: React.FC<Props> = ({ data, question, loading, onApplyAuth }) =
                 {typeof value === 'string' && isNaN(+value)
                   ? value
                   : dataFormatType === 'percent' || dataFormatType === 'decimal'
-                  ? formatByDataFormatType(value, dataFormatType, dataFormat)
+                  ? `${formatByDecimalPlaces(
+                      dataFormat?.needMultiply100 ? +value * 100 : value,
+                      dataFormat?.decimalPlaces || 2
+                    )}${dataFormatType === 'percent' ? '%' : ''}`
                   : isNumber
                   ? formatMetric(value) || '-'
                   : formatNumberWithCN(+value)}

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

@@ -1,5 +1,5 @@
 import { PREFIX_CLS } from '../../../common/constants';
-import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils';
+import { formatByDecimalPlaces, formatMetric, formatNumberWithCN } from '../../../utils/utils';
 import { AggregateInfoType, ColumnType } from '../../../common/type';
 import PeriodCompareItem from '../MetricCard/PeriodCompareItem';
 import { SwapOutlined } from '@ant-design/icons';
@@ -29,7 +29,10 @@ const MetricInfo: React.FC<Props> = ({ aggregateInfo, currentMetricField }) => {
         <div style={{ display: 'flex', alignItems: 'flex-end' }}>
           <div className={`${prefixCls}-indicator-value`}>
             {dataFormatType === 'percent' || dataFormatType === 'decimal'
-              ? formatByDataFormatType(value, dataFormatType, dataFormat)
+              ? `${formatByDecimalPlaces(
+                  dataFormat?.needMultiply100 ? +value * 100 : value,
+                  dataFormat?.decimalPlaces || 2
+                )}${dataFormatType === 'percent' ? '%' : ''}`
               : isNumber
               ? formatMetric(value)
               : formatNumberWithCN(+value)}

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 {
-  formatByDataFormatType,
+  formatByDecimalPlaces,
   getFormattedValue,
   getMinMaxDate,
   groupByColumn,
@@ -134,7 +134,7 @@ const MetricTrendChart: React.FC<Props> = ({
             return value === 0
               ? 0
               : metricField.dataFormatType === 'percent'
-              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              ? `${formatByDecimalPlaces(value, metricField.dataFormat?.decimalPlaces || 2)}%`
               : getFormattedValue(value);
           },
         },
@@ -156,7 +156,10 @@ const MetricTrendChart: React.FC<Props> = ({
                     ? '-'
                     : metricField.dataFormatType === 'percent' ||
                       metricField.dataFormatType === 'decimal'
-                    ? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat)
+                    ? `${formatByDecimalPlaces(
+                        item.value,
+                        metricField.dataFormat?.decimalPlaces || 2
+                      )}${metricField.dataFormatType === 'percent' ? '%' : ''}`
                     : getFormattedValue(item.value)
                 }</span></div>`
             )

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 { formatByDataFormatType, getFormattedValue } from '../../../utils/utils';
+import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
 import { useEffect, useRef } from 'react';
@@ -55,7 +55,10 @@ const PieChart: React.FC<Props> = ({
           const value = params.value;
           return `${params.name}: ${
             metricField.dataFormatType === 'percent'
-              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              ? `${formatByDecimalPlaces(
+                  metricField.dataFormat?.needMultiply100 ? +value * 100 : value,
+                  metricField.dataFormat?.decimalPlaces || 2
+                )}%`
               : getFormattedValue(value)
           }`;
         },

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

@@ -1,4 +1,4 @@
-import { formatByDataFormatType, formatByThousandSeperator } from '../../../utils/utils';
+import { formatByDecimalPlaces, formatByThousandSeperator } from '../../../utils/utils';
 import { Table as AntTable } from 'antd';
 import { MsgDataType } from '../../../common/type';
 import { CLS_PREFIX } from '../../../common/constants';
@@ -42,7 +42,10 @@ const Table: React.FC<Props> = ({ data, size, loading, question, onApplyAuth })
               <div className={`${prefixCls}-formatted-value`}>
                 {`${
                   value
-                    ? formatByDataFormatType(value, dataFormatType, dataFormat)
+                    ? formatByDecimalPlaces(
+                        dataFormat?.needMultiply100 ? +value * 100 : value,
+                        dataFormat?.decimalPlaces || 2
+                      )
                     : 0
                 }%`}
               </div>

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

@@ -52,14 +52,14 @@ const ChatMsg: React.FC<Props> = ({
 
   const prefixCls = `${PREFIX_CLS}-chat-msg`;
 
-  const updateColumns = (queryColumnsValue: ColumnType[]) => {
+  const updateColummns = (queryColumnsValue: ColumnType[]) => {
     const referenceColumn = queryColumnsValue.find(item => item.showType === 'more');
     setReferenceColumn(referenceColumn);
     setColumns(queryColumnsValue.filter(item => item.showType !== 'more'));
   };
 
   useEffect(() => {
-    updateColumns(queryColumns);
+    updateColummns(queryColumns);
     setDataSource(queryResults);
     setDefaultMetricField(chatContext?.metrics?.[0]);
     setActiveMetricField(chatContext?.metrics?.[0]);
@@ -115,45 +115,26 @@ const ChatMsg: React.FC<Props> = ({
       metricFields.length > 0 &&
       categoryField.length <= 1 &&
       !(metricFields.length > 1 && categoryField.length > 0) &&
-      dataSource.some(item => item[dateField.bizName] !== dataSource[0][dateField.bizName]);
+      !dataSource.every(item => item[dateField.bizName] === dataSource[0][dateField.bizName]);
 
     if (isMetricTrend) {
       return MsgContentTypeEnum.METRIC_TREND;
     }
 
-    /**
-     * For Pie Chart:
-     * 1. There should be at least one category field.
-     * 2. There should be exactly one metric field.
-     * 3. All metric values should be non-negative.
-     * 4. limit the number of data points based on device type:
-     *   - For mobile devices, limit to 5 data points.
-     *   - For desktop devices, limit to 10 data points.
-     */
     const isMetricPie =
       categoryField.length > 0 &&
       metricFields?.length === 1 &&
       (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 10) &&
-      dataSource.every(item => item[metricFields[0].bizName] >= 0);
+      dataSource.every(item => item[metricFields[0].bizName] > 0);
 
     if (isMetricPie) {
       return MsgContentTypeEnum.METRIC_PIE;
     }
 
-    /**
-     * For Bar Chart:
-     * 1. There should be at least one category field.
-     * 2. There should be exactly one metric field.
-     * 3. The number of data points should be limited based on device type:
-     *  - For mobile devices, limit to 5 data points.
-     *  - For desktop devices, limit to 50 data points.
-     * 4. All metric values should be finite numbers.
-     */
     const isMetricBar =
       categoryField?.length > 0 &&
       metricFields?.length === 1 &&
-      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50) &&
-      dataSource.every(item => isFinite(Number(item[metricFields[0].bizName])));
+      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50);
 
     if (isMetricBar) {
       return MsgContentTypeEnum.METRIC_BAR;
@@ -245,6 +226,9 @@ const ChatMsg: React.FC<Props> = ({
         );
       case MsgContentTypeEnum.METRIC_PIE:
         const categoryField = columns.find(item => item.showType === 'CATEGORY');
+        if (!categoryField) {
+          return null;
+        }
         return (
           <Pie
             data={{ ...data, queryColumns: columns, queryResults: dataSource }}
@@ -252,7 +236,7 @@ const ChatMsg: React.FC<Props> = ({
             triggerResize={triggerResize}
             loading={loading}
             metricField={metricFields[0]}
-            categoryField={categoryField!}
+            categoryField={categoryField}
           />
         );
       case MsgContentTypeEnum.MARKDOWN:
@@ -282,7 +266,7 @@ const ChatMsg: React.FC<Props> = ({
     });
     setLoading(false);
     if (res.code === 200) {
-      updateColumns(res.data?.queryColumns || []);
+      updateColummns(res.data?.queryColumns || []);
       setDataSource(res.data?.queryResults || []);
     }
   };

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

@@ -1,11 +1,6 @@
 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<ColumnType['dataFormat']> = {}) {
-  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 === '') {