Skip to content

Commit 47cdb0a

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiSparkline testing arena
1 parent 4466bab commit 47cdb0a

File tree

2 files changed

+182
-2
lines changed

2 files changed

+182
-2
lines changed

‎TestingArena/ArenaVueUiSparkline.vue‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiSparkline from '../src/components/vue-ui-sparkline.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+
period: "period 1",
11+
value: 0
12+
},
13+
{
14+
period: "period 2",
15+
value: -1
16+
},
17+
{
18+
period: "period 3",
19+
value: 2
20+
},
21+
{
22+
period: "period 4",
23+
value: -3
24+
},
25+
{
26+
period: "period 5",
27+
value: 4
28+
},
29+
{
30+
period: "period 6",
31+
value: -5
32+
},
33+
{
34+
period: "period 7",
35+
value: 6
36+
},
37+
{
38+
period: "period 8",
39+
value: -7
40+
},
41+
{
42+
period: "period 9",
43+
value: 8
44+
},
45+
{
46+
period: "period 10",
47+
value: -9
48+
},
49+
{
50+
period: "period 11",
51+
value: 10
52+
},
53+
{
54+
period: "period 12",
55+
value: -11
56+
},
57+
{
58+
period: "period 13",
59+
value: 12
60+
},
61+
{
62+
period: "period 14",
63+
value: -13
64+
},
65+
{
66+
period: "period 15",
67+
value: 14
68+
},
69+
{
70+
period: "period 16",
71+
value: -15
72+
},
73+
{
74+
period: "period 17",
75+
value: 16
76+
},
77+
])
78+
79+
const model = ref([
80+
{ key: 'type', def: 'line', type: 'select', options: ['line', 'bar']},
81+
{ key: 'style.chartWidth', def: 290, type: 'number', min: 100, max: 500},
82+
{ key: 'style.animation.show', def: true, type: 'checkbox'},
83+
{ key: 'style.animation.animationFrames', def: 360, type: 'number', min: 0, max: 1000},
84+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
85+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
86+
{ key: 'style.line.color', def: '#3366CC', type: 'color'},
87+
{ key: 'style.line.strokeWidth', def: 3, type: 'number', min: 0, max: 20},
88+
{ key: 'style.line.smooth', def: false, type: 'checkbox'},
89+
{ key: 'style.bar.borderRadius', def: 3, type: 'number', min: 0, max: 12},
90+
{ key: 'style.bar.color', def: '#3366CC', type: 'color'},
91+
{ key: 'style.zeroLine.color', def: '#1A1A1A', type: 'color'},
92+
{ key: 'style.zeroLine.strokeWidth', def:1, type: 'number', min: 0, max: 12},
93+
{ key: 'style.plot.show', def: true, type: 'checkbox'},
94+
{ key: 'style.plot.radius', def: 4, type: 'number', min: 0, max: 12},
95+
{ key: 'style.plot.stroke', def: '#FFFFFF', type: 'color'},
96+
{ key: 'style.plot.strokeWidth', def: 1, type: 'number', min: 0, max: 6},
97+
{ key: 'style.verticalIndicator.show', def: true, type: 'checkbox'},
98+
{ key: 'style.verticalIndicator.strokeWidth', def: 1.5, type: 'number', min: 0, max: 6, step: 0.5},
99+
{ key: 'style.verticalIndicator.color', def: '#3366CC', type: 'color'},
100+
{ key: 'style.verticalIndicator.strokeDasharray', def: 3, type:'number', min: 0, max: 48},
101+
{ key: 'style.dataLabel.show', def: true, type: 'checkbox'},
102+
{ key: 'style.dataLabel.position', def: 'left', type: 'select', options:['left', 'right']},
103+
{ key: 'style.dataLabel.offsetX', def: 0, type: 'number', min: -100, max: 100},
104+
{ key: 'style.dataLabel.offsetY', def: 0, type: 'number', min: -100, max: 100},
105+
{ key: 'style.dataLabel.fontSize', def: 20, type: 'number', min: 8, max: 48},
106+
{ key: 'style.dataLabel.bold', def: true, type: 'checkbox'},
107+
{ key: 'style.dataLabel.color', def: '#1A1A1A', type: 'color'},
108+
{ key: 'style.dataLabel.roundingValue', def: 2, type: 'number', min: 0, max: 12},
109+
{ key: 'style.dataLabel.valueType', def: 'latest', type: 'select', options: ['latest', 'sum', 'average']},
110+
{ key: 'style.dataLabel.prefix', def: 'P', type: 'text'},
111+
{ key: 'style.dataLabel.suffix', def: 'S', type: 'text'},
112+
{ key: 'style.title.show', def: true, type: 'checkbox'},
113+
{ key: 'style.title.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']},
114+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
115+
{ key: 'style.title.fontSize', def: 16, type: 'number', min: 8, max: 48},
116+
{ key: 'style.title.bold', def: true, type: 'checkbox'},
117+
{ key: 'style.title.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
118+
{ key: 'style.area.show', def: true, type: 'checkbox'},
119+
{ key: 'style.area.useGradient', def: true, type: 'checkbox'},
120+
{ key: 'style.area.opacity', def: 30, type: 'range', min: 0, max: 100},
121+
{ key: 'style.area.color', def: '#CC7033', type: 'color'}
122+
])
123+
124+
const config = computed(() => convertArrayToObject(model.value))
125+
126+
const step = ref(0)
127+
128+
</script>
129+
130+
<template>
131+
<Box>
132+
<template #title>VueUiSparkline</template>
133+
134+
<template #local>
135+
<LocalVueUiSparkline :dataset="dataset" :config="config" :key="`local_${step}`">
136+
</LocalVueUiSparkline>
137+
</template>
138+
139+
<template #VDUI-local>
140+
<LocalVueDataUi component="VueUiSparkline" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
141+
</LocalVueDataUi>
142+
</template>
143+
144+
<template #build>
145+
<VueUiSparkline :dataset="dataset" :config="config" :key="`build_${step}`">
146+
</VueUiSparkline>
147+
</template>
148+
149+
<template #VDUI-build>
150+
<VueDataUi component="VueUiSparkline" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
151+
</VueDataUi>
152+
</template>
153+
154+
<template #knobs>
155+
<div
156+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
157+
<div v-for="knob in model">
158+
<label style="font-size: 10px">{{ knob.key }}</label>
159+
<div
160+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
161+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
162+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
163+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
164+
<option v-for="opt in knob.options">{{ opt }}</option>
165+
</select>
166+
</div>
167+
</div>
168+
</div>
169+
</template>
170+
171+
<template #config>
172+
{{ config }}
173+
</template>
174+
</Box>
175+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import ArenaVueUiVerticalBar from "../TestingArena/ArenaVueUiVerticalBar.vue";
1616
import ArenaVueUiHeatmap from "../TestingArena/ArenaVueUiHeatmap.vue";
1717
import ArenaVueUiScatter from "../TestingArena/ArenaVueUiScatter.vue";
1818
import ArenaVueUiCandlestick from "../TestingArena/ArenaVueUiCandlestick.vue";
19+
import ArenaVueUiSparkline from "../TestingArena/ArenaVueUiSparkline.vue";
1920
2021
const showOldArena = ref(false);
2122
@@ -34,10 +35,11 @@ const components = ref([
3435
"VueUiVerticalBar",
3536
"VueUiHeatmap",
3637
"VueUiScatter",
37-
"VueUiCandlestick"
38+
"VueUiCandlestick",
39+
"VueUiSparkline",
3840
]);
3941
40-
const selectedComponent = ref(components.value[14]);
42+
const selectedComponent = ref(components.value[15]);
4143
4244
</script>
4345

@@ -95,4 +97,7 @@ const selectedComponent = ref(components.value[14]);
9597

9698
<!-- 14 -->
9799
<ArenaVueUiCandlestick v-if="selectedComponent === 'VueUiCandlestick'" />
100+
101+
<!-- 15 -->
102+
<ArenaVueUiSparkline v-if="selectedComponent === 'VueUiSparkline'" />
98103
</template>

0 commit comments

Comments
 (0)