Skip to content

Commit 71e5033

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiThermometer testing area
1 parent 031e474 commit 71e5033

File tree

2 files changed

+131
-2
lines changed

2 files changed

+131
-2
lines changed

‎TestingArena/ArenaVueUiThermometer.vue‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiThermometer from '../src/components/vue-ui-thermometer.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: 37,
10+
from: -100,
11+
to: 100,
12+
steps: 20,
13+
colors: {
14+
from: "#dc3912",
15+
to: "#3366cc",
16+
}
17+
})
18+
19+
const model = ref([
20+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
21+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
22+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
23+
{ key: 'style.chart.height', def: 360, type: 'number', min: 100, max: 1000},
24+
{ key: 'style.chart.thermometer.width', def: 48, type: 'number', min: 12, max: 64},
25+
{ key: 'style.chart.padding.top', def: 12, type: 'number', min: 0, max: 100},
26+
{ key: 'style.chart.padding.bottom', def: 12, type: 'number', min: 0, max: 100},
27+
{ key: 'style.chart.padding.left', def: 100, type: 'number', min: 0, max: 100},
28+
{ key: 'style.chart.padding.right', def: 100, type: 'number', min: 0, max: 100},
29+
{ key: 'style.chart.graduations.show', def: true, type: 'checkbox'},
30+
{ key: 'style.chart.graduations.sides', def: 'both', type: 'select', options: ['both', 'left', 'right']},
31+
{ key: 'style.chart.graduations.height', def: 2, type: 'number', min: 0, max: 12},
32+
{ key: 'style.chart.graduations.stroke', def: '#e1e5e8', type: 'color'},
33+
{ key: 'style.chart.graduations.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
34+
{ key: 'style.chart.graduations.showIntermediate', def: true, type: 'checkbox'},
35+
{ key: 'style.chart.graduations.gradient.show', def: true, type: 'checkbox'},
36+
{ key: 'style.chart.graduations.gradient.intensity', def: 20, type: 'range', min: 0, max: 100},
37+
{ key: 'style.chart.animation.use', def: true, type: 'checkbox'},
38+
{ key: 'style.chart.animation.speedMs', def: 1000, type: 'number', min: 100, max: 2000},
39+
{ key: 'style.chart.label.fontSize', def: 20, type: 'number', min: 8, max: 48},
40+
{ key: 'style.chart.label.rounding', def: 1, type: 'number', min: 0, max: 12},
41+
{ key: 'style.chart.label.bold', def: true, type: 'checkbox'},
42+
{ key: 'style.chart.label.color', def: '#1A1A1A', type: 'color'},
43+
{ key: 'style.chart.label.prefix', def: 'P', type: 'text'},
44+
{ key: 'style.chart.label.suffix', def: 'S', type: 'text'},
45+
{ key: 'style.title.useDiv', def: true, type: 'checkbox'}, // DEPRECATED
46+
{ key: 'style.title.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
47+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
48+
{ key: 'style.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
49+
{ key: 'style.title.bold', def: true, type: 'checkbox'},
50+
{ key: 'style.title.subtitle.color', def: '#CCCCCC', type: 'color'},
51+
{ key: 'style.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
52+
{ key: 'style.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 48},
53+
{ key: 'style.title.subtitle.bold', def: false, type: 'checkbox' },
54+
{ key: 'userOptions.show', def: true, type: 'checkbox'}
55+
])
56+
57+
const config = computed(() => convertArrayToObject(model.value))
58+
59+
const step = ref(0);
60+
61+
</script>
62+
63+
<template>
64+
<Box>
65+
<template #title>VueUiThermometer</template>
66+
67+
<template #local>
68+
<LocalVueUiThermometer :dataset="dataset" :config="config" :key="`local_${step}`">
69+
<template #svg="{ svg }">
70+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
71+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
72+
</template>
73+
</LocalVueUiThermometer>
74+
</template>
75+
76+
<template #VDUI-local>
77+
<LocalVueDataUi component="VueUiThermometer" :dataset="dataset" :config="config" :key="`vdui_local_${step}`">
78+
<template #svg="{ svg }">
79+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
80+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
81+
</template>
82+
</LocalVueDataUi>
83+
</template>
84+
85+
<template #build>
86+
<VueUiThermometer :dataset="dataset" :config="config" :key="`build_${step}`">
87+
<template #svg="{ svg }">
88+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
89+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
90+
</template>
91+
</VueUiThermometer>
92+
</template>
93+
94+
<template #VDUI-build>
95+
<VueDataUi component="VueUiThermometer" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
96+
<template #svg="{ svg }">
97+
<circle :cx="30" :cy="30" :r="30" fill="#42d392" />
98+
<text :x="30" :y="30" text-anchor="middle">#SVG</text>
99+
</template>
100+
</VueDataUi>
101+
</template>
102+
103+
<template #knobs>
104+
<div
105+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
106+
<div v-for="knob in model">
107+
<label style="font-size: 10px">{{ knob.key }}</label>
108+
<div
109+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
110+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
111+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
112+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
113+
<option v-for="opt in knob.options">{{ opt }}</option>
114+
</select>
115+
</div>
116+
</div>
117+
</div>
118+
</template>
119+
120+
<template #config>
121+
{{ config }}
122+
</template>
123+
</Box>
124+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import ArenaVueUiSparkTrend from "../TestingArena/ArenaVueUiSparkTrend.vue";
2525
import ArenaVueUiQuickChart from "../TestingArena/ArenaVueUiQuickChart.vue";
2626
import ArenaVueUiAgePyramid from "../TestingArena/ArenaVueUiAgePyramid.vue";
2727
import ArenaVueUiRelationCircle from "../TestingArena/ArenaVueUiRelationCircle.vue";
28+
import ArenaVueUiThermometer from "../TestingArena/ArenaVueUiThermometer.vue";
2829
2930
const showOldArena = ref(false);
3031
@@ -52,10 +53,11 @@ const components = ref([
5253
"VueUiSparkTrend",
5354
"VueUiQuickChart",
5455
"VueUiAgePyramid",
55-
"VueUiRelationCircle"
56+
"VueUiRelationCircle",
57+
"VueUiThermometer"
5658
]);
5759
58-
const selectedComponent = ref(components.value[23]);
60+
const selectedComponent = ref(components.value[24]);
5961
6062
</script>
6163

@@ -140,4 +142,7 @@ const selectedComponent = ref(components.value[23]);
140142

141143
<!-- 23 -->
142144
<ArenaVueUiRelationCircle v-if="selectedComponent === 'VueUiRelationCircle'" />
145+
146+
<!-- 24 -->
147+
<ArenaVueUiThermometer v-if="selectedComponent === 'VueUiThermometer'" />
143148
</template>

0 commit comments

Comments
 (0)