From 62638ceac529df9f6894f33df569329d8359a573 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?=
 <samuel.park@megazone.com>
Date: Sun, 22 Dec 2024 22:39:13 +0900
Subject: [PATCH] fix(heatmap): refactor heatmap widget & apply vue query
 (#5296)

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../widgets/_widgets/heatmap/Heatmap.vue      | 221 ++++++++----------
 .../widgets/_widgets/heatmap/widget-config.ts |   7 +-
 2 files changed, 101 insertions(+), 127 deletions(-)

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 afa4b2b328..22ab6299c4 100644
--- a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core';
 import {
-    computed, defineExpose, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
+import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { HeatmapSeriesOption } from 'echarts/charts';
 import type { EChartsType } from 'echarts/core';
@@ -11,38 +12,38 @@ import { init } from 'echarts/core';
 import { isEmpty, max, throttle } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
 import { numberFormatter } from '@cloudforet/utils';
 
 import type { ListResponse } from '@/schema/_common/api-verbs/list';
-import { GRANULARITY } from '@/schema/dashboard/_constants/widget-constant';
+import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
 import type { PrivateWidgetLoadParameters } from '@/schema/dashboard/private-widget/api-verbs/load';
+import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
 import type { PublicWidgetLoadParameters } from '@/schema/dashboard/public-widget/api-verbs/load';
 
-import type { APIErrorToast } from '@/common/composables/error/errorHandler';
-import ErrorHandler from '@/common/composables/error/errorHandler';
 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 { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
-import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
+import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
     getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
+import { getWidgetDataTable } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
     getWidgetLoadApiQueryDateRange,
 } from '@/common/modules/widgets/_helpers/widget-load-helper';
-import type { ColorSchemaValue, ColorValue } from '@/common/modules/widgets/_widget-fields/color-schema/type';
+import type { ColorSchemaValue } from '@/common/modules/widgets/_widget-fields/color-schema/type';
+import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/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 { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DateRange, DynamicFieldData, StaticFieldData } from '@/common/modules/widgets/types/widget-data-type';
+import type { DateRange, StaticFieldData } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
 
@@ -60,26 +61,31 @@ const { dateRange } = useWidgetDateRange({
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
+
 const state = reactive({
+    runQueries: false,
+    isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
+    dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+
     loading: false,
     errorMessage: undefined as string|undefined,
     data: null as Data | null,
     chart: null as EChartsType | null,
     xAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
-        if (isDateField(state.xAxisField)) {
-            const _isSeparatedDate = state.xAxisField !== DATE_FIELD.DATE;
-            return getWidgetDateFields(state.granularity, state.widgetDateRange.start, state.widgetDateRange.end, _isSeparatedDate);
+        if (isDateField(widgetOptionsState.xAxisInfo?.data)) {
+            const _isSeparatedDate = widgetOptionsState.xAxisInfo.data !== DATE_FIELD.DATE;
+            return getWidgetDateFields(widgetOptionsState.granularityInfo?.granularity, state.widgetDateRange.start, state.widgetDateRange.end, _isSeparatedDate);
         }
-        return state.data.results.map((d) => d[state.xAxisField] as string) || [];
+        return state.data.results.map((d) => d[widgetOptionsState.xAxisInfo?.data as string] as string) || [];
     }),
     yAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
-        return state.dataField;
+        return (widgetOptionsState.dataFieldInfo?.data ?? []) as string[];
     }),
     chartData: [],
     heatmapMaxValue: computed(() => max(state.chartData.map((d) => d?.[2] || 0)) ?? 1),
-    unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[state.dataField]),
+    // unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[state.dataField]),
     chartOptions: computed<HeatmapSeriesOption>(() => ({
         grid: {
             left: 0,
@@ -91,10 +97,10 @@ const state = reactive({
             data: state.xAxisData,
             axisLabel: {
                 formatter: (val) => {
-                    if (state.xAxisField === DATE_FIELD.DATE) {
-                        return dayjs.utc(val).format(state.dateFormat);
+                    if (widgetOptionsState.xAxisInfo.data === DATE_FIELD.DATE) {
+                        return dayjs.utc(val).format(widgetOptionsState.dateFormatInfo?.format);
                     }
-                    return getReferenceLabel(props.allReferenceTypeInfo, state.xAxisField, val);
+                    return getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.xAxisInfo?.data, val);
                 },
             },
         },
@@ -105,37 +111,29 @@ const state = reactive({
                 show: true,
             },
             axisLabel: {
-                formatter: (val) => {
-                    if (state.dataFieldInfo.fieldType === 'staticField') {
-                        return val;
-                    }
-                    if (state.dynamicFieldInfo?.fieldValue === DATE_FIELD.DATE) {
-                        return dayjs.utc(val).format(state.dateFormat);
-                    }
-                    return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
-                },
+                formatter: (val) => val,
             },
         },
         tooltip: {
             position: 'top',
             confine: true,
             formatter: (params) => {
-                let _name = getReferenceLabel(props.allReferenceTypeInfo, state.xAxisField, params.name);
-                if (state.xAxisField === DATE_FIELD.DATE) _name = dayjs.utc(_name).format(state.dateFormat);
-                if (state.unit) _name = `${_name} (${state.unit})`;
+                let _name = getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.xAxisInfo?.data, params.name);
+                if (widgetOptionsState.xAxisInfo?.data === DATE_FIELD.DATE) _name = dayjs.utc(_name).format(widgetOptionsState.dateFormatInfo?.format);
+                // if (state.unit) _name = `${_name} (${state.unit})`;
                 const _value = numberFormatter(params.value[2]) || '';
                 return `${params.marker} ${_name}: <b>${_value}</b>`;
             },
         },
         visualMap: {
-            show: state.showLegends,
+            show: widgetOptionsState.legendInfo?.toggleValue,
             calculable: true,
             orient: 'horizontal',
             left: 'left',
             bottom: 0,
             max: state.heatmapMaxValue,
             inRange: {
-                color: state.colorValue,
+                color: widgetOptionsState.colorSchemaInfo?.colorValue,
             },
             outOfRange: {
                 color: '#999',
@@ -154,102 +152,75 @@ const state = reactive({
         },
     })),
     // required fields
-    granularity: computed<string>(() => props.widgetOptions?.granularity as string),
-    xAxisField: computed<string|undefined>(() => (props.widgetOptions?.xAxis as XAxisValue)?.data),
-    xAxisCount: computed<number|undefined>(() => (props.widgetOptions?.xAxis as XAxisValue)?.count),
-    dataFieldInfo: computed(() => props.widgetOptions?.tableDataField),
-    dynamicFieldInfo: computed(() => state.dataFieldInfo?.dynamicFieldInfo),
-    staticFieldInfo: computed(() => state.dataFieldInfo?.staticFieldInfo),
-    dataField: computed<string|string[]|undefined>(() => {
-        if (state.dataFieldInfo?.fieldType === 'staticField') return state.staticFieldInfo?.fieldValue;
-        return state.dynamicFieldInfo?.fieldValue;
-    }),
-    dynamicFieldValue: computed<string[]>(() => state.dynamicFieldInfo?.fixedValue || []),
-    colorValue: computed<ColorValue>(() => (props.widgetOptions?.colorSchema as ColorSchemaValue)?.colorValue),
     widgetDateRange: computed<DateRange>(() => {
         let _start = dateRange.value.start;
         let _end = dateRange.value.end;
-        if (isDateField(state.xAxisField)) {
-            [_start, _end] = getWidgetDateRange(state.granularity, _end, state.xAxisCount);
-        } else if (isDateField(state.dataField)) {
-            let subtract = state.dynamicFieldInfo.count;
-            if (state.dynamicFieldInfo?.valueType === 'fixed') {
-                if (state.granularity === GRANULARITY.YEARLY) subtract = 3;
-                if (state.granularity === GRANULARITY.MONTHLY) subtract = 12;
-                if (state.granularity === GRANULARITY.DAILY) subtract = 30;
-            }
-            [_start, _end] = getWidgetDateRange(state.granularity, _end, subtract);
+        if (isDateField(widgetOptionsState.xAxisInfo?.data)) {
+            [_start, _end] = getWidgetDateRange(widgetOptionsState.granularityInfo?.granularity, _end, widgetOptionsState.xAxisInfo?.count);
         }
         return { start: _start, end: _end };
     }),
-    // optional fields
-    showLegends: computed<boolean>(() => (props.widgetOptions?.legend as LegendValue)?.toggleValue),
-    dateFormat: computed<string|undefined>(() => {
-        const _dateFormat = (props.widgetOptions?.dateFormat?.value as DateFormatValue)?.format || 'MMM DD, YYYY';
-        return DATE_FORMAT?.[_dateFormat]?.[state.granularity];
-    }),
 });
-const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
-    dateRange,
-    errorMessage: computed(() => state.errorMessage),
-    widgetLoading: computed(() => state.loading),
-    noData: computed(() => (state.data ? !state.data.results?.length : false)),
+
+const widgetOptionsState = reactive({
+    granularityInfo: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
+    dataFieldInfo: computed<DataFieldValue>(() => props.widgetOptions?.dataField?.value as DataFieldValue),
+    xAxisInfo: computed<XAxisValue>(() => props.widgetOptions?.xAxis?.value as XAxisValue),
+    colorSchemaInfo: computed<ColorSchemaValue>(() => props.widgetOptions?.colorSchema?.value as ColorSchemaValue),
+    legendInfo: computed<LegendValue>(() => props.widgetOptions?.legend?.value as LegendValue),
+    dateFormatInfo: computed<DateFormatValue>(() => props.widgetOptions?.dateFormat?.value as DateFormatValue),
 });
 
 /* Api */
-const privateWidgetFetcher = getCancellableFetcher<PrivateWidgetLoadParameters, Data>(SpaceConnector.clientV2.dashboard.privateWidget.load);
-const publicWidgetFetcher = getCancellableFetcher<PublicWidgetLoadParameters, Data>(SpaceConnector.clientV2.dashboard.publicWidget.load);
-const fetchWidget = async (): Promise<Data|APIErrorToast|undefined> => {
-    if (props.widgetState === 'INACTIVE') return undefined;
-    try {
-        state.loading = true;
-        const _isPrivate = props.widgetId.startsWith('private');
-        const _fetcher = _isPrivate ? privateWidgetFetcher : publicWidgetFetcher;
-        const { status, response } = await _fetcher({
+const fetchWidgetData = async (params: PrivateWidgetLoadParameters|PublicWidgetLoadParameters): Promise<Data> => {
+    const defaultFetcher = state.isPrivateWidget
+        ? SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, Data>
+        : SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, Data>;
+    const res = await defaultFetcher(params);
+    return res;
+};
+const queryKey = computed(() => [
+    'widget-load-heatmap',
+    props.widgetId,
+    {
+        start: dateRange.value.start,
+        end: dateRange.value.end,
+        granularity: widgetOptionsState.granularityInfo?.granularity,
+        dataTableId: state.dataTable?.data_table_id,
+        dataTableOptions: JSON.stringify(sortObjectByKeys(state.dataTable?.options) ?? {}),
+        groupBy: [widgetOptionsState.xAxisInfo?.data as string],
+        count: widgetOptionsState.xAxisInfo.count,
+    },
+]);
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn: async () => {
+        const results = await fetchWidgetData({
             widget_id: props.widgetId,
-            granularity: state.granularity,
-            ...getWidgetLoadApiQueryDateRange(state.granularity, dateRange.value),
-            // query: {
-            //     granularity: state.granularity,
-            //     ...(!isDateField(state.xAxisField) && { page: { start: 1, limit: state.xAxisCount } }),
-            //     ...getWidgetLoadApiQueryDateRange(state.granularity, dateRange.value),
-            //     ...getWidgetLoadApiQuery(state.dataFieldInfo, state.xAxisField),
-            // },
+            granularity: widgetOptionsState.granularityInfo?.granularity,
+            group_by: [widgetOptionsState.xAxisInfo?.data as string],
+            ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
+            ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 1, limit: widgetOptionsState.xAxisInfo.count } }),
             vars: props.dashboardVars,
         });
-        if (status === 'succeed') {
-            state.errorMessage = undefined;
-            state.loading = false;
-            return response;
-        }
-        return undefined;
-    } catch (e: any) {
-        state.loading = false;
-        state.errorMessage = e.message;
-        ErrorHandler.handleError(e);
-        return ErrorHandler.makeAPIErrorToast(e);
-    }
-};
+        state.data = results;
+        drawChart(state.data);
+        return results;
+    },
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && state.runQueries),
+});
 
-/* Util */
-const getDynamicFieldData = (rawData: DynamicFieldData): any[] => {
-    const _criteria = state.dynamicFieldInfo?.criteria;
-    const _seriesData: any[] = [];
-    state.xAxisData.forEach((x, xIdx) => {
-        const _targetData = rawData.results?.find((d) => d[state.xAxisField] === x);
-        state.yAxisData.forEach((y, yIdx) => {
-            const _data = _targetData?.[_criteria].find((v) => v[state.dataField] === y);
-            _seriesData.push([xIdx, yIdx, _data ? _data.value : 0]);
-        });
-    });
+const loading = computed(() => queryResult.isLoading);
+const errorMessage = computed(() => queryResult.error?.value?.message);
 
-    return _seriesData;
-};
-const getStaticFieldData = (rawData: StaticFieldData): any[] => {
+
+/* Util */
+const getFieldData = (rawData: StaticFieldData): any[] => {
     const _seriesData: any[] = [];
     state.xAxisData.forEach((x, xIdx) => {
         state.yAxisData.forEach((y, yIdx) => {
-            const _data = rawData.results?.find((v) => v[state.xAxisField] === x);
+            const _data = rawData.results?.find((v) => v[widgetOptionsState.xAxisInfo?.data as string] === x);
             _seriesData.push([xIdx, yIdx, _data ? _data[y] : 0]);
         });
     });
@@ -257,24 +228,11 @@ const getStaticFieldData = (rawData: StaticFieldData): any[] => {
 };
 const drawChart = (rawData: Data|null) => {
     if (isEmpty(rawData)) return;
-
-    // get converted chart data
-    let _seriesData: any[];
-    if (state.dataFieldInfo?.fieldType === 'staticField') {
-        _seriesData = getStaticFieldData(rawData);
-    } else {
-        _seriesData = getDynamicFieldData(rawData);
-    }
-    state.chartData = _seriesData;
+    state.chartData = getFieldData(rawData);
 };
 
-const loadWidget = async (): Promise<Data|APIErrorToast> => {
-    const res = await fetchWidget();
-    if (!res) return state.data;
-    if (typeof res === 'function') return res;
-    state.data = res;
-    drawChart(state.data);
-    return state.data;
+const loadWidget = () => {
+    state.runQueries = true;
 };
 
 /* Watcher */
@@ -285,11 +243,22 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
     }
 });
 
+const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
+    dateRange,
+    errorMessage: errorMessage.value,
+    widgetLoading: loading.value,
+    noData: computed(() => (state.data ? !state.data.results?.length : false)),
+});
+
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 useWidgetInitAndRefresh({ props, emit, loadWidget });
-defineExpose<WidgetExpose<Data>>({
+onMounted(async () => {
+    if (!props.dataTableId) return;
+    state.dataTable = await getWidgetDataTable(props.dataTableId);
+});
+defineExpose<WidgetExpose>({
     loadWidget,
 });
 </script>
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 6e39c85c73..6355a0becd 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,12 @@ const heatmap: WidgetConfig = {
                 defaultIndex: 0,
             },
         },
-        dataField: {},
+        dataField: {
+            options: {
+                multiSelectable: true,
+                allSelected: true,
+            },
+        },
         colorSchema: {},
     },
     optionalFieldsSchema: {