Skip to content

Commit 22a728e

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiNestedDonuts testing arena
1 parent 17fb473 commit 22a728e

File tree

2 files changed

+278
-4
lines changed

2 files changed

+278
-4
lines changed

‎TestingArena/ArenaVueUiNestedDonuts.vue‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiNestedDonuts from '../src/components/vue-ui-nested-donuts.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
8+
const dataset = ref([
9+
{
10+
name: "Group 1",
11+
series: [
12+
{
13+
name: 'Serie 1',
14+
values: [50]
15+
},
16+
{
17+
name: 'Serie 2',
18+
values: [30]
19+
},
20+
{
21+
name: 'Serie 3',
22+
values: [20]
23+
},
24+
]
25+
},
26+
{
27+
name: "Group 2",
28+
series: [
29+
{
30+
name: 'Serie 1',
31+
values: [40]
32+
},
33+
{
34+
name: 'Serie 2',
35+
values: [40]
36+
},
37+
{
38+
name: 'Serie 3',
39+
values: [30]
40+
},
41+
]
42+
},
43+
])
44+
45+
const model = ref([
46+
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
47+
{ key: 'useBlurOnHover', def: true, type: 'checkbox'},
48+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
49+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
50+
{ key: 'style.chart.useGradient', def: true, type: 'checkbox'},
51+
{ key: 'style.chart.gradientIntensity', def: 40, type: 'range', min: 0, max: 100},
52+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
53+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
54+
{ key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox'},
55+
{ key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'},
56+
{ key: 'style.chart.layout.labels.dataLabels.suffix', def: 'S', type: 'text'},
57+
{ key: 'style.chart.layout.labels.dataLabels.hideUnderValue', def: 3, type: 'number', min: 1, max: 20},
58+
{ key: 'style.chart.layout.labels.dataLabels.fontSize', def: 14, type: 'number', min: 8, max: 48},
59+
{ key: 'style.chart.layout.labels.dataLabels.offsetX', def: 4, type: 'number', min: -100, max: 100},
60+
{ key: 'style.chart.layout.labels.dataLabels.offsetY', def: 12, type: 'number', min: -100, max: 100},
61+
{ key: 'style.chart.layout.labels.dataLabels.useSerieColor', def: false, type: 'checkbox'},
62+
{ key: 'style.chart.layout.labels.dataLabels.color', def: '#1A1A1A', type: 'color'},
63+
{ key: 'style.chart.layout.labels.dataLabels.showValue', def: true, type: 'checkbox'},
64+
{ key: 'style.chart.layout.labels.dataLabels.showPercentage', def: true, type: 'checkbox'},
65+
{ key: 'style.chart.layout.labels.dataLabels.boldValue', def: false, type: 'checkbox'},
66+
{ key: 'style.chart.layout.labels.dataLabels.boldPercentage', def: true, type: 'checkbox'},
67+
{ key: 'style.chart.layout.labels.dataLabels.roundingValue', def: 2, type: 'number', min: 0, max: 12},
68+
{ key: 'style.chart.layout.labels.dataLabels.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
69+
{ key: 'style.chart.layout.labels.dataLabels.showDonutName', def: true, type: 'checkbox'},
70+
{ key: 'style.chart.layout.labels.dataLabels.boldDonutName', def: true, type: 'checkbox'},
71+
{ key: 'style.chart.layout.labels.dataLabels.donutNameAbbreviation', def: true, type: 'checkbox'},
72+
{ key: 'style.chart.layout.labels.dataLabels.donutNameMaxAbbreviationSize', def: 3, type: 'number', min: 1, max: 12},
73+
{ key: 'style.chart.layout.labels.dataLabels.donutNameOffsetY', def: 0, type: 'number', min: -100, max: 100},
74+
{ key: 'style.chart.layout.donut.strokeWidth', def: 200, type: 'number', min: 50, max: 400},
75+
{ key: 'style.chart.layout.donut.borderWidth', def: 2, type: 'number', min: 0, max: 12},
76+
{ key: 'style.chart.layout.donut.spacingRatio', def: 0.5, type: 'number', min: 0, max: 1, step: 0.01},
77+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
78+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
79+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox'},
80+
{ key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 48},
81+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
82+
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
83+
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
84+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
85+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
86+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
87+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
88+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
89+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
90+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
91+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
92+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
93+
{ key: 'style.chart.tooltip.showAllItemsAtIndex', def: true, type: 'checkbox'},
94+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
95+
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
96+
{ key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 48},
97+
{ key: 'style.chart.tooltip.showValue', def: true, type: 'checkbox'},
98+
{ key: 'style.chart.tooltip.showPercentage', def: true, type: 'checkbox'},
99+
{ key: 'style.chart.tooltip.roundingValue', def: 2, type: 'number', min: 0, max: 12},
100+
{ key: 'style.chart.tooltip.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
101+
{ key: 'table.show', def: false, type: 'checkbox'},
102+
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
103+
{ key: 'table.columnNames.series', def: 'Series', type: 'text'},
104+
{ key: 'table.columnNames.value', def: 'Value', type: 'text'},
105+
{ key: 'table.columnNames.percentage', def: 'Percentage', type: 'text'},
106+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
107+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
108+
{ key: 'table.th.outline', def: 'none', type: 'text'},
109+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
110+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
111+
{ key: 'table.td.outline', def: 'none', type: 'text'},
112+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
113+
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
114+
])
115+
116+
117+
const testCustomTooltip = ref(false);
118+
119+
const config = computed(() => {
120+
const c = convertArrayToObject(model.value)
121+
122+
if(testCustomTooltip.value) {
123+
return {
124+
...c,
125+
style: {
126+
...c.style,
127+
chart: {
128+
...c.style.chart,
129+
tooltip: {
130+
...c.style.chart.tooltip,
131+
customFormat: (data) => {
132+
console.log('NESTED DONUTS CUSTOM TOOLTIP', data)
133+
return "CUSTOM TOOLTIP"
134+
}
135+
}
136+
}
137+
}
138+
}
139+
} else {
140+
return c
141+
}
142+
})
143+
144+
const step = ref(0)
145+
146+
function selectLegend(legend) {
147+
console.log({ legend })
148+
}
149+
150+
function selectDatapoint(datapoint) {
151+
console.log({ datapoint })
152+
}
153+
154+
</script>
155+
156+
<template>
157+
<div style="margin: 12px 0">
158+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip" />
159+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
160+
</div>
161+
<Box>
162+
<template #title></template>
163+
164+
<template #local>
165+
<LocalVueUiNestedDonuts :dataset="dataset" :config="config" :key="`local_${step}`" @selectLegend="selectLegend" @selectDatapoint="selectDatapoint">
166+
<template #svg="{ svg }">
167+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
168+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
169+
</template>
170+
<template #legend="{ legend }">
171+
#LEGEND
172+
<div style="font-size: 8px">
173+
{{ legend }}
174+
</div>
175+
</template>
176+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
177+
#BEFORE {{ series.name }}
178+
</template>
179+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
180+
#AFTER {{ series.name }}
181+
</template>
182+
</LocalVueUiNestedDonuts>
183+
</template>
184+
185+
<template #VDUI-local>
186+
<LocalVueDataUi component="VueUiNestedDonuts" :dataset="dataset" :config="config" :key="`vdui_local_${step}`" @selectLegend="selectLegend" @selectDatapoint="selectDatapoint">
187+
<template #svg="{ svg }">
188+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
189+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
190+
</template>
191+
<template #legend="{ legend }">
192+
#LEGEND
193+
<div style="font-size: 8px">
194+
{{ legend }}
195+
</div>
196+
</template>
197+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
198+
#BEFORE {{ series.name }}
199+
</template>
200+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
201+
#AFTER {{ series.name }}
202+
</template>
203+
</LocalVueDataUi>
204+
</template>
205+
206+
<template #build>
207+
<VueUiNestedDonuts :dataset="dataset" :config="config" :key="`build_${step}`" @selectLegend="selectLegend" @selectDatapoint="selectDatapoint">
208+
<template #svg="{ svg }">
209+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
210+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
211+
</template>
212+
<template #legend="{ legend }">
213+
#LEGEND
214+
<div style="font-size: 8px">
215+
{{ legend }}
216+
</div>
217+
</template>
218+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
219+
#BEFORE {{ series.name }}
220+
</template>
221+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
222+
#AFTER {{ series.name }}
223+
</template>
224+
</VueUiNestedDonuts>
225+
</template>
226+
227+
<template #VDUI-build>
228+
<VueDataUi component="VueUiNestedDonuts" :dataset="dataset" :config="config" :key="`vdui_build_${step}`" @selectLegend="selectLegend" @selectDatapoint="selectDatapoint">
229+
<template #svg="{ svg }">
230+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
231+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
232+
</template>
233+
<template #legend="{ legend }">
234+
#LEGEND
235+
<div style="font-size: 8px">
236+
{{ legend }}
237+
</div>
238+
</template>
239+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
240+
#BEFORE {{ series.name }}
241+
</template>
242+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
243+
#AFTER {{ series.name }}
244+
</template>
245+
</VueDataUi>
246+
</template>
247+
248+
<template #knobs>
249+
<div
250+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
251+
<div v-for="knob in model">
252+
<label style="font-size: 10px">{{ knob.key }}</label>
253+
<div
254+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
255+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
256+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
257+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
258+
<option v-for="opt in knob.options">{{ opt }}</option>
259+
</select>
260+
</div>
261+
</div>
262+
</div>
263+
</template>
264+
265+
<template #config>
266+
{{ config }}
267+
</template>
268+
</Box>
269+
</template>

‎src/App.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import ArenaVueUiDonutEvolution from "../TestingArena/ArenaVueUiDonutEvolution.v
3131
import ArenaVueUiIcon from "../TestingArena/ArenaVueUiIcon.vue";
3232
import ArenaVueUiMoodRadar from "../TestingArena/ArenaVueUiMoodRadar.vue";
3333
import ArenaVueUiMolecule from "../TestingArena/ArenaVueUiMolecule.vue";
34+
import ArenaVueUiNestedDonuts from "../TestingArena/ArenaVueUiNestedDonuts.vue";
3435
3536
const showOldArena = ref(false);
3637
@@ -64,10 +65,11 @@ const components = ref([
6465
"VueUiDonutEvolution",
6566
"VueUiIcon",
6667
"VueUiMoodRadar",
67-
"VueUiMolecule"
68+
"VueUiMolecule",
69+
"VueUiNestedDonuts"
6870
]);
6971
70-
const selectedComponent = ref(components.value[29]);
72+
const selectedComponent = ref(components.value[30]);
7173
7274
</script>
7375

@@ -165,9 +167,12 @@ const selectedComponent = ref(components.value[29]);
165167
<!-- 27 -->
166168
<ArenaVueUiIcon v-if="selectedComponent === 'VueUiIcon'" />
167169

168-
<!-- 27 -->
170+
<!-- 28 -->
169171
<ArenaVueUiMoodRadar v-if="selectedComponent === 'VueUiMoodRadar'" />
170172

171-
<!-- 28 -->
173+
<!-- 29 -->
172174
<ArenaVueUiMolecule v-if="selectedComponent === 'VueUiMolecule'" />
175+
176+
<!-- 30 -->
177+
<ArenaVueUiNestedDonuts v-if="selectedComponent === 'VueUiNestedDonuts'" />
173178
</template>

0 commit comments

Comments
 (0)