Skip to content

Commit 6ad1018

Browse files
yuda110yuda110
authored
chore: fix minor in sankey & apply reference label to charts (#5405)
* chore: fix minor Signed-off-by: yuda <yuda@megazone.com> * chore: apply reference label to charts Signed-off-by: yuda <yuda@megazone.com> --------- Signed-off-by: yuda <yuda@megazone.com>
1 parent 783a838 commit 6ad1018

File tree

7 files changed

+39
-14
lines changed

7 files changed

+39
-14
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const state = reactive({
7979
unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
8080
data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
8181
chart: null as EChartsType | null,
82+
dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
8283
xAxisData: computed<string[]>(() => {
8384
if (!state.data?.results?.length) return [];
8485
if (isDateField(widgetOptionsState.xAxisInfo?.data)) {
@@ -104,7 +105,10 @@ const state = reactive({
104105
icon: 'circle',
105106
itemWidth: 10,
106107
itemHeight: 10,
107-
formatter: (val) => val,
108+
formatter: (val) => {
109+
if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
110+
return val;
111+
},
108112
},
109113
tooltip: {
110114
trigger: 'axis',
@@ -117,14 +121,15 @@ const state = reactive({
117121
}
118122
const _values = _params.map((p) => {
119123
const _unit: string|undefined = state.unitMap[p.seriesName];
124+
const _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
120125
let _value = numberFormatter(p.value) || '';
121126
if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
122127
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
123128
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
124129
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
125130
_value = getFormattedNumber(p.value, numberFormat, _unit);
126131
}
127-
return `${p.marker} ${p.seriesName}: <b>${_value}</b>`;
132+
return `${p.marker} ${_seriesName}: <b>${_value}</b>`;
128133
});
129134
return [_axisValue, ..._values].join('<br/>');
130135
},

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field
2828
import { normalizeAndSerialize } from '@/common/modules/widgets/_helpers/global-variable-helper';
2929
import { sortObjectByKeys } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
3030
import {
31+
getReferenceLabel,
3132
getWidgetDateFields, getWidgetDateRange,
3233
} from '@/common/modules/widgets/_helpers/widget-date-helper';
3334
import { isDateField } from '@/common/modules/widgets/_helpers/widget-field-helper';
@@ -69,6 +70,7 @@ const state = reactive({
6970
isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
7071
7172
data: computed<WidgetLoadResponse|undefined>(() => queryResult.data?.value),
73+
dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
7274
// unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[state.dataField]),
7375
boxWidth: BOX_MIN_WIDTH,
7476
boxHeight: 0,
@@ -261,7 +263,7 @@ useResizeObserver(colorCodedTableRef, throttle(() => {
261263
class="y-col"
262264
:style="{'height': `${state.boxHeight}px`}"
263265
>
264-
{{ yField }}
266+
{{ getReferenceLabel(props.allReferenceTypeInfo, state.dataField, yField) }}
265267
</div>
266268
</div>
267269
<div class="x-axis-wrapper"
@@ -294,7 +296,7 @@ useResizeObserver(colorCodedTableRef, throttle(() => {
294296
<div class="x-field-text">
295297
<span class="x-field-col"
296298
:style="{'width': `${state.boxWidth}px`}"
297-
>{{ xField }}</span>
299+
>{{ getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.xAxisInfo?.data, xField) }}</span>
298300
</div>
299301
</div>
300302
</div>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const state = reactive({
6868
isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
6969
7070
data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
71+
dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
7172
chart: null as EChartsType | null,
7273
xAxisData: computed<string[]>(() => {
7374
if (!state.data?.results?.length) return [];
@@ -113,7 +114,10 @@ const state = reactive({
113114
show: true,
114115
},
115116
axisLabel: {
116-
formatter: (val) => val,
117+
formatter: (val) => {
118+
if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
119+
return val;
120+
},
117121
},
118122
},
119123
tooltip: {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const state = reactive({
7777
7878
data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
7979
chart: null as EChartsType | null,
80+
dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
8081
xAxisData: computed<string[]>(() => {
8182
if (!state.data?.results?.length) return [];
8283
if (isDateField(widgetOptionsState.xAxisInfo?.data)) {
@@ -104,7 +105,10 @@ const state = reactive({
104105
icon: 'circle',
105106
itemWidth: 10,
106107
itemHeight: 10,
107-
formatter: (val) => val,
108+
formatter: (val) => {
109+
if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
110+
return val;
111+
},
108112
},
109113
tooltip: {
110114
trigger: 'axis',
@@ -117,7 +121,7 @@ const state = reactive({
117121
}
118122
const _values = _params.map((p) => {
119123
const _unit: string|undefined = state.unitMap[p.seriesName];
120-
let _seriesName = getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.dataFieldInfo?.data, p.seriesName);
124+
let _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
121125
let _value = p.value ? numberFormatter(p.value) : undefined;
122126
if (!_value) return undefined;
123127
if (_unit) _seriesName = `${_seriesName} (${_unit})`;

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,15 @@ const state = reactive({
9999
formatter: (params) => {
100100
let _source = params.data.source as string;
101101
let _target = params.data.target as string;
102+
const _sourceField = widgetOptionsState.sankeyDimensionsInfo?.data?.[0] as string;
103+
const _targetField = widgetOptionsState.sankeyDimensionsInfo?.data?.[1] as string;
102104
if (!_source || !_target) return '';
103-
if (_source === DATE_FIELD.DATE) {
105+
if (_sourceField === DATE_FIELD.DATE) {
104106
_source = dayjs.utc(_source).format(state.dateFormat);
105107
} else {
106108
getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.sankeyDimensionsInfo?.data?.[0] as string, _source);
107109
}
108-
if (_target === DATE_FIELD.DATE) {
110+
if (_targetField === DATE_FIELD.DATE) {
109111
_target = dayjs.utc(_target).format(state.dateFormat);
110112
} else {
111113
getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.sankeyDimensionsInfo?.data?.[1] as string, _target);

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const state = reactive({
8888
chartData: [],
8989
chart: null as EChartsType | null,
9090
unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
91+
dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
9192
chartOptions: computed<BarSeriesOption>(() => ({
9293
color: MASSIVE_CHART_COLORS,
9394
grid: {
@@ -103,14 +104,17 @@ const state = reactive({
103104
icon: 'circle',
104105
itemWidth: 10,
105106
itemHeight: 10,
106-
formatter: (val) => val,
107+
formatter: (val) => {
108+
if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
109+
return val;
110+
},
107111
},
108112
tooltip: {
109113
formatter: (params) => {
110114
const _params = Array.isArray(params) ? params : [params];
111115
return _params.map((p) => {
112116
const _unit: string|undefined = state.unitMap[p.seriesName];
113-
let _seriesName = getReferenceLabel(props.allReferenceTypeInfo, (widgetOptionsState.dataFieldInfo?.data as string[]) ?? [], p.seriesName);
117+
let _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
114118
let _value = numberFormatter(p.value) || '';
115119
if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
116120
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ const state = reactive({
8585
chartData: [],
8686
chart: null as EChartsType | null,
8787
unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
88+
dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
8889
chartOptions: computed<BarSeriesOption>(() => ({
8990
color: MASSIVE_CHART_COLORS,
9091
legend: {
@@ -95,22 +96,25 @@ const state = reactive({
9596
icon: 'circle',
9697
itemWidth: 10,
9798
itemHeight: 10,
98-
formatter: (val) => val,
99+
formatter: (val) => {
100+
if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
101+
return val;
102+
},
99103
},
100104
tooltip: {
101105
formatter: (params) => {
102106
const _params = Array.isArray(params) ? params : [params];
103107
return _params.map((p) => {
104108
const _unit: string|undefined = state.unitMap[p.seriesName];
109+
const _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
105110
let _value = numberFormatter(p.value) || '';
106111
if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
107112
const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
108113
const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
109114
const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
110115
_value = getFormattedNumber(p.value, numberFormat, _unit);
111116
}
112-
const _name = getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.yAxisInfo?.data, params.name);
113-
return `${p.marker} ${_name}: <b>${_value}</b>`;
117+
return `${p.marker} ${_seriesName}: <b>${_value}</b>`;
114118
}).join('<br>');
115119
},
116120
},

0 commit comments

Comments
 (0)