Improvement - Most chart components - Expose getImage method, improve components typings

Author: graphieros

README.md

@@ -194,6 +194,13 @@ const selectedDataset = ref('stacked')
 
 const dataset = computed(() => datasets.value[selectedDataset.value])
 
+onMounted(async () => {
+    if (local.value) {
+        const img = await local.value.getImage()
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUi3dBar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import LocalVueUiAgePyramid from '../src/components/vue-ui-age-pyramid.vue';
 import LocalVueDataUi from '../src/components/vue-data-ui.vue';
 import Box from "./Box.vue";
@@ -204,6 +204,13 @@ function toggleTable() {
     build.value.toggleTable();
 }
 
+onMounted(async () => {
+    if (build.value) {
+        const img = await build.value.getImage();
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiAgePyramid.vue

@@ -126,6 +126,13 @@ const config = computed(() => {
     }
 })
 
+onMounted(async () => {
+    if (local.value) {
+        const img = await local.value.getImage()
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiBullet.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import LocalVueUiChestnut from '../src/components/vue-ui-chestnut.vue';
 import LocalVueDataUi from '../src/components/vue-data-ui.vue';
 import Box from "./Box.vue";
@@ -492,6 +492,13 @@ function selectNut(nut) {
     console.log( { nut })
 }
 
+onMounted(async () => {
+    if (local.value) {
+        const img = await local.value.getImage()
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiChestnut.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import LocalVueUiChord from '../src/components/vue-ui-chord.vue';
 import LocalVueDataUi from '../src/components/vue-data-ui.vue';
 import Box from "./Box.vue";
@@ -103,6 +103,13 @@ const config = computed(()=> {
     }
 })
 
+onMounted(async () => {
+    if (local.value) {
+        const img = await local.value.getImage()
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiChord.vue

@@ -246,6 +246,13 @@ function selectDatapoint(dp) {
   console.log(dp)
 }
 
+onMounted(async() => {
+  if (local.value) {
+    const img = await local.value.getImage()
+    console.log(img)
+  }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiCirclePack.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import LocalVueUiDonutEvolution from '../src/components/vue-ui-donut-evolution.vue';
 import LocalVueDataUi from '../src/components/vue-data-ui.vue';
 import Box from "./Box.vue";
@@ -189,6 +189,13 @@ function selectLegend(legend) {
 
 const step = ref(0)
 
+onMounted(async() => {
+    if (vduiLocal.value) {
+        const img = await vduiLocal.value.getImage();
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiDonutEvolution.vue

@@ -168,6 +168,13 @@ const config = computed(() => {
 
 const step = ref(0);
 
+onMounted(async () => {
+    if (local.value) {
+        const img = await local.value.getImage()
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>

TestingArena/ArenaVueUiDumbbell.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import LocalVueUiGalaxy from '../src/components/vue-ui-galaxy.vue';
 import LocalVueDataUi from '../src/components/vue-data-ui.vue';
 import Box from "./Box.vue";
@@ -167,6 +167,13 @@ function selectDatapoint(datapoint) {
     console.log({ datapoint })
 }
 
+onMounted(async () => {
+    if (local.value) {
+        const img = await local.value.getImage()
+        console.log(img)
+    }
+})
+
 </script>
 
 <template>