From b0dcbf36c9e7e4c3cd4cd21f27963d41cae4bebb Mon Sep 17 00:00:00 2001 From: Yongtae Park Date: Tue, 17 Dec 2024 11:47:32 +0900 Subject: [PATCH 1/2] chore: edit config Signed-off-by: samuel.park --- .../widgets/_widgets/clustered-column-chart/widget-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 4a63974de8..a05b5abb0f 100644 --- 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: { From 40df4566465dbe267e61bfbed69489318ee8bb16 Mon Sep 17 00:00:00 2001 From: Yongtae Park Date: Tue, 17 Dec 2024 11:59:45 +0900 Subject: [PATCH 2/2] feat(widget-config): refactor widget-config & refactor date-range composable Signed-off-by: samuel.park --- .../widgets/_composables/use-widget-date-range.ts | 15 +++++++++------ .../ClusteredColumnChart.vue | 5 +++-- .../color-coded-heatmap/ColorCodedHeatmap.vue | 5 +++-- .../_widgets/color-coded-heatmap/widget-config.ts | 7 ++++--- .../ColorCodedTableHeatmap.vue | 5 +++-- .../color-coded-table-heatmap/widget-config.ts | 8 ++++---- .../modules/widgets/_widgets/gauge/Gauge.vue | 5 +++-- .../modules/widgets/_widgets/geo-map/GeoMap.vue | 5 +++-- .../modules/widgets/_widgets/heatmap/Heatmap.vue | 5 +++-- .../widgets/_widgets/heatmap/widget-config.ts | 2 +- .../widgets/_widgets/line-chart/LineChart.vue | 5 +++-- .../widgets/_widgets/line-chart/widget-config.ts | 2 +- .../widgets/_widgets/number-card/NumberCard.vue | 5 +++-- .../widgets/_widgets/pie-chart/PieChart.vue | 5 +++-- .../_widgets/stacked-area-chart/widget-config.ts | 2 +- .../stacked-column-chart/StackedColumnChart.vue | 5 +++-- .../stacked-column-chart/widget-config.ts | 2 +- .../StackedHorizontalBarChart.vue | 5 +++-- .../stacked-horizontal-bar-chart/widget-config.ts | 2 +- .../widgets/_widgets/table/widget-config.ts | 7 +++++-- .../modules/widgets/_widgets/treemap/Treemap.vue | 5 +++-- .../widgets/_widgets/treemap/widget-config.ts | 1 - 22 files changed, 63 insertions(+), 45 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 index f4b8c4e91b..511edccbfa 100644 --- 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; baseOnDate: ComputedRef; - granularity: ComputedRef; + granularity: ComputedRef; usePreviewFormat?: boolean; } interface UseWidgetDateRangeState { + granularity: ComputedRef; isInherit: ComputedRef; dateRangeOptions: ComputedRef; dateRange: ComputedRef; @@ -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({ + granularity: computed(() => _granularityInfo.value?.granularity ?? 'MONTHLY'), isInherit: computed(() => !!options.dateRangeFieldValue.value?.inherit), dateRangeOptions: computed(() => options.dateRangeFieldValue.value?.options || 'auto'), baseOnDate: computed(() => (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 index 42c4f5e36e..f105ed7ef4 100644 --- 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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(null); const state = reactive({ 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 index 2dd34b176e..5fe226e5b1 100644 --- 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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => 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 index f7921732f8..150ded1669 100644 --- 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/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue index f8ed31f3f1..6105480043 100644 --- a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue +++ b/apps/web/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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => 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 index a467cfea88..148734acda 100644 --- 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 index 22e6e661a0..d524b266b5 100644 --- 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(); const chartContext = ref(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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => 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 index d95fbd5a7b..81f0419328 100644 --- 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(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(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 index 1ada86b940..7334eb27de 100644 --- 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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(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 index 961284a9f7..6e39c85c73 100644 --- 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 index f10d3b0ce5..81bd212876 100644 --- 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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(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 index 943f98edff..c156c0ee1a 100644 --- 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 index fdc7f1bfd5..c7e4db1ec1 100644 --- 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); const valueTextRef = ref(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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => 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 index f76b46c1f2..372cf8f873 100644 --- 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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(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 index 7adbf1eb5b..a05a53f337 100644 --- 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 index 2f68549505..70da728737 100644 --- 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(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(null); const state = reactive({ diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/widget-config.ts index e9b416a52b..fbaa224611 100644 --- a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/widget-config.ts +++ b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/widget-config.ts @@ -20,7 +20,7 @@ const stackedColumnChart: WidgetConfig = { max: 31, }, }, - tableDataField: {}, + dataField: {}, }, optionalFieldsSchema: { legend: { diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue index 95ff7deadf..9d72c32f88 100644 --- a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue +++ b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue @@ -43,6 +43,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'; @@ -61,9 +62,9 @@ const props = defineProps(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(null); const state = reactive({ diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts index 8474825980..9cd4787127 100644 --- a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts +++ b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/widget-config.ts @@ -22,7 +22,7 @@ const stackedHorizontalBarChart: WidgetConfig = { excludeDateField: true, }, }, - tableDataField: {}, + dataField: {}, }, optionalFieldsSchema: { legend: { diff --git a/apps/web/src/common/modules/widgets/_widgets/table/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/table/widget-config.ts index 23840c996f..bc1659f63e 100644 --- a/apps/web/src/common/modules/widgets/_widgets/table/widget-config.ts +++ b/apps/web/src/common/modules/widgets/_widgets/table/widget-config.ts @@ -13,13 +13,16 @@ const table: WidgetConfig = { requiredFieldsSchema: { granularity: {}, dateRange: {}, - tableDataField: {}, + dataField: { + options: { + multiSelectable: true, + }, + }, groupBy: { options: { dataTarget: 'labels_info', multiSelectable: true, hideCount: true, - defaultIndex: 0, }, }, }, diff --git a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue index aee63c8d4e..c533bf5e31 100644 --- a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue +++ b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue @@ -39,6 +39,7 @@ import type { CategoryByValue } from '@/common/modules/widgets/_widget-fields/ca 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 { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type'; import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type'; import type { @@ -55,9 +56,9 @@ type Data = ListResponse<{ const props = defineProps(); const emit = defineEmits(); 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(() => props.widgetOptions?.granularity as string), + granularity: computed(() => props.widgetOptions?.granularity?.value as GranularityValue), }); const chartContext = ref(null); const state = reactive({ diff --git a/apps/web/src/common/modules/widgets/_widgets/treemap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/treemap/widget-config.ts index 0f56f78d89..8151653dd8 100644 --- a/apps/web/src/common/modules/widgets/_widgets/treemap/widget-config.ts +++ b/apps/web/src/common/modules/widgets/_widgets/treemap/widget-config.ts @@ -19,7 +19,6 @@ const treemap: WidgetConfig = { dataTarget: 'labels_info', defaultMaxCount: 20, max: 30, - defaultIndex: 0, }, }, },