Improvement - VueUiKpi - Add formatters

Author: graphieros

TestingArena/ArenaVueUiKpi.vue

@@ -12,6 +12,12 @@ function updateVal() {
     dataset.value = Math.random() * 10000
 }
 
+const config = ref({
+    formatter: ({ value }) => {
+        return `f | ${value}`
+    }
+})
+
     
 </script>
 
@@ -24,16 +30,16 @@ function updateVal() {
         <template #title>VueUiKpi</template>
 
         <template #local>
-            <LocalVueUiKpi :dataset="dataset"/>
+            <LocalVueUiKpi :dataset="dataset" :config="config"/>
         </template>
         <template #VDUI-local>
-            <LocalVueDataUi component="VueUiKpi" :dataset="dataset"/>
+            <LocalVueDataUi component="VueUiKpi" :dataset="dataset" :config="config"/>
         </template>
         <template #build>
-            <VueUiKpi :dataset="dataset"/>
+            <VueUiKpi :dataset="dataset" :config="config"/>
         </template>
         <template #VDUI-build>
-            <VueDataUi component="VueUiKpi" :dataset="dataset"/>
+            <VueDataUi component="VueUiKpi" :dataset="dataset" :config="config"/>
         </template>
     </Box>
 </template>

src/components/vue-ui-kpi.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted, watch } from "vue";
 import { useNestedProp } from "../useNestedProp";
-import { dataLabel } from "../lib";
+import { applyDataLabel, dataLabel } from "../lib";
 import { useConfig } from "../useConfig";
 
 const { vue_ui_kpi: DEFAULT_CONFIG } = useConfig();
@@ -76,7 +76,16 @@ watch(() => props.dataset, (newValue) => {
         <slot name="comment-before" :comment="dataset"></slot>
         <div :class="`vue-ui-kpi-value ${FINAL_CONFIG.valueClass}`" :style="`font-family: ${FINAL_CONFIG.fontFamily}; font-size:${FINAL_CONFIG.valueFontSize}px; color:${FINAL_CONFIG.valueColor}; font-weight:${FINAL_CONFIG.valueBold ? 'bold': 'normal'}; ${FINAL_CONFIG.valueCss}`">
             <slot name="value" :comment="dataset"></slot>
-            {{ dataLabel({ p: FINAL_CONFIG.prefix, v: displayedValue, s: FINAL_CONFIG.suffix, r: FINAL_CONFIG.valueRounding }) }}
+            {{ applyDataLabel(
+                FINAL_CONFIG.formatter,
+                displayedValue,
+                dataLabel({ 
+                    p: FINAL_CONFIG.prefix, 
+                    v: displayedValue, 
+                    s: FINAL_CONFIG.suffix, 
+                    r: FINAL_CONFIG.valueRounding 
+                }))
+            }}
         </div>
         <slot name="comment-after" :comment="dataset"></slot>
     </div>

src/useConfig.js

@@ -3792,7 +3792,8 @@ export function useConfig() {
         valueClass: '',
         valueCss: '',
         valueFontSize: FONT._32,
-        valueRounding: 0
+        valueRounding: 0,
+        formatter: null
     }
 
     const vue_ui_mini_loader = {

types/vue-data-ui.d.ts

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