Improvement - VueUiStackbar - Add formatter for y axis labels (#229)

Author: graphieros

TestingArena/ArenaVueUiStackbar.vue

@@ -82,7 +82,7 @@ const monthValues = computed(() => {
 const model = ref([
     { key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
 
-    { key: 'orientation', def: 'vertical', type:'select', options: ['vertical', 'horizontal']},
+    { key: 'orientation', def: 'horizontal', type:'select', options: ['vertical', 'horizontal']},
     { key: 'responsive', def: false, type: 'checkbox'},
     { key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']},
     { key: 'useCssAnimation', def: true, type: 'checkbox'},
@@ -242,9 +242,9 @@ const config = computed(() => {
                     ...c.style.chart.bars,
                     dataLabels: {
                         ...c.style.chart.bars.dataLabels,
-                        // formatter: ({value, config}) => {
-                        //     return `f | ${value}`
-                        // }
+                        formatter: ({value, config}) => {
+                            return `f | ${value}`
+                        }
                     }
                 },
                 grid: {
@@ -262,6 +262,13 @@ const config = computed(() => {
                             }
                             // values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
                         }
+                    },
+                    y: {
+                        axisLabels: {
+                            formatter: ({ value }) => {
+                                return 'BOO' + value
+                            }
+                        }
                     }
                 }
             }

src/components/vue-ui-stackbar.vue

@@ -1291,12 +1291,19 @@ defineExpose({
                     :fill="FINAL_CONFIG.style.chart.grid.y.axisLabels.color"
                     text-anchor="end"
                 >
-                    {{ dataLabel({
-                        p: FINAL_CONFIG.style.chart.bars.dataLabels.prefix,
-                        v: yLabel.value,
-                        s: FINAL_CONFIG.style.chart.bars.dataLabels.suffix,
-                        r: FINAL_CONFIG.style.chart.grid.y.axisLabels.rounding,
-                    }) }}
+                    {{ 
+                        applyDataLabel(
+                            FINAL_CONFIG.style.chart.grid.y.axisLabels.formatter,
+                            yLabel.value,
+                            dataLabel({
+                                p: FINAL_CONFIG.style.chart.bars.dataLabels.prefix,
+                                v: yLabel.value,
+                                s: FINAL_CONFIG.style.chart.bars.dataLabels.suffix,
+                                r: FINAL_CONFIG.style.chart.grid.y.axisLabels.rounding,
+                            }),
+                            { datapoint: yLabel }
+                        )
+                    }}
                 </text>
             </template>
 
@@ -1322,12 +1329,19 @@ defineExpose({
                     :text-anchor="FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation > 0 ? 'start' : FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation < 0 ? 'end' : 'middle'"
                     :transform="`translate(${yLabel.horizontal_x}, ${drawingArea.bottom + FINAL_CONFIG.style.chart.grid.x.timeLabels.fontSize * 1.3 + FINAL_CONFIG.style.chart.grid.x.timeLabels.offsetY}), rotate(${FINAL_CONFIG.style.chart.grid.x.timeLabels.rotation})`"
                 >
-                    {{ dataLabel({
-                        p: FINAL_CONFIG.style.chart.bars.dataLabels.prefix,
-                        v: yLabel.value,
-                        s: FINAL_CONFIG.style.chart.bars.dataLabels.suffix,
-                        r: FINAL_CONFIG.style.chart.grid.y.axisLabels.rounding,
-                    }) }}
+                    {{ 
+                        applyDataLabel(
+                            FINAL_CONFIG.style.chart.grid.y.axisLabels.formatter,
+                            yLabel.value,
+                            dataLabel({
+                                p: FINAL_CONFIG.style.chart.bars.dataLabels.prefix,
+                                v: yLabel.value,
+                                s: FINAL_CONFIG.style.chart.bars.dataLabels.suffix,
+                                r: FINAL_CONFIG.style.chart.grid.y.axisLabels.rounding,
+                            }),
+                            { datapoint: yLabel }
+                        )
+                    }}
                 </text>
             </template>
 

src/useConfig.js

@@ -389,6 +389,7 @@ export function useConfig() {
                             offsetX: 0,
                         },
                         axisLabels: {
+                            formatter: null,
                             show: true,
                             color: COLOR_BLACK,
                             fontSize: FONT._14,

types/vue-data-ui.d.ts

@@ -6435,6 +6435,7 @@ declare module "vue-data-ui" {
                             offsetX?: number;
                         };
                         axisLabels?: {
+                            formatter?: Formatter;
                             show?: boolean;
                             color?: string;
                             fontSize?: number;