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

2025-12-20 06:34:55 +00:00 · 2023-11-25 11:13:10 +08:00
parent fe2a424718
commit 0534053ff9
17 changed files with 251 additions and 127 deletions
--- a/webapp/packages/chat-sdk/src/components/DrillDownDimensions/DimensionSection.tsx
+++ b/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;