Skip to content

Commit 652ea72

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiMoodRadar testing arena
1 parent 230be85 commit 652ea72

File tree

2 files changed

+169
-2
lines changed

2 files changed

+169
-2
lines changed

‎TestingArena/ArenaVueUiMoodRadar.vue‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiMoodRadar from '../src/components/vue-ui-mood-radar.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+
"1": 96,
10+
"2": 64,
11+
"3": 128,
12+
"4": 256,
13+
"5": 384
14+
})
15+
16+
const model = ref([
17+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
18+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
19+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
20+
{ key: 'style.chart.layout.grid.show', def: true, type: 'checkbox'}, // not applied ?
21+
{ key: 'style.chart.layout.grid.stroke', def: '#e1e5e8', type: 'color'},
22+
{ key: 'style.chart.layout.grid.strokeWidth', def: 0.5, type: 'number', min: 0, max: 12, step: 0.5},
23+
{ key: 'style.chart.layout.outerPolygon.stroke', def: '#e1e5e8', type: 'color'},
24+
{ key: 'style.chart.layout.outerPolygon.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
25+
{ key: 'style.chart.layout.dataPolygon.color', def: '#5F8BEE', type: 'color'},
26+
{ key: 'style.chart.layout.dataPolygon.opacity', def: 60, type: 'range', min: 0, max: 100},
27+
{ key: 'style.chart.layout.dataPolygon.gradient.show', def: true, type: 'checkbox'},
28+
{ key: 'style.chart.layout.dataPolygon.gradient.intensity', def: 5, type: 'range', min: 0, max: 100},
29+
{ key: 'style.chart.layout.dataPolygon.stroke', def: '#1A1A1A', type: 'color'},
30+
{ key: 'style.chart.layout.dataPolygon.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
31+
{ key: 'style.chart.layout.smileys.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
32+
{ key: 'style.chart.layout.smileys.colors.1', def: '#e20001', type: 'color'},
33+
{ key: 'style.chart.layout.smileys.colors.2', def: '#ff9f03', type: 'color'},
34+
{ key: 'style.chart.layout.smileys.colors.3', def: '#ffd004', type: 'color'},
35+
{ key: 'style.chart.layout.smileys.colors.4', def: '#9ac900', type: 'color'},
36+
{ key: 'style.chart.layout.smileys.colors.5', def: '#059f00', type: 'color'},
37+
{ key: 'style.chart.layout.dataLabel.color', def: '#1A1A1A', type: 'color'},
38+
{ key: 'style.chart.layout.dataLabel.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
39+
{ key: 'style.chart.layout.dataLabel.roundingValue', def: 2, type: 'number', min: 0, max: 12},
40+
{ key: 'style.chart.layout.dataLabel.bold', def: true, type: 'checkbox'},
41+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
42+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
43+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
44+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
45+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
46+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
47+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
48+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
49+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
50+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
51+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
52+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox'},
53+
{ key: 'style.chart.legend.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
54+
{ key: 'style.chart.legend.roundingValue', def: 2, type: 'number', min: 0, max: 12},
55+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
56+
{ key: 'table.show', def: false, type: 'checkbox'},
57+
{ key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800},
58+
{ key: 'table.columnNames.series', def: 'Series', type: 'text'},
59+
{ key: 'table.columnNames.value', def: 'Value', type: 'text'},
60+
{ key: 'table.columnNames.percentage', def: 'Percentage', type: 'text'},
61+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
62+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
63+
{ key: 'table.th.outline', def: 'none', type: 'text'},
64+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
65+
{ key: 'table.td.color', def: '#1A1A1A', type: 'color'},
66+
{ key: 'table.td.outline', def: 'none', type: 'text'},
67+
{ key: 'table.td.roundingValue', def: 2, type: 'number', min: 0, max: 12},
68+
{ key: 'table.td.roundingPercentage', def: 2, type: 'number', min: 0, max: 12},
69+
])
70+
71+
const config = computed(() => convertArrayToObject(model.value))
72+
73+
const step = ref(0)
74+
75+
</script>
76+
77+
<template>
78+
<Box>
79+
<template #title>VueUiMoodRadar</template>
80+
81+
<template #local>
82+
<LocalVueUiMoodRadar :dataset="dataset" :config="config" :key="`local_${step}`">
83+
<template #svg="{ svg }">
84+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
85+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
86+
</template>
87+
<template #legend="{ legend }">
88+
#LEGEND
89+
<div style="font-size: 8px">
90+
{{ legend }}
91+
</div>
92+
</template>
93+
</LocalVueUiMoodRadar>
94+
</template>
95+
96+
<template #VDUI-local>
97+
<LocalVueDataUi component="VueUiMoodRadar" :dataset="dataset" :config="config" :key="`vdui_local_${step}`">
98+
<template #svg="{ svg }">
99+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
100+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
101+
</template>
102+
<template #legend="{ legend }">
103+
#LEGEND
104+
<div style="font-size: 8px">
105+
{{ legend }}
106+
</div>
107+
</template>
108+
</LocalVueDataUi>
109+
</template>
110+
111+
<template #build>
112+
<VueUiMoodRadar :dataset="dataset" :config="config" :key="`build_${step}`" >
113+
<template #svg="{ svg }">
114+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
115+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
116+
</template>
117+
<template #legend="{ legend }">
118+
#LEGEND
119+
<div style="font-size: 8px">
120+
{{ legend }}
121+
</div>
122+
</template>
123+
</VueUiMoodRadar>
124+
</template>
125+
126+
<template #VDUI-build>
127+
<VueDataUi component="VueUiMoodRadar" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
128+
<template #svg="{ svg }">
129+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
130+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
131+
</template>
132+
<template #legend="{ legend }">
133+
#LEGEND
134+
<div style="font-size: 8px">
135+
{{ legend }}
136+
</div>
137+
</template>
138+
</VueDataUi>
139+
</template>
140+
141+
<template #knobs>
142+
<div
143+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
144+
<div v-for="knob in model">
145+
<label style="font-size: 10px">{{ knob.key }}</label>
146+
<div
147+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
148+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
149+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
150+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
151+
<option v-for="opt in knob.options">{{ opt }}</option>
152+
</select>
153+
</div>
154+
</div>
155+
</div>
156+
</template>
157+
158+
<template #config>
159+
{{ config }}
160+
</template>
161+
</Box>
162+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import ArenaVueUiThermometer from "../TestingArena/ArenaVueUiThermometer.vue";
2929
import ArenaVueUiRings from "../TestingArena/ArenaVueUiRings.vue";
3030
import ArenaVueUiDonutEvolution from "../TestingArena/ArenaVueUiDonutEvolution.vue";
3131
import ArenaVueUiIcon from "../TestingArena/ArenaVueUiIcon.vue";
32+
import ArenaVueUiMoodRadar from "../TestingArena/ArenaVueUiMoodRadar.vue";
3233
3334
const showOldArena = ref(false);
3435
@@ -60,10 +61,11 @@ const components = ref([
6061
"VueUiThermometer",
6162
"VueUiRings",
6263
"VueUiDonutEvolution",
63-
"VueUiIcon"
64+
"VueUiIcon",
65+
"VueUiMoodRadar"
6466
]);
6567
66-
const selectedComponent = ref(components.value[26]);
68+
const selectedComponent = ref(components.value[28]);
6769
6870
</script>
6971

@@ -160,4 +162,7 @@ const selectedComponent = ref(components.value[26]);
160162

161163
<!-- 27 -->
162164
<ArenaVueUiIcon v-if="selectedComponent === 'VueUiIcon'" />
165+
166+
<!-- 27 -->
167+
<ArenaVueUiMoodRadar v-if="selectedComponent === 'VueUiMoodRadar'" />
163168
</template>

0 commit comments

Comments
 (0)