[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/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}