From a76f82a1f80e074919bdb946e3c28082dad4ee68 Mon Sep 17 00:00:00 2001 From: Dahyun Yu Date: Wed, 18 Dec 2024 11:02:04 +0900 Subject: [PATCH] refactor(number-card): use new widget/load-sum api (#5244) * refactor(number-card): use new `widget/load-sum` api Signed-off-by: yuda * refactor: apply updated widget options Signed-off-by: yuda --------- Signed-off-by: yuda --- .../widgets/_composables/use-widget-frame.ts | 8 +-- .../_widgets/number-card/NumberCard.vue | 61 +++++++------------ 2 files changed, 27 insertions(+), 42 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts index aa6f27a64c..ffe55da94c 100644 --- a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts +++ b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts @@ -141,13 +141,13 @@ export const useWidgetFrame = ( ) => { const _state = reactive({ widgetConfig: computed(() => getWidgetConfig(props.widgetName)), - showWidgetHeader: computed(() => props.widgetOptions?.widgetHeader?.toggleValue || false), + showWidgetHeader: computed(() => props.widgetOptions?.widgetHeader?.value?.toggleValue || false), title: computed(() => { - if (_state.showWidgetHeader) return props.widgetOptions?.widgetHeader?.title; + if (_state.showWidgetHeader) return props.widgetOptions?.widgetHeader?.value?.title; return undefined; }), description: computed(() => { - if (_state.showWidgetHeader) return props.widgetOptions?.widgetHeader?.description; + if (_state.showWidgetHeader) return props.widgetOptions?.widgetHeader?.value?.description; return undefined; }), size: computed(() => { @@ -193,7 +193,7 @@ export const useWidgetFrame = ( return overrides.noData?.value || false; }), annotation: computed(() => { - const _displayAnnotation = props.widgetOptions?.displayAnnotation as DisplayAnnotationValue; + const _displayAnnotation = props.widgetOptions?.displayAnnotation?.value as DisplayAnnotationValue; if (!_displayAnnotation?.toggleValue) return undefined; return _displayAnnotation?.annotation; }), 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 c7e4db1ec1..43f68f61df 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 @@ -29,6 +29,7 @@ import { } from '@/common/modules/widgets/_helpers/widget-date-helper'; import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper'; import type { ComparisonValue } from '@/common/modules/widgets/_widget-fields/comparison/type'; +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 { IconValue } from '@/common/modules/widgets/_widget-fields/icon/type'; @@ -65,28 +66,28 @@ const state = reactive({ previousValue: computed(() => state.previousData?.results?.[0]?.[state.dataField] ?? 0), currentValue: computed(() => state.data?.results?.[0]?.[state.dataField] ?? 0), valueText: computed(() => { - const _numberFormatMap = props.widgetOptions?.numberFormat as NumberFormatValue; + const _numberFormatMap = props.widgetOptions?.numberFormat?.value as NumberFormatValue; return getFormattedNumber(state.currentValue, state.dataField, _numberFormatMap, state.unit); }), - 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 - iconName: computed(() => (props.widgetOptions?.icon as IconValue)?.icon?.name), - iconColor: computed(() => (props.widgetOptions?.icon as IconValue)?.color), + iconInfo: computed(() => props.widgetOptions?.icon?.value as IconValue), + iconName: computed(() => state.iconInfo?.icon?.name), + iconColor: computed(() => state.iconInfo?.color), + comparisonInfo: computed(() => props.widgetOptions?.comparison?.value as ComparisonValue), comparisonColor: computed(() => { const _comparison = state.currentValue - state.previousValue; if (!_comparison) return gray[700]; - const _target: ComparisonValue|undefined = props.widgetOptions?.comparison; if (state.currentValue > state.previousValue) { - return _target?.increaseColor; + return state.comparisonInfo?.increaseColor; } - return _target?.decreaseColor; + return state.comparisonInfo?.decreaseColor; }), comparisonValue: computed(() => { - const _target: ComparisonValue|undefined = props.widgetOptions?.comparison; const _comparison = Math.abs(state.currentValue - state.previousValue); - const _format = _target?.format || 'all'; + const _format = state.comparisonInfo?.format || 'all'; let _percentage = '--'; if (state.previousValue > 0) { _percentage = (_comparison / state.previousValue * 100).toFixed(2); @@ -139,8 +140,8 @@ const setValueTextFontSize = debounce(() => { }, 300); /* Api */ -const privateWidgetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateWidget.load); -const publicWidgetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicWidget.load); +const privateWidgetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateWidget.loadSum); +const publicWidgetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicWidget.loadSum); const fetchWidget = async (): Promise => { if (props.widgetState === 'INACTIVE') return undefined; try { @@ -149,17 +150,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, - 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') { @@ -176,8 +169,8 @@ const fetchWidget = async (): Promise => { } }; -const privatePreviousFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateWidget.load); -const publicPreviousFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicWidget.load); +const privatePreviousFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateWidget.loadSum); +const publicPreviousFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicWidget.loadSum); const fetchPreviousData = async (): Promise => { if (props.widgetState === 'INACTIVE') return undefined; try { @@ -187,17 +180,9 @@ const fetchPreviousData = async (): Promise => { const _previousDateRange = getPreviousDateRange(state.granularity, dateRange.value); const { status, response } = await _fetcher({ widget_id: props.widgetId, - query: { - granularity: state.granularity, - start: _previousDateRange.start, - end: _previousDateRange.end, - fields: { - [state.dataField]: { - key: state.dataField, - operator: 'sum', - }, - }, - }, + granularity: state.granularity, + start: _previousDateRange.start, + end: _previousDateRange.end, vars: props.dashboardVars, }); if (status === 'succeed') { @@ -220,7 +205,7 @@ const loadWidget = async (): Promise => { return state.data; }; -watch([() => props.widgetOptions?.comparison, () => dateRange.value], async ([comparison]) => { +watch([() => props.widgetOptions?.comparison?.value, () => dateRange.value], async ([comparison]) => { if (comparison) { state.previousData = await fetchPreviousData(); } else { @@ -260,7 +245,7 @@ defineExpose>({ style="font-size: 56px;" >{{ state.valueText }} -