[feature](webapp) merge query steps to one card

2025-12-18 00:07:21 +00:00 · 2023-08-29 22:14:14 +08:00
parent 93ca060c45
commit 36fd737440
40 changed files with 994 additions and 496 deletions
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricInfo.tsx
@@ -1,7 +1,9 @@
 import { PREFIX_CLS } from '../../../common/constants';
-import { formatMetric } from '../../../utils/utils';
+import { formatMetric, formatNumberWithCN } from '../../../utils/utils';
 import { AggregateInfoType } from '../../../common/type';
 import PeriodCompareItem from '../MetricCard/PeriodCompareItem';
+import { SwapOutlined } from '@ant-design/icons';
+import { useState } from 'react';

 type Props = {
  aggregateInfo: AggregateInfoType;
@@ -14,18 +16,34 @@ const MetricInfo: React.FC<Props> = ({ aggregateInfo }) => {

  const prefixCls = `${PREFIX_CLS}-metric-info`;

+  const [isNumber, setIsNumber] = useState(false);
+  const handleNumberClick = () => {
+    setIsNumber(!isNumber);
+  };
+
  return (
    <div className={prefixCls}>
      <div className={`${prefixCls}-indicator`}>
-        <div className={`${prefixCls}-date`}>{date}</div>
-        <div className={`${prefixCls}-indicator-value`}>{formatMetric(value)}</div>
-        {metricInfos?.length > 0 && (
-          <div className={`${prefixCls}-period-compare`}>
-            {Object.keys(statistics).map((key: any) => (
-              <PeriodCompareItem title={key} value={metricInfos[0].statistics[key]} />
-            ))}
+        <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+          <div className={`${prefixCls}-indicator-value`}>
+            {isNumber ? formatMetric(value) : formatNumberWithCN(+value)}
          </div>
-        )}
+          <div className={`${prefixCls}-indicator-switch`}>
+            <SwapOutlined onClick={handleNumberClick} />
+          </div>
+        </div>
+        <div className={`${prefixCls}-bottom-section`}>
+          <div className={`${prefixCls}-date`}>
+            最新数据日期：<span className={`${prefixCls}-date-value`}>{date}</span>
+          </div>
+          {metricInfos?.length > 0 && (
+            <div className={`${prefixCls}-period-compare`}>
+              {Object.keys(statistics).map((key: any) => (
+                <PeriodCompareItem title={key} value={metricInfos[0].statistics[key]} />
+              ))}
+            </div>
+          )}
+        </div>
      </div>
    </div>
  );
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
@@ -12,6 +12,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import NoPermissionChart from '../NoPermissionChart';
+import classNames from 'classnames';

 type Props = {
  model?: string;
@@ -201,12 +202,16 @@ const MetricTrendChart: React.FC<Props> = ({

  const prefixCls = `${CLS_PREFIX}-metric-trend`;

+  const flowTrendChartClass = classNames(`${prefixCls}-flow-trend-chart`, {
+    [`${prefixCls}-flow-trend-chart-single`]: !categoryColumnName,
+  });
+
  return (
    <div>
      {!metricField.authorized ? (
        <NoPermissionChart model={model || ''} onApplyAuth={onApplyAuth} />
      ) : (
-        <div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />
+        <div className={flowTrendChartClass} ref={chartRef} />
      )}
    </div>
  );
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
@@ -9,7 +9,7 @@ import { Spin } from 'antd';
 import Table from '../Table';
 import DrillDownDimensions from '../../DrillDownDimensions';
 import MetricInfo from './MetricInfo';
-import FilterSection from '../FilterSection';
+import MetricOptions from '../../MetricOptions';

 type Props = {
  data: MsgDataType;
@@ -25,6 +25,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
  const dateOptions = DATE_TYPES[chatContext?.dateInfo?.period] || DATE_TYPES.DAY;

  const [columns, setColumns] = useState<ColumnType[]>([]);
+  const [defaultMetricField, setDefaultMetricField] = useState<FieldType>();
  const [activeMetricField, setActiveMetricField] = useState<FieldType>();
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [currentDateOption, setCurrentDateOption] = useState<number>();
@@ -58,7 +59,9 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
    })?.value;

    setColumns(queryColumns || []);
-    setActiveMetricField(chatContext?.metrics?.[0]);
+    const metricField = chatContext?.metrics?.[0];
+    setDefaultMetricField(metricField);
+    setActiveMetricField(metricField);
    setDataSource(queryResults);
    setCurrentDateOption(initialDateOption);
    setDimensions(chatContext?.dimensions);
@@ -107,7 +110,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
    });
  };

-  const onSwitchMetric = (metricField: FieldType) => {
+  const onSwitchMetric = (metricField?: FieldType) => {
    setActiveMetricField(metricField);
    onLoadData({
      dateInfo: {
@@ -116,7 +119,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
        unit: currentDateOption || chatContext.dateInfo.unit,
      },
      dimensions: drillDownDimension ? [...(dimensions || []), drillDownDimension] : undefined,
-      metrics: [metricField],
+      metrics: [metricField || defaultMetricField],
    });
  };

@@ -139,44 +142,25 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
    return null;
  }

-  const prefixCls = `${CLS_PREFIX}-metric-trend`;
+  const isMultipleMetric = chatContext?.metrics?.length > 1;
+  const existDrillDownDimension = queryMode.includes('METRIC') && !isEntityMode;

-  const hasFilterSection = dimensionFilters?.length > 0;
+  const prefixCls = `${CLS_PREFIX}-metric-trend`;

  return (
    <div className={prefixCls}>
      <div className={`${prefixCls}-charts`}>
        <div className={`${prefixCls}-top-bar`}>
-          {chatContext.metrics.length > 0 && (
-            <div className={`${prefixCls}-metric-fields`}>
-              {chatContext.metrics.slice(0, 5).map((metricField: FieldType) => {
-                const metricFieldClass = classNames(`${prefixCls}-metric-field`, {
-                  [`${prefixCls}-metric-field-active`]:
-                    activeMetricField?.bizName === metricField.bizName &&
-                    chatContext.metrics.length > 1,
-                  [`${prefixCls}-metric-field-single`]: chatContext.metrics.length === 1,
-                });
-                return (
-                  <div
-                    className={metricFieldClass}
-                    key={metricField.bizName}
-                    onClick={() => {
-                      if (chatContext.metrics.length > 1) {
-                        onSwitchMetric(metricField);
-                      }
-                    }}
-                  >
-                    {metricField.name}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-          {(hasFilterSection || drillDownDimension) && (
+          <div
+            className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}
+            key={activeMetricField?.bizName}
+          >
+            {activeMetricField?.name}
+          </div>
+          {drillDownDimension && (
            <div className={`${prefixCls}-filter-section-wrapper`}>
              (
              <div className={`${prefixCls}-filter-section`}>
-                <FilterSection chatContext={chatContext} />
                {drillDownDimension && (
                  <div className={`${prefixCls}-filter-item`}>
                    <div className={`${prefixCls}-filter-item-label`}>下钻维度：</div>
@@ -192,7 +176,7 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
        </div>
        <Spin spinning={loading}>
          <div className={`${prefixCls}-content`}>
-            {aggregateInfoValue?.metricInfos?.length > 0 && (
+            {!isMobile && aggregateInfoValue?.metricInfos?.length > 0 && (
              <MetricInfo aggregateInfo={aggregateInfoValue} />
            )}
            <div className={`${prefixCls}-date-options`}>
@@ -236,13 +220,25 @@ const MetricTrend: React.FC<Props> = ({ data, chartIndex, triggerResize, onApply
              />
            )}
          </div>
-          {queryMode.includes('METRIC') && !isEntityMode && (
-            <DrillDownDimensions
-              modelId={chatContext.modelId}
-              drillDownDimension={drillDownDimension}
-              dimensionFilters={chatContext.dimensionFilters}
-              onSelectDimension={onSelectDimension}
-            />
+          {(isMultipleMetric || existDrillDownDimension) && (
+            <div className={`${prefixCls}-bottom-tools`}>
+              {isMultipleMetric && (
+                <MetricOptions
+                  metrics={chatContext.metrics}
+                  defaultMetric={defaultMetricField}
+                  currentMetric={activeMetricField}
+                  onSelectMetric={onSwitchMetric}
+                />
+              )}
+              {existDrillDownDimension && (
+                <DrillDownDimensions
+                  modelId={chatContext.modelId}
+                  drillDownDimension={drillDownDimension}
+                  dimensionFilters={chatContext.dimensionFilters}
+                  onSelectDimension={onSelectDimension}
+                />
+              )}
+            </div>
          )}
        </Spin>
      </div>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/style.less
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/style.less
@@ -24,6 +24,7 @@
    display: flex;
    align-items: center;
    color: var(--text-color-third);
+    margin-left: 4px;
  }

  &-filter-section {
@@ -58,7 +59,7 @@
  &-indicator {
    display: flex;
    flex-direction: column;
-    align-items: flex-start;
+    align-items: baseline;
    justify-content: center;
  }

@@ -83,11 +84,15 @@
    height: 230px;
  }

+  &-flow-trend-chart-single {
+    height: 180px;
+  }
+
  &-charts {
    display: flex;
    flex-direction: column;
    width: 100%;
-    row-gap: 12px;
+    row-gap: 4px;
  }

  &-metric-fields {
@@ -123,11 +128,6 @@
    }
  }

-  &-metric-field-active {
-    color: #fff !important;
-    background-color: var(--chat-blue);
-  }
-
  &-metric-field-single {
    padding-left: 0;
    font-weight: 500;
@@ -165,6 +165,13 @@
    font-size: 12px;
  }

+  &-bottom-tools {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+    font-size: 14px;
+  }
+
  &-active-identifier {
    position: absolute;
    bottom: -6px;
@@ -184,14 +191,8 @@
 .@{metric-info-prefix-cls} {
  &-indicator {
    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
-
-  &-date {
-    color: var(--text-color-fourth);
-    font-size: 12px;
+    align-items: baseline;
+    column-gap: 12px;
  }

  &-indicator-value {
@@ -203,12 +204,33 @@
    color: var(--text-color-secondary);
  }

-  &-period-compare {
-    width: 100%;
+  &-bottom-section {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+    margin-top: 4px;
+  }
+
+  &-date {
+    color: var(--text-color-fourth);
+    font-size: 13px;
+  }
+
+  &-date-value {
+    color: var(--chat-blue);
+  }
+
+  &-indicator-switch {
+    color: var(--text-color-fourth);
+    font-size: 18px;
+    margin-left: 6px;
+    margin-bottom: 3px;
+  }
+
+  &-period-compare {
    display: flex;
    align-items: center;
    column-gap: 20px;
-    margin-top: 2px;
    font-size: 13px;
    overflow-x: auto;
  }