Skip to content

Commit 17fb473

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiMolecule testing arena
1 parent 652ea72 commit 17fb473

File tree

2 files changed

+333
-2
lines changed

2 files changed

+333
-2
lines changed

‎TestingArena/ArenaVueUiMolecule.vue‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiMolecule from '../src/components/vue-ui-molecule.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: "Root",
11+
details: "This is the root node",
12+
nodes: [
13+
{
14+
name: 'node1',
15+
details: 'Lorem ipsum',
16+
nodes: [
17+
{
18+
name: 'node1.1', details: 'Lorem ipsum', nodes: [
19+
{ name: 'node1.1' },
20+
{ name: 'node1.2' },
21+
{ name: 'node1.3' },
22+
]
23+
},
24+
{
25+
name: 'node1.2', nodes: [
26+
{ name: 'node1.2.1' },
27+
{ name: 'node1.2.2' },
28+
{ name: 'node1.2.3' },
29+
{ name: 'node1.2.4' },
30+
]
31+
},
32+
{
33+
name: 'node1.3', nodes: [
34+
{ name: 'node1.3.1' },
35+
{ name: 'node1.3.2' },
36+
]
37+
},
38+
{
39+
name: 'node1.4', nodes: [
40+
{ name: 'node1.4.1' },
41+
{ name: 'node1.4.2' },
42+
{ name: 'node1.4.3' },
43+
{ name: 'node1.4.4' },
44+
{ name: 'node1.4.5' },
45+
{ name: 'node1.4.6' },
46+
]
47+
},
48+
{
49+
name: 'node1.5', nodes: [
50+
{ name: 'node1.5.1' },
51+
{ name: 'node1.5.2' },
52+
{ name: 'node1.5.3' },
53+
{ name: 'node1.5.4' },
54+
{ name: 'node1.5.5' },
55+
{ name: 'node1.5.6' },
56+
]
57+
},
58+
{
59+
name: 'node1.6', nodes: [
60+
{ name: 'node1.6.1' },
61+
{ name: 'node1.6.2' },
62+
{ name: 'node1.6.3' },
63+
{ name: 'node1.6.4' },
64+
{ name: 'node1.6.5' },
65+
{ name: 'node1.6.6' },
66+
]
67+
},
68+
]
69+
},
70+
{
71+
name: 'node2',
72+
nodes: [
73+
{
74+
name: 'node2.1', nodes: [
75+
{ name: 'node2.1.1' },
76+
{ name: 'node2.1.2' },
77+
{ name: 'node2.1.3' },
78+
{ name: 'node2.1.4' },
79+
{ name: 'node2.1.5' },
80+
{
81+
name: 'node2.1.6', nodes: [
82+
{ name: 'node2.1.6.1' },
83+
{ name: 'node2.1.6.2' },
84+
{ name: 'node2.1.6.3' },
85+
{ name: 'node2.1.6.4' },
86+
{ name: 'node2.1.6.5' },
87+
{
88+
name: 'node2.1.6.6', nodes: [
89+
{ name: 'node2.1.6.6.1' },
90+
{ name: 'node2.1.6.6.2' },
91+
{ name: 'node2.1.6.6.3' },
92+
{ name: 'node2.1.6.6.4' },
93+
{ name: 'node2.1.6.6.5' },
94+
{
95+
name: 'node2.1.6.6.6', nodes: [
96+
{ name: 'node2.1.6.6.6.1' },
97+
{ name: 'node2.1.6.6.6.2' },
98+
{ name: 'node2.1.6.6.6.3' , nodes: [
99+
{ name: 'node2.1.6.6.6.3.1' },
100+
{ name: 'node2.1.6.6.6.3.2', nodes: [
101+
{ name: 'node2.1.6.6.6.3.2.1' },
102+
{ name: 'node2.1.6.6.6.3.2.2' },
103+
{ name: 'node2.1.6.6.6.3.2.3' },
104+
] },
105+
{ name: 'node2.1.6.6.6.3.3' },
106+
{ name: 'node2.1.6.6.6.3.4' },
107+
{ name: 'node2.1.6.6.6.3.5' },
108+
{ name: 'node2.1.6.6.6.3.6' },
109+
]},
110+
{ name: 'node2.1.6.6.6.4' },
111+
{ name: 'node2.1.6.6.6.5' },
112+
{ name: 'node2.1.6.6.6.6' },
113+
]
114+
},
115+
]
116+
},
117+
]
118+
},
119+
]
120+
},
121+
]
122+
},
123+
{
124+
name: 'node3',
125+
nodes: [
126+
{ name: 'node3.1' },
127+
{ name: 'node3.2' },
128+
{ name: 'node3.3' },
129+
]
130+
},
131+
{
132+
name: 'node4',
133+
nodes: [
134+
{ name: 'node4.1' },
135+
{ name: 'node4.2', nodes: [
136+
{ name: 'node4.2.1'},
137+
{ name: 'node4.2.2'},
138+
{ name: 'node4.2.3'},
139+
] },
140+
{ name: 'node4.3' },
141+
{ name: 'node4.4', nodes: [
142+
{ name: 'node4.4.1'},
143+
{ name: 'node4.4.2'},
144+
{ name: 'node4.4.3'},
145+
{ name: 'node4.4.4'},
146+
{ name: 'node4.4.5'},
147+
] },
148+
]
149+
},
150+
{
151+
name: 'node5',
152+
nodes: [
153+
{ name: 'node4.1' },
154+
{ name: 'node4.2' },
155+
{ name: 'node4.3' },
156+
{ name: 'node4.4' },
157+
{ name: 'node4.5' },
158+
]
159+
},
160+
{
161+
name: 'node6',
162+
nodes: [
163+
{ name: 'node4.1' },
164+
{ name: 'node4.2' },
165+
{ name: 'node4.3' },
166+
{ name: 'node4.4' },
167+
]
168+
},
169+
]
170+
}
171+
])
172+
173+
const model = ref([
174+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
175+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
176+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
177+
{ key: 'style.chart.nodes.stroke', def: '#FFFFFF', type: 'color'},
178+
{ key: 'style.chart.nodes.strokeHovered', def: '#1A1A1A', type: 'color'},
179+
{ key: 'style.chart.links.stroke', def: '#DDDDDD', type: 'color'},
180+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
181+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
182+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
183+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
184+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
185+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sot amet', type: 'text'},
186+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type:'number', min: 8, max: 48},
187+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
188+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
189+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
190+
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
191+
{ key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 24},
192+
{ key: 'style.chart.zoom.speed', def: 1, type: 'number', min: 0, max: 2, step: 0.01},
193+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
194+
{ key: 'table.show', def: false, type: 'checkbox'},
195+
{ key: 'table.responsiveBreakpoint', def: 400, type:'number', min: 300, max: 800},
196+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
197+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
198+
{ key: 'table.th.outline', def: 'none', type: 'text'},
199+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
200+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
201+
{ key: 'table.td.outline', def: 'none', type: 'text'},
202+
{ key: 'table.translations.nodeName', def: 'Node name', type: 'text'},
203+
{ key: 'table.translations.details', def: 'Details', type: 'text'},
204+
{ key: 'table.translations.parentNode', def: 'Parent node', type: 'text'},
205+
])
206+
207+
const testCustomTooltip = ref(false);
208+
209+
const config = computed(() => {
210+
const c = convertArrayToObject(model.value);
211+
if(testCustomTooltip.value) {
212+
return {
213+
...c,
214+
style: {
215+
...c.style,
216+
chart: {
217+
...c.style.chart,
218+
tooltip: {
219+
...c.style.chart.tooltip,
220+
customFormat: (data) => {
221+
console.log('MOLECULE CUSTOM TOOLTIP', data);
222+
return 'CUSTOM TOOLTIP'
223+
}
224+
}
225+
}
226+
}
227+
}
228+
} else {
229+
return c
230+
}
231+
})
232+
233+
const step = ref(0);
234+
235+
</script>
236+
237+
<template>
238+
<div style="margin: 12px 0">
239+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip"/>
240+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
241+
</div>
242+
<Box>
243+
<template #title></template>
244+
245+
<template #local>
246+
<LocalVueUiMolecule :dataset="dataset" :config="config" :key="`local_${step}`">
247+
<template #svg="{ svg }">
248+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
249+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
250+
</template>
251+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
252+
#BEFORE {{ series.name }}
253+
</template>
254+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
255+
#AFTER {{ series.name }}
256+
</template>
257+
</LocalVueUiMolecule>
258+
</template>
259+
260+
<template #VDUI-local>
261+
<LocalVueDataUi component="VueUiMolecule" :dataset="dataset" :config="config" :key="`vdui_local_${step}`">
262+
<template #svg="{ svg }">
263+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
264+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
265+
</template>
266+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
267+
#BEFORE {{ series.name }}
268+
</template>
269+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
270+
#AFTER {{ series.name }}
271+
</template>
272+
</LocalVueDataUi>
273+
</template>
274+
275+
<template #build>
276+
<VueUiMolecule :dataset="dataset" :config="config" :key="`build_${step}`">
277+
<template #svg="{ svg }">
278+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
279+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
280+
</template>
281+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
282+
#BEFORE {{ series.name }}
283+
</template>
284+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
285+
#AFTER {{ series.name }}
286+
</template>
287+
</VueUiMolecule>
288+
</template>
289+
290+
<template #VDUI-build>
291+
<VueDataUi component="VueUiMolecule" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
292+
<template #svg="{ svg }">
293+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
294+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
295+
</template>
296+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
297+
#BEFORE {{ series.name }}
298+
</template>
299+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
300+
#AFTER {{ series.name }}
301+
</template>
302+
</VueDataUi>
303+
</template>
304+
305+
<template #knobs>
306+
<div
307+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
308+
<div v-for="knob in model">
309+
<label style="font-size: 10px">{{ knob.key }}</label>
310+
<div
311+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
312+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
313+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
314+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
315+
<option v-for="opt in knob.options">{{ opt }}</option>
316+
</select>
317+
</div>
318+
</div>
319+
</div>
320+
</template>
321+
322+
<template #config>
323+
{{ config }}
324+
</template>
325+
</Box>
326+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import ArenaVueUiRings from "../TestingArena/ArenaVueUiRings.vue";
3030
import ArenaVueUiDonutEvolution from "../TestingArena/ArenaVueUiDonutEvolution.vue";
3131
import ArenaVueUiIcon from "../TestingArena/ArenaVueUiIcon.vue";
3232
import ArenaVueUiMoodRadar from "../TestingArena/ArenaVueUiMoodRadar.vue";
33+
import ArenaVueUiMolecule from "../TestingArena/ArenaVueUiMolecule.vue";
3334
3435
const showOldArena = ref(false);
3536
@@ -62,10 +63,11 @@ const components = ref([
6263
"VueUiRings",
6364
"VueUiDonutEvolution",
6465
"VueUiIcon",
65-
"VueUiMoodRadar"
66+
"VueUiMoodRadar",
67+
"VueUiMolecule"
6668
]);
6769
68-
const selectedComponent = ref(components.value[28]);
70+
const selectedComponent = ref(components.value[29]);
6971
7072
</script>
7173

@@ -165,4 +167,7 @@ const selectedComponent = ref(components.value[28]);
165167

166168
<!-- 27 -->
167169
<ArenaVueUiMoodRadar v-if="selectedComponent === 'VueUiMoodRadar'" />
170+
171+
<!-- 28 -->
172+
<ArenaVueUiMolecule v-if="selectedComponent === 'VueUiMolecule'" />
168173
</template>

0 commit comments

Comments
 (0)