Merge pull request #1234 from scottsut/fix

refactor: date level naming improvement

Author: SoarBlueSky

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

@@ -21,14 +21,14 @@ import { Dropdown, Menu } from 'antd';
 import {
   ChartDataSectionType,
   ChartDataViewFieldCategory,
-  interimDateAggregatedKey,
+  RUNTIME_DATE_LEVEL_KEY,
 } from 'app/constants';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { DrillMode } from 'app/models/ChartDrillOption';
-import DateMeunItem from 'app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateAggregationAction/DateMeunItem';
+import DateLevelMenuItems from 'app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartFieldAction/DateLevelAction/DateLevelMenuItems';
 import ChartDrillContext from 'app/pages/ChartWorkbenchPage/contexts/ChartDrillContext';
 import { ChartConfig, ChartDataSectionField } from 'app/types/ChartConfig';
-import { getInterimDateAggregateRows } from 'app/utils/chartHelper';
+import { getRuntimeDateLevelFields } from 'app/utils/chartHelper';
 import { updateBy } from 'app/utils/mutation';
 import classnames from 'classnames';
 import { FC, memo, useCallback, useContext, useMemo } from 'react';
@@ -41,17 +41,18 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
     const {
       drillOption,
       onDrillOptionChange,
-      sourceSupportDateField,
-      onChartDrillDataAggregationChange,
+      availableSourceFunctions,
+      onDateLevelChange,
     } = useContext(ChartDrillContext);
-    const currentFields = drillOption?.getCurrentFields();
+
     const currentDrillLevel = drillOption?.getCurrentDrillLevel();
 
-    const currentDrillField = useMemo(() => {
+    const runtimeDateLevelFields = useMemo(() => {
       if (!drillOption) {
         return;
       }
       const allFields = drillOption.getAllFields();
+      const currentFields = drillOption.getCurrentFields();
       const groupSection = chartConfig?.datas?.find(
         v => v.type === ChartDataSectionType.GROUP,
       );
@@ -64,10 +65,10 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
       } else {
         rows = groupSection?.rows?.filter(v => v.uid === allFields[0].uid);
       }
-      return getInterimDateAggregateRows(rows);
-    }, [currentFields, drillOption, chartConfig?.datas]);
+      return getRuntimeDateLevelFields(rows);
+    }, [drillOption, chartConfig?.datas]);
 
-    const handleChangeDataAggregate = useCallback(
+    const handleDateLevelChange = useCallback(
       (config: ChartDataSectionField) => {
         const groupData = chartConfig?.datas?.find(
           v => v.type === ChartDataSectionType.GROUP,
@@ -77,25 +78,25 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
           const _groupData = updateBy(groupData, draft => {
             if (draft.rows) {
               const index = draft.rows.findIndex(v => v.uid === config.uid);
-              const interimDateAggregatedValue =
-                draft.rows[index][interimDateAggregatedKey];
-              const deleteColName = interimDateAggregatedValue
-                ? interimDateAggregatedValue.colName
+              const runtimeDateLevel =
+                draft.rows[index][RUNTIME_DATE_LEVEL_KEY];
+              const replacedColName = runtimeDateLevel
+                ? runtimeDateLevel.colName
                 : draft.rows[index].colName;
 
-              draft.rows[index][interimDateAggregatedKey] = config;
-              draft.deleteColName = deleteColName;
+              draft.rows[index][RUNTIME_DATE_LEVEL_KEY] = config;
+              draft.replacedColName = replacedColName;
             }
           });
 
-          onChartDrillDataAggregationChange?.('data', {
+          onDateLevelChange?.('data', {
             needRefresh: true,
             ancestors: [0],
             value: _groupData,
           });
         }
       },
-      [chartConfig?.datas, onChartDrillDataAggregationChange],
+      [chartConfig?.datas, onDateLevelChange],
     );
 
     const selectDrillStatusMenu = useMemo(() => {
@@ -114,6 +115,7 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
         </Menu.Item>
       );
     }, [drillOption?.isSelectedDrill, t]);
+
     const contextMenu = useMemo(() => {
       return (
         <StyledChartDrillMenu
@@ -151,16 +153,16 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
             )}
           {drillOption?.mode !== DrillMode.Expand && selectDrillStatusMenu}
 
-          {currentDrillField?.map((v, i) => {
+          {runtimeDateLevelFields?.map((v, i) => {
             if (
-              v.category === ChartDataViewFieldCategory.DateAggregationField
+              v.category === ChartDataViewFieldCategory.DateLevelComputedField
             ) {
               return (
                 <Menu.SubMenu key={i} title={v.colName}>
-                  <DateMeunItem
-                    sourceSupportDateField={sourceSupportDateField}
-                    config={v[interimDateAggregatedKey] || v}
-                    onChange={config => handleChangeDataAggregate(config)}
+                  <DateLevelMenuItems
+                    availableSourceFunctions={availableSourceFunctions}
+                    config={v[RUNTIME_DATE_LEVEL_KEY] || v}
+                    onChange={config => handleDateLevelChange(config)}
                   />
                 </Menu.SubMenu>
               );
@@ -174,10 +176,10 @@ const ChartDrillContextMenu: FC<{ chartConfig?: ChartConfig }> = memo(
       t,
       drillOption,
       selectDrillStatusMenu,
+      runtimeDateLevelFields,
       onDrillOptionChange,
-      currentDrillField,
-      handleChangeDataAggregate,
-      sourceSupportDateField,
+      handleDateLevelChange,
+      availableSourceFunctions,
     ]);
 
     return (

frontend/src/app/components/ChartEditor.tsx

@@ -37,11 +37,11 @@ import {
   chartConfigSelector,
   currentDataViewSelector,
   datasetsSelector,
+  selectAvailableSourceFunctions,
   shadowChartConfigSelector,
-  sourceSupportDateFieldSelector,
 } from 'app/pages/ChartWorkbenchPage/slice/selectors';
 import {
-  fetchsourceSupportDateField,
+  fetchAvailableSourceFunctions,
   initWorkbenchAction,
   refreshDatasetAction,
   updateChartAction,
@@ -58,8 +58,8 @@ import { IChart } from 'app/types/Chart';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
 import { ChartDTO } from 'app/types/ChartDTO';
 import {
-  getInterimDateAggregateRows,
-  handledateAggregaeToComputedFields,
+  getRuntimeComputedFields,
+  getRuntimeDateLevelFields,
 } from 'app/utils/chartHelper';
 import { makeDownloadDataTask } from 'app/utils/fetch';
 import {
@@ -132,7 +132,7 @@ export const ChartEditor: FC<ChartEditorProps> = ({
   const shadowChartConfig = useSelector(shadowChartConfigSelector);
   const backendChart = useSelector(backendChartSelector);
   const aggregation = useSelector(aggregationSelector);
-  const sourceSupportDateField = useSelector(sourceSupportDateFieldSelector);
+  const availableSourceFunctions = useSelector(selectAvailableSourceFunctions);
   const [chart, setChart] = useState<IChart>();
   const drillOptionRef = useRef<IChartDrillOption>();
 
@@ -220,7 +220,7 @@ export const ChartEditor: FC<ChartEditorProps> = ({
 
   useEffect(() => {
     if (dataview?.sourceId) {
-      dispatch(fetchsourceSupportDateField({ sourceId: dataview.sourceId }));
+      dispatch(fetchAvailableSourceFunctions({ sourceId: dataview.sourceId }));
     }
   }, [dataview?.sourceId, dispatch]);
 
@@ -340,20 +340,20 @@ export const ChartEditor: FC<ChartEditorProps> = ({
         return true;
       }
       if (payload.value.type !== ChartDataSectionType.FILTER) {
-        const dateAggregationField = payload.value.rows.filter(
-          v => v.category === ChartDataViewFieldCategory.DateAggregationField,
+        const dateLevelComputedFields = payload.value.rows.filter(
+          v => v.category === ChartDataViewFieldCategory.DateLevelComputedField,
         );
-        const deleteColName = payload.value.deleteColName;
-        const computedFields = handledateAggregaeToComputedFields(
-          dateAggregationField,
-          deleteColName,
+        const replacedColName = payload.value.replacedColName;
+        const computedFields = getRuntimeComputedFields(
+          dateLevelComputedFields,
+          replacedColName,
           CloneValueDeep(dataview?.computedFields),
           chartConfig,
         );
 
-        if (deleteColName) {
+        if (replacedColName) {
           payload = updateBy(payload, draft => {
-            delete draft.value.deleteColName;
+            delete draft.value.replacedColName;
           });
         }
 
@@ -588,15 +588,15 @@ export const ChartEditor: FC<ChartEditorProps> = ({
     dispatch(refreshDatasetAction({ drillOption: option }));
   };
 
-  const handleDrillDataAggregationChange = (type, payload) => {
-    const rows = getInterimDateAggregateRows(payload.value?.rows);
-    const dateAggregationField = rows.filter(
-      v => v.category === ChartDataViewFieldCategory.DateAggregationField,
+  const handleDateLevelChange = (type, payload) => {
+    const rows = getRuntimeDateLevelFields(payload.value?.rows);
+    const dateLevelComputedFields = rows.filter(
+      v => v.category === ChartDataViewFieldCategory.DateLevelComputedField,
     );
-    const deleteColName = payload.value.deleteColName;
-    const computedFields = handledateAggregaeToComputedFields(
-      dateAggregationField,
-      deleteColName,
+    const replacedColName = payload.value.replacedColName;
+    const computedFields = getRuntimeComputedFields(
+      dateLevelComputedFields,
+      replacedColName,
       dataview?.computedFields,
       chartConfig,
     );
@@ -647,14 +647,14 @@ export const ChartEditor: FC<ChartEditorProps> = ({
           defaultViewId={defaultViewId}
           expensiveQuery={expensiveQuery}
           allowQuery={allowQuery}
-          sourceSupportDateField={sourceSupportDateField}
+          availableSourceFunctions={availableSourceFunctions}
           onChartChange={handleChartChange}
           onChartConfigChange={handleChartConfigChange}
           onChartDrillOptionChange={handleDrillOptionChange}
           onDataViewChange={handleDataViewChanged}
           onRefreshDataset={handleRefreshDataset}
           onCreateDownloadDataTask={handleCreateDownloadDataTask}
-          onChartDrillDataAggregationChange={handleDrillDataAggregationChange}
+          onDateLevelChange={handleDateLevelChange}
         />
         <SaveForm
           width={400}

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

@@ -37,8 +37,8 @@ import {
   getExtraSeriesDataFormat,
   getExtraSeriesRowData,
   getGridStyle,
-  getInterimDateAggregateRows,
   getReference2,
+  getRuntimeDateLevelFields,
   getSeriesTooltips4Rectangular2,
   getStyles,
   hadAxisLabelOverflowConfig,
@@ -130,7 +130,7 @@ class BasicBarChart extends Chart {
     const dataConfigs: ChartDataConfig[] = config.datas || [];
     const settingConfigs: ChartStyleConfig[] = config.settings || [];
 
-    const groupConfigs: ChartDataSectionField[] = getInterimDateAggregateRows(
+    const groupConfigs: ChartDataSectionField[] = getRuntimeDateLevelFields(
       getDrillableRows(dataConfigs, drillOption),
     );
     const aggregateConfigs: ChartDataSectionField[] = dataConfigs

frontend/src/app/constants.ts

@@ -81,7 +81,7 @@ export enum ChartDataViewFieldCategory {
   Variable = 'variable',
   ComputedField = 'computedField',
   AggregateComputedField = 'aggregateComputedField',
-  DateAggregationField = 'dateAggregationField',
+  DateLevelComputedField = 'dateLevelComputedField',
 }
 
 export enum SortActionType {
@@ -158,7 +158,7 @@ export const ChartDataSectionFieldActionType = {
   ColorRange: 'colorRange',
   ColorizeSingle: 'colorSingle',
   Size: 'size',
-  DateAggregate: 'dateAggregate',
+  DateLevel: 'dateLevel',
 };
 
 export const FilterRelationType = {
@@ -225,4 +225,4 @@ export enum DownloadFileType {
   'Image' = 'IMAGE',
 }
 
-export const interimDateAggregatedKey = Symbol('DateAggregated');
+export const RUNTIME_DATE_LEVEL_KEY = Symbol('DateLevel');

frontend/src/app/models/ChartDataRequestBuilder.ts

@@ -36,7 +36,7 @@ import {
 import { ChartDatasetPageInfo } from 'app/types/ChartDataSet';
 import ChartDataView from 'app/types/ChartDataView';
 import { IChartDrillOption } from 'app/types/ChartDrillOption';
-import { getInterimDateAggregateRows, getValue } from 'app/utils/chartHelper';
+import { getRuntimeDateLevelFields, getValue } from 'app/utils/chartHelper';
 import { transformToViewConfig } from 'app/utils/internalChartHelper';
 import {
   formatTime,
@@ -143,7 +143,7 @@ export class ChartDataRequestBuilder {
           return acc.concat(cur.rows || []);
         }
         if (cur.type === ChartDataSectionType.GROUP) {
-          const rows = getInterimDateAggregateRows(cur.rows);
+          const rows = getRuntimeDateLevelFields(cur.rows);
 
           if (cur.drillable) {
             if (

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDataConfigSection/GroupTypeSection.tsx

@@ -42,7 +42,7 @@ const GroupTypeSection: FC<ChartDataConfigSectionProps> = memo(
           [DataViewFieldType.DATE]: [
             ChartDataSectionFieldActionType.Alias,
             ChartDataSectionFieldActionType.Sortable,
-            ChartDataSectionFieldActionType.DateAggregate,
+            ChartDataSectionFieldActionType.DateLevel,
           ],
         },
       },

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDataConfigSection/MixedTypeSection.tsx

@@ -44,7 +44,7 @@ const MixedTypeSection: FC<ChartDataConfigSectionProps> = memo(
           [DataViewFieldType.DATE]: [
             ChartDataSectionFieldActionType.Alias,
             ChartDataSectionFieldActionType.Sortable,
-            ChartDataSectionFieldActionType.DateAggregate,
+            ChartDataSectionFieldActionType.DateLevel,
           ],
         },
       },

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

@@ -228,7 +228,7 @@ const ChartDataViewPanel: FC<{
 
   const sortedMetaFields = useMemo(() => {
     const computedFields = dataView?.computedFields?.filter(
-      v => v.category !== ChartDataViewFieldCategory.DateAggregationField,
+      v => v.category !== ChartDataViewFieldCategory.DateLevelComputedField,
     );
     const allFields = (dataView?.meta || []).concat(computedFields || []);
     const hierarchyFields = allFields.filter(