Skip to content

Commit 93aa475

Browse files
graphierosgraphieros
committed
Improvement - Expose additional data in getImage callback; add legend options to some charts
1 parent 61bec73 commit 93aa475

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+658
-311
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1141,7 +1141,8 @@ const componentRef = ref(null);
11411141

11421142
onMounted(async () => {
11431143
if (componentRef) {
1144-
const { imgUri, base64 } = await componentRef.value.getImage({ scale: 2 }); // optional scale, defaults to 2, increase for better image quality
1144+
const { imgUri, base64, title, width, height, aspectRatio } =
1145+
await componentRef.value.getImage({ scale: 2 }); // optional scale, defaults to 2, increase for better image quality
11451146
console.log(imageUri);
11461147
}
11471148
});

‎TestingArena/ArenaVueUiCandlestick.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed } from "vue";
2+
import { ref, computed, onMounted } from "vue";
33
import LocalVueUiCandlestick from '../src/components/vue-ui-candlestick.vue';
44
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
55
import Box from "./Box.vue";
@@ -235,6 +235,13 @@ const step = ref(0)
235235
236236
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
237237
238+
onMounted(async () => {
239+
if (local.value) {
240+
const img = await local.value.getImage();
241+
console.log(img)
242+
}
243+
})
244+
238245
</script>
239246

240247
<template>

‎TestingArena/ArenaVueUiDonut.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed } from "vue";
2+
import { ref, computed, onMounted } from "vue";
33
import LocalVueUiDonut from '../src/components/vue-ui-donut.vue';
44
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
55
import Box from "./Box.vue";
@@ -14,11 +14,11 @@ const dataset = ref([
1414
},
1515
{
1616
name: 'Serie 2',
17-
values: [0]
17+
values: [1]
1818
},
1919
{
2020
name: 'Serie 3',
21-
values: [0],
21+
values: [2],
2222
comment: "This is another comment that is quite long to see how it fits on the chart and to see if it's nit overflowing."
2323
},
2424
// {
@@ -154,6 +154,9 @@ const model = ref([
154154
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox', label: 'bold', category: 'legend' },
155155
{ key: 'style.chart.legend.roundingValue', def: 0, type: 'number', min: 0, max: 6, label: ['rounding', 'is', 'value'], category: 'legend' },
156156
{ key: 'style.chart.legend.roundingPercentage', def: 0, type: 'number', min: 0, max: 6, label: 'percentageRounding', category: 'legend' },
157+
{ key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'},
158+
{ key: 'style.chart.legend.showValue', def: true, type: 'checkbox'},
159+
157160
{ key: 'style.chart.title.text', def: 'Title', type: 'text', label: 'textContent', category: 'title' },
158161
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'title' },
159162
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 6, max: 48, label: 'fontSize', category: 'title' },
@@ -335,6 +338,13 @@ function toggleLabels() {
335338
localVdui.value.toggleLabels();
336339
}
337340
341+
onMounted(async () => {
342+
if (localDonut.value) {
343+
const img = await localDonut.value.getImage()
344+
console.log(img)
345+
}
346+
})
347+
338348
</script>
339349

340350
<template>

‎TestingArena/ArenaVueUiDonutEvolution.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ const model = ref([
111111
{ key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 48},
112112
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
113113
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
114+
{ key: 'style.chart.legend.showValue', def: true, type: 'chexkbox'},
115+
{ key: 'style.chart.legend.showPercentage', def: false, type: 'chexkbox'},
116+
114117
{ key: 'table.show', def: false, type: 'checkbox'},
115118
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
116119
{ key: 'table.columnNames.period', def: 'Period', type: 'text'},

‎TestingArena/ArenaVueUiFlow.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed } from "vue";
2+
import { ref, computed, onMounted } from "vue";
33
import LocalVueUiFlow from '../src/components/vue-ui-flow.vue';
44
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
55
import Box from "./Box.vue";
@@ -376,6 +376,13 @@ nodeCategoryColors: {
376376
377377
const step = ref(0);
378378
379+
onMounted(async () => {
380+
if (local.value) {
381+
const img = await local.value.getImage();
382+
console.log(img)
383+
}
384+
})
385+
379386
</script>
380387

381388
<template>

‎TestingArena/ArenaVueUiFunnel.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed } from "vue";
2+
import { ref, computed, onMounted } from "vue";
33
import LocalVueUiFunnel from '../src/components/vue-ui-funnel.vue';
44
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
55
import Box from "./Box.vue";
@@ -159,6 +159,13 @@ const config = computed(() => {
159159
160160
const step = ref(0);
161161
162+
onMounted(async () => {
163+
if (local.value) {
164+
const img = await local.value.getImage();
165+
console.log(img)
166+
}
167+
})
168+
162169
</script>
163170

164171
<template>
@@ -184,7 +191,7 @@ const step = ref(0);
184191
<template #title>VueUiFunnel</template>
185192

186193
<template #local>
187-
<LocalVueUiFunnel :dataset="dataset" :config="config">
194+
<LocalVueUiFunnel :dataset="dataset" :config="config" ref="local">
188195
<template #source>
189196
#source
190197
</template>

‎TestingArena/ArenaVueUiGalaxy.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ const model = ref([
6262
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
6363
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
6464
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
65+
{ key: 'style.chart.legend.showValue', def: false, type: 'checkbox'},
66+
{ key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'},
67+
6568
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
6669
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
6770
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},

‎TestingArena/ArenaVueUiNestedDonuts.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,9 @@ const model = ref([
118118
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
119119
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
120120
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
121+
{ key: 'style.chart.legend.showValue', def: true, type: 'checkbox'},
122+
{ key: 'style.chart.legend.showPercentage', def: true, type: 'checkbox'},
123+
121124
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
122125
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
123126
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},

‎TestingArena/ArenaVueUiRidgeline.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,14 @@ const config = computed(() => {
183183
}
184184
});
185185
186+
const local = ref(null)
187+
onMounted(async () => {
188+
if (local.value) {
189+
const img = await local.value.getImage();
190+
console.log(img)
191+
}
192+
})
193+
186194
</script>
187195

188196
<template>
@@ -206,7 +214,7 @@ const config = computed(() => {
206214
<template #title>VueUiRidgeline</template>
207215

208216
<template #local>
209-
<LocalVueUiRidgeLine :dataset="dataset" :config="config">
217+
<LocalVueUiRidgeLine :dataset="dataset" :config="config" ref="local">
210218
<!-- <template #pattern="{ seriesIndex, patternId }">
211219
<pattern v-if="seriesIndex === 0" :id="patternId" width="70" height="8" patternTransform="scale(2)"
212220
patternUnits="userSpaceOnUse" opacity="0.5">

‎TestingArena/ArenaVueUiRings.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,9 @@ const model = ref([
100100
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
101101
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
102102
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
103+
{ key: 'style.chart.legend.showValue', def: true, type: 'checkbox' },
104+
{ key: 'style.chart.legend.showPercentage', def: false, type: 'checkbox' },
105+
103106
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
104107
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
105108
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48 },

0 commit comments

Comments
 (0)