From 752d013ea6e28f92bec836a5c39290c8d289c091 Mon Sep 17 00:00:00 2001 From: Dahyun Yu Date: Fri, 20 Dec 2024 15:02:47 +0900 Subject: [PATCH] refactor(geomap): use new widget/load api (#5280) * fix: reset `key` of case when fieldType is changed Signed-off-by: yuda * fix(groupby): correct fixedValue setting bug Signed-off-by: yuda * chore(gauge): fix formatRules options Signed-off-by: yuda * refactor(geomap): use new `widget/load` api Signed-off-by: yuda --------- Signed-off-by: yuda --- ...FormDataTableCardTransformValueMapping.vue | 10 +++++++- .../constant/default-value-registry.ts | 5 +++- .../group-by/WidgetFieldGroupBy.vue | 2 +- .../widgets/_widgets/gauge/widget-config.ts | 4 ++-- .../widgets/_widgets/geo-map/GeoMap.vue | 23 +++++++------------ 5 files changed, 24 insertions(+), 20 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue index 71dd230388..b6b95b2126 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue @@ -4,7 +4,7 @@ import { } from 'vue'; import type { TranslateResult } from 'vue-i18n'; -import { random } from 'lodash'; +import { isEqual, random } from 'lodash'; import { PButton, PFieldGroup, PSelectButton, PTextInput, PSelectDropdown, PFieldTitle, PIconButton, @@ -145,6 +145,14 @@ watch([dataTableInfo, fieldTypeInfo, fieldNameInfo, casesInfo, elseInfo, additio ...(_additionalConditionInfo && { condition: _additionalConditionInfo }), }; }, { deep: true, immediate: true }); +watch([fieldTypeInfo], (_curr, _prev) => { + if (!isEqual(_curr, _prev)) { + casesInfo.value = casesInfo.value.map((d) => ({ + ...d, + key: '', + })); + } +}); watch(() => state.invalid, (_invalid) => { emit('update:invalid', _invalid); }, { immediate: true }); diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts index 5d3d77d68b..7e09c7e434 100644 --- a/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts +++ b/apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts @@ -286,7 +286,10 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette const result = widgetFieldDefaultValueMap.categoryBy; - const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[groupByOptions.dataTarget] ?? {})); + let fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.[groupByOptions.dataTarget] ?? {})); + if (groupByOptions.fixedValue) { + fieldKeys = fieldKeys.filter((key) => key === groupByOptions.fixedValue); + } result.data = groupByOptions.multiSelectable ? [fieldKeys?.[0]] : fieldKeys?.[0]; diff --git a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue index 50bd15aabd..ece873d634 100644 --- a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue +++ b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue @@ -57,7 +57,7 @@ const state = reactive({ if (!state.menuItems.length) { return state.multiselectable ? [] : undefined; } - if (state.fixedValue) return state.menuItems.find((d) => d.name === state.fixedValue); + if (state.fixedValue) return state.fixedValue; if (state.multiselectable) { return state.menuItems.filter((d) => state.fieldValue.data?.includes(d.name)); } diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/gauge/widget-config.ts index 9b74d97de2..160964aec0 100644 --- a/apps/web/src/common/modules/widgets/_widgets/gauge/widget-config.ts +++ b/apps/web/src/common/modules/widgets/_widgets/gauge/widget-config.ts @@ -30,11 +30,11 @@ const gauge: WidgetConfig = { options: { formatRulesType: _FORMAT_RULE_TYPE.percentThreshold, default: [{ - threshold: 90, + number: 70, color: yellow[500], }, { - threshold: 100, + number: 100, color: red[400], }], baseColor: indigo[100], 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 81f0419328..ed7a6a3a83 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 @@ -28,6 +28,7 @@ import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue'; import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range'; import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame'; import { useWidgetInitAndRefresh } from '@/common/modules/widgets/_composables/use-widget-init-and-refresh'; +import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/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'; @@ -40,6 +41,7 @@ import type { import { coral, gray } from '@/styles/colors'; + const props = defineProps(); const emit = defineEmits(); const REGION_FIELD = 'Region'; @@ -98,10 +100,10 @@ const state = reactive({ ], })), // required fields - granularity: computed(() => props.widgetOptions?.granularity as string), - dataField: computed(() => props.widgetOptions?.dataField as string[] || []), + granularity: computed(() => (props.widgetOptions?.granularity?.value as GranularityValue)?.granularity), + dataField: computed(() => (props.widgetOptions?.dataField?.value as DataFieldValue)?.data as string), // optional fields - showLegends: computed(() => (props.widgetOptions?.legend as LegendValue)?.toggleValue), + showLegends: computed(() => (props.widgetOptions?.legend?.value as LegendValue)?.toggleValue), }); const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, { dateRange, @@ -120,18 +122,9 @@ const fetchWidget = async (): Promise => const _fetcher = _isPrivate ? privateWidgetFetcher : publicWidgetFetcher; const { status, response } = await _fetcher({ widget_id: props.widgetId, - query: { - granularity: state.granularity, - start: dateRange.value.start, - end: dateRange.value.end, - group_by: [REGION_FIELD], - fields: { - [state.dataField]: { - key: state.dataField, - operator: 'sum', - }, - }, - }, + granularity: state.granularity, + start: dateRange.value.start, + end: dateRange.value.end, vars: props.dashboardVars, }); if (status === 'succeed') {