(feature)(webapp) modify view field (#732)

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

@@ -1,20 +1,26 @@
 import { CHART_BLUE_COLOR, CHART_SECONDARY_COLOR, PREFIX_CLS } from '../../../common/constants';
 import { MsgDataType } from '../../../common/type';
-import { getChartLightenColor, getFormattedValue } from '../../../utils/utils';
+import {
+  formatByDecimalPlaces,
+  getChartLightenColor,
+  getFormattedValue,
+} from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState } from 'react';
 import NoPermissionChart from '../NoPermissionChart';
+import { ColumnType } from '../../../common/type';
 import { Spin } from 'antd';
 
 type Props = {
   data: MsgDataType;
   triggerResize?: boolean;
   loading: boolean;
+  metricField: ColumnType;
   onApplyAuth?: (model: string) => void;
 };
 
-const BarChart: React.FC<Props> = ({ data, triggerResize, loading, onApplyAuth }) => {
+const BarChart: React.FC<Props> = ({ data, triggerResize, loading, metricField, onApplyAuth }) => {
   const chartRef = useRef<any>();
   const [instance, setInstance] = useState<ECharts>();
 
@@ -70,7 +76,11 @@ const BarChart: React.FC<Props> = ({ data, triggerResize, loading, onApplyAuth }
         },
         axisLabel: {
           formatter: function (value: any) {
-            return value === 0 ? 0 : getFormattedValue(value);
+            return value === 0
+              ? 0
+              : metricField.dataFormatType === 'percent'
+              ? `${formatByDecimalPlaces(value, metricField.dataFormat?.decimalPlaces || 2)}%`
+              : getFormattedValue(value);
           },
         },
       },
@@ -85,9 +95,17 @@ const BarChart: React.FC<Props> = ({ data, triggerResize, loading, onApplyAuth }
                   item.marker
                 } <span style="display: inline-block; width: 70px; margin-right: 12px;">${
                   item.seriesName
-                }</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${getFormattedValue(
+                }</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
-                  item.value
+                  item.value === ''
-                )}</span></div>`
+                    ? '-'
+                    : metricField.dataFormatType === 'percent' ||
+                      metricField.dataFormatType === 'decimal'
+                    ? `${formatByDecimalPlaces(
+                        item.value,
+                        metricField.dataFormat?.decimalPlaces || 2
+                      )}${metricField.dataFormatType === 'percent' ? '%' : ''}`
+                    : getFormattedValue(item.value)
+                }</span></div>`
             )
             .join('');
           return `${param.name}<br />${valueLabels}`;
@@ -115,7 +133,11 @@ const BarChart: React.FC<Props> = ({ data, triggerResize, loading, onApplyAuth }
           show: true,
           position: 'top',
           formatter: function ({ value }: any) {
-            return getFormattedValue(value);
+            return value === 0
+              ? 0
+              : metricField.dataFormatType === 'percent'
+              ? `${formatByDecimalPlaces(value, metricField.dataFormat?.decimalPlaces || 2)}%`
+              : getFormattedValue(value);
           },
         },
         data: data.map(item => {

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

@@ -26,7 +26,6 @@ const WebPage: React.FC<Props> = ({ id, data }) => {
       const { msgId, height } = payload;
       if (`${msgId}` === `${id}`) {
         setHeight(height);
-        // updateMessageContainerScroll();
       }
       return;
     }

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

@@ -128,13 +128,14 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     if (
       categoryField?.length > 0 &&
       metricFields?.length > 0 &&
-      (isMobile ? dataSource?.length <= 20 : dataSource?.length <= 50)
+      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50)
     ) {
       return (
         <Bar
           data={{ ...data, queryColumns: columns, queryResults: dataSource }}
           triggerResize={triggerResize}
           loading={loading}
+          metricField={metricFields[0]}
         />
       );
     }

webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx

@@ -10,7 +10,7 @@ import {
   FunctionParamFormItemType,
   PluginTypeEnum,
 } from './type';
-import { getLeafList, traverseTree, uuid } from '@/utils/utils';
+import { traverseTree, uuid } from '@/utils/utils';
 import styles from './style.less';
 import { PLUGIN_TYPE_MAP } from './constants';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';

webapp/packages/supersonic-fe/src/pages/ChatPlugin/index.tsx

@@ -1,4 +1,4 @@
-import { getLeafList } from '@/utils/utils';
+import { getLeafNodes } from '@/utils/utils';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Input, message, Popconfirm, Select, Table, Tag } from 'antd';
 import moment from 'moment';
@@ -24,7 +24,7 @@ const PluginManage = () => {
 
   const initModelList = async () => {
     const res = await getModelList();
-    setModelList(getLeafList(res.data));
+    setModelList(getLeafNodes(res.data));
   };
 
   const updateData = async (filters?: any) => {
@@ -68,7 +68,7 @@ const PluginManage = () => {
         return value ? (
           <div className={styles.modelColumn}>
             {value.map((id) => {
-              const name = modelList.find((model) => model.id === +id)?.name;
+              const name = modelList.find((model) => model.id === id)?.name;
               return name ? <Tag key={id}>{name}</Tag> : null;
             })}
           </div>

webapp/packages/supersonic-fe/src/utils/utils.ts

@@ -355,7 +355,7 @@ export const getFormattedValueData = (value: number | string, remainZero?: boole
   return `${formattedValue}${unit === NumericUnit.None ? '' : unit}`;
 };
 
-function getLeafNodes(treeNodes: any[]): any[] {
+export function getLeafNodes(treeNodes: any[]): any[] {
   const leafNodes: any[] = [];
 
   function traverse(node: any) {