Skip to content

Commit df59413

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiTreemap arena
1 parent a9c84f0 commit df59413

File tree

4 files changed

+296
-10
lines changed

4 files changed

+296
-10
lines changed

‎TestingArena/ArenaVueUiDonut.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -256,11 +256,14 @@ function selectLegend(leg) {
256256
</template>
257257

258258
<template #knobs>
259-
<div style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
259+
<div
260+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
260261
<div v-for="knob in model">
261262
<label style="font-size: 10px">{{ knob.key }}</label>
262-
<div style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
263-
<input v-if="!['none', 'select'].includes(knob.type)" :type="knob.type" :min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
263+
<div
264+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
265+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
266+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
264267
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
265268
<option v-for="opt in knob.options">{{ opt }}</option>
266269
</select>

‎TestingArena/ArenaVueUiTreemap.vue‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiTreemap from '../src/components/vue-ui-treemap.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: 'S1',
11+
value: 100,
12+
children: [
13+
{
14+
name: 'S1 - C1',
15+
value: 50
16+
},
17+
{
18+
name: 'S1 -C2',
19+
value: 25
20+
},
21+
{
22+
name: 'S1 - C3',
23+
value: 12.5,
24+
children: [
25+
{
26+
name: 'S1 - C3 - CC1',
27+
value: 6
28+
},
29+
{
30+
name: 'S1 - C3 - CC2',
31+
value: 6.5
32+
},
33+
]
34+
}
35+
]
36+
},
37+
{
38+
name: 'S2',
39+
value: 200,
40+
children: [
41+
{
42+
name: 'S2 - C1',
43+
value: 100
44+
},
45+
{
46+
name: 'S2 - C2',
47+
value: 50
48+
},
49+
{
50+
name: 'S2 - C3',
51+
value: 25
52+
}
53+
]
54+
},
55+
{
56+
name: 'S3',
57+
value: 100,
58+
children: [
59+
{
60+
name: 'S3 - C1',
61+
value: 50
62+
},
63+
{
64+
name: 'S3 - C2',
65+
value: 25
66+
},
67+
{
68+
name: 'S3 - C3',
69+
value: 12.5
70+
}
71+
]
72+
},
73+
{
74+
name: 'S4',
75+
value: 20,
76+
children: [
77+
{
78+
name: 'S3 - C1',
79+
value: 10
80+
},
81+
{
82+
name: 'S3 - C2',
83+
value: 5
84+
},
85+
{
86+
name: 'S3 - C3',
87+
value: 2.5
88+
}
89+
]
90+
},
91+
{
92+
name: 'S5',
93+
value: 10,
94+
children: [
95+
{
96+
name: 'S3 - C1',
97+
value: 5
98+
},
99+
{
100+
name: 'S3 - C2',
101+
value: 2.5
102+
},
103+
{
104+
name: 'S3 - C3',
105+
value: 1.125
106+
}
107+
]
108+
},
109+
]);
110+
111+
const model = ref([
112+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
113+
{ key: 'style.fontFamily', def: 'inherit', type: 'text' },
114+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
115+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
116+
{ key: 'style.chart.height', def: 500, type: 'number', min: 100, max: 1000},
117+
{ key: 'style.chart.width', def: 800, type: 'number', min: 100, max: 1500},
118+
{ key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100},
119+
{ key: 'style.chart.padding.right', def: 0, type: 'number', min: 0, max: 100},
120+
{ key: 'style.chart.padding.bottom', def: 0, type: 'number', min: 0, max: 100},
121+
{ key: 'style.chart.padding.left', def: 0, type: 'number', min: 0, max: 100},
122+
{ key: 'style.chart.layout.sorted', def: true, type: 'checkbox'},
123+
{ key: 'style.chart.layout.rects.stroke', def: '#FFFFFF', type: 'color'},
124+
{ key: 'style.chart.layout.rects.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
125+
{ key: 'style.chart.layout.rects.borderRadius', def: 0, type: 'number', min: 0, max: 24},
126+
{ key: 'style.chart.layout.rects.colorRatio', def: 0.3, type: 'number', min: 0, max: 1, step: 0.01},
127+
{ key: 'style.chart.layout.rects.gradient.show', def: true, type: 'checkbox'},
128+
{ key: 'style.chart.layout.rects.gradient.intensity', def: 30, type: 'range', min:0, max: 100},
129+
{ key: 'style.chart.layout.rects.selected.stroke', def: '#FFFFFF', type: 'color'},
130+
{ key: 'style.chart.layout.rects.selected.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
131+
{ key: 'style.chart.layout.rects.selected.unselectedOpacity', def: 0.6, type: 'range', min: 0, max: 1, step: 0.01},
132+
{ key: 'style.chart.layout.labels.showDefaultLabels', def: true, type: 'checkbox'},
133+
{ key: 'style.chart.layout.labels.fontSize', def: 14, type: 'range', min: 8, max: 48, step: 1},
134+
{ key: 'style.chart.layout.labels.minFontSize', def: 10, type: 'range', min: 6, max: 48, step: 1},
135+
{ key: 'style.chart.layout.labels.hideUnderProportion', def: 0.03, type: 'number', min: 0, max: 1, step: 0.01},
136+
{ key: 'style.chart.layout.labels.prefix', def: 'Value: ', type: 'text'},
137+
{ key: 'style.chart.layout.labels.suffix', def: '€', type: 'text'},
138+
{ key: 'style.chart.layout.labels.rounding', def: 1, type: 'number', min: 0, max: 12},
139+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
140+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
141+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox'},
142+
{ key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 48},
143+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
144+
{ key: 'style.chart.legend.roundingValue', def: 1, type: 'number', min: 0, max: 12},
145+
{ key: 'style.chart.legend.roundingPercentage', def: 1, type: 'number', min: 0, max: 12},
146+
{ key: 'style.chart.title.text', def: "Lorem ipsum dolor sic amet", type: "text"},
147+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
148+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
149+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
150+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sic amet titulum subtitulum'},
151+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
152+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
153+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
154+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
155+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
156+
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
157+
{ key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 48},
158+
{ key: 'style.chart.tooltip.roundingValue', def: 1, type: 'number', min: 0, max: 12},
159+
{ key: 'table.show', def: false, type: 'checkbox'},
160+
{ key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800},
161+
{ key: 'table.columnNames.series', def: 'Series', type: 'text'},
162+
{ key: 'table.columnNames.value', def: 'Value', type: 'text'},
163+
{ key: 'table.columnNames.percentage', def: 'Percentage', type: 'text'},
164+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
165+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
166+
{ key: 'table.th.outline', def: 'none'},
167+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
168+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
169+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
170+
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
171+
]);
172+
173+
const testCustomTooltip = ref(false);
174+
175+
const config = computed(() => {
176+
const c = convertArrayToObject(model.value);
177+
if(testCustomTooltip.value) {
178+
return {
179+
...c,
180+
style: {
181+
...c.style,
182+
chart: {
183+
...c.style.chart,
184+
tooltip: {
185+
...c.style.chart.tooltip,
186+
customFormat: ({ datapoint }) => {
187+
let html = '';
188+
console.log(datapoint);
189+
return "test"
190+
}
191+
}
192+
}
193+
}
194+
195+
}
196+
} else {
197+
return {
198+
...c
199+
}
200+
}
201+
});
202+
203+
const step = ref(0)
204+
205+
function selectLegend(leg) {
206+
alert(`@selectLegend\n\n${JSON.stringify(leg)}`)
207+
}
208+
209+
function selectDatapoint(d) {
210+
alert(`@selectDatapoint\n\n${JSON.stringify(d)}`)
211+
}
212+
213+
</script>
214+
215+
<template>
216+
<div style="margin: 12px 0">
217+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip" />
218+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
219+
</div>
220+
<Box>
221+
<template #title>VueUiTreemap</template>
222+
223+
<template #local>
224+
<LocalVueUiTreemap :dataset="dataset" :config="config" :key="`local_${step}`" @selectDatapoint="selectDatapoint" @selectLegend="selectLegend">
225+
</LocalVueUiTreemap>
226+
</template>
227+
228+
<template #VDUI-local>
229+
<LocalVueDataUi component="VueUiTreemap" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" @selectDatapoint="selectDatapoint" @selectLegend="selectLegend">
230+
</LocalVueDataUi>
231+
</template>
232+
233+
<template #build>
234+
<VueUiTreemap :dataset="dataset" :config="config" :key="`build_${step}`" @selectDatapoint="selectDatapoint" @selectLegend="selectLegend">
235+
</VueUiTreemap>
236+
</template>
237+
238+
<template #VDUI-build>
239+
<VueDataUi component="VueUiTreemap" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`" @selectDatapoint="selectDatapoint" @selectLegend="selectLegend">
240+
</VueDataUi>
241+
</template>
242+
243+
<template #knobs>
244+
<div
245+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
246+
<div v-for="knob in model">
247+
<label style="font-size: 10px">{{ knob.key }}</label>
248+
<div
249+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
250+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
251+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
252+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
253+
<option v-for="opt in knob.options">{{ opt }}</option>
254+
</select>
255+
</div>
256+
</div>
257+
</div>
258+
</template>
259+
260+
<template #config>
261+
{{ config }}
262+
</template>
263+
</Box>
264+
</template>

‎TestingArena/Box.vue‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,24 @@ function refresh() {
99
<button class="reset" @click="refresh">RESET</button>
1010
<h1><slot name="title"/></h1>
1111
<div class="box">
12-
<div style="width:100%">
12+
<div style="width:100%; max-width: 600px">
1313
<p>Local</p>
1414
<slot name="local"/>
1515
</div>
16-
<div style="width:100%">
16+
<div style="width:100%; max-width: 600px">
1717
<p>VueDataUi Local</p>
1818
<slot name="VDUI-local"/>
1919
</div>
20-
<div style="width: 100%">
20+
<div style="width: 100%; max-width: 600px">
2121
<p>Build</p>
2222
<slot name="build"/>
2323
</div>
24-
<div style="width: 100%">
24+
<div style="width: 100%; max-width: 600px">
2525
<p>VueDataUi build</p>
2626
<slot name="VDUI-build"/>
2727
</div>
2828
</div>
29-
<div style="width: calc(100% - 48px); margin-top: 24px;padding: 0 24px">
29+
<div class="knobs">
3030
<button class="reset" @click="refresh">RESET</button>
3131
<slot name="knobs"/>
3232
</div>
@@ -45,13 +45,29 @@ h1, p {
4545
.box {
4646
display: grid;
4747
grid-template-columns: repeat(2, 1fr);
48+
justify-content: center;
49+
align-items:center;
50+
align-content: center;
51+
justify-items: center;
4852
gap: 12px;
4953
width: 100%;
54+
max-width: 1300px;
55+
margin: 0 auto;
5056
}
5157
.config {
5258
color: #CCCCCC;
5359
margin: 24px 0;
5460
padding: 0 24px;
61+
width: 100%;
62+
max-width: 1300px;
63+
margin: 0 auto;
64+
}
65+
.knobs {
66+
margin: 0 auto;
67+
width: 100%;
68+
max-width: 1300px;
69+
padding: 0 24px;
70+
margin-top: 24px;
5571
}
5672
.reset {
5773
background: #ff6400;

‎src/App.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import { ref } from "vue";
33
import TestingArena from "./TestingArena.vue";
44
import ArenaVueUiXy from "../TestingArena/ArenaVueUiXy.vue";
55
import ArenaVueUiDonut from "../TestingArena/ArenaVueUiDonut.vue";
6+
import ArenaVueUiTreemap from "../TestingArena/ArenaVueUiTreemap.vue";
67
78
const showOldArena = ref(false);
89
910
const components = ref([
1011
"VueUiXy",
11-
"VueUiDonut"
12+
"VueUiDonut",
13+
"VueUiTreemap"
1214
]);
1315
14-
const selectedComponent = ref(components.value[0]);
16+
const selectedComponent = ref(components.value[2]);
1517
1618
</script>
1719

@@ -26,4 +28,5 @@ const selectedComponent = ref(components.value[0]);
2628
<TestingArena v-if="showOldArena"/>
2729
<ArenaVueUiXy v-if="selectedComponent === 'VueUiXy'"/>
2830
<ArenaVueUiDonut v-if="selectedComponent === 'VueUiDonut'"/>
31+
<ArenaVueUiTreemap v-if="selectedComponent === 'VueUiTreemap'" />
2932
</template>

0 commit comments

Comments
 (0)