Skip to content

Commit a573dad

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiSparkgauge testing arena
1 parent bddf284 commit a573dad

File tree

2 files changed

+104
-2
lines changed

2 files changed

+104
-2
lines changed

‎TestingArena/ArenaVueUiSparkGauge.vue‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiSparkgauge from '../src/components/vue-ui-sparkgauge.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+
value: 8,
10+
min: -10,
11+
max: 10,
12+
title: 'KPI 1'
13+
});
14+
15+
const model = ref([
16+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
17+
{ key: 'style.background', def: '#FFFFFF', type: 'color'},
18+
{ key: 'style.height', def: 84, type: 'number', min: 10, max: 200},
19+
{ key: 'style.basePosition', def: 72, type: 'number', min: 0, max: 100},
20+
{ key: 'style.animation.show', def: true, type: 'checkbox'},
21+
{ key: 'style.animation.speedMs', def: 150, type: 'number', min: 0, max: 1000},
22+
{ key: 'style.title.show', def: true, type: 'checkbox'},
23+
{ key: 'style.title.fontSize', def: 12, type: 'number', min: 8, max: 24},
24+
{ key: 'style.title.position', def: 'top', type: 'select', options: ['top', 'bottom']},
25+
{ key: 'style.title.textAlign', def: 'center', type: 'select', options: ['left', 'center', 'right']},
26+
{ key: 'style.title.bold', def: false, type: 'checkbox'},
27+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
28+
{ key: 'style.dataLabel.fontSize', def: 20, type: 'number', min: 8, max: 48},
29+
{ key: 'style.dataLabel.autoColor', def: true, type: 'checkbox'},
30+
{ key: 'style.dataLabel.color', def: '#1A1A1A', type: 'color'},
31+
{ key: 'style.dataLabel.offsetY', def: 0, type:'number', min: -100, max: 100},
32+
{ key: 'style.dataLabel.bold', def: true, type: 'checkbox'},
33+
{ key: 'style.dataLabel.rounding', def: 2, type: 'number', min: 0, max: 12},
34+
{ key: 'style.dataLabel.prefix', def: 'P', type: 'text'},
35+
{ key: 'style.dataLabel.suffix', def: 'S', type: 'text'},
36+
{ key: 'style.colors.min', def: '#DD6633', type: 'color'},
37+
{ key: 'style.colors.max', def: '#33DD66', type: 'color'},
38+
{ key: 'style.colors.showGradient', def: true, type: 'checkbox'},
39+
{ key: 'style.track.autoColor', def: true, type: 'checkbox'},
40+
{ key: 'style.track.color', def: '#5f8bee', type: 'color'},
41+
{ key: 'style.track.strokeLinecap', def: 'round', type: 'select', options: ['round', 'butt']},
42+
{ key: 'style.gutter.color', def: '#e1e5e8', type: 'color'},
43+
{ key: 'style.gutter.strokeLinecap', def: 'round', type: 'select', options: ['round', 'butt']}
44+
])
45+
46+
const config = computed(() => convertArrayToObject(model.value));
47+
48+
const step = ref(0);
49+
50+
</script>
51+
52+
<template>
53+
<Box>
54+
<template #title>VueUiSparkgauge</template>
55+
56+
<template #local>
57+
<LocalVueUiSparkgauge :dataset="dataset" :config="config" :key="`local_${step}`" >
58+
</LocalVueUiSparkgauge>
59+
</template>
60+
61+
<template #VDUI-local>
62+
<LocalVueDataUi component="VueUiSparkgauge" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
63+
</LocalVueDataUi>
64+
</template>
65+
66+
<template #build>
67+
<VueUiSparkgauge :dataset="dataset" :config="config" :key="`build_${step}`">
68+
</VueUiSparkgauge>
69+
</template>
70+
71+
<template #VDUI-build>
72+
<VueDataUi component="VueUiSparkgauge" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
73+
</VueDataUi>
74+
</template>
75+
76+
<template #knobs>
77+
<div
78+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
79+
<div v-for="knob in model">
80+
<label style="font-size: 10px">{{ knob.key }}</label>
81+
<div
82+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
83+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
84+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
85+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
86+
<option v-for="opt in knob.options">{{ opt }}</option>
87+
</select>
88+
</div>
89+
</div>
90+
</div>
91+
</template>
92+
93+
<template #config>
94+
{{ config }}
95+
</template>
96+
</Box>
97+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import ArenaVueUiSparkline from "../TestingArena/ArenaVueUiSparkline.vue";
2020
import ArenaVueUiSparkbar from "../TestingArena/ArenaVueUiSparkbar.vue";
2121
import ArenaVueUiSparkStackbar from "../TestingArena/ArenaVueUiSparkStackbar.vue";
2222
import ArenaVueUiSparkHistogram from "../TestingArena/ArenaVueUiSparkHistogram.vue";
23+
import ArenaVueUiSparkGauge from "../TestingArena/ArenaVueUiSparkGauge.vue";
2324
2425
const showOldArena = ref(false);
2526
@@ -42,10 +43,11 @@ const components = ref([
4243
"VueUiSparkline",
4344
"VueUiSparkbar",
4445
"VueUiSparkStackbar",
45-
"VueUiSparkHistogram"
46+
"VueUiSparkHistogram",
47+
"VueUiSparkgauge"
4648
]);
4749
48-
const selectedComponent = ref(components.value[18]);
50+
const selectedComponent = ref(components.value[19]);
4951
5052
</script>
5153

@@ -115,4 +117,7 @@ const selectedComponent = ref(components.value[18]);
115117

116118
<!-- 18 -->
117119
<ArenaVueUiSparkHistogram v-if="selectedComponent === 'VueUiSparkHistogram'" />
120+
121+
<!-- 19 -->
122+
<ArenaVueUiSparkGauge v-if="selectedComponent === 'VueUiSparkgauge'" />
118123
</template>

0 commit comments

Comments
 (0)