Skip to content

Commit a040a61

Browse files
piggggggggypiggggggggy
committed
fix(number-format): apply new pivot planning to number format
Signed-off-by: samuel.park <samuel.park@megazone.com>
1 parent 82a901c commit a040a61

File tree

17 files changed

+97
-29
lines changed

17 files changed

+97
-29
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ onUnmounted(() => {
243243
:class="{ 'full-size': state.selectedWidgetSize === 'FULL' || widgetGenerateState.overlayType === 'EXPAND' }"
244244
>
245245
<component :is="getWidgetComponent(state.selectedWidgetType)"
246+
:key="widgetGenerateState.selectedDataTableId"
246247
ref="overlayWidgetRef"
247248
:widget-name="widgetGenerateState.widget.widget_type"
248249
:widget-id="widgetGenerateState.widget.widget_id"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
1111
import { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
1212
import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
1313
import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
14-
import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
14+
import type { NumberFormatInfo } from '@/common/modules/widgets/_widget-fields/number-format/type';
1515
import type { WidgetType } from '@/common/modules/widgets/types/widget-model';
1616

1717
import { SIZE_UNITS } from '@/services/asset-inventory/constants/asset-analysis-constant';
@@ -44,9 +44,9 @@ export const sortWidgetTableFields = (fields: string[]): string[] => {
4444
};
4545

4646
/* Widget Number Format */
47-
export const getFormattedNumber = (val: number, dataField: string, numberFormatValue?: NumberFormatValue, unit?: string): string => {
48-
if (!numberFormatValue) return numberFormatter(val) || '--';
49-
const _targetNumberFormat = numberFormatValue[dataField];
47+
export const getFormattedNumber = (val: number, numberFormatInfo?: NumberFormatInfo, unit?: string): string => {
48+
if (!numberFormatInfo) return numberFormatter(val) || '--';
49+
const _targetNumberFormat = numberFormatInfo;
5050
switch (_targetNumberFormat?.format) {
5151
case NUMBER_FORMAT.AUTO:
5252
if (unit && SIZE_UNITS.includes(unit)) {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -402,11 +402,14 @@ export const widgetFieldDefaultValueSetterRegistry: WidgetFieldDefaultValueSette
402402
numberFormat: (widgetConfig, dataTable) => {
403403
const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
404404
const numberFormatOptions = (_fieldsSchema.numberFormat?.options ?? {}) as NumberFormatOptions;
405+
const isPivotDataTable = dataTable.operator === DATA_TABLE_OPERATOR.PIVOT;
406+
const columnFieldForPivot = dataTable.options.PIVOT?.fields?.column as string;
405407

406408
const dataKeys = Object.keys(dataTable?.data_info ?? {}) as string[];
409+
const fieldKeys = isPivotDataTable ? [columnFieldForPivot] : dataKeys;
407410

408411
const result: NumberFormatValue = widgetFieldDefaultValueMap.numberFormat;
409-
dataKeys.forEach((key) => {
412+
fieldKeys.forEach((key) => {
410413
result[key] = {
411414
format: numberFormatOptions.default ?? NUMBER_FORMAT.AUTO,
412415
};

‎apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ import {
99
import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
1010
import { customNumberFormatter } from '@cloudforet/utils';
1111
12+
import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
13+
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
1214
import { i18n } from '@/translations';
1315
16+
import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
1417
import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
1518
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
1619
import type { NumberFormat, NumberFormatValue, NumberFormatOptions } from '@/common/modules/widgets/_widget-fields/number-format/type';
@@ -19,6 +22,7 @@ import type {
1922
} from '@/common/modules/widgets/types/widget-field-type';
2023
2124
25+
2226
const SAMPLE_NUMBER = 7564613647;
2327
const SAMPLE_FORMAT_LIST = [
2428
{ format: '#,##0', sample: 1234 },
@@ -33,10 +37,22 @@ const FIELD_KEY = 'numberFormat';
3337
const props = defineProps<WidgetFieldComponentProps<NumberFormatOptions>>();
3438
const widgetGenerateStore = useWidgetGenerateStore();
3539
const widgetGenerateGetters = widgetGenerateStore.getters;
40+
41+
const storeState = reactive({
42+
selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
43+
});
44+
3645
const state = reactive({
46+
isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
3747
isInitiated: false,
3848
fieldValue: computed<NumberFormatValue>(() => props.fieldManager.data[FIELD_KEY].value),
39-
dataFieldList: computed<string[]>(() => Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? []),
49+
dataFieldList: computed<string[]>(() => {
50+
const columnFieldForPivot = storeState.selectedDataTable?.options.PIVOT?.fields?.column;
51+
if (state.isPivotDataTable && columnFieldForPivot) {
52+
return [columnFieldForPivot];
53+
}
54+
return Object.keys(widgetGenerateGetters.selectedDataTable?.data_info ?? {}) ?? [];
55+
}),
4056
menuItems: computed<SelectDropdownMenuItem[]>(() => [
4157
{
4258
name: NUMBER_FORMAT.AUTO,

‎apps/web/src/common/modules/widgets/_widget-fields/number-format/type.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import type { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-f
22

33
export type NumberFormat = typeof NUMBER_FORMAT[keyof typeof NUMBER_FORMAT];
44
export interface NumberFormatValue {
5-
[key: string]: {
6-
format: NumberFormat;
7-
customNumberFormat?: string;
8-
};
5+
[key: string]: NumberFormatInfo;
6+
}
7+
8+
export interface NumberFormatInfo {
9+
format: NumberFormat;
10+
customNumberFormat?: string;
911
}
1012

1113
export interface NumberFormatOptions {

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ import {
55
PFieldTitle, PToggleButton, PI, PTooltip, PCheckbox,
66
} from '@cloudforet/mirinae';
77
8+
import type { PrivateDataTableModel } from '@/schema/dashboard/private-data-table/model';
9+
import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/model';
10+
11+
import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
12+
import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
813
import type { SubTotalOptions, SubTotalValue } from '@/common/modules/widgets/_widget-fields/sub-total/type';
914
import type {
1015
WidgetFieldComponentProps,
@@ -14,8 +19,15 @@ import type {
1419
const FIELD_KEY = 'subTotal';
1520
1621
const props = defineProps<WidgetFieldComponentProps<SubTotalOptions>>();
22+
const widgetGenerateStore = useWidgetGenerateStore();
23+
const widgetGenerateGetters = widgetGenerateStore.getters;
24+
25+
const storeState = reactive({
26+
selectedDataTable: computed<PrivateDataTableModel|PublicDataTableModel|undefined>(() => widgetGenerateGetters.selectedDataTable),
27+
});
1728
1829
const state = reactive({
30+
isPivotDataTable: computed<boolean>(() => storeState.selectedDataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
1931
fieldValue: computed<SubTotalValue>(() => props.fieldManager.data[FIELD_KEY].value),
2032
disabled: computed(() => false),
2133
});
@@ -54,7 +66,7 @@ const handleUpdateToggle = (value: boolean) => {
5466
</p-tooltip>
5567
</p-field-title>
5668
<p-toggle-button :value="state.fieldValue?.toggleValue"
57-
:disabled="state.disabled"
69+
:disabled="!state.isPivotDataTable"
5870
@update:value="handleUpdateToggle"
5971
/>
6072
</div>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,10 @@ const state = reactive({
118118
const _unit: string|undefined = state.unitMap[p.seriesName];
119119
let _value = numberFormatter(p.value) || '';
120120
if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
121-
_value = getFormattedNumber(p.value, p.seriesName, widgetOptionsState.numberFormatInfo, _unit);
121+
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
122+
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
123+
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
124+
_value = getFormattedNumber(p.value, numberFormat, _unit);
122125
}
123126
return `${p.marker} ${p.seriesName}: <b>${_value}</b>`;
124127
});
@@ -257,7 +260,10 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
257260
fontSize: 10,
258261
formatter: (p) => {
259262
if (p.value < _threshold) return '';
260-
return getFormattedNumber(p.value, field, widgetOptionsState.numberFormatInfo, _unit);
263+
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
264+
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
265+
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
266+
return getFormattedNumber(p.value, numberFormat, _unit);
261267
},
262268
},
263269
data: state.xAxisData.map((d) => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,10 @@ const targetValue = (xField?: string, yField?: string, format?: 'table'|'tooltip
162162
if (!_targetVal) return format === 'table' ? '--' : '';
163163
if (!format) return _targetVal;
164164
if (format === 'table') {
165-
const _formattedVal = getFormattedNumber(_targetVal, _field, widgetOptionsState.numberFormatInfo);
165+
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
166+
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _field;
167+
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
168+
const _formattedVal = getFormattedNumber(_targetVal, numberFormat);
166169
if ((_formattedVal.length * 6.5) > state.boxWidth) return '...';
167170
return _formattedVal;
168171
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,12 @@ const state = reactive({
8989
distance: -55,
9090
color: gray[700],
9191
fontSize: 12,
92-
formatter: (val) => getFormattedNumber(val, widgetOptionsState.dataFieldInfo?.data as string, widgetOptionsState.numberFormatInfo, state.unit),
92+
formatter: (val) => getFormattedNumber(val, widgetOptionsState.numberFormatInfo?.[widgetOptionsState.dataFieldInfo?.data as string], state.unit),
9393
},
9494
detail: {
9595
offsetCenter: [0, 0],
9696
fontSize: 32,
97-
formatter: (val) => getFormattedNumber(val, widgetOptionsState.dataFieldInfo?.data as string, widgetOptionsState.numberFormatInfo, state.unit),
97+
formatter: (val) => getFormattedNumber(val, widgetOptionsState.numberFormatInfo?.[widgetOptionsState.dataFieldInfo?.data as string], state.unit),
9898
color: gray[700],
9999
},
100100
data: [

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,10 @@ const state = reactive({
121121
if (!_value) return undefined;
122122
if (_unit) _seriesName = `${_seriesName} (${_unit})`;
123123
if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
124-
_value = getFormattedNumber(p.value, p.seriesName, widgetOptionsState.numberFormatInfo, _unit);
124+
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
125+
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
126+
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
127+
_value = getFormattedNumber(p.value, numberFormat, _unit);
125128
}
126129
return `${p.marker} ${_seriesName}: <b>${_value}</b>`;
127130
});
@@ -242,7 +245,12 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
242245
position: widgetOptionsState.displaySeriesLabelInfo?.position,
243246
rotate: widgetOptionsState.displaySeriesLabelInfo?.rotate,
244247
fontSize: 10,
245-
formatter: (p) => getFormattedNumber(p.value, _dataField, widgetOptionsState.numberFormatInfo, _unit),
248+
formatter: (p) => {
249+
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
250+
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _dataFields;
251+
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
252+
return getFormattedNumber(p.value, numberFormat, _unit);
253+
},
246254
},
247255
});
248256
});

0 commit comments

Comments
 (0)