Skip to content

Commit 7254f31

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiChestnut testing arena
1 parent 11389dc commit 7254f31

File tree

2 files changed

+390
-2
lines changed

2 files changed

+390
-2
lines changed

‎TestingArena/ArenaVueUiChestnut.vue‎

Lines changed: 383 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,383 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiChestnut from '../src/components/vue-ui-chestnut.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: "Root1",
11+
branches: [
12+
{
13+
name: "branch 1.1",
14+
value: 200,
15+
breakdown: [
16+
{
17+
name: "break 1.1.1",
18+
value: 50,
19+
color: "#F17171"
20+
},
21+
{
22+
name: "break 1.1.2",
23+
value: 25,
24+
color: "#ffc800"
25+
},
26+
{
27+
name: "break 1.1.3",
28+
value: 25,
29+
color: "#42d392"
30+
},
31+
]
32+
},
33+
{
34+
name: "branch 1.2",
35+
value: 100,
36+
breakdown: [
37+
{
38+
name: "break 1.2.1",
39+
value: 10,
40+
color: "#F17171"
41+
},
42+
{
43+
name: "break 1.2.2",
44+
value: 20,
45+
color: "#ffc800"
46+
},
47+
{
48+
name: "break 1.2.3",
49+
value: 70,
50+
color: "#42d392"
51+
},
52+
]
53+
},
54+
{
55+
name: "branch 1.3",
56+
value: 175,
57+
breakdown: [
58+
{
59+
name: "break 1.3.1",
60+
value: 90,
61+
color: "#F17171"
62+
},
63+
{
64+
name: "break 1.3.2",
65+
value: 10,
66+
color: "#ffc800"
67+
},
68+
{
69+
name: "break 1.3.3",
70+
value: 75,
71+
color: "#42d392"
72+
},
73+
]
74+
},
75+
76+
]
77+
},
78+
{
79+
name: "Root2",
80+
branches: [
81+
{
82+
name: "branch 2.1",
83+
value: 200,
84+
breakdown: [
85+
{
86+
name: "break 2.1.1",
87+
value: 150,
88+
color: "#F17171"
89+
},
90+
{
91+
name: "break 2.1.2",
92+
value: 25,
93+
color: "#ffc800"
94+
},
95+
{
96+
name: "break 2.1.3",
97+
value: 25,
98+
color: "#42d392"
99+
},
100+
]
101+
},
102+
{
103+
name: "branch 2.2",
104+
value: 300,
105+
breakdown: [
106+
{
107+
name: "break 2.2.1",
108+
value: 100,
109+
color: "#F17171"
110+
},
111+
{
112+
name: "break 2.2.2",
113+
value: 10,
114+
color: "#ffc800"
115+
},
116+
{
117+
name: "break 2.2.3",
118+
value: 150,
119+
color: "#42d392"
120+
},
121+
]
122+
},
123+
{
124+
name: "branch 2.3",
125+
value: 125,
126+
breakdown: [
127+
{
128+
name: "break 2.3.1",
129+
value: 80,
130+
color: "#F17171"
131+
},
132+
{
133+
name: "break 2.3.2",
134+
value: 20,
135+
color: "#ffc800"
136+
},
137+
{
138+
name: "break 2.3.3",
139+
value: 25,
140+
color: "#42d392"
141+
},
142+
]
143+
},
144+
]
145+
},
146+
{
147+
name: "Root3",
148+
branches: [
149+
{
150+
name: "branch 3.1",
151+
value: 120,
152+
breakdown: [
153+
{
154+
name: "break 3.1.1",
155+
value: 100,
156+
color: "#F17171"
157+
},
158+
{
159+
name: "break 3.1.2",
160+
value: 10,
161+
color: "#ffc800"
162+
},
163+
{
164+
name: "break 3.1.3",
165+
value: 10,
166+
color: "#42d392"
167+
},
168+
]
169+
},
170+
{
171+
name: "branch 3.2",
172+
value: 90,
173+
breakdown: [
174+
{
175+
name: "break 3.2.1",
176+
value: 30,
177+
color: "#F17171"
178+
},
179+
{
180+
name: "break 3.2.2",
181+
value: 30,
182+
color: "#ffc800"
183+
},
184+
{
185+
name: "break 3.2.3",
186+
value: 40,
187+
color: "#42d392"
188+
},
189+
]
190+
},
191+
{
192+
name: "branch 3.3",
193+
value: 390,
194+
breakdown: [
195+
{
196+
name: "break 3.3.1",
197+
value: 90,
198+
color: "#F17171"
199+
},
200+
{
201+
name: "break 3.3.2",
202+
value: 200,
203+
color: "#ffc800"
204+
},
205+
{
206+
name: "break 3.3.3",
207+
value: 100,
208+
color: "#42d392"
209+
},
210+
]
211+
}
212+
]
213+
},
214+
]);
215+
216+
const model = ref([
217+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
218+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
219+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
220+
{ key: 'style.chart.layout.grandTotal.show', def: true, type: 'checkbox'},
221+
{ key: 'style.chart.layout.grandTotal.fontSize', def: 20, type: 'number', min: 8, max: 48},
222+
{ key: 'style.chart.layout.grandTotal.bold', def: true, type: 'checkbox'},
223+
{ key: 'style.chart.layout.grandTotal.prefix', def: 'P', type: 'text'},
224+
{ key: 'style.chart.layout.grandTotal.suffix', def: 'S', type: 'text'},
225+
{ key: 'style.chart.layout.grandTotal.roundingValue', def: 2, type: 'number', min: 0, max: 12},
226+
{ key: 'style.chart.layout.grandTotal.color', def: '#1A1A1A', type: 'color'},
227+
{ key: 'style.chart.layout.grandTotal.text', def: 'Grand total', type: 'text'},
228+
{ key: 'style.chart.layout.grandTotal.offsetY', def: 0, type: 'number', min: -100, max: 100},
229+
{ key: 'style.chart.layout.roots.stroke', def: '#FFFFFF', type: 'color'},
230+
{ key: 'style.chart.layout.roots.strokeWidth', def: 5, type: 'range', min: 0, max: 12},
231+
{ key: 'style.chart.layout.roots.useGradient', def: true, type: 'checkbox'},
232+
{ key: 'style.chart.layout.roots.gradientIntensity', def: 20, type: 'range', min: 0, max: 100},
233+
{ key: 'style.chart.layout.roots.underlayerColor', def: '#FFFFFF', type: 'color'},
234+
{ key: 'style.chart.layout.roots.labels.show', def: true, type: 'checkbox'},
235+
{ key: 'style.chart.layout.roots.labels.fontSize', def: 16, type: 'range', min: 8, max: 48},
236+
{ key: 'style.chart.layout.roots.labels.adaptColorToBackground', def: true, type: 'checkbox'},
237+
{ key: 'style.chart.layout.roots.labels.color', def: '#FFFFFF', type: 'color'},
238+
{ key: 'style.chart.layout.roots.labels.bold', def: true, type: 'checkbox'},
239+
{ key: 'style.chart.layout.roots.labels.roundingValue', def: 2, type: 'number', min: 0, max: 12},
240+
{ key: 'style.chart.layout.roots.labels.prefix', def: 'P', type: 'text'},
241+
{ key: 'style.chart.layout.roots.labels.suffix', def: 'S', type: 'text'},
242+
{ key: 'style.chart.layout.roots.labels.name.color', def: '#1A1A1A', type: 'color'},
243+
{ key: 'style.chart.layout.roots.labels.name.fontSize', def: 16, type: 'number', min: 8, max: 48},
244+
{ key: 'style.chart.layout.roots.labels.name.bold', def: true, type: 'checkbox'},
245+
{ key: 'style.chart.layout.verticalSeparator.stroke', def: '#FFFFFF', type: 'color'},
246+
{ key: 'style.chart.layout.verticalSeparator.strokeWidth', def: 5, type: 'range', min: 0, max: 24},
247+
{ key: 'style.chart.layout.links.opacity', def: 10, type: 'range', min: 0, max: 100},
248+
{ key: 'style.chart.layout.branches.stroke', def: '#FFFFFF', type: 'color'},
249+
{ key: 'style.chart.layout.branches.strokeWidth', def: 0, type: 'number', min: 0, max: 12},
250+
{ key: 'style.chart.layout.branches.borderRadius', def: 6, type: 'range', min: 0, max: 24},
251+
{ key: 'style.chart.layout.branches.useGradient', def: true, type: 'checkbox'},
252+
{ key: 'style.chart.layout.branches.gradientIntensity', def: 20, type: 'range', min: 0, max:100},
253+
{ key: 'style.chart.layout.branches.underlayerColor', def: '#FFFFFF', type: 'color'},
254+
{ key: 'style.chart.layout.branches.widthRatio', def: 1.5, type: 'range', min: 0.1, max: 2, step: 0.01},
255+
{ key: 'style.chart.layout.branches.labels.show', def: true, type: 'checkbox'},
256+
{ key: 'style.chart.layout.branches.labels.fontSize', def: 14, type: 'range', min: 8, max: 48},
257+
{ key: 'style.chart.layout.branches.labels.color', def: '#1A1A1A', type: 'color'},
258+
{ key: 'style.chart.layout.branches.labels.bold', def: true, type: 'checkbox'},
259+
{ key: 'style.chart.layout.branches.labels.dataLabels.show', def: true, type: 'checkbox'},
260+
{ key: 'style.chart.layout.branches.labels.dataLabels.hideUnderValue', def: 5, type: 'number', min: 1, max: 20},
261+
{ key: 'style.chart.layout.branches.labels.dataLabels.fontSize', def: 14, type: 'range', min: 8, max: 48},
262+
{ key: 'style.chart.layout.branches.labels.dataLabels.roundingValue', def: 2, type: 'number', min: 0, max: 12},
263+
{ key: 'style.chart.layout.branches.labels.dataLabels.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
264+
{ key: 'style.chart.layout.branches.labels.dataLabels.prefix', def: 'P', type: 'text'},
265+
{ key: 'style.chart.layout.branches.labels.dataLabels.suffix', def: 'S', type: 'text'},
266+
{ key: 'style.chart.layout.nuts.offsetX', def: 20, type: 'number', min: -100, max: 100},
267+
{ key: 'style.chart.layout.nuts.useGradient', def: true, type: 'checkbox'},
268+
{ key: 'style.chart.layout.nuts.gradientIntensity', def: 30, type: 'range', min: 0, max: 100},
269+
{ key: 'style.chart.layout.nuts.selected.useMotion', def: true, type: 'checkbox'},
270+
{ key: 'style.chart.layout.nuts.selected.useGradient', def: true, type: 'checkbox'},
271+
{ key: 'style.chart.layout.nuts.selected.gradientIntensity', def: 40, type: 'range', min: 0, max: 100},
272+
{ key: 'style.chart.layout.nuts.selected.roundingValue', def: 2, type: 'number', min: 0, max: 12},
273+
{ key: 'style.chart.layout.nuts.selected.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
274+
{ key: 'style.chart.layout.nuts.selected.labels.dataLabels.hideUnderValue', def: 5, type: 'number', min: 1, max: 20},
275+
{ key: 'style.chart.layout.nuts.selected.labels.dataLabels.color', def: '#1A1A1A', type: 'color'},
276+
{ key: 'style.chart.layout.nuts.selected.labels.dataLabels.fontSize', def: 12, type: 'number', min: 8, max: 48},
277+
{ key: 'style.chart.layout.nuts.selected.labels.dataLabels.bold', def: true, type: 'checkbox'},
278+
{ key: 'style.chart.layout.nuts.selected.labels.dataLabels.prefix', def: 'P', type: 'text'},
279+
{ key: 'style.chart.layout.nuts.selected.labels.dataLabels.suffix', def: 'S', type: 'text'},
280+
{ key: 'style.chart.layout.nuts.selected.labels.core.total.color', def:'#1A1A1A', type: 'color'},
281+
{ key: 'style.chart.layout.nuts.selected.labels.core.total.fontSize', def: 24, type: 'number', min: 8, max: 48},
282+
{ key: 'style.chart.layout.nuts.selected.labels.core.total.bold', def: false, type: 'checkbox'},
283+
{ key: 'style.chart.layout.nuts.selected.labels.core.value.color', def: '#1A1A1A', type: 'color'},
284+
{ key: 'style.chart.layout.nuts.selected.labels.core.value.fontSize', def: 24, type: 'number', min:8, max: 48},
285+
{ key: 'style.chart.layout.nuts.selected.labels.core.value.bold', def: true, type: 'checkbox'},
286+
{ key: 'style.chart.layout.nuts.selected.labels.core.value.prefix', def: 'P', type: 'text'},
287+
{ key: 'style.chart.layout.nuts.selected.labels.core.value.suffix', def: 'S', type: 'text'},
288+
{ key: 'style.chart.layout.legend.fontSize', def: 16, type: 'number', min: 8, max: 48},
289+
{ key: 'style.chart.layout.legend.color', def: '#1A1A1A', type: 'color'},
290+
{ key: 'style.chart.layout.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
291+
{ key: 'style.chart.layout.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
292+
{ key: 'style.chart.layout.legend.prefix', def: 'P', type: 'text'},
293+
{ key: 'style.chart.layout.legend.suffix', def: 'S', type: 'text'},
294+
{ key: 'style.chart.layout.title.color', def: '#1A1A1A', type: 'color'},
295+
{ key: 'style.chart.layout.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
296+
{ key: 'style.chart.layout.title.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
297+
{ key: 'style.chart.layout.title.bold', def: true, type: 'checkbox'},
298+
{ key: 'style.chart.layout.title.offsetY', def: 0, type: 'number', min: -100, max: 100},
299+
{ key: 'style.chart.layout.title.subtitle.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
300+
{ key: 'style.chart.layout.title.subtitle.color', def: '#CCCCCC', type: 'color'},
301+
{ key: 'style.chart.layout.title.subtitle.bold', def: false, type: 'checkbox'},
302+
{ key: 'style.chart.layout.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
303+
{ key: 'style.chart.layout.title.subtitle.offsetY', def: 0, type: 'number', min: -100, max: 100},
304+
{ key: 'table.show', def: false, type: 'checkbox'},
305+
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
306+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
307+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
308+
{ key: 'table.th.outline', def: 'none', type: 'text'},
309+
{ key: 'table.th.translations.rootName', def: 'root name', type: 'text'},
310+
{ key: 'table.th.translations.rootValue', def: 'root value', type: 'text'},
311+
{ key: 'table.th.translations.rootToTotal', def: '% / total', type: 'text'},
312+
{ key: 'table.th.translations.branchName', def: 'branch name', type: 'text'},
313+
{ key: 'table.th.translations.branchValue', def: 'branch value', type: 'text'},
314+
{ key: 'table.th.translations.branchToRoot', def: '% / root', type: 'text'},
315+
{ key: 'table.th.translations.branchToTotal', def: '% / total', type: 'text'},
316+
{ key: 'table.th.translations.nutName', def: 'nut name', type: 'text'},
317+
{ key: 'table.th.translations.nutValue', def: 'nut value', type: 'text'},
318+
{ key: 'table.th.translations.nutToBranch', def: '% / branch', type: 'text'},
319+
{ key: 'table.th.translations.nutToRoot', def: '% / root', type: 'text'},
320+
{ key: 'table.th.translations.nutToTotal', def: '% / total', type: 'text'},
321+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
322+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
323+
{ key: 'table.td.outline', def: 'none', type: 'text'},
324+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
325+
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
326+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
327+
{ key: 'translations.total', def: 'Total', type: 'text'},
328+
{ key: 'translations.proportionToTree', def: 'of grand total', type: 'text'},
329+
{ key: 'translations.of', def: 'of', type: 'text'}
330+
])
331+
332+
const config = computed(() => convertArrayToObject(model.value));
333+
334+
const step = ref(0)
335+
336+
</script>
337+
338+
<template>
339+
<Box>
340+
<template #title>VueUiChestnut</template>
341+
342+
<template #local>
343+
<LocalVueUiChestnut :dataset="dataset" :config="config" :key="`local_${step}`">
344+
</LocalVueUiChestnut>
345+
</template>
346+
347+
<template #VDUI-local>
348+
<LocalVueDataUi component="VueUiChestnut" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
349+
</LocalVueDataUi>
350+
</template>
351+
352+
<template #build>
353+
<VueUiChestnut :dataset="dataset" :config="config" :key="`build_${step}`">
354+
</VueUiChestnut>
355+
</template>
356+
357+
<template #VDUI-build>
358+
<VueDataUi component="VueUiChestnut" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
359+
</VueDataUi>
360+
</template>
361+
362+
<template #knobs>
363+
<div
364+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
365+
<div v-for="knob in model">
366+
<label style="font-size: 10px">{{ knob.key }}</label>
367+
<div
368+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
369+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
370+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
371+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
372+
<option v-for="opt in knob.options">{{ opt }}</option>
373+
</select>
374+
</div>
375+
</div>
376+
</div>
377+
</template>
378+
379+
<template #config>
380+
{{ config }}
381+
</template>
382+
</Box>
383+
</template>

0 commit comments

Comments
 (0)