Skip to content

Commit d6554cb

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiSparkStackbar testing arena
1 parent e084920 commit d6554cb

File tree

2 files changed

+119
-2
lines changed

2 files changed

+119
-2
lines changed

‎TestingArena/ArenaVueUiSparkStackbar.vue‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiSparkStackbar from '../src/components/vue-ui-sparkstackbar.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+
{
11+
name: "Vue",
12+
value: 258,
13+
},
14+
{
15+
name: "Javascript",
16+
value: 36,
17+
},
18+
{
19+
name: "Other",
20+
value: 16,
21+
},
22+
]
23+
);
24+
25+
const model = ref([
26+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
27+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
28+
{ key: 'style.animation.show', def: true, type: 'checkbox'},
29+
{ key: 'style.animation.animationFrames', def: 60, type: 'number', min: 0, max: 300},
30+
{ key: 'style.bar.gradient.show', def: true, type: 'checkbox'},
31+
{ key: 'style.bar.gradient.intensity', def: 40, type: 'range', min: 0, max: 100},
32+
{ key: 'style.bar.gradient.underlayerColor', def: '#FFFFFF', type: 'color'},
33+
{ key: 'style.legend.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']},
34+
{ key: 'style.legend.show', def: true, type: 'checkbox'},
35+
{ key: 'style.legend.fontSize', def: 12, type: 'number', min: 8, max: 48},
36+
{ key: 'style.legend.margin', def: '0 0 6px 0', type: 'text'},
37+
{ key: 'style.legend.name.color', def: '#1A1A1A', type: 'color'},
38+
{ key: 'style.legend.name.bold', def: false, type: 'checkbox'},
39+
{ key: 'style.legend.value.show', def: true, type: 'checkbox'},
40+
{ key: 'style.legend.value.bold', def: false, type: 'checkbox'},
41+
{ key: 'style.legend.value.color', def: '#1A1A1A', type: 'color'},
42+
{ key: 'style.legend.value.prefix', def: 'P', type: 'text'},
43+
{ key: 'style.legend.value.suffix', def: 'S', type: 'text'},
44+
{ key: 'style.legend.value.rounding', def: 0, type: 'number', min: 0, max: 12},
45+
{ key: 'style.legend.percentage.show', def: true, type: 'checkbox'},
46+
{ key: 'style.legend.percentage.bold', def: true, type: 'checkbox'},
47+
{ key: 'style.legend.percentage.color', def: '#1A1A1A', type: 'color'},
48+
{ key: 'style.legend.percentage.rounding', def: 2, type: 'number', min: 0, max: 12},
49+
{ key: 'style.title.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']},
50+
{ key: 'style.title.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
51+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
52+
{ key: 'style.title.fontSize', def: 16, type: 'number', min: 8, max: 48},
53+
{ key: 'style.title.bold', def: true, type: 'checkbox'},
54+
{ key: 'style.title.margin', def: '0 0 6px 0', type: 'text'},
55+
{ key: 'style.title.subtitle.color', def: '#A1A1A1', type: 'color'},
56+
{ key: 'style.title.subtitle.text', def: 'Lorem ipsum dolor sic amet'},
57+
{ key: 'style.title.subtitle.fontSize', def: 12, type: 'number', min:8, max: 24},
58+
{ key: 'style.title.subtitle.bold', def: false, type: 'checkbox'}
59+
])
60+
61+
const config = computed(() => convertArrayToObject(model.value));
62+
63+
const step = ref(0)
64+
65+
</script>
66+
67+
<template>
68+
<Box>
69+
<template #title>VueUiSparkStackbar</template>
70+
71+
<template #local>
72+
<LocalVueUiSparkStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
73+
</LocalVueUiSparkStackbar>
74+
</template>
75+
76+
<template #VDUI-local>
77+
<LocalVueDataUi component="VueUiSparkStackbar" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
78+
</LocalVueDataUi>
79+
</template>
80+
81+
<template #build>
82+
<VueUiSparkStackbar :dataset="dataset" :config="config" :key="`build_${step}`">
83+
</VueUiSparkStackbar>
84+
</template>
85+
86+
<template #VDUI-build>
87+
<VueDataUi component="VueUiSparkStackbar" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
88+
</VueDataUi>
89+
</template>
90+
91+
<template #knobs>
92+
<div
93+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
94+
<div v-for="knob in model">
95+
<label style="font-size: 10px">{{ knob.key }}</label>
96+
<div
97+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
98+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
99+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
100+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
101+
<option v-for="opt in knob.options">{{ opt }}</option>
102+
</select>
103+
</div>
104+
</div>
105+
</div>
106+
</template>
107+
108+
<template #config>
109+
{{ config }}
110+
</template>
111+
</Box>
112+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import ArenaVueUiScatter from "../TestingArena/ArenaVueUiScatter.vue";
1818
import ArenaVueUiCandlestick from "../TestingArena/ArenaVueUiCandlestick.vue";
1919
import ArenaVueUiSparkline from "../TestingArena/ArenaVueUiSparkline.vue";
2020
import ArenaVueUiSparkbar from "../TestingArena/ArenaVueUiSparkbar.vue";
21+
import ArenaVueUiSparkStackbar from "../TestingArena/ArenaVueUiSparkStackbar.vue";
2122
2223
const showOldArena = ref(false);
2324
@@ -38,10 +39,11 @@ const components = ref([
3839
"VueUiScatter",
3940
"VueUiCandlestick",
4041
"VueUiSparkline",
41-
"VueUiSparkbar"
42+
"VueUiSparkbar",
43+
"VueUiSparkStackbar"
4244
]);
4345
44-
const selectedComponent = ref(components.value[16]);
46+
const selectedComponent = ref(components.value[17]);
4547
4648
</script>
4749

@@ -105,4 +107,7 @@ const selectedComponent = ref(components.value[16]);
105107

106108
<!-- 16 -->
107109
<ArenaVueUiSparkbar v-if="selectedComponent === 'VueUiSparkbar'" />
110+
111+
<!-- 17 -->
112+
<ArenaVueUiSparkStackbar v-if="selectedComponent === 'VueUiSparkStackbar'" />
108113
</template>

0 commit comments

Comments
 (0)