[improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators (#347)

* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators
2026-04-19 13:04:21 +08:00 · 2023-11-09 05:37:36 -06:00
parent 4e139c837a
commit 18aa14118c
27 changed files with 1654 additions and 916 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
@@ -9,6 +9,7 @@ import { DownloadOutlined } from '@ant-design/icons';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { groupBy, sum } from 'lodash';
 import styles from '../style.less';
 import moment from 'moment';

@@ -17,8 +18,6 @@ type Props = {
  tip?: string;
  data: any[];
  fields: any[];
-  // columnFieldName: string;
-  // valueFieldName: string;
  loading: boolean;
  isPer?: boolean;
  isPercent?: boolean;
@@ -27,6 +26,8 @@ type Props = {
  height?: number;
  renderType?: string;
  decimalPlaces?: number;
+  rowNumber?: number;
+  groupByDimensionFieldName?: string;
  onDownload?: () => void;
 };

@@ -38,9 +39,10 @@ const TrendChart: React.FC<Props> = ({
  loading,
  isPer,
  isPercent,
-  dateFieldName,
+  dateFieldName = 'sys_imp_date',
  // columnFieldName,
-  // valueFieldName,
+  rowNumber = 0,
+  groupByDimensionFieldName,
  dateFormat,
  height,
  renderType,
@@ -64,32 +66,67 @@ const TrendChart: React.FC<Props> = ({
      new Set(
        data
          .map((item) =>
-            moment(`${(dateFieldName && item[dateFieldName]) || item.sys_imp_date}`).format(
-              dateFormat ?? 'YYYY-MM-DD',
-            ),
+            moment(`${dateFieldName && item[dateFieldName]}`).format(dateFormat ?? 'YYYY-MM-DD'),
          )
          .sort((a, b) => {
            return moment(a).valueOf() - moment(b).valueOf();
          }),
      ),
    );
-    const seriesData = fields.map((field) => {
-      const fieldData = {
-        type: 'line',
-        name: field.name,
-        symbol: 'circle',
-        showSymbol: data.length === 1,
-        smooth: true,
-        data: data.reduce((itemData, item) => {
-          const target = item[field.column];
-          if (target) {
-            itemData.push(target);
-          }
-          return itemData;
-        }, []),
-      };
-      return fieldData;
-    });
+
+    const formatterSeriesData = () => {
+      if (groupByDimensionFieldName) {
+        const groupByMap = groupBy(data, groupByDimensionFieldName);
+
+        const seriesData = Object.keys(groupByMap).map((fieldKey: string) => {
+          const dimensionDataList = groupByMap[fieldKey];
+          const dimensionDataMapByDate = dimensionDataList.reduce((itemMap, item) => {
+            itemMap[item[dateFieldName]] = { ...item };
+            return itemMap;
+          }, {});
+          const dataList = xData.reduce((itemData: any[], dateString) => {
+            const dimensionDataMapItem = dimensionDataMapByDate[dateString];
+            if (dimensionDataMapItem) {
+              itemData.push(dimensionDataMapItem[fields?.[0]?.column]);
+            } else {
+              itemData.push(0);
+            }
+            return itemData;
+          }, []);
+          return {
+            type: 'line',
+            name: fieldKey,
+            symbol: 'circle',
+            smooth: true,
+            sortNum: sum(dataList),
+            data: dataList,
+          };
+        });
+        if (rowNumber) {
+          return seriesData.sort((a, b) => b.sortNum - a.sortNum).slice(0, rowNumber);
+        }
+        return seriesData;
+      }
+      const seriesData = fields.map((field) => {
+        const fieldData = {
+          type: 'line',
+          name: field.name,
+          symbol: 'circle',
+          showSymbol: data.length === 1,
+          smooth: true,
+          data: data.reduce((itemData, item) => {
+            const target = item[field.column];
+            if (target) {
+              itemData.push(target);
+            }
+            return itemData;
+          }, []),
+        };
+        return fieldData;
+      });
+      return seriesData;
+    };
+    const seriesData = formatterSeriesData();

    instanceObj.setOption({
      legend: {
@@ -178,7 +215,18 @@ const TrendChart: React.FC<Props> = ({
      series: seriesData,
    });
    instanceObj.resize();
-  }, [data, fields, instance, isPer, isPercent, dateFieldName, decimalPlaces, renderType]);
+  }, [
+    data,
+    fields,
+    instance,
+    isPer,
+    isPercent,
+    dateFieldName,
+    decimalPlaces,
+    renderType,
+    rowNumber,
+    groupByDimensionFieldName,
+  ]);

  useEffect(() => {
    if (!loading) {
@@ -203,7 +251,7 @@ const TrendChart: React.FC<Props> = ({
      <Skeleton
        className={styles.chart}
        style={{ height, display: loading ? 'table' : 'none' }}
-        paragraph={{ rows: height && height > 300 ? 9 : 6 }}
+        paragraph={{ rows: height && height > 300 ? 15 : 6 }}
      />
      <div
        className={styles.chart}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx
@@ -5,13 +5,13 @@ import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteS
 import { queryDimValue } from '@/pages/SemanticModel/service';
 import { OperatorEnum } from '@/pages/SemanticModel/enum';
 import { isString } from 'lodash';
-import styles from '../style.less';

 const FormItem = Form.Item;

 type Props = {
-  dimensionOptions: { value: string; label: string }[];
+  dimensionOptions: OptionsItem[];
  modelId: number;
+  periodDate?: { startDate: string; endDate: string; dateField: string };
  value?: FormData;
  onChange?: (value: FormData) => void;
 };
@@ -19,20 +19,19 @@ type Props = {
 export type FormData = {
  dimensionBizName: string;
  operator: OperatorEnum;
-  dimensionValue: string | string[];
+  dimensionValue?: string | string[];
 };

 const MetricTrendDimensionFilter: React.FC<Props> = ({
  dimensionOptions,
  modelId,
  value,
+  periodDate,
  onChange,
 }) => {
  const [form] = Form.useForm();
-
  const dimensionValueSearchRef = useRef<RemoteSelectImperativeHandle>();
  const queryParams = useRef<{ dimensionBizName?: string }>({});
-
  const [formData, setFormData] = useState<FormData>({ operator: OperatorEnum.IN } as FormData);

  useEffect(() => {
@@ -47,6 +46,11 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
    if (formData.dimensionBizName) {
      queryParams.current = { dimensionBizName: formData.dimensionBizName };
      dimensionValueSearchRef.current?.emitSearch('');
+      form.setFieldValue('dimensionValue', undefined);
+      setFormData({
+        ...formData,
+        dimensionValue: undefined,
+      });
    }
  }, [formData.dimensionBizName]);

@@ -59,7 +63,17 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
      ...queryParams.current,
      value: searchValue,
      modelId,
+      // dateInfo: {},
      limit: 50,
+      ...(periodDate?.startDate
+        ? {
+            dateInfo: {
+              dateMode: 'BETWEEN',
+              startDate: periodDate.startDate,
+              endDate: periodDate.endDate,
+            },
+          }
+        : {}),
    });
    if (code === 200 && Array.isArray(data?.resultList)) {
      return data.resultList.slice(0, 50).map((item: any) => ({
@@ -109,7 +123,7 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
            placeholder="请选择筛选维度"
          />
        </FormItem>
-        <Tag color="processing" style={{ margin: 0, padding: 0 }}>
+        <Tag color="processing" style={{ margin: 0, padding: 0, height: 32 }}>
          <FormItem name="operator" noStyle>
            <Select
              style={{ minWidth: 72 }}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilterContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilterContainer.tsx
@@ -1,48 +1,95 @@
-import { Form, Select, Space, Tag, Button, Tooltip } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import React, { useEffect, useState, useRef } from 'react';
-import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteSelect';
-import { queryDimValue } from '@/pages/SemanticModel/service';
-import { OperatorEnum } from '@/pages/SemanticModel/enum';
+import { Space, Tag } from 'antd';
+import React, { useEffect, useState } from 'react';
 import MetricTrendDimensionFilter from './MetricTrendDimensionFilter';
 import type { FormData } from './MetricTrendDimensionFilter';
-import { isString } from 'lodash';
-import styles from '../style.less';
-
-const FormItem = Form.Item;

 type Props = {
-  dimensionOptions: { value: string; label: string }[];
+  dimensionOptions: OptionsItem[];
  modelId: number;
  value?: FormData;
-  onChange?: (value: FormData) => void;
+  periodDate?: { startDate: string; endDate: string; dateField: string };
+  onChange?: (value: FormData[]) => void;
+};
+
+type DimensionOptionsMapItem = {
+  dimensionBizName: string;
+  dimensionName: string;
 };

 const MetricTrendDimensionFilterContainer: React.FC<Props> = ({
  dimensionOptions,
  modelId,
+  periodDate,
  value,
  onChange,
 }) => {
  const [filterData, setFilterData] = useState<FormData[]>([]);
+  const [dimensionOptionsMap, setDimensionOptionsMap] = useState<
+    Record<string, DimensionOptionsMapItem>
+  >({});
+
+  useEffect(() => {
+    if (Array.isArray(dimensionOptions)) {
+      const dimensionDataMap = dimensionOptions.reduce(
+        (dimensionMap: Record<string, DimensionOptionsMapItem>, item: OptionsItem) => {
+          dimensionMap[item.value] = {
+            dimensionBizName: `${item.value}`,
+            dimensionName: item.label,
+          };
+          return dimensionMap;
+        },
+        {},
+      );
+      setDimensionOptionsMap(dimensionDataMap);
+    }
+  }, [dimensionOptions]);
+
  return (
    <div>
      <MetricTrendDimensionFilter
        modelId={modelId}
        dimensionOptions={dimensionOptions}
-        value={value}
+        // value={value}
+        periodDate={periodDate}
        onChange={(value) => {
-          setFilterData([...filterData, value]);
-          onChange?.(value);
+          const data = [...filterData, value];
+          setFilterData(data);
+          onChange?.(data);
        }}
      />
-      <div>
-        <Tag>
-          {filterData.map((item: FormData) => {
-            return <Tag key={item.dimensionValue}>{item.dimensionValue}</Tag>;
-          })}
-        </Tag>
-      </div>
+      <Space size={8} wrap style={{ marginTop: 10 }}>
+        {filterData.map((item: FormData, index: number) => {
+          const { dimensionBizName, dimensionValue, operator } = item;
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <Space key={`${dimensionBizName}-${dimensionValue}-${operator}-${Math.random()}`}>
+              <Tag
+                color="blue"
+                style={{ padding: 5 }}
+                closable
+                onClose={() => {
+                  const newData = [...filterData];
+                  newData.splice(index, 1);
+                  setFilterData(newData);
+                  onChange?.(newData);
+                }}
+              >
+                <span style={{ marginRight: 5 }}>
+                  {dimensionOptionsMap?.[dimensionBizName]?.dimensionName}[{operator}]:
+                </span>
+                <Tag color="purple">
+                  {Array.isArray(dimensionValue) ? dimensionValue.join('、') : dimensionValue}
+                </Tag>
+              </Tag>
+              {index !== filterData.length - 1 && (
+                <Tag color="blue" style={{ marginRight: 10 }}>
+                  <span style={{ height: 32, display: 'flex', alignItems: 'center' }}>AND</span>
+                </Tag>
+              )}
+            </Space>
+          );
+        })}
+      </Space>
    </div>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
@@ -1,31 +1,37 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { SemanticNodeType } from '../../enum';
 import moment from 'moment';
-import { message, Row, Col, Button, Space, Select, Form } from 'antd';
+import { message, Row, Col, Button, Space, Select, Form, Tooltip, Radio } from 'antd';
 import {
  queryStruct,
-  downloadCosFile,
  getDrillDownDimension,
  getDimensionList,
 } from '@/pages/SemanticModel/service';
+import {
+  InfoCircleOutlined,
+  LineChartOutlined,
+  TableOutlined,
+  DownloadOutlined,
+} from '@ant-design/icons';
+import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
 import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
-import MetricTrendDimensionFilter from './MetricTrendDimensionFilter';
+import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
 import MDatePicker from '@/components/MDatePicker';
-import { useModel } from 'umi';
 import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
-
 import StandardFormRow from '@/components/StandardFormRow';
+import MetricTable from './Table';
+import { ColumnConfig } from '../data';

 import { ISemantic } from '../../data';

 const FormItem = Form.Item;
+const { Option } = Select;

 type Props = {
-  nodeData: any;
+  metircData?: ISemantic.IMetricItem;
  [key: string]: any;
 };

-const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
+const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
  const dateFieldMap = {
    [DateRangeType.DAY]: 'sys_imp_date',
    [DateRangeType.WEEK]: 'sys_imp_week',
@@ -35,6 +41,10 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
  const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
  const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
  const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>();
+  const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
+  const [drillDownDimensions, setDrillDownDimensions] = useState<
+    ISemantic.IDrillDownDimensionItem[]
+  >(metircData?.relateDimension?.drillDownDimensions || []);
  const [authMessage, setAuthMessage] = useState<string>('');
  const [downloadLoding, setDownloadLoding] = useState<boolean>(false);
  const [relationDimensionOptions, setRelationDimensionOptions] = useState<
@@ -42,15 +52,21 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
  >([]);
  const [queryParams, setQueryParams] = useState<any>({});
  const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true);
+  // const [showDimensionOptions, setShowDimensionOptions] = useState<any[]>([]);
  const [periodDate, setPeriodDate] = useState<{
    startDate: string;
    endDate: string;
    dateField: string;
  }>({
-    startDate: moment().subtract('7', 'days').format('YYYY-MM-DD'),
+    startDate: moment().subtract('6', 'days').format('YYYY-MM-DD'),
    endDate: moment().format('YYYY-MM-DD'),
    dateField: dateFieldMap[DateRangeType.DAY],
  });
+  const [rowNumber, setRowNumber] = useState<number>(5);
+  const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
+  const [tableColumnConfig, setTableColumnConfig] = useState<ColumnConfig[]>([]);
+
+  const [groupByDimensionFieldName, setGroupByDimensionFieldName] = useState<string>();

  const getMetricTrendData = async (params: any = { download: false }) => {
    const { download, dimensionGroup, dimensionFilters } = params;
@@ -59,8 +75,10 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
    } else {
      setMetricTrendLoading(true);
    }
-
-    const { modelId, bizName, name } = nodeData;
+    if (!metircData) {
+      return;
+    }
+    const { modelId, bizName, name } = metircData;
    indicatorFields.current = [{ name, column: bizName }];
    const res = await queryStruct({
      modelId,
@@ -81,6 +99,7 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
    if (code === 200) {
      const { resultList, columns, queryAuthorization } = data;
      setMetricTrendData(resultList);
+      setTableColumnConfig(columns);
      const message = queryAuthorization?.message;
      if (message) {
        setAuthMessage(message);
@@ -139,14 +158,15 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
  };

  useEffect(() => {
-    if (nodeData?.id && nodeData?.nodeType === SemanticNodeType.METRIC) {
-      getMetricTrendData();
-      initDimensionData(nodeData);
+    if (metircData?.id) {
+      getMetricTrendData({ ...queryParams });
+      initDimensionData(metircData);
+      setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
    }
-  }, [nodeData, periodDate]);
+  }, [metircData, periodDate]);

  return (
-    <>
+    <div style={{ backgroundColor: '#fff', marginTop: 20 }}>
      <div style={{ marginBottom: 25 }}>
        <Row>
          <Col flex="1 1 200px">
@@ -158,57 +178,8 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
                if (value.key) {
                  return;
                }
-                // handleValuesChange(value, values);
              }}
            >
-              {/* <StandardFormRow key="dimensionSelected" title="维度下钻:">
-                <FormItem name="dimensionSelected">
-                  <Select
-                    style={{ minWidth: 150, maxWidth: 200 }}
-                    options={relationDimensionOptions}
-                    showSearch
-                    filterOption={(input, option) =>
-                      ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
-                    }
-                    mode="multiple"
-                    placeholder="请选择下钻维度"
-                    onChange={(value) => {
-                      const params = { ...queryParams, dimensionGroup: value || [] };
-                      setQueryParams(params);
-                      getMetricTrendData({ ...params });
-                    }}
-                  />
-                </FormItem>
-              </StandardFormRow>
-              <StandardFormRow key="dimensionFilter" title="维度筛选:">
-                <FormItem name="dimensionFilter">
-                  <MetricTrendDimensionFilter
-                    modelId={nodeData.modelId}
-                    dimensionOptions={relationDimensionOptions}
-                    onChange={(filterParams) => {
-                      const {
-                        dimensionBizName: bizName,
-                        dimensionValue: value,
-                        operator,
-                      } = filterParams;
-                      if (bizName && value && operator) {
-                        const params = {
-                          ...queryParams,
-                          dimensionFilters: [
-                            {
-                              bizName: 'user_name',
-                              value: ['williamhliu', 'leooonli'],
-                              operator: 'in',
-                            },
-                          ],
-                        };
-                        setQueryParams(params);
-                        getMetricTrendData({ ...params });
-                      }
-                    }}
-                  />
-                </FormItem>
-              </StandardFormRow> */}
              <StandardFormRow key="metricDate" title="日期区间:">
                <FormItem name="metricDate">
                  <MDatePicker
@@ -243,45 +214,209 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
                  />
                </FormItem>
              </StandardFormRow>
+              <StandardFormRow key="dimensionSelected" title="维度下钻:">
+                <FormItem name="dimensionSelected">
+                  <Select
+                    style={{ minWidth: 150, maxWidth: 200 }}
+                    options={relationDimensionOptions}
+                    showSearch
+                    filterOption={(input, option) =>
+                      ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
+                    }
+                    mode="multiple"
+                    placeholder="请选择下钻维度"
+                    onChange={(value) => {
+                      const params = { ...queryParams, dimensionGroup: value || [] };
+                      setQueryParams(params);
+                      getMetricTrendData({ ...params });
+                      setGroupByDimensionFieldName(value[value.length - 1]);
+                    }}
+                  />
+                </FormItem>
+              </StandardFormRow>
+              <StandardFormRow key="dimensionFilter" title="维度筛选:">
+                <FormItem name="dimensionFilter">
+                  <MetricTrendDimensionFilterContainer
+                    modelId={metircData?.modelId || 0}
+                    dimensionOptions={relationDimensionOptions}
+                    periodDate={periodDate}
+                    onChange={(filterList) => {
+                      const dimensionFilters = filterList.map((item) => {
+                        const { dimensionBizName, dimensionValue, operator } = item;
+                        return {
+                          bizName: dimensionBizName,
+                          value: dimensionValue,
+                          operator,
+                        };
+                      });
+                      const params = {
+                        ...queryParams,
+                        dimensionFilters,
+                      };
+                      setQueryParams(params);
+                      getMetricTrendData({ ...params });
+                    }}
+                  />
+                </FormItem>
+              </StandardFormRow>
            </Form>
          </Col>
          <Col flex="0 1">
-            <Button
-              type="primary"
-              loading={downloadLoding}
-              disabled={downloadBtnDisabledState}
-              onClick={() => {
-                getMetricTrendData({ download: true, ...queryParams });
-              }}
-            >
-              下载
-            </Button>
+            <Space>
+              {metircData?.hasAdminRes && (
+                <Button
+                  type="primary"
+                  key="addDimension"
+                  onClick={() => {
+                    setMetricRelationModalOpenState(true);
+                  }}
+                >
+                  <Space>
+                    下钻维度配置
+                    <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
+                      <InfoCircleOutlined />
+                    </Tooltip>
+                  </Space>
+                </Button>
+              )}
+              <Button
+                type="primary"
+                key="download"
+                loading={downloadLoding}
+                disabled={downloadBtnDisabledState}
+                onClick={() => {
+                  getMetricTrendData({ download: true, ...queryParams });
+                }}
+              >
+                <Space>
+                  <DownloadOutlined />
+                  下载
+                </Space>
+              </Button>
+            </Space>
          </Col>
        </Row>
      </div>
      {authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
-      <TrendChart
-        data={metricTrendData}
-        isPer={
-          metricColumnConfig?.dataFormatType === 'percent' &&
-          metricColumnConfig?.dataFormat?.needMultiply100 === false
-            ? true
-            : false
-        }
-        isPercent={
-          metricColumnConfig?.dataFormatType === 'percent' &&
-          metricColumnConfig?.dataFormat?.needMultiply100 === true
-            ? true
-            : false
-        }
-        fields={indicatorFields.current}
-        loading={metricTrendLoading}
-        dateFieldName={periodDate.dateField}
-        height={350}
-        renderType="clear"
-        decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
+      <Row style={{ marginBottom: 20 }}>
+        <Col flex="1 1 300px">
+          <Radio.Group
+            size="small"
+            buttonStyle="solid"
+            options={[
+              {
+                label: (
+                  <Tooltip title="折线图">
+                    <LineChartOutlined />
+                  </Tooltip>
+                ),
+                value: 'chart',
+              },
+              {
+                label: (
+                  <Tooltip title="表格">
+                    <TableOutlined />
+                  </Tooltip>
+                ),
+                value: 'table',
+              },
+            ]}
+            onChange={(e) => {
+              setChartType(e.target.value);
+            }}
+            value={chartType}
+            optionType="button"
+          />
+          {/* <Space>
+            <Select
+              style={{ minWidth: 150, maxWidth: 200 }}
+              options={showDimensionOptions}
+              value={groupByDimensionFieldName}
+              showSearch
+              filterOption={(input, option) =>
+                ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
+              }
+              placeholder="展示维度切换"
+              onChange={(value) => {
+                setGroupByDimensionFieldName(value);
+              }}
+            />
+          </Space> */}
+        </Col>
+        <Col flex="0 1 100px">
+          <Space>
+            <Select
+              defaultValue={rowNumber}
+              style={{
+                width: 120,
+                display:
+                  Array.isArray(queryParams.dimensionGroup) &&
+                  queryParams.dimensionGroup.length > 0 &&
+                  chartType === 'chart'
+                    ? 'block'
+                    : 'none',
+              }}
+              onChange={(value) => {
+                setRowNumber(value);
+              }}
+            >
+              <Option value={5}>前5项</Option>
+              <Option value={10}>前10项</Option>
+              <Option value={15}>前15项</Option>
+              <Option value={20}>前20项</Option>
+            </Select>
+          </Space>
+        </Col>
+      </Row>
+      {chartType === 'chart' && (
+        <TrendChart
+          data={metricTrendData}
+          isPer={
+            metricColumnConfig?.dataFormatType === 'percent' &&
+            metricColumnConfig?.dataFormat?.needMultiply100 === false
+              ? true
+              : false
+          }
+          isPercent={
+            metricColumnConfig?.dataFormatType === 'percent' &&
+            metricColumnConfig?.dataFormat?.needMultiply100 === true
+              ? true
+              : false
+          }
+          rowNumber={rowNumber}
+          fields={indicatorFields.current}
+          loading={metricTrendLoading}
+          dateFieldName={periodDate.dateField}
+          groupByDimensionFieldName={groupByDimensionFieldName}
+          height={500}
+          renderType="clear"
+          decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
+        />
+      )}
+      <div style={{ display: chartType === 'table' ? 'block' : 'none', marginBottom: 45 }}>
+        <MetricTable
+          loading={metricTrendLoading}
+          columnConfig={tableColumnConfig}
+          dataSource={metricTrendData}
+          dateFieldName={periodDate.dateField}
+          metricFieldName={indicatorFields.current?.[0]?.column}
+        />
+      </div>
+
+      <DimensionAndMetricRelationModal
+        metricItem={metircData}
+        relationsInitialValue={drillDownDimensions}
+        open={metricRelationModalOpenState}
+        onCancel={() => {
+          setMetricRelationModalOpenState(false);
+        }}
+        onSubmit={(relations) => {
+          setDrillDownDimensions(relations);
+          setMetricRelationModalOpenState(false);
+          initDimensionData(metircData!);
+        }}
      />
-    </>
+    </div>
  );
 };

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/Table.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/Table.tsx
@@ -0,0 +1,74 @@
+import { Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import styles from '../style.less';
+import { ColumnConfig } from '../data';
+
+type Props = {
+  columnConfig?: ColumnConfig[];
+  dataSource: any;
+  metricFieldName: string;
+  dateFieldName?: string;
+  loading?: boolean;
+};
+
+const MetricTable: React.FC<Props> = ({
+  columnConfig,
+  dataSource,
+  dateFieldName = 'sys_imp_date',
+  metricFieldName,
+  loading = false,
+}) => {
+  const [columns, setColumns] = useState<ColumnsType<any>>([]);
+  useEffect(() => {
+    if (Array.isArray(columnConfig)) {
+      const config: ColumnsType<any> = columnConfig.map((item: ColumnConfig) => {
+        const { name, nameEn } = item;
+        if (nameEn === dateFieldName) {
+          return {
+            title: '日期',
+            dataIndex: nameEn,
+            key: nameEn,
+            width: 120,
+            fixed: 'left',
+            defaultSortOrder: 'descend',
+            sorter: (a, b) => moment(a[nameEn]).valueOf() - moment(b[nameEn]).valueOf(),
+          };
+        }
+        if (nameEn === metricFieldName) {
+          return {
+            title: name,
+            dataIndex: nameEn,
+            key: nameEn,
+            sortDirections: ['descend'],
+            sorter: (a, b) => a[nameEn] - b[nameEn],
+          };
+        }
+        return {
+          title: name,
+          key: nameEn,
+          dataIndex: nameEn,
+        };
+      });
+      setColumns(config);
+    }
+  }, [columnConfig]);
+
+  return (
+    <div style={{ height: '100%' }}>
+      {Array.isArray(columns) && columns.length > 0 && (
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          scroll={{ x: 200, y: 700 }}
+          // pagination={{ defaultPageSize: 20 }}
+          loading={loading}
+          onChange={() => {}}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MetricTable;