Skip to content

Commit 031e474

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiRelationCircle testing arena
1 parent 4a4b068 commit 031e474

File tree

2 files changed

+188
-2
lines changed

2 files changed

+188
-2
lines changed

‎TestingArena/ArenaVueUiRelationCircle.vue‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiRelationCircle from '../src/components/vue-ui-relation-circle.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+
id: "01",
11+
label: "Lorem",
12+
relations: ["02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
13+
weights: [5, 3, 10, 2, 9, 3, 1, 2, 3, 7, 1],
14+
},
15+
{
16+
id: "02",
17+
label: "Ipsum",
18+
relations: ["01", "03", "07", "06", "07"],
19+
weights: [3, 2, 9, 7, 1],
20+
},
21+
{
22+
id: "03",
23+
label: "Dolor",
24+
relations: ["01", "02"],
25+
weights: [2, 5],
26+
},
27+
{
28+
id: "04",
29+
label: "Consectetur",
30+
relations: ["01", "05", "10"],
31+
weights: [2, 1, 4],
32+
},
33+
{
34+
id: "05",
35+
label: "Amet",
36+
relations: ["01", "04", "07", "10"],
37+
weights: [2, 3, 4, 5],
38+
},
39+
{
40+
id: "06",
41+
label: "Rherum",
42+
relations: ["01", "02"],
43+
weights: [4, 1],
44+
},
45+
{
46+
id: "07",
47+
label: "Delecta",
48+
relations: ["01", "02", "08", "12"],
49+
weights: [4, 8, 2, 1],
50+
},
51+
{
52+
id: "08",
53+
label: "Nitimur",
54+
relations: ["01", "07", "12", "01"],
55+
weights: [7, 3, 2, 3],
56+
},
57+
{
58+
id: "09",
59+
label: "Vetitum",
60+
relations: ["01"],
61+
weights: [1],
62+
},
63+
{
64+
id: "10",
65+
label: "Monumentum",
66+
relations: ["01", "04", "05"],
67+
weights: [4, 1, 4],
68+
},
69+
{
70+
id: "11",
71+
label: "Aere",
72+
relations: ["01"],
73+
weights: [3],
74+
},
75+
{
76+
id: "12",
77+
label: "Perennius",
78+
relations: ["01", "07", "08"],
79+
weights: [8, 1, 1],
80+
}
81+
])
82+
83+
const model = ref([
84+
{ key: 'style.color', def: '#1A1A1A', type: 'color'},
85+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
86+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
87+
{ key: 'style.size', def: 400, type: 'number', min: 100, max: 1000},
88+
{ key: 'style.limit', def: 50, type: 'range', min: 2, max: 100},
89+
{ key: 'style.animation.show', def: true, type: 'checkbox'},
90+
{ key: 'style.animation.speedMs', def: 300, type: 'number', min: 0, max: 1000},
91+
{ key: 'style.labels.color', def: '#1A1A1A', type: 'color'},
92+
{ key: 'style.labels.fontSize', def: 10, type: 'number', min: 8, max: 48},
93+
{ key: 'style.labels.links.curved', def: true, type: 'checkbox'},
94+
{ key: 'style.labels.links.maxWidth', def: 3, type: 'number', min: 0, max: 100}, // useless ?
95+
{ key: 'style.circle.radiusProportion', def: 0.2, type: 'number', min: 0.1, max: 1, step: 0.01},
96+
{ key: 'style.circle.stroke', def: '#CCCCCC', type: 'color'},
97+
{ key: 'style.circle.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
98+
{ key: 'style.circle.offsetY', def: 0, type: 'number', min: -100, max: 100},
99+
{ key: 'style.plot.radius', def: 2, type: 'number', min: 0, max: 24},
100+
{ key: 'style.plot.color', def: '#1A1A1A', type: 'color'},
101+
{ key: 'style.title.useDiv', def: true, type: 'checkbox'}, // DEPRECATED
102+
{ key: 'style.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
103+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
104+
{ key: 'style.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
105+
{ key: 'style.title.bold', def: true, type: 'checkbox'},
106+
{ key: 'style.title.subtitle.color', def: '#CCCCCC', type: 'color'},
107+
{ key: 'style.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
108+
{ key: 'style.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
109+
{ key: 'style.title.subtitle.bold', def: false, type: 'checkbox' },
110+
{ key: 'userOptions.show', def: true, type: 'checkbox'}
111+
])
112+
113+
const config = computed(() => convertArrayToObject(model.value))
114+
115+
const step = ref(0)
116+
117+
</script>
118+
119+
<template>
120+
<Box>
121+
<template #title>VueUiRelatioNCircle</template>
122+
123+
<template #local>
124+
<LocalVueUiRelationCircle :dataset="dataset" :config="config" :key="`local_${step}`">
125+
<template #svg="{ svg }">
126+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
127+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
128+
</template>
129+
</LocalVueUiRelationCircle>
130+
</template>
131+
132+
<template #VDUI-local>
133+
<LocalVueDataUi component="VueUiRelationCircle" :dataset="dataset" :config="config"
134+
:key="`vdui_local_${step}`">
135+
<template #svg="{ svg }">
136+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
137+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
138+
</template>
139+
</LocalVueDataUi>
140+
</template>
141+
142+
<template #build>
143+
<VueUiRelationCircle :dataset="dataset" :config="config" :key="`build_${step}`">
144+
<template #svg="{ svg }">
145+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
146+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
147+
</template>
148+
</VueUiRelationCircle>
149+
</template>
150+
151+
<template #VDUI-build>
152+
<VueDataUi component="VueUiRelationCircle" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
153+
<template #svg="{ svg }">
154+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
155+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
156+
</template>
157+
</VueDataUi>
158+
</template>
159+
160+
<template #knobs>
161+
<div
162+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
163+
<div v-for="knob in model">
164+
<label style="font-size: 10px">{{ knob.key }}</label>
165+
<div
166+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
167+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
168+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
169+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
170+
<option v-for="opt in knob.options">{{ opt }}</option>
171+
</select>
172+
</div>
173+
</div>
174+
</div>
175+
</template>
176+
177+
<template #config>
178+
{{ config }}
179+
</template>
180+
</Box>
181+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import ArenaVueUiSparkGauge from "../TestingArena/ArenaVueUiSparkGauge.vue";
2424
import ArenaVueUiSparkTrend from "../TestingArena/ArenaVueUiSparkTrend.vue";
2525
import ArenaVueUiQuickChart from "../TestingArena/ArenaVueUiQuickChart.vue";
2626
import ArenaVueUiAgePyramid from "../TestingArena/ArenaVueUiAgePyramid.vue";
27+
import ArenaVueUiRelationCircle from "../TestingArena/ArenaVueUiRelationCircle.vue";
2728
2829
const showOldArena = ref(false);
2930
@@ -50,10 +51,11 @@ const components = ref([
5051
"VueUiSparkgauge",
5152
"VueUiSparkTrend",
5253
"VueUiQuickChart",
53-
"VueUiAgePyramid"
54+
"VueUiAgePyramid",
55+
"VueUiRelationCircle"
5456
]);
5557
56-
const selectedComponent = ref(components.value[22]);
58+
const selectedComponent = ref(components.value[23]);
5759
5860
</script>
5961

@@ -135,4 +137,7 @@ const selectedComponent = ref(components.value[22]);
135137

136138
<!-- 22 -->
137139
<ArenaVueUiAgePyramid v-if="selectedComponent === 'VueUiAgePyramid'" />
140+
141+
<!-- 23 -->
142+
<ArenaVueUiRelationCircle v-if="selectedComponent === 'VueUiRelationCircle'" />
138143
</template>

0 commit comments

Comments
 (0)