feat: refactor xy charts with pivot data

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

@@ -37,7 +37,7 @@ import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-const
 
 interface OverridableWidgetFrameState {
     dateRange?: DateRange | ComputedRef<DateRange>;
-    errorMessage?: string | ComputedRef<string>;
+    errorMessage?: string | ComputedRef<string|undefined>;
     widgetLoading?: boolean | ComputedRef<boolean>;
     noData?: boolean | ComputedRef<boolean>;
 }

apps/web/src/common/modules/widgets/_helpers/widget-load-helper.ts

@@ -36,9 +36,12 @@ export const getWidgetLoadApiQueryDateRange = (granularity: string, dateRange: D
     return dateRange;
 };
 
-export const getWidgetLoadApiQuerySort = (xAxisField: string, dataField: string[]): Query['sort'] => {
+export const getWidgetLoadApiQuerySort = (xAxisField: string, dataField: string[], isPivot?: boolean): Query['sort'] => {
     if (xAxisField === 'Date') {
         return [{ key: 'Date', desc: true }];
     }
+    if (isPivot) {
+        return [{ key: 'Sub Total', desc: true }];
+    }
     return dataField.map((field) => ({ key: field, desc: true }));
 };

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

@@ -70,6 +70,7 @@ const state = reactive({
     runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    isPivot: computed<boolean>(() => state.dataTable?.operator === 'PIVOT'),
 
     unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
     data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
@@ -193,7 +194,7 @@ const queryResult = useQuery({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[]),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivot),
         page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
@@ -202,8 +203,8 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 /* Util */
 const getThreshold = (rawData: WidgetLoadResponse): number => {
@@ -234,7 +235,12 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     }
 
     const _seriesData: any[] = [];
-    (widgetOptionsState.dataFieldInfo?.data as string[])?.forEach((field) => {
+    let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
+    if (state.isPivot) {
+        _dataFields = rawData.order?.filter((v) => widgetOptionsState.dataFieldInfo?.data?.includes(v)) || [];
+    }
+    _dataFields.forEach((field) => {
+        if (!widgetOptionsState.dataFieldInfo?.data?.includes(field)) return;
         const _unit: string|undefined = state.unitMap[field];
         _seriesData.push({
             name: field,
@@ -267,7 +273,7 @@ const loadWidget = () => {
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
-    widgetLoading: widgetLoading.value,
+    widgetLoading,
     noData: computed(() => (state.data ? !state.data?.results?.length : false)),
 });
 

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

@@ -113,8 +113,8 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 const refinedData = computed(() => {
     const data = queryResult.data?.value;
@@ -144,7 +144,7 @@ const refinedData = computed(() => {
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
-    widgetLoading: widgetLoading.value,
+    widgetLoading,
     noData: computed(() => (refinedData.value ? !(refinedData.value?.length) : false)),
 });
 

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

@@ -63,8 +63,9 @@ const state = reactive({
     runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    isPivot: computed<boolean>(() => state.dataTable?.operator === 'PIVOT'),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value),
+    data: computed<WidgetLoadResponse|undefined>(() => queryResult.data?.value),
     // unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[state.dataField]),
     boxWidth: BOX_MIN_WIDTH,
     boxHeight: 0,
@@ -78,7 +79,11 @@ const state = reactive({
     }),
     yAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
-        return (widgetOptionsState.dataFieldInfo?.data ?? []) as string[];
+        let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
+        if (state.isPivot) {
+            _dataFields = state.data?.order?.filter((v) => widgetOptionsState.dataFieldInfo?.data?.includes(v)) || [];
+        }
+        return _dataFields;
     }),
     legendList: [] as WidgetLegend[],
     widgetDateRange: computed<DateRange>(() => {
@@ -95,6 +100,7 @@ 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),
+    xAxisCount: computed<number>(() => widgetOptionsState.xAxisInfo?.count || 0),
     formatRulesInfo: computed<FormatRulesValue>(() => props.widgetOptions?.formatRules?.value as FormatRulesValue),
     numberFormatInfo: computed<NumberFormatValue>(() => props.widgetOptions?.numberFormat?.value as NumberFormatValue),
 });
@@ -137,8 +143,8 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 /* Util */
 const loadWidget = async () => {
@@ -203,13 +209,13 @@ useResizeObserver(colorCodedTableRef, throttle(() => {
     if (!_containerWidth || !_containerHeight) return;
 
     // width
-    const boxWidth = (_containerWidth - Y_AXIS_FIELD_WIDTH) / state.xAxisCount;
+    const boxWidth = (_containerWidth - Y_AXIS_FIELD_WIDTH) / widgetOptionsState.xAxisCount;
     if (boxWidth < BOX_MIN_WIDTH) state.boxWidth = BOX_MIN_WIDTH - 2;
     else state.boxWidth = boxWidth - 2;
 
     // height
-    const yAxisCount = state.yAxisData.length;
-    const boxHeight = _containerHeight / yAxisCount;
+    const yAxisCount = state.yAxisData.length || 1;
+    const boxHeight = (_containerHeight - 16) / yAxisCount;
     const padding = 20 / yAxisCount;
     if (boxHeight < 32) state.boxHeight = 32 - padding;
     else state.boxHeight = boxHeight - padding;
@@ -291,12 +297,12 @@ useResizeObserver(colorCodedTableRef, throttle(() => {
     .table-wrapper {
         display: flex;
         width: 100%;
-        height: 82%;
+        height: 95%;
         gap: 0.25rem;
         overflow: auto;
         margin-top: 1rem;
         &.overlay {
-            height: 90%;
+            height: 95%;
         }
         .y-axis-wrapper {
             .y-col {

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

@@ -168,8 +168,8 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 /* Util */
 const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -184,11 +184,11 @@ const loadWidget = () => {
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
-    widgetLoading: widgetLoading.value,
+    widgetLoading,
 });
 
 /* Watcher */
-watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
+watch([() => state.chartData, () => chartContext.value, () => props.widgetOptions], ([, chartCtx]) => {
     if (chartCtx) {
         state.chart = init(chartContext.value);
         state.chart.setOption(state.chartOptions, true);

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

@@ -69,6 +69,7 @@ const state = reactive({
     runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    isPivot: computed<boolean>(() => state.dataTable?.operator === 'PIVOT'),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -199,7 +200,7 @@ const queryResult = useQuery({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[]),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivot),
         page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
@@ -208,16 +209,20 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 /* Util */
 const drawChart = (rawData: WidgetLoadResponse|null) => {
     if (isEmpty(rawData)) return;
 
     const _seriesData: any[] = [];
     const _defaultValue = widgetOptionsState.missingValueInfo?.type === 'lineToZero' ? 0 : undefined;
-    (widgetOptionsState.dataFieldInfo?.data as string[] ?? []).forEach((_dataField) => {
+    let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
+    if (state.isPivot) {
+        _dataFields = rawData.order?.filter((v) => widgetOptionsState.dataFieldInfo?.data?.includes(v)) || [];
+    }
+    _dataFields.forEach((_dataField) => {
         const _unit: string|undefined = state.unitMap[_dataField];
         _seriesData.push({
             name: _dataField,
@@ -258,7 +263,7 @@ watch([() => state.data, () => props.widgetOptions], ([newData]) => {
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
-    widgetLoading: widgetLoading.value,
+    widgetLoading,
     noData: computed(() => (state.data ? !state.data.results?.length : false)),
 });
 

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

@@ -14,7 +14,7 @@ import type {
 } from 'echarts/core';
 import type { LegendOption, EChartsOption } from 'echarts/types/dist/shared';
 import {
-    groupBy, isEmpty, orderBy, throttle, sumBy,
+    isEmpty, orderBy, throttle,
 } from 'lodash';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
@@ -58,6 +58,8 @@ import type {
 
 import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
+
+
 interface ChartData {
     name: string;
     value: number;
@@ -235,12 +237,12 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     if (isEmpty(rawData)) return;
 
     // get chart data
-    const _groupByData = groupBy(rawData.results || [], widgetOptionsState.groupByInfo?.data);
-    let _refinedData: ChartData[] = Object.entries(_groupByData).map(([k, v]) => ({
-        name: k,
-        value: sumBy(v, widgetOptionsState.groupByInfo?.data as string),
+    const _groupByData = rawData?.results || [];
+    let _refinedData: ChartData[] = _groupByData.map((d) => ({
+        name: d[widgetOptionsState.groupByInfo?.data as string] as string,
+        value: d[widgetOptionsState.dataFieldInfo?.data as string] as number,
     }));
-    if (isDateField(state.groupByField)) {
+    if (isDateField(widgetOptionsState.groupByInfo?.data as string)) {
         _refinedData = orderBy(_refinedData, 'name', 'desc');
         _refinedData = _refinedData?.slice(0, widgetOptionsState.groupByInfo?.count);
     } else {

apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue

@@ -71,6 +71,7 @@ const state = reactive({
     runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    isPivot: computed(() => state.dataTable?.operator === 'PIVOT'),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     xAxisData: computed<string[]>(() => {
@@ -194,7 +195,7 @@ const queryResult = useQuery({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[]),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivot),
         page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
@@ -203,19 +204,21 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 
 /* Util */
 const drawChart = (rawData?: WidgetLoadResponse|null) => {
     if (isEmpty(rawData)) return;
 
-    // const _maxTotalCount = rawData?.results?.[0]?.[`_total_${state.dataField}`] ?? 0;
-    // const _threshold = _maxTotalCount * 0.08;
-
     const _seriesData: any[] = [];
-    (widgetOptionsState.dataFieldInfo?.data as string[])?.forEach((_dataField) => {
+    let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
+    if (state.isPivot) {
+        _dataFields = rawData.order?.filter((v) => widgetOptionsState.dataFieldInfo?.data?.includes(v)) || [];
+    }
+    _dataFields.forEach((_dataField) => {
+        if (!widgetOptionsState.dataFieldInfo?.data?.includes(_dataField)) return;
         const _unit: string|undefined = state.unitMap[_dataField];
         _seriesData.push({
             name: _dataField,
@@ -247,7 +250,7 @@ const loadWidget = () => {
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
-    widgetLoading: widgetLoading.value,
+    widgetLoading,
     noData: computed(() => (state.data ? !state.data.results?.length : false)),
 });
 

apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue

@@ -66,6 +66,7 @@ const state = reactive({
     runQueries: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     dataTable: undefined as PublicDataTableModel|PrivateDataTableModel|undefined,
+    isPivot: computed<boolean>(() => state.dataTable?.operator === 'PIVOT'),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     yAxisData: computed<string[]>(() => {
@@ -186,7 +187,7 @@ const queryResult = useQuery({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.yAxisInfo?.data ? [widgetOptionsState.yAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.yAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[]),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.yAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivot),
         page: { start: 0, limit: widgetOptionsState.yAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
@@ -195,18 +196,19 @@ const queryResult = useQuery({
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isLoading);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const widgetLoading = computed<boolean>(() => queryResult.isLoading.value);
+const errorMessage = computed<string|undefined>(() => queryResult.error?.value?.message);
 
 /* Util */
 const drawChart = (rawData?: WidgetLoadResponse|null) => {
     if (isEmpty(rawData)) return;
 
-    // const _maxTotalCount = rawData?.results?.[0]?.[`_total_${state.dataField}`] ?? 0;
-    // const _threshold = _maxTotalCount * 0.08;
-
     const _seriesData: any[] = [];
-    (widgetOptionsState.dataFieldInfo?.data as string[])?.forEach((_dataField) => {
+    let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
+    if (state.isPivot) {
+        _dataFields = rawData.order?.filter((v) => widgetOptionsState.dataFieldInfo?.data?.includes(v)) || [];
+    }
+    _dataFields.forEach((_dataField) => {
         const _unit: string|undefined = state.unitMap[_dataField];
         _seriesData.push({
             name: _dataField,
@@ -234,7 +236,7 @@ const loadWidget = () => {
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
     errorMessage,
-    widgetLoading: widgetLoading.value,
+    widgetLoading,
     noData: computed(() => (state.data ? !state.data.results?.length : false)),
 });