Skip to content

Commit 11389dc

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiTiremarks testing arena
1 parent df155ef commit 11389dc

File tree

2 files changed

+120
-2
lines changed

2 files changed

+120
-2
lines changed

‎TestingArena/ArenaVueUiTiremarks.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 LocalVueUiTiremarks from '../src/components/vue-ui-tiremarks.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.display', def: 'horizontal', type: 'select', options: ['horizontal', 'vertical']},
18+
{ key: 'style.chart.layout.crescendo', def: false, type: 'checkbox'},
19+
{ key: 'style.chart.layout.curved', def: false, type: 'checkbox'},
20+
{ key: 'style.chart.layout.curveAngleX', def: 10, type:'number', min: -360, max: 360},
21+
{ key: 'style.chart.layout.curveAngleY', def: 10, type: 'number', min: -360, max: 360},
22+
{ key: 'style.chart.layout.activeColor', def: '#5f8bee', type: 'color'},
23+
{ key: 'style.chart.layout.inactiveColor', def: '#e1e5e8', type: 'color'},
24+
{ key: 'style.chart.layout.ticks.gradient.show', def: true, type: 'checkbox'},
25+
{ key: 'style.chart.layout.ticks.gradient.shiftHueIntensity', def: 100, type: 'range', min: 0, max: 100},
26+
{ key: 'style.chart.percentage.show', def: true, type: 'checkbox'},
27+
{ key: 'style.chart.percentage.fontSize', def: 16, type: 'range', min: 8, max: 100},
28+
{ key: 'style.chart.percentage.rounding', def: 1, type: 'range', min: 0, max: 12},
29+
{ key: 'style.chart.percentage.bold', def: true, type: 'checkbox'},
30+
{ key: 'style.chart.percentage.useGradientColor', def: true, type: 'checkbox'},
31+
{ key: 'style.chart.percentage.color', def: '#1A1A1A', type: 'color'},
32+
{ key: 'style.chart.percentage.verticalPosition', def: 'bottom', type: 'select', options:['top', 'bottom']},
33+
{ key: 'style.chart.percentage.horizontalPosition', def: 'left', type: 'select', options: ['left', 'right', 'top']},
34+
{ key: 'style.chart.title.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
35+
{ key: 'style.chart.title.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
36+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
37+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
38+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
39+
{ key: 'style.chart.title.subtitle.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
40+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
41+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'range', min: 8, max: 48},
42+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
43+
{ key: 'userOptions.show', def: true, type: 'checkbox'}
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>VueUiTiremarks</template>
55+
56+
<template #local>
57+
<LocalVueUiTiremarks :dataset="dataset" :config="config" :key="`local_${step}`">
58+
</LocalVueUiTiremarks>
59+
</template>
60+
61+
<template #VDUI-local>
62+
<LocalVueDataUi component="VueUiTiremarks" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
63+
</LocalVueDataUi>
64+
</template>
65+
66+
<template #build>
67+
<VueUiTiremarks :dataset="dataset" :config="config" :key="`build_${step}`">
68+
</VueUiTiremarks>
69+
</template>
70+
71+
<template #VDUI-build>
72+
<VueDataUi component="VueUiTiremarks" :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: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ArenaVueUiRadar from "../TestingArena/ArenaVueUiRadar.vue";
99
import ArenaVueUiQuadrant from "../TestingArena/ArenaVueUiQuadrant.vue";
1010
import ArenaVueUiGauge from "../TestingArena/ArenaVueUiGauge.vue";
1111
import ArenaVueUiWheel from "../TestingArena/ArenaVueUiWheel.vue";
12+
import ArenaVueUiTiremarks from "../TestingArena/ArenaVueUiTiremarks.vue";
1213
1314
const showOldArena = ref(false);
1415
@@ -20,10 +21,11 @@ const components = ref([
2021
"VueUiRadar",
2122
"VueUiQuadrant",
2223
"VueUiGauge",
23-
"VueUiWheel"
24+
"VueUiWheel",
25+
"VueUiTiremarks"
2426
]);
2527
26-
const selectedComponent = ref(components.value[7]);
28+
const selectedComponent = ref(components.value[8]);
2729
2830
</script>
2931

@@ -36,12 +38,31 @@ const selectedComponent = ref(components.value[7]);
3638
</select>
3739
</div>
3840
<TestingArena v-if="showOldArena"/>
41+
42+
<!-- 0 -->
3943
<ArenaVueUiXy v-if="selectedComponent === 'VueUiXy'"/>
44+
45+
<!-- 1 -->
4046
<ArenaVueUiDonut v-if="selectedComponent === 'VueUiDonut'"/>
47+
48+
<!-- 2 -->
4149
<ArenaVueUiTreemap v-if="selectedComponent === 'VueUiTreemap'" />
50+
51+
<!-- 3 -->
4252
<ArenaVueUiWaffle v-if="selectedComponent === 'VueUiWaffle'" />
53+
54+
<!-- 4 -->
4355
<ArenaVueUiRadar v-if="selectedComponent === 'VueUiRadar'" />
56+
57+
<!-- 5 -->
4458
<ArenaVueUiQuadrant v-if="selectedComponent === 'VueUiQuadrant'" />
59+
60+
<!-- 6 -->
4561
<ArenaVueUiGauge v-if="selectedComponent === 'VueUiGauge'" />
62+
63+
<!-- 7 -->
4664
<ArenaVueUiWheel v-if="selectedComponent === 'VueUiWheel'" />
65+
66+
<!-- 8 -->
67+
<ArenaVueUiTiremarks v-if="selectedComponent === 'VueUiTiremarks'" />
4768
</template>

0 commit comments

Comments
 (0)