Skip to content

Commit 9ddc404

Browse files
piggggggggypiggggggggy
authored
fix(pivot): apply new pivot planning to table widget and widget form (#5392)
* fix(pivot): apply new pivot planning to dataField in step2 Signed-off-by: samuel.park <samuel.park@megazone.com> * fix(table): apply new pivot planning to table widget and field Signed-off-by: samuel.park <samuel.park@megazone.com> * fix(widget-form): apply pivot-unsupported widget disabled and selection planning Signed-off-by: samuel.park <samuel.park@megazone.com> * chore: remove deprecated sort_keys Signed-off-by: samuel.park <samuel.park@megazone.com> * chore: add missing code Signed-off-by: samuel.park <samuel.park@megazone.com> * chore: add annotation Signed-off-by: samuel.park <samuel.park@megazone.com> --------- Signed-off-by: samuel.park <samuel.park@megazone.com>
1 parent 686a07a commit 9ddc404

File tree

8 files changed

+133
-77
lines changed

8 files changed

+133
-77
lines changed

‎apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
77
import { useQuery } from '@tanstack/vue-query';
88
import bytes from 'bytes';
9-
import { sortBy } from 'lodash';
109
1110
import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
1211
import {
@@ -81,7 +80,7 @@ const state = reactive({
8180
dataInfo: computed<DataInfo|undefined>(() => storeState.selectedDataTable?.data_info),
8281
isPivot: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
8382
isAutoTypeColumnPivot: computed<boolean>(() => state.isPivot && !!storeState.selectedDataTable?.options?.[DATA_TABLE_OPERATOR.PIVOT]?.limit),
84-
pivotSortKeys: computed<string[]>(() => (state.isPivot ? storeState.selectedDataTable?.sort_keys ?? [] : [])),
83+
// pivotSortKeys: computed<string[]>(() => (state.isPivot ? storeState.selectedDataTable?.sort_keys ?? [] : [])),
8584
fields: computed<PreviewTableField[]>(() => {
8685
if (!storeState.selectedDataTableId || !state.data?.results?.length) {
8786
return [{
@@ -90,13 +89,13 @@ const state = reactive({
9089
}];
9190
}
9291
93-
const sortBySortKeys = (targetArray: string[]): string[] => sortBy(targetArray, (item) => {
94-
const index = state.pivotSortKeys.indexOf(item);
95-
return index === -1 ? Infinity : index;
96-
});
92+
// const sortBySortKeys = (targetArray: string[]): string[] => sortBy(targetArray, (item) => {
93+
// const index = state.pivotSortKeys.indexOf(item);
94+
// return index === -1 ? Infinity : index;
95+
// });
9796
9897
return [
99-
...sortBySortKeys(state.labelFields).map((key) => ({
98+
...state.labelFields.map((key) => ({
10099
type: 'LABEL',
101100
name: key,
102101
sortKey: key,
@@ -114,7 +113,7 @@ const state = reactive({
114113
type: 'DIVIDER',
115114
name: '',
116115
},
117-
...sortBySortKeys(state.dataFields).map((key) => ({
116+
...state.dataFields.map((key) => ({
118117
type: 'DATA',
119118
name: key,
120119
})),

‎apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ import type { TranslateResult } from 'vue-i18n';
77
import { cloneDeep } from 'lodash';
88
99
import {
10-
PFieldGroup, PSelectDropdown, PButton, PI, PButtonModal,
10+
PFieldGroup, PSelectDropdown, PButton, PI, PButtonModal, PTooltip,
1111
} from '@cloudforet/mirinae';
1212
import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
1313
14+
import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
15+
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
16+
1417
import NewMark from '@/common/components/marks/NewMark.vue';
15-
import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
18+
import { DATA_TABLE_OPERATOR, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
1619
import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
1720
import { CONSOLE_WIDGET_CONFIG } from '@/common/modules/widgets/_constants/widget-config-list-constant';
1821
import {
@@ -23,7 +26,7 @@ import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-g
2326
import type WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
2427
import WidgetHeaderField from '@/common/modules/widgets/_widget-fields/header/WidgetHeaderField.vue';
2528
26-
import { red } from '@/styles/colors';
29+
import { gray, red } from '@/styles/colors';
2730
2831
2932
const FORM_TITLE_MAP = {
@@ -40,6 +43,8 @@ interface Props {
4043
fieldManager: WidgetFieldValueManager;
4144
}
4245
46+
type DataTableModel = PrivateDataTableModel|PublicDataTableModel;
47+
const UNSUPPORTED_CHARTS_IN_PIVOT = ['numberCard', 'gauge', 'geoMap', 'treemap', 'pieChart', 'colorCodedHeatmap', 'sankeyChart'];
4348
const props = defineProps<Props>();
4449
4550
const widgetGenerateStore = useWidgetGenerateStore();
@@ -50,6 +55,8 @@ const state = reactive({
5055
name: d.widgetName,
5156
label: d.meta?.title || d.widgetName,
5257
icon: WIDGET_COMPONENT_ICON_MAP[d.widgetName ?? ''],
58+
iconColor: UNSUPPORTED_CHARTS_IN_PIVOT.includes(d.widgetName) && widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT ? gray[300] : undefined,
59+
disabled: UNSUPPORTED_CHARTS_IN_PIVOT.includes(d.widgetName) && widgetGenerateGetters.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT,
5360
}))),
5461
widgetConfig: computed(() => getWidgetConfig(widgetGenerateState.selectedWidgetName)),
5562
widgetConfigDependencies: computed<{[key:string]: string[]}>(() => state.widgetConfig.dependencies || {}),
@@ -71,7 +78,8 @@ const state = reactive({
7178
label: d.name,
7279
icon: d.data_type === DATA_TABLE_TYPE.TRANSFORMED ? 'ic_transform-data' : 'ic_service_data-sources',
7380
}))),
74-
selectedDataTableId: computed(() => widgetGenerateState.selectedDataTableId),
81+
selectedDataTableId: computed<string>(() => widgetGenerateState.selectedDataTableId),
82+
selectedDataTable: computed<DataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
7583
errorModalCurrentType: undefined as 'default'|'geoMap'|undefined,
7684
});
7785
@@ -87,8 +95,25 @@ const handleSelectDataTable = async (dataTableId: string) => {
8795
});
8896
8997
props.fieldManager.updateDataTableAndOriginData(selectedDataTable, {});
98+
99+
// check if selected chart type is supported in pivot
100+
if (selectedDataTable.operator === DATA_TABLE_OPERATOR.PIVOT && UNSUPPORTED_CHARTS_IN_PIVOT.includes(widgetGenerateState.selectedWidgetName)) {
101+
changeWidgetType('table');
102+
}
103+
};
104+
105+
const handleSelectWidgetName = (widgetName: string) => {
106+
changeWidgetType(widgetName);
107+
};
108+
const handleClickEditDataTable = () => {
109+
widgetGenerateStore.setOverlayStep(1);
110+
state.widgetDefaultValidationModalVisible = false;
111+
};
112+
const handleClickCollapsibleTitle = (collapsedTitle: string) => {
113+
state.collapsedTitleMap[collapsedTitle] = !state.collapsedTitleMap[collapsedTitle];
90114
};
91115
116+
/* Utils */
92117
const checkDefaultValidation = () => {
93118
const selectedChartType = widgetGenerateState.selectedWidgetName;
94119
const selectedDataTable = widgetGenerateGetters.selectedDataTable ?? {};
@@ -113,26 +138,15 @@ const checkDefaultValidation = () => {
113138
}
114139
}
115140
};
116-
117-
const handleSelectWidgetName = (widgetName: string) => {
141+
const changeWidgetType = (widgetName: string) => {
118142
const _config = getWidgetConfig(widgetName);
119143
if (widgetName === widgetGenerateState.selectedWidgetName || !_config) return;
120144
widgetGenerateStore.setSelectedWidgetName(widgetName);
121-
122145
widgetGenerateStore.setSize(_config.meta.sizes[0]);
123-
widgetGenerateStore.setWidgetFormValueMap({});
124-
widgetGenerateStore.setWidgetValidMap({});
125146
126147
props.fieldManager.updateWidgetType(_config);
127148
checkDefaultValidation();
128149
};
129-
const handleClickEditDataTable = () => {
130-
widgetGenerateStore.setOverlayStep(1);
131-
state.widgetDefaultValidationModalVisible = false;
132-
};
133-
const handleClickCollapsibleTitle = (collapsedTitle: string) => {
134-
state.collapsedTitleMap[collapsedTitle] = !state.collapsedTitleMap[collapsedTitle];
135-
};
136150
137151
// const checkFormDependencies = (changedFieldName: string):string[] => state.widgetConfigDependencies[changedFieldName] || [];
138152
@@ -189,6 +203,13 @@ onMounted(() => {
189203
/>
190204
<span>{{ state.chartTypeMenuItems.find((d) => d.name === widgetGenerateState.selectedWidgetName).label }}</span>
191205
</template>
206+
<template #menu-item--format="{item}">
207+
<p-tooltip :contents="item.disabled ? 'When a Pivot DataTable is selected, this chart type is unavailable.': undefined"
208+
position="bottom"
209+
>
210+
<span>{{ item.label }}</span>
211+
</p-tooltip>
212+
</template>
192213
</p-select-dropdown>
193214
</p-field-group>
194215
</div>

‎apps/web/src/common/modules/widgets/_widget-field-value-manager/constant/default-value-registry.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
12
import {
23
COLOR_SCHEMA, DATA_FIELD_HEATMAP_COLOR, DATE_FORMAT, DEFAULT_COMPARISON_COLOR, NUMBER_FORMAT, TABLE_DEFAULT_MINIMUM_WIDTH, WIDGET_HEIGHT,
34
} from '@/common/modules/widgets/_constants/widget-field-constant';
@@ -147,6 +148,13 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
147148

148149
const result = widgetFieldDefaultValueMap.dataField;
149150

151+
const isPivotDataTable = dataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
152+
if (isPivotDataTable) { // if pivot dataTable, always multiSelectable
153+
return {
154+
data: [dataTable.options.PIVOT?.fields?.column],
155+
};
156+
}
157+
150158
const fieldKeys = sortWidgetTableFields(Object.keys(dataTable?.data_info ?? {}));
151159

152160
if (dataFieldOptions.multiSelectable) {

‎apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import {
33
computed, reactive,
44
} from 'vue';
55
6-
import { sortBy } from 'lodash';
7-
86
import { PSelectDropdown, PFieldGroup } from '@cloudforet/mirinae';
97
import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
108
9+
import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
10+
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
11+
1112
import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
1213
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
1314
import { widgetValidatorRegistry } from '@/common/modules/widgets/_widget-field-value-manager/constant/validator-registry';
@@ -25,31 +26,34 @@ const widgetGenerateGetters = widgetGenerateStore.getters;
2526
2627
const validator = widgetValidatorRegistry[FIELD_KEY];
2728
29+
const storeState = reactive({
30+
selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
31+
});
32+
2833
const state = reactive({
2934
fieldValue: computed<DataFieldValue>(() => props.fieldManager.data[FIELD_KEY]?.value),
3035
multiselectable: computed(() => props.widgetFieldSchema?.options?.multiSelectable),
3136
menuItems: computed<MenuItem[]>(() => {
32-
const isPivotDataTable = widgetGenerateGetters?.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
33-
const pivotSortKeys = (widgetGenerateGetters.selectedDataTable?.sort_keys ?? []);
34-
3537
const dataInfoList = Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
36-
const sortedDataInfoList = sortBy(dataInfoList, (item) => {
37-
const index = pivotSortKeys.indexOf(item);
38-
return index === -1 ? Infinity : index;
39-
});
40-
return (isPivotDataTable ? sortedDataInfoList : dataInfoList).map((d) => ({
41-
name: d,
42-
label: d,
43-
}));
38+
return dataInfoList.filter((field) => field !== 'Sub Total')
39+
.map((d) => ({
40+
name: d,
41+
label: d,
42+
}));
4443
}),
4544
invalid: computed<boolean>(() => !validator(state.fieldValue, props.widgetConfig)),
4645
selectedItem: computed<MenuItem[]|string|undefined>(() => {
46+
if (state.isPivotDataTable) {
47+
const dataName = storeState.selectedDataTable?.options.PIVOT?.fields?.column || '';
48+
return convertToMenuItem([dataName]);
49+
}
4750
if (!state.menuItems.length) return undefined;
4851
if (state.multiselectable) {
4952
return convertToMenuItem((state.fieldValue.data ?? []) as string[]);
5053
}
5154
return (state.fieldValue.data as string) ?? state.menuItems[0]?.name;
5255
}),
56+
isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
5357
});
5458
5559
/* Event */
@@ -75,6 +79,7 @@ const convertToMenuItem = (data: string[]) => data.map((d) => ({
7579
:multi-selectable="state.multiselectable"
7680
:show-select-marker="state.multiselectable"
7781
:invalid="state.invalid"
82+
:disabled="state.isPivotDataTable"
7883
appearance-type="badge"
7984
block
8085
@update:selected="handleChangeValue"

‎apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { computed, reactive } from 'vue';
33
44
import {
5-
PFieldTitle, PToggleButton, PCheckbox, PI, PTooltip,
5+
PFieldTitle, PToggleButton, PI, PTooltip,
66
} from '@cloudforet/mirinae';
77
88
import type { SubTotalOptions, SubTotalValue } from '@/common/modules/widgets/_widget-fields/sub-total/type';
@@ -20,12 +20,12 @@ const state = reactive({
2020
disabled: computed(() => false),
2121
});
2222
23-
const handleUpdateValue = (value: boolean) => {
24-
props.fieldManager.setFieldValue(FIELD_KEY, {
25-
...state.fieldValue,
26-
freeze: value,
27-
});
28-
};
23+
// const handleUpdateValue = (value: boolean) => {
24+
// props.fieldManager.setFieldValue(FIELD_KEY, {
25+
// ...state.fieldValue,
26+
// freeze: value,
27+
// });
28+
// };
2929
const handleUpdateToggle = (value: boolean) => {
3030
if (value) {
3131
props.fieldManager.setFieldValue(FIELD_KEY, {
@@ -58,15 +58,15 @@ const handleUpdateToggle = (value: boolean) => {
5858
@update:value="handleUpdateToggle"
5959
/>
6060
</div>
61-
<div v-if="state.fieldValue?.toggleValue"
62-
class="contents"
63-
>
64-
<p-checkbox :selected="state.fieldValue?.freeze"
65-
@change="handleUpdateValue"
66-
>
67-
{{ $t('COMMON.WIDGETS.TOTAL.SUB_TOTAL_DESC') }}
68-
</p-checkbox>
69-
</div>
61+
<!-- <div v-if="state.fieldValue?.toggleValue"-->
62+
<!-- class="contents"-->
63+
<!-- >-->
64+
<!-- <p-checkbox :selected="state.fieldValue?.freeze"-->
65+
<!-- @change="handleUpdateValue"-->
66+
<!-- >-->
67+
<!-- {{ $t('COMMON.WIDGETS.TOTAL.SUB_TOTAL_DESC') }}-->
68+
<!-- </p-checkbox>-->
69+
<!-- </div>-->
7070
</div>
7171
</template>
7272

‎apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import {
44
} from 'vue';
55
import type { TranslateResult } from 'vue-i18n';
66
7-
import { sortBy } from 'lodash';
8-
97
import {
108
PFieldTitle, PToggleButton, PFieldGroup, PSelectDropdown, PI, PTooltip,
119
} from '@cloudforet/mirinae';
1210
import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
1311
import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/inputs/dropdown/select-dropdown/type';
1412
13+
import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
14+
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
1515
import { i18n } from '@/translations';
1616
1717
@@ -36,6 +36,10 @@ const props = defineProps<WidgetFieldComponentProps<TableColumnComparisonOptions
3636
const widgetGenerateStore = useWidgetGenerateStore();
3737
const widgetGenerateGetters = widgetGenerateStore.getters;
3838
39+
const storeState = reactive({
40+
selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
41+
});
42+
3943
const state = reactive({
4044
fieldValue: computed<TableColumnComparisonValue>(() => props.fieldManager.data[FIELD_KEY].value),
4145
infoText: computed<TranslateResult>(() => {
@@ -49,15 +53,8 @@ const state = reactive({
4953
{ label: `${i18n.t('COMMON.WIDGETS.COMPARISON.PERCENT')}(%)`, name: 'percent' },
5054
]),
5155
fieldMenuItems: computed<SelectDropdownMenuItem[]>(() => {
52-
const isPivotDataTable = widgetGenerateGetters?.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT;
53-
const pivotSortKeys = (widgetGenerateGetters.selectedDataTable?.sort_keys ?? []);
54-
5556
const dataInfoList = Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
56-
const sortedDataInfoList = sortBy(dataInfoList, (item) => {
57-
const index = pivotSortKeys.indexOf(item);
58-
return index === -1 ? Infinity : index;
59-
});
60-
return (isPivotDataTable ? sortedDataInfoList : dataInfoList).map((d) => ({
57+
return dataInfoList.map((d) => ({
6158
name: d,
6259
label: d,
6360
}));
@@ -66,6 +63,7 @@ const state = reactive({
6663
name: item,
6764
label: item,
6865
}))),
66+
isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
6967
});
7068
7169
const handleUpdateColor = (key:'decreaseColor'|'increaseColor', color:string) => {
@@ -113,6 +111,7 @@ const handleUpdateFields = (fields: MenuItem[]) => {
113111
</p-tooltip>
114112
</p-field-title>
115113
<p-toggle-button :value="state.fieldValue?.toggleValue"
114+
:disabled="state.isPivotDataTable"
116115
@change-toggle="handleUpdateToggle"
117116
/>
118117
</div>

0 commit comments

Comments
 (0)