Improvement - VueUiGizmo - Add formatters

Author: graphieros

TestingArena/ArenaVueUiGizmo.vue

@@ -21,7 +21,10 @@ const model= ref([
 const config = computed(() => {
     const c = convertArrayToObject(model.value);
     return {
-        ...c
+        ...c,
+        formatter: ({value}) => {
+            return `f | ${value}`
+        } 
     }
 })
 

src/components/vue-ui-gizmo.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { useConfig } from "../useConfig";
-import { createUid, error, objectIsEmpty, shiftHue } from "../lib";
+import { createUid, error, applyDataLabel, dataLabel } from "../lib";
 import { useNestedProp } from "../useNestedProp";
 
 const { vue_ui_gizmo: DEFAULT_CONFIG } = useConfig();
@@ -109,7 +109,14 @@ const gaugeBody = computed(() => {
                 font-size="20"
                 :fill="FINAL_CONFIG.textColor"
             >
-                {{ Math.round(props.dataset) }}%
+                {{ applyDataLabel(
+                    FINAL_CONFIG.formatter,
+                    props.dataset,
+                    dataLabel({
+                        v: props.dataset,
+                        s: '%',
+                    })
+                ) }}
             </text>
         </template>
 
@@ -161,7 +168,14 @@ const gaugeBody = computed(() => {
                 font-size="20"
                 :fill="FINAL_CONFIG.textColor"
             >
-                {{ Math.round(props.dataset) }}%
+                {{ applyDataLabel(
+                    FINAL_CONFIG.formatter,
+                    props.dataset,
+                    dataLabel({
+                        v: props.dataset,
+                        s: '%',
+                    })
+                )}}
             </text>
         </template>
     </svg>

src/useConfig.js

@@ -4556,7 +4556,8 @@ export function useConfig() {
         gradientColor: '#9db5ed',
         showPercentage: true,
         textColor: COLOR_BLACK,
-        fontFamily: 'inherit'
+        fontFamily: 'inherit',
+        formatter: null
     }
 
     return {

types/vue-data-ui.d.ts

@@ -5290,6 +5290,7 @@ declare module 'vue-data-ui' {
         showPercentage?: boolean;
         textColor?: string;
         fontFamily?: string;
+        formatter?: Formatter;
     }
 
     export type VueUiGizmoDataset = number;