Skip to content

Commit 783a838

Browse files
piggggggggypiggggggggy
authored
fix(widget-error): apply no-data-table error case & refactor useWidgetFrame (#5406)
* fix(widget-error): apply no-data-table error case & refactor useWidgetFrame Signed-off-by: samuel.park <samuel.park@megazone.com> * fix: solve data-table-changing issue Signed-off-by: samuel.park <samuel.park@megazone.com> --------- Signed-off-by: samuel.park <samuel.park@megazone.com>
1 parent 54beef2 commit 783a838

File tree

19 files changed

+177
-98
lines changed

19 files changed

+177
-98
lines changed

‎apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-const
3737

3838
interface OverridableWidgetFrameState {
3939
dateRange?: DateRange | ComputedRef<DateRange>;
40-
errorMessage?: string | ComputedRef<string|undefined>;
41-
widgetLoading?: boolean | ComputedRef<boolean>;
42-
noData?: boolean | ComputedRef<boolean>;
40+
errorMessage?: ComputedRef<string|undefined>;
41+
widgetLoading?: ComputedRef<boolean>;
42+
noData?: ComputedRef<boolean>;
4343
}
4444
type DataTableModel = PublicDataTableModel | PrivateDataTableModel;
4545
const { getProperRouteLocation } = useProperRouteLocation();

‎apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useResizeObserver } from '@vueuse/core/index';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref, watch,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQuery } from '@tanstack/vue-query';
@@ -22,6 +22,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
2222
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
2323
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
2424
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
25+
import { i18n } from '@/translations';
2526
2627
import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
2728
import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
@@ -210,7 +211,10 @@ const queryResult = useQuery({
210211
});
211212
212213
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
213-
const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
214+
const errorMessage = computed<string|undefined>(() => {
215+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
216+
return queryResult.error?.value?.message;
217+
});
214218
215219
/* Util */
216220
const getThreshold = (rawData: WidgetLoadResponse): number => {
@@ -303,10 +307,10 @@ useResizeObserver(chartContext, throttle(() => {
303307
state.chart?.resize();
304308
}, 500));
305309
useWidgetInitAndRefresh({ props, emit, loadWidget });
306-
onMounted(async () => {
307-
if (!props.dataTableId) return;
308-
state.dataTable = await getWidgetDataTable(props.dataTableId);
309-
});
310+
watch(() => props.dataTableId, async (newDataTableId) => {
311+
if (!newDataTableId) return;
312+
state.dataTable = await getWidgetDataTable(newDataTableId);
313+
}, { immediate: true });
310314
defineExpose<WidgetExpose>({
311315
loadWidget,
312316
});

‎apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import {
3-
computed, defineExpose, onMounted, reactive, watch,
3+
computed, defineExpose, reactive, watch,
44
} from 'vue';
55
66
@@ -17,6 +17,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
1717
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
1818
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
1919
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
20+
import { i18n } from '@/translations';
2021
2122
import WidgetCustomLegend from '@/common/modules/widgets/_components/WidgetCustomLegend.vue';
2223
import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
@@ -114,7 +115,10 @@ const queryResult = useQuery({
114115
});
115116
116117
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
117-
const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
118+
const errorMessage = computed<string|undefined>(() => {
119+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
120+
return queryResult.error?.value?.message;
121+
});
118122
119123
const refinedData = computed(() => {
120124
const data = queryResult.data?.value;
@@ -168,10 +172,10 @@ watch(() => widgetOptionsState.formatRulesInfo, async () => {
168172
}, { immediate: true });
169173
170174
useWidgetInitAndRefresh({ props, emit, loadWidget });
171-
onMounted(async () => {
172-
if (!props.dataTableId) return;
173-
state.dataTable = await getWidgetDataTable(props.dataTableId);
174-
});
175+
watch(() => props.dataTableId, async (newDataTableId) => {
176+
if (!newDataTableId) return;
177+
state.dataTable = await getWidgetDataTable(newDataTableId);
178+
}, { immediate: true });
175179
defineExpose<WidgetExpose>({
176180
loadWidget,
177181
});

‎apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useResizeObserver } from '@vueuse/core/index';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref, watch,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQuery } from '@tanstack/vue-query';
@@ -15,6 +15,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
1515
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
1616
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
1717
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
18+
import { i18n } from '@/translations';
1819
1920
import WidgetCustomLegend from '@/common/modules/widgets/_components/WidgetCustomLegend.vue';
2021
import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
@@ -146,7 +147,10 @@ const queryResult = useQuery({
146147
});
147148
148149
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
149-
const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
150+
const errorMessage = computed<string|undefined>(() => {
151+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
152+
return queryResult.error?.value?.message;
153+
});
150154
151155
/* Util */
152156
const loadWidget = async () => {
@@ -220,7 +224,7 @@ watch(() => widgetOptionsState.formatRulesInfo?.rules, async () => {
220224
const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
221225
dateRange,
222226
errorMessage,
223-
widgetLoading: widgetLoading.value,
227+
widgetLoading,
224228
noData: computed(() => (state.data ? !state.data?.results?.length : false)),
225229
});
226230
watch(() => widgetOptionsState, () => {
@@ -229,10 +233,10 @@ watch(() => widgetOptionsState, () => {
229233
230234
/* Lifecycle */
231235
useWidgetInitAndRefresh({ props, emit, loadWidget });
232-
onMounted(async () => {
233-
if (!props.dataTableId) return;
234-
state.dataTable = await getWidgetDataTable(props.dataTableId);
235-
});
236+
watch(() => props.dataTableId, async (newDataTableId) => {
237+
if (!newDataTableId) return;
238+
state.dataTable = await getWidgetDataTable(newDataTableId);
239+
}, { immediate: true });
236240
defineExpose<WidgetExpose>({
237241
loadWidget,
238242
});

‎apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useResizeObserver } from '@vueuse/core/index';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref, watch,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQuery } from '@tanstack/vue-query';
@@ -18,6 +18,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
1818
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
1919
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
2020
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
21+
import { i18n } from '@/translations';
2122
2223
import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
2324
import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
@@ -169,7 +170,10 @@ const queryResult = useQuery({
169170
});
170171
171172
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
172-
const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
173+
const errorMessage = computed<string|undefined>(() => {
174+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
175+
return queryResult.error?.value?.message;
176+
});
173177
174178
/* Util */
175179
const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -199,10 +203,10 @@ watch([() => state.data, () => props.widgetOptions], ([newData]) => {
199203
});
200204
201205
useWidgetInitAndRefresh({ props, emit, loadWidget });
202-
onMounted(async () => {
203-
if (!props.dataTableId) return;
204-
state.dataTable = await getWidgetDataTable(props.dataTableId);
205-
});
206+
watch(() => props.dataTableId, async (newDataTableId) => {
207+
if (!newDataTableId) return;
208+
state.dataTable = await getWidgetDataTable(newDataTableId);
209+
}, { immediate: true });
206210
defineExpose<WidgetExpose>({
207211
loadWidget,
208212
});

‎apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useResizeObserver } from '@vueuse/core/index';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref, watch,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQuery } from '@tanstack/vue-query';
@@ -20,6 +20,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
2020
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
2121
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
2222
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
23+
import { i18n } from '@/translations';
2324
2425
import { useAllReferenceStore } from '@/store/reference/all-reference-store';
2526
import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
@@ -150,8 +151,11 @@ const queryResult = useQuery({
150151
staleTime: WIDGET_LOAD_STALE_TIME,
151152
});
152153
153-
const widgetLoading = computed<boolean>(() => queryResult.isLoading);
154-
const errorMessage = computed<string>(() => queryResult.error?.value?.message);
154+
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
155+
const errorMessage = computed<string>(() => {
156+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
157+
return queryResult.error?.value?.message;
158+
});
155159
156160
/* Util */
157161
const loadMap = async () => {
@@ -189,7 +193,7 @@ const loadWidget = async () => {
189193
const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
190194
dateRange,
191195
errorMessage,
192-
widgetLoading: widgetLoading.value,
196+
widgetLoading,
193197
});
194198
195199
/* Watcher */
@@ -208,10 +212,10 @@ useResizeObserver(chartContext, throttle(() => {
208212
state.chart?.resize();
209213
}, 500));
210214
useWidgetInitAndRefresh({ props, emit, loadWidget });
211-
onMounted(async () => {
212-
if (!props.dataTableId) return;
213-
state.dataTable = await getWidgetDataTable(props.dataTableId);
214-
});
215+
watch(() => props.dataTableId, async (newDataTableId) => {
216+
if (!newDataTableId) return;
217+
state.dataTable = await getWidgetDataTable(newDataTableId);
218+
}, { immediate: true });
215219
defineExpose<WidgetExpose>({
216220
loadWidget,
217221
});

‎apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useResizeObserver } from '@vueuse/core';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref, watch,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQuery } from '@tanstack/vue-query';
@@ -18,6 +18,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
1818
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
1919
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
2020
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
21+
import { i18n } from '@/translations';
2122
2223
import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
2324
import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
@@ -209,8 +210,11 @@ const queryResult = useQuery({
209210
staleTime: WIDGET_LOAD_STALE_TIME,
210211
});
211212
212-
const widgetLoading = computed<boolean>(() => queryResult.isLoading);
213-
const errorMessage = computed<string>(() => queryResult.error?.value?.message);
213+
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
214+
const errorMessage = computed<string>(() => {
215+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
216+
return queryResult.error?.value?.message;
217+
});
214218
215219
216220
/* Util */
@@ -248,18 +252,18 @@ watch([() => state.data, () => props.widgetOptions], ([newData]) => {
248252
const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
249253
dateRange,
250254
errorMessage,
251-
widgetLoading: widgetLoading.value,
255+
widgetLoading,
252256
noData: computed(() => (state.data ? !state.data.results?.length : false)),
253257
});
254258
255259
useResizeObserver(chartContext, throttle(() => {
256260
state.chart?.resize();
257261
}, 500));
258262
useWidgetInitAndRefresh({ props, emit, loadWidget });
259-
onMounted(async () => {
260-
if (!props.dataTableId) return;
261-
state.dataTable = await getWidgetDataTable(props.dataTableId);
262-
});
263+
watch(() => props.dataTableId, async (newDataTableId) => {
264+
if (!newDataTableId) return;
265+
state.dataTable = await getWidgetDataTable(newDataTableId);
266+
}, { immediate: true });
263267
defineExpose<WidgetExpose>({
264268
loadWidget,
265269
});

‎apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useResizeObserver } from '@vueuse/core/index';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref, watch,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQuery } from '@tanstack/vue-query';
@@ -22,6 +22,7 @@ import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-tabl
2222
import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
2323
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
2424
import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
25+
import { i18n } from '@/translations';
2526
2627
import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
2728
import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
@@ -216,7 +217,10 @@ const queryResult = useQuery({
216217
});
217218
218219
const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
219-
const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
220+
const errorMessage = computed<string|undefined>(() => {
221+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
222+
return queryResult.error?.value?.message;
223+
});
220224
221225
/* Util */
222226
const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -283,10 +287,10 @@ useResizeObserver(chartContext, throttle(() => {
283287
state.chart?.resize();
284288
}, 500));
285289
useWidgetInitAndRefresh({ props, emit, loadWidget });
286-
onMounted(async () => {
287-
if (!props.dataTableId) return;
288-
state.dataTable = await getWidgetDataTable(props.dataTableId);
289-
});
290+
watch(() => props.dataTableId, async (newDataTableId) => {
291+
if (!newDataTableId) return;
292+
state.dataTable = await getWidgetDataTable(newDataTableId);
293+
}, { immediate: true });
290294
defineExpose<WidgetExpose>({
291295
loadWidget,
292296
});

‎apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useElementSize, useResizeObserver } from '@vueuse/core';
33
import {
4-
computed, defineExpose, onMounted, reactive, ref,
4+
computed, defineExpose, reactive, ref, watch,
55
} from 'vue';
66
77
import { useQueries } from '@tanstack/vue-query';
@@ -218,7 +218,10 @@ const queryResults = useQueries({
218218
219219
const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isLoading);
220220
const previousLoading = computed<string>(() => queryResults.value?.[1].isLoading);
221-
const errorMessage = computed<string>(() => queryResults.value?.[0].error?.message);
221+
const errorMessage = computed<string>(() => {
222+
if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
223+
return queryResults.value?.[0].error?.message;
224+
});
222225
223226
const loadWidget = () => {
224227
state.runQueries = true;
@@ -235,10 +238,10 @@ useResizeObserver(valueTextRef, throttle(() => {
235238
setValueTextFontSize();
236239
}, 500));
237240
useWidgetInitAndRefresh({ props, emit, loadWidget });
238-
onMounted(async () => {
239-
if (!props.dataTableId) return;
240-
state.dataTable = await getWidgetDataTable(props.dataTableId);
241-
});
241+
watch(() => props.dataTableId, async (newDataTableId) => {
242+
if (!newDataTableId) return;
243+
state.dataTable = await getWidgetDataTable(newDataTableId);
244+
}, { immediate: true });
242245
defineExpose<WidgetExpose>({
243246
loadWidget,
244247
});

0 commit comments

Comments
 (0)