(feature)(webapp) add show case and support multiple selection and deletion of filter conditions (#251)

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

@@ -13,6 +13,7 @@ import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import NoPermissionChart from '../NoPermissionChart';
 import classNames from 'classnames';
+import { isArray } from 'lodash';
 
 type Props = {
   model?: string;
@@ -83,7 +84,9 @@ const MetricTrendChart: React.FC<Props> = ({
     });
 
     const xData = groupData[sortedGroupKeys[0]]?.map((item: any) => {
-      const date = `${item[dateColumnName]}`;
+      const date = isArray(item[dateColumnName])
+        ? item[dateColumnName].join('-')
+        : `${item[dateColumnName]}`;
       return date.length === 10 ? moment(date).format('MM-DD') : date;
     });
 

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

@@ -0,0 +1,148 @@
+import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants';
+import { getFormattedValue } from '../../../utils/utils';
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import React, { useEffect, useRef, useState } from 'react';
+import moment from 'moment';
+import { ColumnType } from '../../../common/type';
+import { isArray } from 'lodash';
+
+type Props = {
+  dateColumnName: string;
+  metricFields: ColumnType[];
+  resultList: any[];
+  triggerResize?: boolean;
+};
+
+const MultiMetricsTrendChart: React.FC<Props> = ({
+  dateColumnName,
+  metricFields,
+  resultList,
+  triggerResize,
+}) => {
+  const chartRef = useRef<any>();
+  const [instance, setInstance] = useState<ECharts>();
+
+  const renderChart = () => {
+    let instanceObj: any;
+    if (!instance) {
+      instanceObj = echarts.init(chartRef.current);
+      setInstance(instanceObj);
+    } else {
+      instanceObj = instance;
+      instanceObj.clear();
+    }
+
+    const xData = resultList?.map((item: any) => {
+      const date = isArray(item[dateColumnName])
+        ? item[dateColumnName].join('-')
+        : `${item[dateColumnName]}`;
+      return date.length === 10 ? moment(date).format('MM-DD') : date;
+    });
+
+    instanceObj.setOption({
+      legend: {
+        left: 0,
+        top: 0,
+        icon: 'rect',
+        itemWidth: 15,
+        itemHeight: 5,
+        type: 'scroll',
+      },
+      xAxis: {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLabel: {
+          showMaxLabel: true,
+          color: '#999',
+        },
+        data: xData,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            opacity: 0.3,
+          },
+        },
+        axisLabel: {
+          formatter: function (value: any) {
+            return value === 0 ? 0 : getFormattedValue(value);
+          },
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: function (params: any[]) {
+          const param = params[0];
+          const valueLabels = params
+            .sort((a, b) => b.value - a.value)
+            .map(
+              (item: any) =>
+                `<div style="margin-top: 3px;">${
+                  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;">${
+                  item.value === '' ? '-' : getFormattedValue(item.value)
+                }</span></div>`
+            )
+            .join('');
+          return `${param.name}<br />${valueLabels}`;
+        },
+      },
+      grid: {
+        left: '1%',
+        right: '4%',
+        bottom: '3%',
+        top: 45,
+        containLabel: true,
+      },
+      series: metricFields.map((metricField, index) => {
+        return {
+          type: 'line',
+          name: metricField.name,
+          symbol: 'circle',
+          showSymbol: resultList.length === 1,
+          smooth: true,
+          data: resultList.map((item: any) => {
+            const value = item[metricField.nameEn];
+            return (metricField.dataFormatType === 'percent' ||
+              metricField.dataFormatType === 'decimal') &&
+              metricField.dataFormat?.needMultiply100
+              ? value * 100
+              : value;
+          }),
+          color: THEME_COLOR_LIST[index],
+        };
+      }),
+    });
+    instanceObj.resize();
+  };
+
+  useEffect(() => {
+    renderChart();
+  }, [resultList]);
+
+  useEffect(() => {
+    if (triggerResize && instance) {
+      instance.resize();
+    }
+  }, [triggerResize]);
+
+  const prefixCls = `${CLS_PREFIX}-metric-trend`;
+
+  return <div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />;
+};
+
+export default MultiMetricsTrendChart;

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

@@ -1,11 +1,12 @@
 import { CLS_PREFIX } from '../../../common/constants';
-import { FieldType, MsgDataType } from '../../../common/type';
+import { DrillDownDimensionType, FieldType, MsgDataType } from '../../../common/type';
 import { isMobile } from '../../../utils/utils';
 import MetricTrendChart from './MetricTrendChart';
 import { Spin } from 'antd';
 import Table from '../Table';
 import MetricInfo from './MetricInfo';
 import DateOptions from '../DateOptions';
+import MultiMetricsTrendChart from './MultiMetricsTrendChart';
 
 type Props = {
   data: MsgDataType;
@@ -13,6 +14,7 @@ type Props = {
   triggerResize?: boolean;
   loading: boolean;
   activeMetricField?: FieldType;
+  drillDownDimension?: DrillDownDimensionType;
   currentDateOption?: number;
   onApplyAuth?: (model: string) => void;
   onSelectDateOption: (value: number) => void;
@@ -24,6 +26,7 @@ const MetricTrend: React.FC<Props> = ({
   triggerResize,
   loading,
   activeMetricField,
+  drillDownDimension,
   currentDateOption,
   onApplyAuth,
   onSelectDateOption,
@@ -36,6 +39,7 @@ const MetricTrend: React.FC<Props> = ({
   const dateColumnName = dateField?.nameEn || '';
   const categoryColumnName =
     queryColumns?.find((column: any) => column.showType === 'CATEGORY')?.nameEn || '';
+  const metricFields = queryColumns?.filter((column: any) => column.showType === 'NUMBER');
 
   const currentMetricField = queryColumns?.find((column: any) => column.showType === 'NUMBER');
 
@@ -48,19 +52,23 @@ const MetricTrend: React.FC<Props> = ({
   return (
     <div className={prefixCls}>
       <div className={`${prefixCls}-charts`}>
-        <div className={`${prefixCls}-top-bar`}>
-          <div
-            className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}
-            key={activeMetricField?.bizName}
-          >
-            {activeMetricField?.name}
+        {metricFields?.length === 1 && (
+          <div className={`${prefixCls}-top-bar`}>
+            <div
+              className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}
+              key={activeMetricField?.bizName}
+            >
+              {activeMetricField?.name}
+            </div>
           </div>
-        </div>
+        )}
         <Spin spinning={loading}>
           <div className={`${prefixCls}-content`}>
-            {!isMobile && aggregateInfo?.metricInfos?.length > 0 && (
-              <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
-            )}
+            {!isMobile &&
+              aggregateInfo?.metricInfos?.length > 0 &&
+              drillDownDimension === undefined && (
+                <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
+              )}
             <DateOptions
               chatContext={chatContext}
               currentDateOption={currentDateOption}
@@ -68,6 +76,13 @@ const MetricTrend: React.FC<Props> = ({
             />
             {queryResults?.length === 1 || chartIndex % 2 === 1 ? (
               <Table data={{ ...data, queryResults }} onApplyAuth={onApplyAuth} />
+            ) : metricFields.length > 1 ? (
+              <MultiMetricsTrendChart
+                dateColumnName={dateColumnName}
+                metricFields={metricFields}
+                resultList={queryResults}
+                triggerResize={triggerResize}
+              />
             ) : (
               <MetricTrendChart
                 model={entityInfo?.modelInfo.name}