Dev environment - Added VueUiKpi testing arena

Author: graphieros

TestingArena/ArenaVueUiKpi.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import LocalVueUiKpi from '../src/components/vue-ui-kpi.vue';
+import LocalVueDataUi from '../src/components/vue-data-ui.vue';
+import Box from "./Box.vue";
+import convertArrayToObject from "./convertModel";
+import { useArena } from "../src/useArena";
+
+const dataset = ref(12012012);
+
+function updateVal() {
+    dataset.value = Math.random() * 10000
+}
+
+    
+</script>
+
+<template>
+    <div>
+        <button @click="updateVal">NEW VAL</button>
+        <LocalVueUiKpi :dataset="dataset"/>
+    </div>
+    <Box>
+        <template #title>VueUiKpi</template>
+        
+        <template #local>
+            <LocalVueUiKpi :dataset="dataset"/>
+        </template>
+        <template #VDUI-local>
+            <LocalVueDataUi component="VueUiKpi" :dataset="dataset"/>
+        </template>
+        <template #build>
+            <VueUiKpi :dataset="dataset"/>
+        </template>
+        <template #VDUI-build>
+            <VueDataUi component="VueUiKpi" :dataset="dataset"/>
+        </template>
+    </Box>
+</template>

src/App.vue

@@ -45,6 +45,7 @@ import ArenaVueUiParallelCoordinatePlot from "../TestingArena/ArenaVueUiParallel
 import ArenaVueUiTimer from "../TestingArena/ArenaVueUiTimer.vue";
 import ArenaVueUiCarouselTable from "../TestingArena/ArenaVueUiCarouselTable.vue";
 import ArenaVueUiGizmo from "../TestingArena/ArenaVueUiGizmo.vue";
+import ArenaVueUiKpi from "../TestingArena/ArenaVueUiKpi.vue";
 
 const showOldArena = ref(false);
 
@@ -93,12 +94,14 @@ const components = ref([
   /*_________________*/"VueUiTimer", // 41
   /*_________*/"VueUiCarouselTable", // 42
   /*_________________*/"VueUiGizmo", // 43
+  /*___________________*/"VueUiKpi", // 44
+
   // screenshot
   // dashboard
   // cursor
 ]);
 
-const selectedComponent = ref(components.value[43]);
+const selectedComponent = ref(components.value[44]);
 
 </script>
 
@@ -244,4 +247,7 @@ const selectedComponent = ref(components.value[43]);
 
   <!-- 43 -->
   <ArenaVueUiGizmo v-if="selectedComponent === 'VueUiGizmo'" />
+
+  <!-- 44 -->
+  <ArenaVueUiKpi v-if="selectedComponent === 'VueUiKpi'" />
 </template>

src/main.js

@@ -57,7 +57,8 @@ import {
     VueUiParallelCoordinatePlot,
     VueUiTimer,
     VueUiCarouselTable,
-    VueUiGizmo
+    VueUiGizmo,
+    VueUiKpi
 } from 'vue-data-ui';
 import 'vue-data-ui/style.css';
 
@@ -118,4 +119,6 @@ app.component("VueUiParallelCoordinatePlot", VueUiParallelCoordinatePlot);
 app.component("VueUiTimer", VueUiTimer);
 app.component("VueUiCarouselTable", VueUiCarouselTable);
 app.component("VueUiGizmo", VueUiGizmo);
+app.component("VueUiKpi", VueUiKpi);
+
 app.mount('#app');