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

@@ -0,0 +1,95 @@
+import classNames from 'classnames';
+import { CLS_PREFIX } from '../../common/constants';
+import { DrillDownDimensionType } from '../../common/type';
+import { Dropdown, Menu } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+
+type Props = {
+  drillDownDimension?: DrillDownDimensionType;
+  dimensions: DrillDownDimensionType[];
+  isSecondDrillDown?: boolean;
+  onSelectDimension: (dimension?: DrillDownDimensionType) => void;
+  onCancelDrillDown: () => void;
+};
+
+const DEFAULT_DIMENSION_COUNT = 5;
+
+const DimensionSection: React.FC<Props> = ({
+  drillDownDimension,
+  dimensions,
+  isSecondDrillDown,
+  onSelectDimension,
+  onCancelDrillDown,
+}) => {
+  const prefixCls = `${CLS_PREFIX}-drill-down-dimensions`;
+
+  const defaultDimensions = dimensions.slice(0, DEFAULT_DIMENSION_COUNT);
+
+  return (
+    <div className={`${prefixCls}-section`}>
+      <div className={`${prefixCls}-title`}>{isSecondDrillDown ? '二级' : '推荐'}下钻维度：</div>
+      <div className={`${prefixCls}-content`}>
+        {defaultDimensions.map((dimension, index) => {
+          const itemNameClass = classNames(`${prefixCls}-content-item-name`, {
+            [`${prefixCls}-content-item-active`]: drillDownDimension?.id === dimension.id,
+          });
+          return (
+            <div>
+              <span
+                className={itemNameClass}
+                onClick={() => {
+                  onSelectDimension(
+                    drillDownDimension?.id === dimension.id ? undefined : dimension
+                  );
+                }}
+              >
+                {dimension.name}
+              </span>
+              {index !== defaultDimensions.length - 1 && <span>、</span>}
+            </div>
+          );
+        })}
+        {dimensions.length > DEFAULT_DIMENSION_COUNT && (
+          <div>
+            <span>、</span>
+            <Dropdown
+              overlay={
+                <Menu>
+                  {dimensions.slice(DEFAULT_DIMENSION_COUNT).map(dimension => {
+                    const itemNameClass = classNames({
+                      [`${prefixCls}-menu-item-active`]: drillDownDimension?.id === dimension.id,
+                    });
+                    return (
+                      <Menu.Item key={dimension.id}>
+                        <span
+                          className={itemNameClass}
+                          onClick={() => {
+                            onSelectDimension(dimension);
+                          }}
+                        >
+                          {dimension.name}
+                        </span>
+                      </Menu.Item>
+                    );
+                  })}
+                </Menu>
+              }
+            >
+              <span>
+                <span className={`${prefixCls}-content-item-name`}>更多</span>
+                <DownOutlined className={`${prefixCls}-down-arrow`} />
+              </span>
+            </Dropdown>
+          </div>
+        )}
+        {drillDownDimension && (
+          <div className={`${prefixCls}-cancel-drill-down`} onClick={onCancelDrillDown}>
+            取消{isSecondDrillDown ? '二级' : ''}下钻
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DimensionSection;

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

@@ -2,32 +2,30 @@ import { useEffect, useState } from 'react';
 import { CLS_PREFIX } from '../../common/constants';
 import { DrillDownDimensionType, FilterItemType } from '../../common/type';
 import { queryDrillDownDimensions } from '../../service';
-import { Dropdown, Menu } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
+import DimensionSection from './DimensionSection';
 
 type Props = {
   modelId: number;
   metricId?: number;
   drillDownDimension?: DrillDownDimensionType;
-  isMetricCard?: boolean;
+  secondDrillDownDimension?: DrillDownDimensionType;
   originDimensions?: DrillDownDimensionType[];
   dimensionFilters?: FilterItemType[];
   onSelectDimension: (dimension?: DrillDownDimensionType) => void;
+  onSelectSecondDimension: (dimension?: DrillDownDimensionType) => void;
 };
 
 const MAX_DIMENSION_COUNT = 20;
 
-const DEFAULT_DIMENSION_COUNT = 5;
-
 const DrillDownDimensions: React.FC<Props> = ({
   modelId,
   metricId,
   drillDownDimension,
-  isMetricCard,
+  secondDrillDownDimension,
   originDimensions,
   dimensionFilters,
   onSelectDimension,
+  onSelectSecondDimension,
 }) => {
   const [dimensions, setDimensions] = useState<DrillDownDimensionType[]>([]);
 
@@ -54,77 +52,27 @@ const DrillDownDimensions: React.FC<Props> = ({
     onSelectDimension(undefined);
   };
 
-  const defaultDimensions = dimensions.slice(0, DEFAULT_DIMENSION_COUNT);
-
-  const drillDownDimensionsSectionClass = classNames(`${prefixCls}-section`, {
-    [`${prefixCls}-metric-card`]: isMetricCard,
-  });
+  const cancelSecondDrillDown = () => {
+    onSelectSecondDimension(undefined);
+  };
 
   return (
     <div className={prefixCls}>
-      <div className={drillDownDimensionsSectionClass}>
-        <div className={`${prefixCls}-title`}>推荐下钻维度：</div>
-        <div className={`${prefixCls}-content`}>
-          {defaultDimensions.map((dimension, index) => {
-            const itemNameClass = classNames(`${prefixCls}-content-item-name`, {
-              [`${prefixCls}-content-item-active`]: drillDownDimension?.id === dimension.id,
-            });
-            return (
-              <div>
-                <span
-                  className={itemNameClass}
-                  onClick={() => {
-                    onSelectDimension(
-                      drillDownDimension?.id === dimension.id ? undefined : dimension
-                    );
-                  }}
-                >
-                  {dimension.name}
-                </span>
-                {index !== defaultDimensions.length - 1 && <span>、</span>}
-              </div>
-            );
-          })}
-          {dimensions.length > DEFAULT_DIMENSION_COUNT && (
-            <div>
-              <span>、</span>
-              <Dropdown
-                overlay={
-                  <Menu>
-                    {dimensions.slice(DEFAULT_DIMENSION_COUNT).map(dimension => {
-                      const itemNameClass = classNames({
-                        [`${prefixCls}-menu-item-active`]: drillDownDimension?.id === dimension.id,
-                      });
-                      return (
-                        <Menu.Item key={dimension.id}>
-                          <span
-                            className={itemNameClass}
-                            onClick={() => {
-                              onSelectDimension(dimension);
-                            }}
-                          >
-                            {dimension.name}
-                          </span>
-                        </Menu.Item>
-                      );
-                    })}
-                  </Menu>
-                }
-              >
-                <span>
-                  <span className={`${prefixCls}-content-item-name`}>更多</span>
-                  <DownOutlined className={`${prefixCls}-down-arrow`} />
-                </span>
-              </Dropdown>
-            </div>
-          )}
-          {drillDownDimension && (
-            <div className={`${prefixCls}-cancel-drill-down`} onClick={cancelDrillDown}>
-              取消下钻
-            </div>
-          )}
-        </div>
-      </div>
+      <DimensionSection
+        drillDownDimension={drillDownDimension}
+        dimensions={dimensions}
+        onSelectDimension={onSelectDimension}
+        onCancelDrillDown={cancelDrillDown}
+      />
+      {drillDownDimension && dimensions.length > 1 && (
+        <DimensionSection
+          drillDownDimension={secondDrillDownDimension}
+          dimensions={dimensions.filter(dimension => dimension.id !== drillDownDimension?.id)}
+          isSecondDrillDown
+          onSelectDimension={onSelectSecondDimension}
+          onCancelDrillDown={cancelSecondDrillDown}
+        />
+      )}
     </div>
   );
 };

webapp/packages/chat-sdk/src/components/DrillDownDimensions/style.less

@@ -4,25 +4,17 @@
 
 .@{drill-down-dimensions-prefix-cls} {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  column-gap: 12px;
 
   &-section {
-    width: 100%;
+    // width: 100%;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     column-gap: 6px;
   }
 
-  &-metric-card {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
-    border-radius: 8px;
-    background-color: #fff;
-    width: fit-content;
-    padding: 2px 4px;
-    font-size: 12px;
-  }
-
   &-title {
     color: var(--text-color-third);
   }