feat(widget-config): refactor widget-config & refactor date-range com…

…posable (#5231) * chore: edit config Signed-off-by: samuel.park <[email protected]> * feat(widget-config): refactor widget-config & refactor date-range composable Signed-off-by: samuel.park <[email protected]> --------- Signed-off-by: samuel.park <[email protected]>
cloudforet-io · Dec 17, 2024 · 7943ae2 · 7943ae2
1 parent 16a1821
commit 7943ae2
Show file tree

Hide file tree

Showing 23 changed files with 64 additions and 46 deletions.
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-date-range.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-date-range.ts
@@ -6,17 +6,19 @@ import dayjs from 'dayjs';
 import { getDateFormat } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { DATE_RANGE_ADVANCED_OPERATOR_MAP } from '@/common/modules/widgets/_widget-fields/date-range/constant';
 import type { DateRangeValue, DateRangeValueType } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 
 
 interface UseWidgetDateRangeOptions {
     dateRangeFieldValue: ComputedRef<DateRangeValue>;
     baseOnDate: ComputedRef<string|undefined>;
-    granularity: ComputedRef<string>;
+    granularity: ComputedRef<GranularityValue>;
     usePreviewFormat?: boolean;
 }
 
 interface UseWidgetDateRangeState {
+    granularity: ComputedRef<GranularityValue['granularity']>;
     isInherit: ComputedRef<boolean>;
     dateRangeOptions: ComputedRef<DateRangeValue['options']>;
     dateRange: ComputedRef<DateRange>;
@@ -30,11 +32,12 @@ interface UseWidgetDateRangeReturnType {
 export const useWidgetDateRange = (options: UseWidgetDateRangeOptions): UseWidgetDateRangeReturnType => {
     const {
         baseOnDate: _baseOnDate,
-        granularity: _granularity,
+        granularity: _granularityInfo,
         usePreviewFormat: _usePreviewFormat,
     } = options;
 
     const state = reactive<UseWidgetDateRangeState>({
+        granularity: computed<GranularityValue['granularity']>(() => _granularityInfo.value?.granularity ?? 'MONTHLY'),
         isInherit: computed<boolean>(() => !!options.dateRangeFieldValue.value?.inherit),
         dateRangeOptions: computed<DateRangeValue['options']>(() => options.dateRangeFieldValue.value?.options || 'auto'),
         baseOnDate: computed<string|undefined>(() => (state.isInherit ? _baseOnDate.value : undefined)),
@@ -43,17 +46,17 @@ export const useWidgetDateRange = (options: UseWidgetDateRangeOptions): UseWidge
             const { start: _start, end: _end } = state.dateRangeOptions || {};
 
             if (dateRangePresetKey === 'custom') {
-                return state.isInherit ? getWidgetDateRangeByCustomRelativeNumberUnit(_granularity.value, state.baseOnDate, _start, _end)
-                    : getWidgetDateRangeByCustomFixedDateRange(_granularity.value, _start, _end);
+                return state.isInherit ? getWidgetDateRangeByCustomRelativeNumberUnit(state.granularity, state.baseOnDate, _start, _end)
+                    : getWidgetDateRangeByCustomFixedDateRange(state.granularity, _start, _end);
             } if (dateRangePresetKey === 'advanced') {
                 const { start_operator: _startOperator, end_operator: _endOperator } = state.dateRangeOptions || {};
                 const startValue: number = _startOperator === DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD ? _start || 0 : (_start || 0) * -1;
                 const endValue: number = _endOperator === DATE_RANGE_ADVANCED_OPERATOR_MAP.ADD ? _end || 0 : (_end || 0) * -1;
 
-                return getWidgetDateRangeByAdvancedDiffValue(_granularity.value, state.baseOnDate, startValue, endValue, _usePreviewFormat);
+                return getWidgetDateRangeByAdvancedDiffValue(state.granularity, state.baseOnDate, startValue, endValue, _usePreviewFormat);
             }
 
-            return getWidgetDateRangeByPresetKey(_granularity.value, state.baseOnDate, dateRangePresetKey, _usePreviewFormat);
+            return getWidgetDateRangeByPresetKey(state.granularity, state.baseOnDate, dateRangePresetKey, _usePreviewFormat);
         }),
     });
 

diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
@@ -45,6 +45,7 @@ import {
 import type { DateFormatValue } from '@/common/modules/widgets/_widget-fields/date-format/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-fields/display-series-label/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TableDataFieldValue } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
@@ -73,9 +74,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({

diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/widget-config.ts
@@ -17,7 +17,7 @@ const clusteredColumnChart: WidgetConfig = {
                 max: 31,
             },
         },
-        tableDataField: {},
+        dataField: {},
     },
     optionalFieldsSchema: {
         legend: {

diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
@@ -29,6 +29,7 @@ import {
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import type { AdvancedFormatRulesValue } from '@/common/modules/widgets/_widget-fields/advanced-format-rules/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group-by/type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetLegend } from '@/common/modules/widgets/types/widget-legend-typs';
@@ -44,9 +45,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
     loading: false,

diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts
@@ -1,4 +1,4 @@
-import { ADVANCED_FORMAT_RULE_TYPE } from '@/common/modules/widgets/_constants/widget-field-constant';
+import { _FORMAT_RULE_TYPE } from '@/common/modules/widgets/_constants/widget-field-constant';
 import type { WidgetConfig } from '@/common/modules/widgets/types/widget-config-type';
 
 
@@ -23,9 +23,10 @@ const colorCodedHeatmap: WidgetConfig = {
                 excludeDateField: true,
             },
         },
-        advancedFormatRules: {
+        formatRules: {
             options: {
-                formatRulesType: ADVANCED_FORMAT_RULE_TYPE.field,
+                useField: true,
+                formatRulesType: _FORMAT_RULE_TYPE.textThreshold,
                 description: 'COMMON.WIDGETS.ADVANCED_FORMAT_RULES.COLOR_CODED_HEATMAP_DESC',
             },
         },

diff --git a/.../src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/.../src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
@@ -35,6 +35,7 @@ import {
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
 import type { AdvancedFormatRulesValue } from '@/common/modules/widgets/_widget-fields/advanced-format-rules/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TableDataFieldValue } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
@@ -58,9 +59,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
     loading: false,

diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/widget-config.ts
@@ -1,4 +1,4 @@
-import { ADVANCED_FORMAT_RULE_TYPE } from '@/common/modules/widgets/_constants/widget-field-constant';
+import { _FORMAT_RULE_TYPE } from '@/common/modules/widgets/_constants/widget-field-constant';
 import type { WidgetConfig } from '@/common/modules/widgets/types/widget-config-type';
 
 
@@ -21,10 +21,10 @@ const colorCodedTableHeatmap: WidgetConfig = {
                 max: 31,
             },
         },
-        tableDataField: {},
-        advancedFormatRules: {
+        dataField: {},
+        formatRules: {
             options: {
-                formatRulesType: ADVANCED_FORMAT_RULE_TYPE.textThreshold,
+                formatRulesType: _FORMAT_RULE_TYPE.textNumberTreshold,
                 description: 'COMMON.WIDGETS.ADVANCED_FORMAT_RULES.COLOR_CODED_TABLE_HEATMAP_DESC',
             },
         },

diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -27,6 +27,7 @@ import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/u
 import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { FormatRulesValue } from '@/common/modules/widgets/_widget-fields/format-rules/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type {
     WidgetProps, WidgetEmit,
@@ -44,9 +45,9 @@ const emit = defineEmits<WidgetEmit>();
 
 const chartContext = ref<HTMLElement|null>(null);
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
     loading: false,

diff --git a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
@@ -29,6 +29,7 @@ import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-wi
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
 import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { WidgetLoadData } from '@/common/modules/widgets/types/widget-data-type';
 import type {
@@ -44,9 +45,9 @@ const emit = defineEmits<WidgetEmit>();
 const REGION_FIELD = 'Region';
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
 const allReferenceStore = useAllReferenceStore();

diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -41,6 +41,7 @@ import {
 import type { ColorSchemaValue, ColorValue } from '@/common/modules/widgets/_widget-fields/color-schema/type';
 import type { DateFormatValue } from '@/common/modules/widgets/_widget-fields/date-format/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { TableDataFieldValue } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
@@ -57,9 +58,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({

diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/heatmap/widget-config.ts
@@ -21,7 +21,7 @@ const heatmap: WidgetConfig = {
                 defaultIndex: 0,
             },
         },
-        tableDataField: {},
+        dataField: {},
         colorSchema: {},
     },
     optionalFieldsSchema: {

diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
@@ -41,6 +41,7 @@ import { getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuery } from '@/common/
 import type { DateFormatValue } from '@/common/modules/widgets/_widget-fields/date-format/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-fields/display-series-label/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { MissingValueValue } from '@/common/modules/widgets/_widget-fields/missing-value/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
@@ -60,9 +61,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({

diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/line-chart/widget-config.ts
@@ -17,7 +17,7 @@ const lineChart: WidgetConfig = {
                 max: 31,
             },
         },
-        tableDataField: {},
+        dataField: {},
     },
     optionalFieldsSchema: {
         legend: {

diff --git a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
@@ -30,6 +30,7 @@ import {
 import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { ComparisonValue } from '@/common/modules/widgets/_widget-fields/comparison/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { IconValue } from '@/common/modules/widgets/_widget-fields/icon/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type {
@@ -50,9 +51,9 @@ const topPartRef = ref<null | HTMLElement>(null);
 const valueTextRef = ref<null | HTMLElement>(null);
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const state = reactive({
     loading: false,

diff --git a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
@@ -40,6 +40,7 @@ import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-hel
 import type { DateFormatValue } from '@/common/modules/widgets/_widget-fields/date-format/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-fields/display-series-label/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group-by/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
@@ -58,9 +59,9 @@ type Data = ListResponse<{
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({

diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-area-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/stacked-area-chart/widget-config.ts
@@ -17,7 +17,7 @@ const stackedAreaChart: WidgetConfig = {
                 max: 31,
             },
         },
-        tableDataField: {},
+        dataField: {},
     },
     optionalFieldsSchema: {
         legend: {

diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
@@ -42,6 +42,7 @@ import { getWidgetLoadApiQueryDateRange, getWidgetLoadApiQuery } from '@/common/
 import type { DateFormatValue } from '@/common/modules/widgets/_widget-fields/date-format/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-fields/display-series-label/type';
+import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TableDataFieldValue } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
@@ -61,9 +62,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const { dateRange } = useWidgetDateRange({
-    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange as DateRangeValue)),
+    dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
     baseOnDate: computed(() => props.dashboardOptions?.date_range?.end),
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
+    granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({