Skip to content

Commit df155ef

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiWheel testing arena
1 parent a42c629 commit df155ef

File tree

2 files changed

+116
-2
lines changed

2 files changed

+116
-2
lines changed

‎TestingArena/ArenaVueUiWheel.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiWheel from '../src/components/vue-ui-wheel.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({ percentage: 66.6 })
9+
10+
const model = ref([
11+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
12+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
13+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
14+
{ key: 'style.chart.animation.use', def: true, type: 'checkbox'},
15+
{ key: 'style.chart.animation.speed', def: 0.5, type: 'number', min: 0, max: 2, step: 0.01},
16+
{ key: 'style.chart.animation.acceleration', def: 1, type: 'number', min: 0, max: 10, step: 0.1},
17+
{ key: 'style.chart.layout.wheel.ticks.rounded', def: true, type: 'checkbox'},
18+
{ key: 'style.chart.layout.wheel.ticks.inactiveColor', def: '#e1e5e8', type: 'color'},
19+
{ key: 'style.chart.layout.wheel.ticks.activeColor', def: '#5f8bee', type: 'color'},
20+
{ key: 'style.chart.layout.wheel.ticks.gradient.show', def: true, type: 'checkbox'},
21+
{ key: 'style.chart.layout.wheel.ticks.gradient.shiftHueIntensity', def: 100, type:'range', min: 0, max: 100},
22+
{ key: 'style.chart.layout.innerCircle.show', def: true, type: 'checkbox'},
23+
{ key: 'style.chart.layout.innerCircle.stroke', def: '#e1e5e8', type: 'color'},
24+
{ key: 'style.chart.layout.innerCircle.strokeWidth', def: 1, type: 'range', min: 0, max: 48},
25+
{ key: 'style.chart.layout.percentage.show', def: true, type: 'checkbox'},
26+
{ key: 'style.chart.layout.percentage.fontSize', def: 48, type: 'range', min: 8, max: 100},
27+
{ key: 'style.chart.layout.percentage.rounding', def: 1, type: 'range', min: 0, max: 12},
28+
{ key: 'style.chart.layout.percentage.bold', def: true, type: 'checkbox'},
29+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
30+
{ key: 'style.chart.title.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
31+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
32+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
33+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
34+
{ key: 'style.chart.title.subtitle.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
35+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
36+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'range', min: 8, max: 48},
37+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
38+
{ key: 'userOptions.show', def: true, type: 'checkbox'}
39+
])
40+
41+
const config = computed(() => convertArrayToObject(model.value));
42+
43+
const step = ref(0)
44+
45+
</script>
46+
47+
<template>
48+
<Box>
49+
<template #title>VueUiWheel</template>
50+
51+
<template #local>
52+
<LocalVueUiWheel :dataset="dataset" :config="config" :key="`local_${step}`">
53+
<template #svg="{ svg }">
54+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d39230" />
55+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
56+
</template>
57+
</LocalVueUiWheel>
58+
</template>
59+
60+
<template #VDUI-local>
61+
<LocalVueDataUi component="VueUiWheel" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
62+
<template #svg="{ svg }">
63+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d39230" />
64+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
65+
</template>
66+
</LocalVueDataUi>
67+
</template>
68+
69+
<template #build>
70+
<VueUiWheel :dataset="dataset" :config="config" :key="`build_${step}`">
71+
<template #svg="{ svg }">
72+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d39230" />
73+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
74+
</template>
75+
</VueUiWheel>
76+
</template>
77+
78+
<template #VDUI-build>
79+
<VueDataUi component="VueUiWheel" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
80+
<template #svg="{ svg }">
81+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d39230" />
82+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
83+
</template>
84+
</VueDataUi>
85+
</template>
86+
87+
<template #knobs>
88+
<div
89+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
90+
<div v-for="knob in model">
91+
<label style="font-size: 10px">{{ knob.key }}</label>
92+
<div
93+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
94+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
95+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
96+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
97+
<option v-for="opt in knob.options">{{ opt }}</option>
98+
</select>
99+
</div>
100+
</div>
101+
</div>
102+
</template>
103+
104+
<template #config>
105+
{{ config }}
106+
</template>
107+
</Box>
108+
</template>

‎src/App.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import ArenaVueUiTreemap from "../TestingArena/ArenaVueUiTreemap.vue";
77
import ArenaVueUiWaffle from "../TestingArena/ArenaVueUiWaffle.vue";
88
import ArenaVueUiRadar from "../TestingArena/ArenaVueUiRadar.vue";
99
import ArenaVueUiQuadrant from "../TestingArena/ArenaVueUiQuadrant.vue";
10+
import ArenaVueUiGauge from "../TestingArena/ArenaVueUiGauge.vue";
11+
import ArenaVueUiWheel from "../TestingArena/ArenaVueUiWheel.vue";
1012
1113
const showOldArena = ref(false);
1214
@@ -16,10 +18,12 @@ const components = ref([
1618
"VueUiTreemap",
1719
"VueUiWaffle",
1820
"VueUiRadar",
19-
"VueUiQuadrant"
21+
"VueUiQuadrant",
22+
"VueUiGauge",
23+
"VueUiWheel"
2024
]);
2125
22-
const selectedComponent = ref(components.value[5]);
26+
const selectedComponent = ref(components.value[7]);
2327
2428
</script>
2529

@@ -38,4 +42,6 @@ const selectedComponent = ref(components.value[5]);
3842
<ArenaVueUiWaffle v-if="selectedComponent === 'VueUiWaffle'" />
3943
<ArenaVueUiRadar v-if="selectedComponent === 'VueUiRadar'" />
4044
<ArenaVueUiQuadrant v-if="selectedComponent === 'VueUiQuadrant'" />
45+
<ArenaVueUiGauge v-if="selectedComponent === 'VueUiGauge'" />
46+
<ArenaVueUiWheel v-if="selectedComponent === 'VueUiWheel'" />
4147
</template>

0 commit comments

Comments
 (0)