Skip to content

Commit 763005b

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiDonutEvolution testing arena
1 parent 697bb99 commit 763005b

File tree

2 files changed

+196
-2
lines changed

2 files changed

+196
-2
lines changed

‎TestingArena/ArenaVueUiDonutEvolution.vue‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiDonutEvolution from '../src/components/vue-ui-donut-evolution.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: "Serie 1",
11+
values: [55.123425162, 34, 21, 13, 8, 5, 8, 13, 21, 34, 55 ],
12+
},
13+
{
14+
name: "Serie 2",
15+
values: [1, 12, 24, 32, 5, 8, 13, 21, 34, 55, 89 ]
16+
},
17+
{
18+
name: "Serie 3",
19+
values: [16, 2, 3, 5, 28, 13, 21, 34, 55, 89, 134 ]
20+
},
21+
{
22+
name: "Serie 4",
23+
values: [5, null, 5, 5, 5, 5 ]
24+
}
25+
])
26+
27+
const model = ref([
28+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
29+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
30+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
31+
{ key: 'style.chart.layout.height', def: 316, type: 'number', min: 200, max: 800},
32+
{ key: 'style.chart.layout.width', def: 500, type: 'number', min: 300, max: 1200},
33+
{ key: 'style.chart.layout.padding.top', def: 24, type: 'number', min: 0, max: 100},
34+
{ key: 'style.chart.layout.padding.left', def: 64, type: 'number', min: 0, max: 100},
35+
{ key: 'style.chart.layout.padding.right', def: 48, type: 'number', min: 0, max: 100},
36+
{ key: 'style.chart.layout.padding.bottom', def: 24, type: 'number', min: 0, max: 100},
37+
{ key: 'style.chart.layout.grid.show', def: true, type: 'checkbox'},
38+
{ key: 'style.chart.layout.grid.stroke', def: '#e1e5e8', type: 'color'},
39+
{ key: 'style.chart.layout.grid.strokeWidth', def: 0.7, type: 'number', mon: 0.5, max: 12, step: 0.1 },
40+
{ key: 'style.chart.layout.grid.showVerticalLines', def: true, type: 'checkbox'},
41+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.show', def: true, type: 'checkbox'},
42+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.fontSize', def: 10, type: 'number', min: 8, max: 24},
43+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.color', def: '#1A1A1A', type: 'color'},
44+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.roundingValue', def: 2, type: 'number', min: 0, max: 12},
45+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.offsetX', def: 0, type: 'number', min: -100, max: 100},
46+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.bold', def: false, type: 'checkbox'},
47+
{ key: 'style.chart.layout.grid.yAxis.dataLabels.steps', def: 10, type: 'number', min:2, max: 20},
48+
{ key: 'style.chart.layout.grid.xAxis.dataLabels.show', def: true, type: 'checkbox'},
49+
{ key: 'style.chart.layout.grid.xAxis.dataLabels.fontSize', def: 8, type: 'number', min: 8, max: 24},
50+
{ key: 'style.chart.layout.grid.xAxis.dataLabels.showOnlyFirstAndLast', def: false, type: 'checkbox'},
51+
{ key: 'style.chart.layout.grid.xAxis.dataLabels.color', def: '#1A1A1A', type: 'color'},
52+
{ key: 'style.chart.layout.grid.xAxis.dataLabels.rotation', def: -20, type: 'number', min: -360, max: 360},
53+
{ key: 'style.chart.layout.grid.xAxis.dataLabels.offsetY', def: 0, type: 'number', min: -100, max: 100},
54+
{ key: 'style.chart.layout.line.show', def: true, type: 'checkbox'},
55+
{ key: 'style.chart.layout.line.stroke', def: '#CCCCCC', type: 'color'},
56+
{ key: 'style.chart.layout.line.strokeWidth', def: 4, type: 'number', min: 0, max: 24},
57+
{ key: 'style.chart.layout.highligter.color', def: '#1A1A1A', type: 'color'},
58+
{ key: 'style.chart.layout.highlighter.opacity', def: 5, type: 'range', min: 0, max: 100}, // FIXME: This highligter is kind of a gimmick. To be improved or nuked.
59+
{ key: 'style.chart.layout.dataLabels.show', def: true, type: 'checkbox'},
60+
{ key: 'style.chart.layout.dataLabels.fontSize', def: 10, type: 'number', min: 8, max: 48},
61+
{ key: 'style.chart.layout.dataLabels.color', def: '#1A1A1A', type: 'color'},
62+
{ key: 'style.chart.layout.dataLabels.bold', def: false, type: 'checkbox'},
63+
{ key: 'style.chart.layout.dataLabels.rounding', def: 2, type: 'number', min: 0, max: 12},
64+
{ key: 'style.chart.layout.dataLabels.prefix', def: 'P', type: 'text'},
65+
{ key: 'style.chart.layout.dataLabels.suffix', def: 'S', type: 'text'},
66+
{ key: 'style.chart.layout.dataLabels.offsetY', def: 0, type: 'number', min: -100, max: 100},
67+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
68+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
69+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, amx: 48},
70+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
71+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
72+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
73+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
74+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
75+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
76+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
77+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
78+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox'},
79+
{ key: 'style.chart.legend.fontSize', def: 16, type: 'number', min: 8, max: 48},
80+
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
81+
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
82+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
83+
{ key: 'table.show', def: false, type: 'checkbox'},
84+
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
85+
{ key: 'table.columnNames.period', def: 'Period', type: 'text'},
86+
{ key: 'table.columnNames.total', def: 'Total', type: 'text'},
87+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
88+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
89+
{ key: 'table.td.outline', def: 'none', type: 'text'},
90+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
91+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
92+
{ key: 'table.th.outline', def: 'none', type: 'text'},
93+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
94+
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
95+
]);
96+
97+
const config = computed(() => {
98+
const c = convertArrayToObject(model.value)
99+
return {
100+
...c,
101+
style: {
102+
...c.style,
103+
chart: {
104+
...c.style.chart,
105+
layout: {
106+
...c.style.chart.layout,
107+
grid: {
108+
...c.style.chart.layout.grid,
109+
xAxis: {
110+
...c.style.chart.layout.grid.xAxis,
111+
dataLabels: {
112+
...c.style.chart.layout.grid.xAxis.dataLabels,
113+
values: [
114+
'01-01-2025',
115+
'02-01-2025',
116+
'03-01-2025',
117+
'04-01-2025',
118+
'05-01-2025',
119+
'06-01-2025',
120+
'07-01-2025',
121+
'08-01-2025',
122+
'09-01-2025',
123+
'10-01-2025',
124+
'11-01-2025',
125+
]
126+
}
127+
}
128+
}
129+
}
130+
}
131+
}
132+
}
133+
})
134+
135+
const step = ref(0)
136+
137+
</script>
138+
139+
<template>
140+
<Box>
141+
<template #title>VueUiDonutEvolution</template>
142+
143+
<template #local>
144+
<LocalVueUiDonutEvolution :dataset="dataset" :config="config" :key="`local_${step}`">
145+
</LocalVueUiDonutEvolution>
146+
</template>
147+
148+
<template #VDUI-local>
149+
<LocalVueDataUi component="VueUiDonutEvolution" :dataset="dataset" :config="config" :key="`vdui_local_${step}`">
150+
</LocalVueDataUi>
151+
</template>
152+
153+
<template #build>
154+
<VueUiDonutEvolution :dataset="dataset" :config="config" :key="`build_${step}`">
155+
</VueUiDonutEvolution>
156+
</template>
157+
158+
<template #VDUI-build>
159+
<VueDataUi component="VueUiDonutEvolution" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
160+
</VueDataUi>
161+
</template>
162+
163+
<template #knobs>
164+
<div
165+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
166+
<div v-for="knob in model">
167+
<label style="font-size: 10px">{{ knob.key }}</label>
168+
<div
169+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
170+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
171+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
172+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
173+
<option v-for="opt in knob.options">{{ opt }}</option>
174+
</select>
175+
</div>
176+
</div>
177+
</div>
178+
</template>
179+
180+
<template #config>
181+
{{ config }}
182+
</template>
183+
</Box>
184+
</template>

‎src/App.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import ArenaVueUiAgePyramid from "../TestingArena/ArenaVueUiAgePyramid.vue";
2727
import ArenaVueUiRelationCircle from "../TestingArena/ArenaVueUiRelationCircle.vue";
2828
import ArenaVueUiThermometer from "../TestingArena/ArenaVueUiThermometer.vue";
2929
import ArenaVueUiRings from "../TestingArena/ArenaVueUiRings.vue";
30+
import ArenaVueUiDonutEvolution from "../TestingArena/ArenaVueUiDonutEvolution.vue";
31+
import ArenaVueUiIcon from "../TestingArena/ArenaVueUiIcon.vue";
3032
3133
const showOldArena = ref(false);
3234
@@ -56,10 +58,12 @@ const components = ref([
5658
"VueUiAgePyramid",
5759
"VueUiRelationCircle",
5860
"VueUiThermometer",
59-
"VueUiRings"
61+
"VueUiRings",
62+
"VueUiDonutEvolution",
63+
"VueUiIcon"
6064
]);
6165
62-
const selectedComponent = ref(components.value[25]);
66+
const selectedComponent = ref(components.value[26]);
6367
6468
</script>
6569

@@ -150,4 +154,10 @@ const selectedComponent = ref(components.value[25]);
150154

151155
<!-- 25 -->
152156
<ArenaVueUiRings v-if="selectedComponent === 'VueUiRings'" />
157+
158+
<!-- 26 -->
159+
<ArenaVueUiDonutEvolution v-if="selectedComponent === 'VueUiDonutEvolution'" />
160+
161+
<!-- 27 -->
162+
<ArenaVueUiIcon v-if="selectedComponent === 'VueUiIcon'" />
153163
</template>

0 commit comments

Comments
 (0)