Skip to content

Commit 511092f

Browse files
graphierosgraphieros
committed
Fix - VueUi3dBar - Remove default labelling when using formatter
1 parent b243c84 commit 511092f

File tree

4 files changed

+23
-23
lines changed

4 files changed

+23
-23
lines changed

‎TestingArena/ArenaVueUi3dBar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ const config = computed(() => {
177177
dataLabel: {
178178
...c.style.chart.dataLabel,
179179
formatter: ({value, config}) => {
180-
// console.log(config)
180+
console.log(config)
181181
return `f | ${value}`
182182
}
183183
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,4 @@
105105
"vitest": "^3.1.1",
106106
"vue": "^3.5.14"
107107
}
108-
}
108+
}

‎src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const components = ref([ //------|
119119
* Modify the index to display a component
120120
* [0] = VueUiXy
121121
*/
122-
const selectedComponent = ref(components.value[1]);
122+
const selectedComponent = ref(components.value[34]);
123123
124124
/**
125125
* Legacy testing arena where some non chart components can be tested

‎src/components/vue-ui-3d-bar.vue

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -734,18 +734,18 @@ defineExpose({
734734
<circle :cx="bar.fill.sidePointer.x + 20" :cy="bar.fill.sidePointer.y" :r="2" :fill="bar.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor" v-if="!bar.fill.miniDonut || !!selectedSerie"/>
735735
<foreignObject :x="bar.fill.sidePointer.x + 30" :y="bar.fill.sidePointer.y - FINAL_CONFIG.style.chart.legend.fontSize" :width="svg.absoluteWidth / 2 - 12" :height="FINAL_CONFIG.style.chart.legend.fontSize * 2" style="overflow: visible; position: relative">
736736
<div v-if="FINAL_CONFIG.style.chart.legend.showDefault" :style="`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${FINAL_CONFIG.style.chart.legend.fontSize}px; text-align:left; line-height: ${FINAL_CONFIG.style.chart.legend.fontSize}px; color:${FINAL_CONFIG.style.chart.legend.color}`">
737-
{{ bar.name }}: {{ dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage}) }} ({{ applyDataLabel(
737+
{{ applyDataLabel(
738738
FINAL_CONFIG.style.chart.dataLabel.formatter,
739739
bar.value,
740-
dataLabel({
740+
`${bar.name}: ${dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage})} (${dataLabel({
741741
p: FINAL_CONFIG.style.chart.legend.prefix,
742742
v: bar.value,
743743
s: FINAL_CONFIG.style.chart.legend.suffix,
744744
r: FINAL_CONFIG.style.chart.legend.roundingValue
745-
}),
746-
{ datapoint: bar, seriesIndex: i }
745+
})})`,
746+
{ datapoint: bar, seriesIndex: i, type: 'barDatapoint' }
747747
)
748-
}})
748+
}}
749749
</div>
750750
<slot name="legend" v-bind="{ datapoint: bar, config: FINAL_CONFIG, dataset: stack}"/>
751751
</foreignObject>
@@ -797,17 +797,17 @@ defineExpose({
797797
:fill="FINAL_CONFIG.style.chart.legend.color"
798798
:font-size="FINAL_CONFIG.style.chart.legend.fontSize / 1.5"
799799
>
800-
{{ displayArcPercentage(arc, bar.fill.donut) }} ({{ applyDataLabel(
800+
{{ applyDataLabel(
801801
FINAL_CONFIG.style.chart.dataLabel.formatter,
802802
arc.value,
803-
dataLabel({
803+
`${displayArcPercentage(arc, bar.fill.donut)} (${dataLabel({
804804
p: FINAL_CONFIG.style.chart.legend.prefix,
805805
v: arc.value,
806806
s: FINAL_CONFIG.style.chart.legend.suffix,
807807
r: FINAL_CONFIG.style.chart.legend.roundingValue
808-
}),
809-
{ datapoint: arc, seriesIndex: i }
810-
)}})
808+
})})`,
809+
{ datapoint: arc, seriesIndex: i, type: 'donutDatapoint' }
810+
)}}
811811
</text>
812812
<text
813813
:text-anchor="calcMarkerOffsetX(arc).anchor"
@@ -876,17 +876,17 @@ defineExpose({
876876
<circle :cx="bar.fill.sidePointer.x + 20" :cy="bar.fill.sidePointer.y" :r="2" :fill="bar.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor" v-if="!bar.fill.miniDonut || !!selectedSerie"/>
877877
<foreignObject :x="bar.fill.sidePointer.x + 30" :y="bar.fill.sidePointer.y - FINAL_CONFIG.style.chart.legend.fontSize" :width="svg.absoluteWidth / 2 - 12" :height="FINAL_CONFIG.style.chart.legend.fontSize * 2" style="overflow: visible; position: relative">
878878
<div v-if="FINAL_CONFIG.style.chart.legend.showDefault" :style="`height: 100%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items:center;justify-content: flex-start; font-size:${FINAL_CONFIG.style.chart.legend.fontSize}px; text-align:left; line-height: ${FINAL_CONFIG.style.chart.legend.fontSize}px; color:${FINAL_CONFIG.style.chart.legend.color}`">
879-
{{ bar.name }}: {{ dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage}) }} ({{ applyDataLabel(
879+
{{ applyDataLabel(
880880
FINAL_CONFIG.style.chart.dataLabel.formatter,
881881
bar.value,
882-
dataLabel({
882+
`${bar.name}: ${dataLabel({v: bar.proportion * 100, s: '%', r: FINAL_CONFIG.style.chart.legend.roundingPercentage})} (${dataLabel({
883883
p: FINAL_CONFIG.style.chart.legend.prefix,
884884
v: bar.value,
885885
s: FINAL_CONFIG.style.chart.legend.suffix,
886886
r: FINAL_CONFIG.style.chart.legend.roundingValue
887-
}),
888-
{ datapoint: bar, seriesIndex: i }
889-
)}})
887+
})})`,
888+
{ datapoint: bar, seriesIndex: i, type: 'barDatapoint' }
889+
)}}
890890
</div>
891891
<slot name="legend" v-bind="{ datapoint: bar, config: FINAL_CONFIG, dataset: stack}"/>
892892
</foreignObject>
@@ -938,17 +938,17 @@ defineExpose({
938938
:fill="FINAL_CONFIG.style.chart.legend.color"
939939
:font-size="FINAL_CONFIG.style.chart.legend.fontSize / 1.5"
940940
>
941-
{{ displayArcPercentage(arc, bar.fill.donut) }} ({{ applyDataLabel(
941+
{{ applyDataLabel(
942942
FINAL_CONFIG.style.chart.dataLabel.formatter,
943943
arc.value,
944-
dataLabel({
944+
`${displayArcPercentage(arc, bar.fill.donut)} (${dataLabel({
945945
p: FINAL_CONFIG.style.chart.legend.prefix,
946946
v: arc.value,
947947
s: FINAL_CONFIG.style.chart.legend.suffix,
948948
r: FINAL_CONFIG.style.chart.legend.roundingValue
949-
}),
950-
{ datapoint: arc, seriesIndex: i }
951-
)}})
949+
})})`,
950+
{ datapoint: arc, seriesIndex: i, type: 'donutDatapoint' }
951+
)}}
952952
</text>
953953
<text
954954
:text-anchor="calcMarkerOffsetX(arc).anchor"

0 commit comments

Comments
 (0)