[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

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>
   );
 };