Merge pull request #1241 from lyp000119/dev

 Date Level supports all charts

Author: scottsut

frontend/src/app/components/ChartDrill/ChartDrillContextMenu.tsx

@@ -20,7 +20,7 @@ import { CheckOutlined } from '@ant-design/icons';
 import { Dropdown, Menu } from 'antd';
 import {
   ChartDataSectionType,
-  ChartDataViewFieldCategory,
+  DataViewFieldType,
   RUNTIME_DATE_LEVEL_KEY,
 } from 'app/constants';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
@@ -154,9 +154,7 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
           {drillOption?.mode !== DrillMode.Expand && selectDrillStatusMenu}
 
           {runtimeDateLevelFields?.map((v, i) => {
-            if (
-              v.category === ChartDataViewFieldCategory.DateLevelComputedField
-            ) {
+            if (v.type === DataViewFieldType.DATE) {
               return (
                 <Menu.SubMenu key={i} title={v.colName}>
                   <DateLevelMenuItems

frontend/src/app/components/ChartEditor.tsx

@@ -58,6 +58,7 @@ import { IChart } from 'app/types/Chart';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
 import { ChartDTO } from 'app/types/ChartDTO';
 import {
+  clearRuntimeDateLevelFieldsInChartConfig,
   getRuntimeComputedFields,
   getRuntimeDateLevelFields,
 } from 'app/utils/chartHelper';
@@ -224,6 +225,37 @@ export const ChartEditor: FC<ChartEditorProps> = ({
     }
   }, [dataview?.sourceId, dispatch]);
 
+  const resetOriginalComputedFields = useCallback(
+    config => {
+      const index = config?.datas?.findIndex(
+        v => v.type === ChartDataSectionType.GROUP,
+      );
+      if (index !== undefined) {
+        const groupRows = config?.datas?.[index]?.rows;
+        if (groupRows) {
+          const dateLevelComputedFields = groupRows.filter(
+            v =>
+              v.category === ChartDataViewFieldCategory.DateLevelComputedField,
+          );
+
+          const computedFields = getRuntimeComputedFields(
+            dateLevelComputedFields,
+            '',
+            dataview?.computedFields,
+            chartConfig,
+          );
+
+          dispatch(
+            workbenchSlice.actions.updateCurrentDataViewComputedFields(
+              computedFields,
+            ),
+          );
+        }
+      }
+    },
+    [chartConfig, dataview?.computedFields, dispatch],
+  );
+
   const registerChartEvents = useCallback(
     chart => {
       chart?.registerMouseEvents([
@@ -303,10 +335,12 @@ export const ChartEditor: FC<ChartEditorProps> = ({
     setChart(c);
     const targetChartConfig = CloneValueDeep(c.config);
 
-    const finalChartConfig = transferChartConfigs(
-      targetChartConfig,
-      shadowChartConfig || chartConfig,
+    const finalChartConfig = clearRuntimeDateLevelFieldsInChartConfig(
+      transferChartConfigs(targetChartConfig, shadowChartConfig || chartConfig),
     );
+
+    resetOriginalComputedFields(finalChartConfig);
+
     dispatch(
       workbenchSlice.actions.updateChartConfig({
         type: ChartConfigReducerActionType.INIT,
@@ -347,11 +381,12 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         const dateLevelComputedFields = payload.value.rows.filter(
           v => v.category === ChartDataViewFieldCategory.DateLevelComputedField,
         );
+
         const replacedColName = payload.value.replacedColName;
         const computedFields = getRuntimeComputedFields(
           dateLevelComputedFields,
           replacedColName,
-          CloneValueDeep(dataview?.computedFields),
+          dataview?.computedFields,
           chartConfig,
         );
 
@@ -361,11 +396,16 @@ export const ChartEditor: FC<ChartEditorProps> = ({
           });
         }
 
-        dispatch(
-          workbenchSlice.actions.updateCurrentDataViewComputedFields(
-            computedFields,
-          ),
-        );
+        if (
+          JSON.stringify(computedFields) !==
+          JSON.stringify(dataview?.computedFields)
+        ) {
+          dispatch(
+            workbenchSlice.actions.updateCurrentDataViewComputedFields(
+              computedFields,
+            ),
+          );
+        }
       }
 
       dispatch(
@@ -428,6 +468,8 @@ export const ChartEditor: FC<ChartEditorProps> = ({
   }, [buildDataChart, chartType, dataview, onSaveInWidget]);
 
   const saveChart = useCallback(async () => {
+    resetOriginalComputedFields(chartConfig);
+
     if (container === 'dataChart') {
       if (dataChartId) {
         await dispatch(
@@ -511,6 +553,7 @@ export const ChartEditor: FC<ChartEditorProps> = ({
     chartConfig,
     dataview?.computedFields,
     history,
+    resetOriginalComputedFields,
   ]);
 
   const saveChartToDashBoard = useCallback(

frontend/src/app/components/ChartGraph/BasicBarChart/BasicBarChart.tsx

@@ -38,7 +38,6 @@ import {
   getExtraSeriesRowData,
   getGridStyle,
   getReference2,
-  getRuntimeDateLevelFields,
   getSeriesTooltips4Rectangular2,
   getStyles,
   hadAxisLabelOverflowConfig,
@@ -130,8 +129,9 @@ class BasicBarChart extends Chart {
     const dataConfigs: ChartDataConfig[] = config.datas || [];
     const settingConfigs: ChartStyleConfig[] = config.settings || [];
 
-    const groupConfigs: ChartDataSectionField[] = getRuntimeDateLevelFields(
-      getDrillableRows(dataConfigs, drillOption),
+    const groupConfigs: ChartDataSectionField[] = getDrillableRows(
+      dataConfigs,
+      drillOption,
     );
     const aggregateConfigs: ChartDataSectionField[] = dataConfigs
       .filter(c => c.type === ChartDataSectionType.AGGREGATE)

frontend/src/app/components/ChartIFrameContainer/ChartIFrameContainer.tsx

@@ -24,11 +24,11 @@ import ChartI18NContext from 'app/pages/ChartWorkbenchPage/contexts/Chart18NCont
 import { IChart } from 'app/types/Chart';
 import { ChartConfig } from 'app/types/ChartConfig';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
+import { setRuntimeDateLevelFieldsInChartConfig } from 'app/utils/chartHelper';
 import { FC, memo } from 'react';
 import { StyleSheetManager } from 'styled-components/macro';
 import { isEmpty } from 'utils/object';
 import ChartIFrameLifecycleAdapter from './ChartIFrameLifecycleAdapter';
-
 const ChartIFrameContainer: FC<{
   dataset: any;
   chart: IChart;
@@ -42,6 +42,7 @@ const ChartIFrameContainer: FC<{
   scale?: [number, number];
 }> = memo(props => {
   const iframeContainerId = `chart-iframe-root-${props.containerId}`;
+  const config = setRuntimeDateLevelFieldsInChartConfig(props.config);
 
   const transformToSafeCSSProps = (width, height) => {
     let newStyle = { width, height };
@@ -74,7 +75,7 @@ const ChartIFrameContainer: FC<{
             <ChartIFrameLifecycleAdapter
               dataset={props.dataset}
               chart={props.chart}
-              config={props.config}
+              config={config}
               style={transformToSafeCSSProps(props?.width, props?.height)}
               widgetSpecialConfig={props.widgetSpecialConfig}
               isShown={props.isShown}
@@ -136,7 +137,7 @@ const ChartIFrameContainer: FC<{
                 <ChartIFrameLifecycleAdapter
                   dataset={props.dataset}
                   chart={props.chart}
-                  config={props.config}
+                  config={config}
                   style={transformToSafeCSSProps(props?.width, props?.height)}
                   widgetSpecialConfig={props.widgetSpecialConfig}
                   isShown={props.isShown}

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/ChartPresentPanel.tsx

@@ -28,6 +28,7 @@ import { datasetLoadingSelector } from 'app/pages/ChartWorkbenchPage/slice/selec
 import { IChart } from 'app/types/Chart';
 import { ChartConfig } from 'app/types/ChartConfig';
 import ChartDataSetDTO from 'app/types/ChartDataSet';
+import { setRuntimeDateLevelFieldsInChartConfig } from 'app/utils/chartHelper';
 import { FC, memo, useContext, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
@@ -85,6 +86,7 @@ const ChartPresentPanel: FC<{
       if (!chart?.isMatchRequirement(chartConfig)) {
         return <Chart404Graph chart={chart} chartConfig={chartConfig} />;
       }
+      chartConfig = setRuntimeDateLevelFieldsInChartConfig(chartConfig);
       return (
         !!chart &&
         chartDispatcher.getContainers(

frontend/src/app/utils/chartHelper.ts

@@ -1640,3 +1640,38 @@ export const getRuntimeComputedFields = (
   }
   return _computedFields;
 };
+
+export const clearRuntimeDateLevelFieldsInChartConfig = (
+  config: ChartConfig,
+) => {
+  return updateBy(config, draft => {
+    if (draft?.datas) {
+      const index = draft.datas.findIndex(
+        v => v.type === ChartDataSectionType.GROUP,
+      );
+      const groupRows = draft.datas[index]?.rows;
+      groupRows?.forEach((v, i) => {
+        if (groupRows[i]) {
+          delete groupRows[i][RUNTIME_DATE_LEVEL_KEY];
+        }
+      });
+    }
+  });
+};
+
+export const setRuntimeDateLevelFieldsInChartConfig = (config: ChartConfig) => {
+  return updateBy(config, draft => {
+    if (draft?.datas) {
+      const index = draft.datas.findIndex(
+        v => v.type === ChartDataSectionType.GROUP,
+      );
+      const groupRows = draft.datas[index]?.rows;
+      groupRows?.forEach((v, i) => {
+        const runtimeDateLevel = groupRows[i][RUNTIME_DATE_LEVEL_KEY];
+        if (groupRows[i].uid === runtimeDateLevel?.uid) {
+          groupRows[i] = runtimeDateLevel;
+        }
+      });
+    }
+  });
+};