(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/index.tsx

@@ -27,6 +27,8 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
   const [referenceColumn, setReferenceColumn] = useState<ColumnType>();
   const [dataSource, setDataSource] = useState<any[]>(queryResults);
   const [drillDownDimension, setDrillDownDimension] = useState<DrillDownDimensionType>();
+  const [secondDrillDownDimension, setSecondDrillDownDimension] =
+    useState<DrillDownDimensionType>();
   const [loading, setLoading] = useState(false);
   const [defaultMetricField, setDefaultMetricField] = useState<FieldType>();
   const [activeMetricField, setActiveMetricField] = useState<FieldType>();
@@ -48,6 +50,8 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     setActiveMetricField(chatContext?.metrics?.[0]);
     setDateModeValue(chatContext?.dateInfo?.dateMode);
     setCurrentDateOption(chatContext?.dateInfo?.unit);
+    setDrillDownDimension(undefined);
+    setSecondDrillDownDimension(undefined);
   }, [data]);
 
   if (!queryColumns || !queryResults || !columns) {
@@ -75,7 +79,7 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     !isText &&
     !isMetricCard &&
     (categoryField.length > 1 ||
-      queryMode === 'ENTITY_DETAIL' ||
+      queryMode === 'TAG_DETAIL' ||
       queryMode === 'ENTITY_DIMENSION' ||
       (categoryField.length === 1 && metricFields.length === 0));
 
@@ -92,7 +96,12 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
       );
     }
     if (isTable) {
-      return <Table data={{ ...data, queryColumns: columns, queryResults: dataSource }} />;
+      return (
+        <Table
+          data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+          loading={loading}
+        />
+      );
     }
     if (
       dateField &&
@@ -129,15 +138,21 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
         />
       );
     }
-    return <Table data={{ ...data, queryColumns: columns, queryResults: dataSource }} />;
+    return (
+      <Table
+        data={{ ...data, queryColumns: columns, queryResults: dataSource }}
+        loading={loading}
+      />
+    );
   };
 
-  const onLoadData = async (value: any) => {
+  const onLoadData = async (value: any, extraFilter?: any) => {
     setLoading(true);
     const res: any = await queryData({
+      ...chatContext,
+      ...value,
       queryId,
       parseId: chatContext.id,
-      ...value,
     });
     setLoading(false);
     if (res.code === 200) {
@@ -146,7 +161,8 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     }
   };
 
-  const onSelectDimension = (dimension?: DrillDownDimensionType) => {
+  const onSelectDimension = async (dimension?: DrillDownDimensionType) => {
+    setLoading(true);
     setDrillDownDimension(dimension);
     onLoadData({
       dateInfo: {
@@ -161,6 +177,23 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     });
   };
 
+  const onSelectSecondDimension = (dimension?: DrillDownDimensionType) => {
+    setSecondDrillDownDimension(dimension);
+    onLoadData({
+      dateInfo: {
+        ...chatContext.dateInfo,
+        dateMode: dateModeValue,
+        unit: currentDateOption || chatContext.dateInfo.unit,
+      },
+      dimensions: [
+        ...(chatContext.dimensions || []),
+        ...(drillDownDimension ? [drillDownDimension] : []),
+        ...(dimension ? [dimension] : []),
+      ],
+      metrics: [activeMetricField || defaultMetricField],
+    });
+  };
+
   const onSwitchMetric = (metricField?: FieldType) => {
     setActiveMetricField(metricField);
     onLoadData({
@@ -199,7 +232,7 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
     ?.name;
 
   const isEntityMode =
-    (queryMode === 'ENTITY_LIST_FILTER' || queryMode === 'METRIC_ENTITY') &&
+    (queryMode === 'TAG_LIST_FILTER' || queryMode === 'METRIC_TAG') &&
     typeof entityId === 'string' &&
     entityName !== undefined;
 
@@ -225,12 +258,11 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
             <div
               className={`${prefixCls}-bottom-tools ${
                 isMetricCard ? `${prefixCls}-metric-card-tools` : ''
-              }`}
+              } ${isMobile ? 'mobile' : ''}`}
             >
               {isMultipleMetric && (
                 <MetricOptions
-                  // metrics={chatContext.metrics}
-                  metrics={recommendMetrics}
+                  metrics={chatContext.metrics}
                   defaultMetric={defaultMetricField}
                   currentMetric={activeMetricField}
                   onSelectMetric={onSwitchMetric}
@@ -241,9 +273,11 @@ const ChatMsg: React.FC<Props> = ({ queryId, data, chartIndex, triggerResize })
                   modelId={chatContext.modelId}
                   metricId={activeMetricField?.id || defaultMetricField?.id}
                   drillDownDimension={drillDownDimension}
+                  secondDrillDownDimension={secondDrillDownDimension}
                   originDimensions={chatContext.dimensions}
                   dimensionFilters={chatContext.dimensionFilters}
                   onSelectDimension={onSelectDimension}
+                  onSelectSecondDimension={onSelectSecondDimension}
                 />
               )}
             </div>