Improvement - VueUiStackbar - Add formatters

Author: graphieros

TestingArena/ArenaVueUiStackBar.vue

@@ -142,6 +142,16 @@ const config = computed(() => {
             ...c.style,
             chart: {
                 ...c.style.chart,
+                bars: {
+                    ...c.style.chart.bars,
+                    dataLabels: {
+                        ...c.style.chart.bars.dataLabels,
+                        formatter: ({value, config}) => {
+                            // console.log(config)
+                            return `f | ${value}`
+                        }
+                    }
+                },
                 grid: {
                     ...c.style.chart.grid,
                     x: {

src/components/vue-ui-stackbar.vue

@@ -1,7 +1,28 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { useConfig } from "../useConfig";
-import { convertCustomPalette, createUid, palette, themePalettes, sumSeries, convertColorToHex, XMLNS, calculateNiceScale, dataLabel, adaptColorToBackground, isFunction, opacity, lightenHexColor, functionReturnsString, objectIsEmpty, getMissingDatasetAttributes, error, createCsvContent, downloadCsv } from "../lib";
+import { 
+    adaptColorToBackground,
+    applyDataLabel,
+    calculateNiceScale, 
+    convertColorToHex, 
+    convertCustomPalette, 
+    createCsvContent, 
+    createUid, 
+    dataLabel, 
+    downloadCsv,
+    error, 
+    functionReturnsString, 
+    getMissingDatasetAttributes, 
+    isFunction, 
+    lightenHexColor, 
+    objectIsEmpty, 
+    opacity, 
+    palette, 
+    sumSeries, 
+    themePalettes, 
+    XMLNS, 
+} from "../lib";
 import { useNestedProp } from "../useNestedProp";
 import { throttle } from "../canvas-lib";
 import { useResponsive } from "../useResponsive";
@@ -290,21 +311,31 @@ const totalLabels = computed(() => {
 });
 
 
-function barDataLabel(val) {
-    return dataLabel({
-        p: FINAL_CONFIG.value.style.chart.bars.dataLabels.prefix,
-        v: val,
-        s: FINAL_CONFIG.value.style.chart.bars.dataLabels.suffix,
-        r: FINAL_CONFIG.value.style.chart.bars.dataLabels.rounding,
-    });
+function barDataLabel(val, datapoint, index, dpIndex) {
+    return applyDataLabel(
+        FINAL_CONFIG.value.style.chart.bars.dataLabels.formatter,
+        val,
+        dataLabel({
+            p: FINAL_CONFIG.value.style.chart.bars.dataLabels.prefix,
+            v: val,
+            s: FINAL_CONFIG.value.style.chart.bars.dataLabels.suffix,
+            r: FINAL_CONFIG.value.style.chart.bars.dataLabels.rounding,
+        }),
+        { datapoint, seriesIndex: index, datapointIndex: dpIndex }
+    )
 }
 
-function barDataLabelPercentage(val) {
-    return dataLabel({
-        v: val,
-        s: '%',
-        r: FINAL_CONFIG.value.style.chart.bars.dataLabels.rounding,
-    });
+function barDataLabelPercentage(val, datapoint, index, dpIndex) {
+    return applyDataLabel(
+        FINAL_CONFIG.value.style.chart.bars.dataLabels.formatter,
+        val,
+        dataLabel({
+            v: val,
+            s: '%',
+            r: FINAL_CONFIG.value.style.chart.bars.dataLabels.rounding,
+        }),
+        { datapoint, seriesIndex: index, datapointIndex: dpIndex }
+    )
 }
 
 function selectDatapoint(index) {
@@ -726,7 +757,7 @@ defineExpose({
                         :font-weight="FINAL_CONFIG.style.chart.bars.dataLabels.bold ? 'bold' : 'normal'"
                         text-anchor="middle"
                     >
-                        {{ FINAL_CONFIG.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.style.chart.bars.distributed ? barDataLabelPercentage(dp.proportions[j] * 100) : barDataLabel(dp.series[j]) }}
+                        {{ FINAL_CONFIG.style.chart.bars.showDistributedPercentage && FINAL_CONFIG.style.chart.bars.distributed ? barDataLabelPercentage(dp.proportions[j] * 100, dp, i, j) : barDataLabel(dp.series[j], dp, i, j) }}
                     </text>
                 </g>
 
@@ -741,7 +772,7 @@ defineExpose({
                         :font-weight="FINAL_CONFIG.style.chart.bars.totalValues.bold ? 'bold' : 'normal'"
                         :fill="FINAL_CONFIG.style.chart.bars.totalValues.color"
                     >
-                        {{ barDataLabel(total.value) }}
+                        {{ barDataLabel(total.value, total, i) }}
                     </text>
                 </g>
             </template>

src/useConfig.js

@@ -253,7 +253,8 @@ export function useConfig() {
                         bold: false,
                         rounding: 0,
                         prefix: '',
-                        suffix: ''
+                        suffix: '',
+                        formatter: null
                     }
                 },
                 grid: {

types/vue-data-ui.d.ts

@@ -249,7 +249,7 @@ declare module 'vue-data-ui' {
         valueCss?: string;
         valueFontSize?: number;
         valueRounding?: number;
-        formatter?: null;
+        formatter?: Formatter;
     }
 
     export const VueUiKpi: DefineComponent<{
@@ -5394,6 +5394,7 @@ declare module 'vue-data-ui' {
                         rounding?: number;
                         prefix?: string;
                         suffix?: string;
+                        formatter?: Formatter;
                     };
                 };
                 grid?: {