From fc5ff01eca78487c85f715480ca1afabffc2e580 Mon Sep 17 00:00:00 2001 From: williamhliu <137068196+williamhliu@users.noreply.github.com> Date: Wed, 21 Feb 2024 14:38:10 +0800 Subject: [PATCH] (feature)(webapp) modify view field (#732) --- .../src/components/ChatMsg/Bar/index.tsx | 36 +++++++++++++++---- .../src/components/ChatMsg/WebPage/index.tsx | 1 - .../chat-sdk/src/components/ChatMsg/index.tsx | 3 +- .../src/pages/ChatPlugin/DetailModal.tsx | 2 +- .../src/pages/ChatPlugin/index.tsx | 6 ++-- .../packages/supersonic-fe/src/utils/utils.ts | 2 +- 6 files changed, 36 insertions(+), 14 deletions(-) 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 45d64266d..8f0a5b00b 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx +++ b/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 = ({ data, triggerResize, loading, onApplyAuth }) => { +const BarChart: React.FC = ({ data, triggerResize, loading, metricField, onApplyAuth }) => { const chartRef = useRef(); const [instance, setInstance] = useState(); @@ -70,7 +76,11 @@ const BarChart: React.FC = ({ 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 = ({ data, triggerResize, loading, onApplyAuth } item.marker } ${ item.seriesName - }${getFormattedValue( - item.value - )}` + }${ + item.value === '' + ? '-' + : metricField.dataFormatType === 'percent' || + metricField.dataFormatType === 'decimal' + ? `${formatByDecimalPlaces( + item.value, + metricField.dataFormat?.decimalPlaces || 2 + )}${metricField.dataFormatType === 'percent' ? '%' : ''}` + : getFormattedValue(item.value) + }` ) .join(''); return `${param.name}
${valueLabels}`; @@ -115,7 +133,11 @@ const BarChart: React.FC = ({ 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 => { diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx index e9ef5917c..f9b7734c1 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/WebPage/index.tsx @@ -26,7 +26,6 @@ const WebPage: React.FC = ({ id, data }) => { const { msgId, height } = payload; if (`${msgId}` === `${id}`) { setHeight(height); - // updateMessageContainerScroll(); } return; } diff --git a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx index 4c1b1ad4f..6930167b1 100644 --- a/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx +++ b/webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx @@ -128,13 +128,14 @@ const ChatMsg: React.FC = ({ 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 ( ); } diff --git a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx index f5cd87752..e07011eca 100644 --- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx +++ b/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'; diff --git a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/index.tsx b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/index.tsx index d386f6d67..5e254989c 100644 --- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/index.tsx +++ b/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 ? (
{value.map((id) => { - const name = modelList.find((model) => model.id === +id)?.name; + const name = modelList.find((model) => model.id === id)?.name; return name ? {name} : null; })}
diff --git a/webapp/packages/supersonic-fe/src/utils/utils.ts b/webapp/packages/supersonic-fe/src/utils/utils.ts index fb0aa2532..cd159a97a 100644 --- a/webapp/packages/supersonic-fe/src/utils/utils.ts +++ b/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) {