Skip to content

Commit 2bb1c4c

Browse files
graphierosgraphieros
committed
Fix - VueUiStackbar - Fix NaN% and add config options to hide empty values
1 parent 0bc07c6 commit 2bb1c4c

File tree

1 file changed

+65
-49
lines changed

1 file changed

+65
-49
lines changed

‎src/components/vue-ui-stackbar.vue‎

Lines changed: 65 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -564,7 +564,7 @@ function barDataLabelPercentage(val, datapoint, index, dpIndex) {
564564
FINAL_CONFIG.value.style.chart.bars.dataLabels.formatter,
565565
val,
566566
dataLabel({
567-
v: val,
567+
v: isNaN(val) ? 0 : val,
568568
s: '%',
569569
r: FINAL_CONFIG.value.style.chart.bars.dataLabels.rounding,
570570
}),
@@ -800,6 +800,14 @@ function selectTimeLabel(label, relativeIndex) {
800800
});
801801
}
802802
803+
function isLabelDisplayed(value, proportion) {
804+
if (FINAL_CONFIG.value.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.value.style.chart.bars.distributed) {
805+
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideEmptyPercentages ? proportion > 0 : true
806+
} else {
807+
return FINAL_CONFIG.value.style.chart.bars.dataLabels.hideEmptyValues ? value !== 0 : true
808+
}
809+
}
810+
803811
defineExpose({
804812
getData,
805813
generatePdf,
@@ -1074,68 +1082,76 @@ defineExpose({
10741082
<template v-if="mutableConfig.dataLabels.show && FINAL_CONFIG.orientation === 'vertical'">
10751083
<g v-for="(dp, i) in formattedDataset">
10761084
<!-- RECT LABELS -->
1077-
<text
1078-
v-for="(rect, j) in dp.x"
1079-
:x="rect + (barSlot * (1 - FINAL_CONFIG.style.chart.bars.gapRatio / 2) / 2)"
1080-
:y="dp.y[j] + dp.height[j] / 2 + FINAL_CONFIG.style.chart.bars.dataLabels.fontSize / 3"
1081-
:font-size="FINAL_CONFIG.style.chart.bars.dataLabels.fontSize"
1082-
:fill="FINAL_CONFIG.style.chart.bars.dataLabels.adaptColorToBackground ? adaptColorToBackground(dp.color) : FINAL_CONFIG.style.chart.bars.dataLabels.color"
1083-
:font-weight="FINAL_CONFIG.style.chart.bars.dataLabels.bold ? 'bold' : 'normal'"
1084-
text-anchor="middle"
1085-
>
1086-
{{ FINAL_CONFIG.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.style.chart.bars.distributed ?
1087-
barDataLabelPercentage(dp.proportions[j] * 100, dp, i, j) :
1088-
barDataLabel(dp.series[j], dp, i, j, dp.signedSeries[j]) }}
1089-
</text>
1085+
<template v-for="(rect, j) in dp.x">
1086+
<text
1087+
v-if="isLabelDisplayed(dp.series[j], dp.proportions[j])"
1088+
:x="rect + (barSlot * (1 - FINAL_CONFIG.style.chart.bars.gapRatio / 2) / 2)"
1089+
:y="dp.y[j] + dp.height[j] / 2 + FINAL_CONFIG.style.chart.bars.dataLabels.fontSize / 3"
1090+
:font-size="FINAL_CONFIG.style.chart.bars.dataLabels.fontSize"
1091+
:fill="FINAL_CONFIG.style.chart.bars.dataLabels.adaptColorToBackground ? adaptColorToBackground(dp.color) : FINAL_CONFIG.style.chart.bars.dataLabels.color"
1092+
:font-weight="FINAL_CONFIG.style.chart.bars.dataLabels.bold ? 'bold' : 'normal'"
1093+
text-anchor="middle"
1094+
>
1095+
{{ FINAL_CONFIG.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.style.chart.bars.distributed ?
1096+
barDataLabelPercentage(dp.proportions[j] * 100, dp, i, j) :
1097+
barDataLabel(dp.series[j], dp, i, j, dp.signedSeries[j]) }}
1098+
</text>
1099+
</template>
10901100
</g>
10911101
10921102
<!-- RECT TOTAL LABELS -->
10931103
<g v-if="FINAL_CONFIG.style.chart.bars.totalValues.show && formattedDataset.length > 1">
1094-
<text
1095-
v-for="(total, i) in totalLabels"
1096-
:x="drawingArea.left + (barSlot * i) + barSlot / 2"
1097-
:y="drawingArea.top - FINAL_CONFIG.style.chart.bars.totalValues.fontSize / 3"
1098-
text-anchor="middle"
1099-
:font-size="FINAL_CONFIG.style.chart.bars.totalValues.fontSize"
1100-
:font-weight="FINAL_CONFIG.style.chart.bars.totalValues.bold ? 'bold' : 'normal'"
1101-
:fill="FINAL_CONFIG.style.chart.bars.totalValues.color"
1102-
>
1103-
{{ barDataLabel(total.value, total, i, total.sign) }}
1104-
</text>
1104+
<template v-for="(total, i) in totalLabels">
1105+
<text
1106+
v-if="FINAL_CONFIG.style.chart.bars.dataLabels.hideEmptyValues ? total.value !== 0 : true"
1107+
:x="drawingArea.left + (barSlot * i) + barSlot / 2"
1108+
:y="drawingArea.top - FINAL_CONFIG.style.chart.bars.totalValues.fontSize / 3"
1109+
text-anchor="middle"
1110+
:font-size="FINAL_CONFIG.style.chart.bars.totalValues.fontSize"
1111+
:font-weight="FINAL_CONFIG.style.chart.bars.totalValues.bold ? 'bold' : 'normal'"
1112+
:fill="FINAL_CONFIG.style.chart.bars.totalValues.color"
1113+
>
1114+
{{ barDataLabel(total.value, total, i, total.sign) }}
1115+
</text>
1116+
</template>
11051117
</g>
11061118
</template>
11071119
11081120
<!-- RECT DATA LABELS (horizontal mode) -->
11091121
<template v-if="mutableConfig.dataLabels.show && FINAL_CONFIG.orientation === 'horizontal'">
11101122
<g v-for="(dp, i) in formattedDataset">
11111123
<!-- RECT LABELS -->
1112-
<text
1113-
v-for="(rect, j) in dp.horizontal_x"
1114-
:x="rect + ((dp.horizontal_width[j] < 0 ? 0.0001 : dp.horizontal_width[j]) / 2)"
1115-
:y="dp.horizontal_y[j] + (barSlot * (1 - FINAL_CONFIG.style.chart.bars.gapRatio / 2) / 2) + (FINAL_CONFIG.style.chart.bars.dataLabels.fontSize /3)"
1116-
:font-size="FINAL_CONFIG.style.chart.bars.dataLabels.fontSize"
1117-
:fill="FINAL_CONFIG.style.chart.bars.dataLabels.adaptColorToBackground ? adaptColorToBackground(dp.color) : FINAL_CONFIG.style.chart.bars.dataLabels.color"
1118-
:font-weight="FINAL_CONFIG.style.chart.bars.dataLabels.bold ? 'bold' : 'normal'"
1119-
text-anchor="middle"
1120-
>
1121-
{{ FINAL_CONFIG.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.style.chart.bars.distributed ?
1122-
barDataLabelPercentage(dp.proportions[j] * 100, dp, i, j) :
1123-
barDataLabel(dp.series[j], dp, i, j, dp.signedSeries[j]) }}
1124-
</text>
1124+
<template v-for="(rect, j) in dp.horizontal_x">
1125+
<text
1126+
v-if="isLabelDisplayed(dp.series[j], dp.proportions[j])"
1127+
:x="rect + ((dp.horizontal_width[j] < 0 ? 0.0001 : dp.horizontal_width[j]) / 2)"
1128+
:y="dp.horizontal_y[j] + (barSlot * (1 - FINAL_CONFIG.style.chart.bars.gapRatio / 2) / 2) + (FINAL_CONFIG.style.chart.bars.dataLabels.fontSize /3)"
1129+
:font-size="FINAL_CONFIG.style.chart.bars.dataLabels.fontSize"
1130+
:fill="FINAL_CONFIG.style.chart.bars.dataLabels.adaptColorToBackground ? adaptColorToBackground(dp.color) : FINAL_CONFIG.style.chart.bars.dataLabels.color"
1131+
:font-weight="FINAL_CONFIG.style.chart.bars.dataLabels.bold ? 'bold' : 'normal'"
1132+
text-anchor="middle"
1133+
>
1134+
{{ FINAL_CONFIG.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.style.chart.bars.distributed ?
1135+
barDataLabelPercentage(dp.proportions[j] * 100, dp, i, j) :
1136+
barDataLabel(dp.series[j], dp, i, j, dp.signedSeries[j]) }}
1137+
</text>
1138+
</template>
11251139
</g>
11261140
<!-- RECT TOTAL LABELS -->
11271141
<g v-if="FINAL_CONFIG.style.chart.bars.totalValues.show && formattedDataset.length > 1">
1128-
<text
1129-
v-for="(total, i) in totalLabels"
1130-
:x="drawingArea.right + FINAL_CONFIG.style.chart.bars.totalValues.fontSize / 3"
1131-
:y="drawingArea.top + (barSlot * i) + barSlot / 2"
1132-
text-anchor="start"
1133-
:font-size="FINAL_CONFIG.style.chart.bars.totalValues.fontSize"
1134-
:font-weight="FINAL_CONFIG.style.chart.bars.totalValues.bold ? 'bold' : 'normal'"
1135-
:fill="FINAL_CONFIG.style.chart.bars.totalValues.color"
1136-
>
1137-
{{ barDataLabel(total.value, total, i, total.sign) }}
1138-
</text>
1142+
<template v-for="(total, i) in totalLabels">
1143+
<text
1144+
v-if="FINAL_CONFIG.style.chart.bars.dataLabels.hideEmptyValues ? total.value !== 0 : true"
1145+
:x="drawingArea.right + FINAL_CONFIG.style.chart.bars.totalValues.fontSize / 3"
1146+
:y="drawingArea.top + (barSlot * i) + barSlot / 2"
1147+
text-anchor="start"
1148+
:font-size="FINAL_CONFIG.style.chart.bars.totalValues.fontSize"
1149+
:font-weight="FINAL_CONFIG.style.chart.bars.totalValues.bold ? 'bold' : 'normal'"
1150+
:fill="FINAL_CONFIG.style.chart.bars.totalValues.color"
1151+
>
1152+
{{ barDataLabel(total.value, total, i, total.sign) }}
1153+
</text>
1154+
</template>
11391155
</g>
11401156
</template>
11411157

0 commit comments

Comments
 (0)