(feature)(chat-sdk) trend chart supports switch between line and bar,add second drill-down dimensions,chang queryMode from ENTITY to TAG (#422)

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

@@ -23,6 +23,7 @@ type Props = {
   resultList: any[];
   triggerResize?: boolean;
   onApplyAuth?: (model: string) => void;
+  chartType?: string;
 };
 
 const MetricTrendChart: React.FC<Props> = ({
@@ -33,6 +34,7 @@ const MetricTrendChart: React.FC<Props> = ({
   resultList,
   triggerResize,
   onApplyAuth,
+  chartType,
 }) => {
   const chartRef = useRef<any>();
   const [instance, setInstance] = useState<ECharts>();
@@ -173,7 +175,7 @@ const MetricTrendChart: React.FC<Props> = ({
       series: sortedGroupKeys.slice(0, 20).map((category, index) => {
         const data = groupData[category];
         return {
-          type: 'line',
+          type: chartType,
           name: categoryColumnName ? category : metricField.name,
           symbol: 'circle',
           showSymbol: data.length === 1,
@@ -197,7 +199,7 @@ const MetricTrendChart: React.FC<Props> = ({
     if (metricField.authorized) {
       renderChart();
     }
-  }, [resultList, metricField]);
+  }, [resultList, metricField, chartType]);
 
   useEffect(() => {
     if (triggerResize && instance) {

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

@@ -12,6 +12,7 @@ type Props = {
   metricFields: ColumnType[];
   resultList: any[];
   triggerResize?: boolean;
+  chartType?: string;
 };
 
 const MultiMetricsTrendChart: React.FC<Props> = ({
@@ -19,6 +20,7 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
   metricFields,
   resultList,
   triggerResize,
+  chartType,
 }) => {
   const chartRef = useRef<any>();
   const [instance, setInstance] = useState<ECharts>();
@@ -110,7 +112,7 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
       },
       series: metricFields.map((metricField, index) => {
         return {
-          type: 'line',
+          type: chartType,
           name: metricField.name,
           symbol: 'circle',
           showSymbol: resultList.length === 1,
@@ -132,7 +134,7 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
 
   useEffect(() => {
     renderChart();
-  }, [resultList]);
+  }, [resultList, chartType]);
 
   useEffect(() => {
     if (triggerResize && instance) {

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

@@ -2,11 +2,23 @@ import { CLS_PREFIX } from '../../../common/constants';
 import { DrillDownDimensionType, FieldType, MsgDataType } from '../../../common/type';
 import { isMobile } from '../../../utils/utils';
 import MetricTrendChart from './MetricTrendChart';
-import { Spin } from 'antd';
+import { Spin, Select } from 'antd';
 import Table from '../Table';
 import MetricInfo from './MetricInfo';
 import DateOptions from '../DateOptions';
 import MultiMetricsTrendChart from './MultiMetricsTrendChart';
+import { useState } from 'react';
+
+const metricChartSelectOptions = [
+  {
+    value: 'line',
+    label: '折线图',
+  },
+  {
+    value: 'bar',
+    label: '柱状图',
+  },
+];
 
 type Props = {
   data: MsgDataType;
@@ -32,6 +44,7 @@ const MetricTrend: React.FC<Props> = ({
   onSelectDateOption,
 }) => {
   const { queryColumns, queryResults, aggregateInfo, entityInfo, chatContext } = data;
+  const [chartType, setChartType] = useState('line');
 
   const dateField: any = queryColumns?.find(
     (column: any) => column.showType === 'DATE' || column.type === 'DATE'
@@ -69,11 +82,21 @@ const MetricTrend: React.FC<Props> = ({
               drillDownDimension === undefined && (
                 <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
               )}
-            <DateOptions
-              chatContext={chatContext}
-              currentDateOption={currentDateOption}
-              onSelectDateOption={onSelectDateOption}
-            />
+            <div className={`${prefixCls}-select-options`}>
+              <DateOptions
+                chatContext={chatContext}
+                currentDateOption={currentDateOption}
+                onSelectDateOption={onSelectDateOption}
+              />
+              <div>
+                <Select
+                  defaultValue="line"
+                  bordered={false}
+                  options={metricChartSelectOptions}
+                  onChange={(value: string) => setChartType(value)}
+                />
+              </div>
+            </div>
             {queryResults?.length === 1 || chartIndex % 2 === 1 ? (
               <Table data={{ ...data, queryResults }} onApplyAuth={onApplyAuth} />
             ) : metricFields.length > 1 ? (
@@ -82,6 +105,7 @@ const MetricTrend: React.FC<Props> = ({
                 metricFields={metricFields}
                 resultList={queryResults}
                 triggerResize={triggerResize}
+                chartType={chartType}
               />
             ) : (
               <MetricTrendChart
@@ -92,6 +116,7 @@ const MetricTrend: React.FC<Props> = ({
                 resultList={queryResults}
                 triggerResize={triggerResize}
                 onApplyAuth={onApplyAuth}
+                chartType={chartType}
               />
             )}
           </div>

webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/style.less

@@ -56,6 +56,11 @@
     row-gap: 12px;
   }
 
+  &-select-options {
+    display: flex;
+    justify-content: space-between;
+  }
+
   &-indicator {
     display: flex;
     flex-direction: column;