feat: Can be formatted in view's date fields and variables

frontend/src/app/constants.ts

@@ -267,3 +267,8 @@ export enum ChartInteractionEvent {
   PagingOrSort = 'paging-sort-filter',
   ChangeContext = 'rich-text-change-context',
 }
+
+export enum DateFormat {
+  DateTime = 'YYYY-MM-DD HH:mm:ss',
+  Date = 'YYYY-MM-DD',
+}

frontend/src/app/migration/ViewConfig/migrationViewModelConfig.ts

@@ -21,7 +21,6 @@ import { CloneValueDeep } from 'utils/object';
 import { APP_VERSION_BETA_2, APP_VERSION_BETA_4 } from '../constants';
 import MigrationEvent from '../MigrationEvent';
 import MigrationEventDispatcher from '../MigrationEventDispatcher';
-
 /**
  * Migrate @see View config in beta.2 version
  * Changes:
@@ -31,7 +30,7 @@ import MigrationEventDispatcher from '../MigrationEventDispatcher';
  * @param {object} [model]
  * @return {*}  {(object | undefined)}
  */
-const beta2 = (model?: object): object | undefined => {
+const beta2 = model => {
   const clonedModel = CloneValueDeep(model) || {};
   if (model) {
     Object.keys(clonedModel).forEach(name => {
@@ -45,8 +44,8 @@ const beta2 = (model?: object): object | undefined => {
   return model;
 };
 
-const beta4 = obj => {
-  const { viewType, result } = obj;
+const beta4 = view => {
+  const { viewType, result } = view;
   try {
     result.hierarchy = addPathToHierarchyStructureAndChangeName(
       result.hierarchy,
@@ -71,13 +70,17 @@ const beginViewModelMigration = (model: string, viewType): string => {
   }
   const modelObj = JSON.parse(model);
   const event2 = new MigrationEvent(APP_VERSION_BETA_2, beta2);
-  const dispatcher = new MigrationEventDispatcher(event2);
-  const result = dispatcher.process(modelObj);
-
   const event4 = new MigrationEvent(APP_VERSION_BETA_4, beta4);
+
+  const dispatcher2 = new MigrationEventDispatcher(event2);
+  const result2 = dispatcher2.process(modelObj);
+
   const dispatcher4 = new MigrationEventDispatcher(event4);
 
-  const result4 = dispatcher4.process({ result, viewType });
+  const result4 = dispatcher4.process({
+    result: result2,
+    viewType,
+  });
 
   return JSON.stringify(result4);
 };

frontend/src/app/migration/__tests__/migrateChartConfig.test.ts

@@ -144,7 +144,7 @@ describe('test RC2 Function ', () => {
       ],
     } as any;
     const result = RC2(chartConfig as any);
-    console.log(JSON.stringify(result), 'result');
+
     expect(result.chartConfig.datas[0].rows[0].colName).toEqual(
       'birthday' + DATE_LEVEL_DELIMITER + 'AGG_DATE_YEAR',
     );

frontend/src/app/models/ChartDataRequestBuilder.ts

@@ -278,13 +278,14 @@ export class ChartDataRequestBuilder {
         }
       })
       .map(col => col);
+
     return this.normalizeFilters(fields)
       .concat(this.normalizeDrillFilters())
       .concat(this.normalizeRuntimeFilters());
   }
 
   private normalizeFilters = (fields: ChartDataSectionField[]) => {
-    const _timeConverter = (visualType, value) => {
+    const _timeConverter = (visualType, value, dateFormat = TIME_FORMATTER) => {
       if (visualType !== 'DATE') {
         return value;
       }
@@ -293,13 +294,14 @@ export class ChartDataRequestBuilder {
           value.unit,
           value.isStart,
         );
-        return formatTime(time, TIME_FORMATTER);
+        return formatTime(time, dateFormat);
       }
-      return formatTime(value, TIME_FORMATTER);
+      return formatTime(value, dateFormat);
     };
 
     const _transformFieldValues = (field: ChartDataSectionField) => {
       const conditionValue = field.filter?.condition?.value;
+      const dateFormat = field.dateFormat;
       if (!conditionValue) {
         return null;
       }
@@ -317,7 +319,11 @@ export class ChartDataRequestBuilder {
               };
             } else {
               return {
-                value: _timeConverter(field.filter?.condition?.visualType, v),
+                value: _timeConverter(
+                  field.filter?.condition?.visualType,
+                  v,
+                  dateFormat,
+                ),
                 valueType: field.type,
               };
             }
@@ -327,7 +333,10 @@ export class ChartDataRequestBuilder {
       if (
         field?.filter?.condition?.type === FilterConditionType.RecommendTime
       ) {
-        const timeRange = recommendTimeRangeConverter(conditionValue);
+        const timeRange = recommendTimeRangeConverter(
+          conditionValue,
+          dateFormat,
+        );
         return timeRange.map(t => ({
           value: t,
           valueType: field.type,
@@ -338,6 +347,7 @@ export class ChartDataRequestBuilder {
           value: _timeConverter(
             field.filter?.condition?.visualType,
             conditionValue,
+            dateFormat,
           ),
           valueType: field.type,
         },

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDraggableSourceContainer.tsx

@@ -84,6 +84,7 @@ export const ChartDraggableSourceContainer: FC<
   viewType,
   displayName,
   folderRole,
+  dateFormat,
   onDeleteComputedField,
   onEditComputedField,
   onSelectionChange,
@@ -102,7 +103,10 @@ export const ChartDraggableSourceContainer: FC<
       canDrag: true,
       item: selectedItems?.length
         ? selectedItems.map(item => buildDragItem(item))
-        : buildDragItem({ type, subType, category, name: colName }, children),
+        : buildDragItem(
+            { type, subType, category, name: colName, dateFormat },
+            children,
+          ),
       collect: monitor => ({
         isDragging: monitor.isDragging(),
       }),
@@ -338,6 +342,7 @@ export const ChartDraggableSourceContainer: FC<
           onClearCheckedList={onClearCheckedList}
           onSelectionChange={onSelectionChange}
           selectedItems={selectedItems}
+          dateFormat={item.dateFormat}
         />
       ));
   }, [

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDraggableSourceGroupContainer.tsx

@@ -132,6 +132,7 @@ export const ChartDraggableSourceGroupContainer: FC<{
               onSelectionChange={onDataItemSelectionChange}
               onClearCheckedList={onClearCheckedList}
               isActive={selectedItemsIds.includes(item.name)}
+              dateFormat={item.dateFormat}
             />
           </Item>
         )}

frontend/src/app/pages/ChartWorkbenchPage/slice/types.ts

@@ -21,7 +21,6 @@ import ChartDataSetDTO from 'app/types/ChartDataSet';
 import ChartDataView from 'app/types/ChartDataView';
 import { ChartDataViewMeta } from 'app/types/ChartDataViewMeta';
 import { ChartDTO } from 'app/types/ChartDTO';
-import { ChartDataViewFieldCategory } from 'app/constants';
 
 export type ChartConfigPayloadType = {
   init?: ChartConfig;

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/TimeSetter/TimeSetter.tsx

@@ -199,6 +199,7 @@ export const TimeSetter: React.FC<{
       </Form.Item>
     );
   }, []);
+
   return (
     <Form.Item noStyle shouldUpdate>
       {() => {
@@ -247,6 +248,7 @@ export const TimeSetter: React.FC<{
                 validateTrigger={['onChange', 'onBlur']}
                 shouldUpdate
                 rules={[{ required: true, validator: RangeTimeValidator }]}
+                style={{ marginBottom: 0 }}
               >
                 <Form.Item label={filterDataT('startTime')} shouldUpdate>
                   {renderROE(StartTimeROEName, onStartRelativeChange)}

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/ValuesSetter/ValuesSetter.tsx

@@ -80,6 +80,7 @@ export const ValuesSetter: React.FC<{
       showMarks: config?.sliderConfig?.showMarks || false,
     };
   };
+
   return (
     <>
       <Form.Item hidden noStyle preserve name={ControllerValuesName}>

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/utils.ts

@@ -28,10 +28,9 @@ import {
 } from 'app/pages/DashBoardPage/constants';
 import { VariableValueTypes } from 'app/pages/MainPage/pages/VariablePage/constants';
 import { RelationFilterValue } from 'app/types/ChartConfig';
+import { FilterSqlOperator, TIME_FORMATTER } from 'globalConstants';
 import i18next from 'i18next';
 import moment, { Moment } from 'moment';
-import { FilterSqlOperator } from '../../../../../../../globalConstants';
-import { TIME_FORMATTER } from './../../../../../../../globalConstants';
 import {
   DateControllerTypes,
   NumericalControllerTypes,

frontend/src/app/pages/MainPage/Navbar/Profile.tsx

@@ -31,6 +31,7 @@ import styled from 'styled-components/macro';
 import { SPACE_LG, SPACE_MD, SPACE_UNIT } from 'styles/StyleConstants';
 import { APIResponse } from 'types';
 import { getToken } from 'utils/auth';
+
 const FormItem = Form.Item;
 
 export function Profile({ visible, onCancel }: ModalProps) {
@@ -144,6 +145,7 @@ export function Profile({ visible, onCancel }: ModalProps) {
         <FormItem label={t('description')} name="description">
           <Input />
         </FormItem>
+
         <Form.Item wrapperCol={{ offset: 7, span: 12 }}>
           <Button
             type="primary"

frontend/src/app/pages/MainPage/pages/SourcePage/SourceDetailPage/ConfigComponent/SchemaComponent.tsx

@@ -21,7 +21,6 @@ import { SchemaTable } from 'app/pages/MainPage/pages/ViewPage/components/Schema
 import { Schema } from 'app/pages/MainPage/pages/ViewPage/slice/types';
 import { useCallback } from 'react';
 import styled from 'styled-components/macro';
-
 interface SchemaProps {
   value?: Schema[];
   dataSource?: object[];
@@ -37,13 +36,12 @@ export function SchemaComponent({ value, dataSource, onChange }: SchemaProps) {
     : {};
 
   const schemaTypeChange = useCallback(
-    name =>
-      ({ key }) => {
-        onChange &&
-          onChange(
-            value?.map(v => (v.name === name ? { ...v, type: key } : v)),
-          );
-      },
+    name => keyPath => {
+      onChange &&
+        onChange(
+          value?.map(v => (v.name === name ? { ...v, type: keyPath[0] } : v)),
+        );
+    },
     [value, onChange],
   );
 
@@ -57,6 +55,7 @@ export function SchemaComponent({ value, dataSource, onChange }: SchemaProps) {
       loading={false}
       hasCategory={false}
       pagination={false}
+      hasFormat={false}
       onSchemaTypeChange={schemaTypeChange}
       bordered
     />

frontend/src/app/pages/MainPage/pages/VariablePage/DefaultValue.tsx

@@ -17,7 +17,16 @@
  */
 
 import { CheckOutlined } from '@ant-design/icons';
-import { Button, DatePicker, Input, InputNumber, Space, Tag } from 'antd';
+import {
+  Button,
+  DatePicker,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Tag,
+} from 'antd';
+import { DateFormat } from 'app/constants';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { TIME_FORMATTER } from 'globalConstants';
 import moment from 'moment';
@@ -31,11 +40,23 @@ interface DefaultValueProps {
   expression: boolean;
   disabled?: boolean;
   value?: null | any[];
+  dateFormat?: DateFormat;
+  hasDateFormat?: boolean;
+  onChangeDateFormat?: (value) => void;
   onChange?: (value) => void;
 }
 
 export const DefaultValue = memo(
-  ({ type, expression, disabled, value = [], onChange }: DefaultValueProps) => {
+  ({
+    type,
+    expression,
+    disabled,
+    value = [],
+    dateFormat,
+    hasDateFormat = true,
+    onChange,
+    onChangeDateFormat,
+  }: DefaultValueProps) => {
     const [inputValue, setInputValue] = useState<any>(void 0);
     const t = useI18NPrefix('variable');
 
@@ -142,7 +163,7 @@ export const DefaultValue = memo(
     }
 
     return (
-      <Wrapper direction="vertical" size={0}>
+      <Wrapper direction="vertical">
         {expression || type === VariableValueTypes.Expression ? (
           <Input.TextArea
             placeholder={t('enterExpression')}
@@ -159,7 +180,7 @@ export const DefaultValue = memo(
                   const label =
                     type !== VariableValueTypes.Date
                       ? val
-                      : moment(val).format(TIME_FORMATTER);
+                      : moment(val).format(dateFormat);
                   return (
                     <Tag
                       key={label}
@@ -186,6 +207,22 @@ export const DefaultValue = memo(
             </Space>
           </>
         )}
+        {type === VariableValueTypes.Date && hasDateFormat && (
+          <Select
+            placeholder="选择日期格式"
+            className="input"
+            value={dateFormat}
+            onChange={onChangeDateFormat}
+          >
+            {Object.values(DateFormat).map(format => {
+              return (
+                <Select.Option value={format} key={format}>
+                  {format}
+                </Select.Option>
+              );
+            })}
+          </Select>
+        )}
       </Wrapper>
     );
   },

frontend/src/app/pages/MainPage/pages/VariablePage/SubjectForm/RowPermissionTable.tsx

@@ -100,8 +100,10 @@ export const RowPermissionTable = memo(
           render: (_, record) =>
             editingVariable && (
               <DefaultValue
+                dateFormat={editingVariable.dateFormat}
                 type={editingVariable.valueType}
                 expression={false}
+                hasDateFormat={false}
                 disabled={
                   !selectedRowKeys.includes(record.id) || record.useDefaultValue
                 }

frontend/src/app/pages/MainPage/pages/VariablePage/SubjectForm/index.tsx

@@ -80,6 +80,7 @@ export const SubjectForm = memo(
           const permission = roleRowPermissions.find(
             ({ subjectId }) => subjectId === id,
           );
+
           rowPermissionSubjects.push({
             id,
             name,