(feature)(webapp) add display of time consumption at each stage (#331)

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

@@ -36,7 +36,9 @@ const BarChart: React.FC<Props> = ({ data, triggerResize, loading, onApplyAuth }
     const data = (queryResults || []).sort(
       (a: any, b: any) => b[metricColumnName] - a[metricColumnName]
     );
-    const xData = data.map(item => item[categoryColumnName]);
+    const xData = data.map(item =>
+      item[categoryColumnName] !== undefined ? item[categoryColumnName] : '未知'
+    );
     instanceObj.setOption({
       xAxis: {
         type: 'category',

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

@@ -52,7 +52,9 @@ const MetricCard: React.FC<Props> = ({ data, loading, onApplyAuth }) => {
           ) : (
             <div style={{ display: 'flex', alignItems: 'flex-end' }}>
               <div className={`${prefixCls}-indicator-value`}>
-                {dataFormatType === 'percent' || dataFormatType === 'decimal'
+                {typeof value === 'string' && isNaN(+value)
+                  ? value
+                  : dataFormatType === 'percent' || dataFormatType === 'decimal'
                   ? `${formatByDecimalPlaces(
                       dataFormat?.needMultiply100 ? +value * 100 : value,
                       dataFormat?.decimalPlaces || 2

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

@@ -1,4 +1,4 @@
-import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
+import { formatByDecimalPlaces, getFormattedValue, isMobile } from '../../../utils/utils';
 import { Table as AntTable } from 'antd';
 import { MsgDataType } from '../../../common/type';
 import { CLS_PREFIX } from '../../../common/constants';
@@ -70,7 +70,13 @@ const Table: React.FC<Props> = ({ data, size, onApplyAuth }) => {
     <div className={prefixCls}>
       <AntTable
         pagination={
-          queryResults.length <= 10 ? false : { defaultPageSize: 10, position: ['bottomCenter'] }
+          queryResults.length <= 10
+            ? false
+            : {
+                defaultPageSize: 10,
+                position: ['bottomCenter'],
+                size: isMobile ? 'small' : 'default',
+              }
         }
         columns={tableColumns}
         dataSource={dataSource}

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

@@ -10,6 +10,7 @@ import { PREFIX_CLS } from '../../common/constants';
 import Text from './Text';
 import DrillDownDimensions from '../DrillDownDimensions';
 import MetricOptions from '../MetricOptions';
+import { isMobile } from '../../utils/utils';
 
 type Props = {
   queryId?: number;
@@ -115,7 +116,11 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
         />
       );
     }
-    if (categoryField?.length > 0 && metricFields?.length > 0) {
+    if (
+      categoryField?.length > 0 &&
+      metricFields?.length > 0 &&
+      (isMobile ? dataSource?.length <= 20 : dataSource?.length <= 50)
+    ) {
       return (
         <Bar
           data={{ ...data, queryColumns: columns, queryResults: dataSource }}