Skip to content

Commit 11a449b

Browse files
piggggggggypiggggggggy
committed
fix: solve data-table-changing issue
Signed-off-by: samuel.park <samuel.park@megazone.com>
1 parent 3e65751 commit 11a449b

File tree

14 files changed

+70
-70
lines changed

14 files changed

+70
-70
lines changed

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

Lines changed: 5 additions & 5 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';
@@ -307,10 +307,10 @@ useResizeObserver(chartContext, throttle(() => {
307307
state.chart?.resize();
308308
}, 500));
309309
useWidgetInitAndRefresh({ props, emit, loadWidget });
310-
onMounted(async () => {
311-
if (!props.dataTableId) return;
312-
state.dataTable = await getWidgetDataTable(props.dataTableId);
313-
});
310+
watch(() => props.dataTableId, async (newDataTableId) => {
311+
if (!newDataTableId) return;
312+
state.dataTable = await getWidgetDataTable(newDataTableId);
313+
}, { immediate: true });
314314
defineExpose<WidgetExpose>({
315315
loadWidget,
316316
});

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

Lines changed: 5 additions & 5 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
@@ -172,10 +172,10 @@ watch(() => widgetOptionsState.formatRulesInfo, async () => {
172172
}, { immediate: true });
173173
174174
useWidgetInitAndRefresh({ props, emit, loadWidget });
175-
onMounted(async () => {
176-
if (!props.dataTableId) return;
177-
state.dataTable = await getWidgetDataTable(props.dataTableId);
178-
});
175+
watch(() => props.dataTableId, async (newDataTableId) => {
176+
if (!newDataTableId) return;
177+
state.dataTable = await getWidgetDataTable(newDataTableId);
178+
}, { immediate: true });
179179
defineExpose<WidgetExpose>({
180180
loadWidget,
181181
});

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

Lines changed: 5 additions & 5 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';
@@ -233,10 +233,10 @@ watch(() => widgetOptionsState, () => {
233233
234234
/* Lifecycle */
235235
useWidgetInitAndRefresh({ props, emit, loadWidget });
236-
onMounted(async () => {
237-
if (!props.dataTableId) return;
238-
state.dataTable = await getWidgetDataTable(props.dataTableId);
239-
});
236+
watch(() => props.dataTableId, async (newDataTableId) => {
237+
if (!newDataTableId) return;
238+
state.dataTable = await getWidgetDataTable(newDataTableId);
239+
}, { immediate: true });
240240
defineExpose<WidgetExpose>({
241241
loadWidget,
242242
});

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

Lines changed: 5 additions & 5 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';
@@ -203,10 +203,10 @@ watch([() => state.data, () => props.widgetOptions], ([newData]) => {
203203
});
204204
205205
useWidgetInitAndRefresh({ props, emit, loadWidget });
206-
onMounted(async () => {
207-
if (!props.dataTableId) return;
208-
state.dataTable = await getWidgetDataTable(props.dataTableId);
209-
});
206+
watch(() => props.dataTableId, async (newDataTableId) => {
207+
if (!newDataTableId) return;
208+
state.dataTable = await getWidgetDataTable(newDataTableId);
209+
}, { immediate: true });
210210
defineExpose<WidgetExpose>({
211211
loadWidget,
212212
});

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

Lines changed: 5 additions & 5 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';
@@ -212,10 +212,10 @@ useResizeObserver(chartContext, throttle(() => {
212212
state.chart?.resize();
213213
}, 500));
214214
useWidgetInitAndRefresh({ props, emit, loadWidget });
215-
onMounted(async () => {
216-
if (!props.dataTableId) return;
217-
state.dataTable = await getWidgetDataTable(props.dataTableId);
218-
});
215+
watch(() => props.dataTableId, async (newDataTableId) => {
216+
if (!newDataTableId) return;
217+
state.dataTable = await getWidgetDataTable(newDataTableId);
218+
}, { immediate: true });
219219
defineExpose<WidgetExpose>({
220220
loadWidget,
221221
});

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

Lines changed: 5 additions & 5 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';
@@ -260,10 +260,10 @@ useResizeObserver(chartContext, throttle(() => {
260260
state.chart?.resize();
261261
}, 500));
262262
useWidgetInitAndRefresh({ props, emit, loadWidget });
263-
onMounted(async () => {
264-
if (!props.dataTableId) return;
265-
state.dataTable = await getWidgetDataTable(props.dataTableId);
266-
});
263+
watch(() => props.dataTableId, async (newDataTableId) => {
264+
if (!newDataTableId) return;
265+
state.dataTable = await getWidgetDataTable(newDataTableId);
266+
}, { immediate: true });
267267
defineExpose<WidgetExpose>({
268268
loadWidget,
269269
});

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

Lines changed: 5 additions & 5 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';
@@ -287,10 +287,10 @@ useResizeObserver(chartContext, throttle(() => {
287287
state.chart?.resize();
288288
}, 500));
289289
useWidgetInitAndRefresh({ props, emit, loadWidget });
290-
onMounted(async () => {
291-
if (!props.dataTableId) return;
292-
state.dataTable = await getWidgetDataTable(props.dataTableId);
293-
});
290+
watch(() => props.dataTableId, async (newDataTableId) => {
291+
if (!newDataTableId) return;
292+
state.dataTable = await getWidgetDataTable(newDataTableId);
293+
}, { immediate: true });
294294
defineExpose<WidgetExpose>({
295295
loadWidget,
296296
});

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

Lines changed: 5 additions & 5 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';
@@ -238,10 +238,10 @@ useResizeObserver(valueTextRef, throttle(() => {
238238
setValueTextFontSize();
239239
}, 500));
240240
useWidgetInitAndRefresh({ props, emit, loadWidget });
241-
onMounted(async () => {
242-
if (!props.dataTableId) return;
243-
state.dataTable = await getWidgetDataTable(props.dataTableId);
244-
});
241+
watch(() => props.dataTableId, async (newDataTableId) => {
242+
if (!newDataTableId) return;
243+
state.dataTable = await getWidgetDataTable(newDataTableId);
244+
}, { immediate: true });
245245
defineExpose<WidgetExpose>({
246246
loadWidget,
247247
});

‎apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue‎

Lines changed: 5 additions & 5 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,
4+
computed, defineExpose,
55
reactive, ref, watch,
66
} from 'vue';
77
@@ -288,10 +288,10 @@ useResizeObserver(chartContext, throttle(() => {
288288
state.chart?.resize();
289289
}, 500));
290290
useWidgetInitAndRefresh({ props, emit, loadWidget });
291-
onMounted(async () => {
292-
if (!props.dataTableId) return;
293-
state.dataTable = await getWidgetDataTable(props.dataTableId);
294-
});
291+
watch(() => props.dataTableId, async (newDataTableId) => {
292+
if (!newDataTableId) return;
293+
state.dataTable = await getWidgetDataTable(newDataTableId);
294+
}, { immediate: true });
295295
defineExpose<WidgetExpose>({
296296
loadWidget,
297297
});

‎apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue‎

Lines changed: 5 additions & 5 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,
4+
computed, defineExpose,
55
reactive, ref, watch,
66
} from 'vue';
77
@@ -237,10 +237,10 @@ useResizeObserver(chartContext, throttle(() => {
237237
state.chart?.resize();
238238
}, 500));
239239
useWidgetInitAndRefresh({ props, emit, loadWidget });
240-
onMounted(async () => {
241-
if (!props.dataTableId) return;
242-
state.dataTable = await getWidgetDataTable(props.dataTableId);
243-
});
240+
watch(() => props.dataTableId, async (newDataTableId) => {
241+
if (!newDataTableId) return;
242+
state.dataTable = await getWidgetDataTable(newDataTableId);
243+
}, { immediate: true });
244244
defineExpose<WidgetExpose>({
245245
loadWidget,
246246
});

0 commit comments

Comments
 (0)