Skip to content

Commit bddf284

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiSparkHistogram testing arena
1 parent d6554cb commit bddf284

File tree

2 files changed

+204
-2
lines changed

2 files changed

+204
-2
lines changed

‎TestingArena/ArenaVueUiSparkHistogram.vue‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiSparkHistogram from '../src/components/vue-ui-sparkhistogram.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+
value: -1.2,
11+
valueLabel: "20.35%",
12+
timeLabel: "09:00",
13+
intensity: 1,
14+
},
15+
{
16+
value: 1.3,
17+
valueLabel: "50%",
18+
timeLabel: "10:00",
19+
intensity: 0.5,
20+
21+
},
22+
{
23+
value: 1.1,
24+
valueLabel: "60%",
25+
timeLabel: "11:00",
26+
intensity: 0.6,
27+
28+
},
29+
{
30+
value: 0.8,
31+
valueLabel: "70%",
32+
timeLabel: "12:00",
33+
intensity: 0.7,
34+
35+
},
36+
{
37+
value: 2,
38+
valueLabel: "100%",
39+
timeLabel: "13:00",
40+
intensity: 1,
41+
42+
},
43+
{
44+
value: 2.1,
45+
valueLabel: "100%",
46+
timeLabel: "14:00",
47+
intensity: 1,
48+
49+
},
50+
{
51+
value: 2.3,
52+
valueLabel: "80%",
53+
timeLabel: "15:00",
54+
intensity: 0.8,
55+
56+
},
57+
{
58+
value: 2.1,
59+
valueLabel: "70%",
60+
timeLabel: "16:00",
61+
intensity: 0.7,
62+
63+
},
64+
{
65+
value: 0.9,
66+
valueLabel: "60%",
67+
timeLabel: "17:00",
68+
intensity: 0.6,
69+
70+
},
71+
{
72+
value: 0.7,
73+
valueLabel: "50%",
74+
timeLabel: "18:00",
75+
intensity: 0.5,
76+
77+
},
78+
{
79+
value: 0.3,
80+
valueLabel: "30%",
81+
timeLabel: "19:00",
82+
intensity: 0.3,
83+
84+
},
85+
{
86+
value: 0.2,
87+
valueLabel: "20%",
88+
timeLabel: "20:00",
89+
intensity: 0.2,
90+
91+
},
92+
])
93+
94+
const model = ref([
95+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
96+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
97+
{ key: 'style.animation.show', def: true, type: 'checkbox'},
98+
{ key: 'style.animation.speedMs', def: 500, type: 'range', min: 100, max: 1000},
99+
{ key: 'style.layout.height', def: 96, type: 'number', min: 30, max: 300},
100+
{ key: 'style.layout.width', def: 640, type: 'number', min: 200, max: 1000},
101+
{ key: 'style.layout.padding.top', def: 24, type: 'number', min: 0, max: 48},
102+
{ key: 'style.layout.padding.right', def: 0, type: 'number', min: 0, max: 48},
103+
{ key: 'style.layout.padding.left', def: 0, type: 'number', min: 0, max: 48},
104+
{ key: 'style.layout.padding.bottom', def: 36, type: 'number', min: 0, max: 48},
105+
{ key: 'style.bars.shape', def: 'square', type: 'select', options: ['circle', 'triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star']},
106+
{ key: 'style.bars.strokeWidth', def: 0, type: 'number', min: 0, max: 12},
107+
{ key: 'style.bars.colors.positive', def: '#3366CC', type: 'color'},
108+
{ key: 'style.bars.colors.negative', def: '#CC6633', type: 'color'},
109+
{ key: 'style.bars.colors.gradient.show', def: true, type: 'checkbox'},
110+
{ key: 'style.bars.borderRadius', def: 24, type: 'range', min: 0, max: 48},
111+
{ key: 'style.bars.gap', def: 12, type: 'range', min: 0, max: 48},
112+
{ key: 'style.labels.value.fontSize', def: 14, type: 'number', min: 8, max: 48},
113+
{ key: 'style.labels.value.color', def: '#1A1A1A', type: 'color'},
114+
{ key: 'style.labels.value.bold', def: true, type: 'checkbox'},
115+
{ key: 'style.labels.value.rounding', def: 1, type: 'number', min: 0, max: 12},
116+
{ key: 'style.labels.value.prefix', def: 'P', type: 'text'},
117+
{ key: 'style.labels.value.suffix', def: 'S', type: 'text'},
118+
{ key: 'style.labels.value.offsetY', def: 0, type: 'number', min: -100, max: 100},
119+
{ key: 'style.labels.valueLabel.fontSize', def: 14, type: 'number', min: 8, max: 48},
120+
{ key: 'style.labels.valueLabel.color', def: '#1A1A1A', type: 'color'},
121+
{ key: 'style.labels.valueLabel.bold', def: false, type: 'checkbox'},
122+
{ key: 'style.labels.valueLabel.rounding', def: 1, type: 'number', min: 0, max: 12},
123+
{ key: 'style.labels.timeLabel.fontSize', def: 12, type: 'number', min: 8, max: 24},
124+
{ key: 'style.labels.timeLabel.color', def: '#1A1A1A', type: 'color'},
125+
{ key: 'style.labels.timeLabel.bold', def: false, type: 'checkbox'},
126+
{ key: 'style.selector.stroke', def: '#3366CC', type: 'color'},
127+
{ key: 'style.selector.strokeWidth', def: 2, type: 'number', min: 0, max: 12},
128+
{ key: 'style.selector.strokeDasharray', def: 2, type: 'number', min: 0, max: 12 },
129+
{ key: 'style.selector.borderRadius', def: 2, type: 'number', min: 0, max: 12},
130+
{ key: 'style.title.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']},
131+
{ key: 'style.title.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
132+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
133+
{ key: 'style.title.fontSize', def: 16, type: 'number', min: 8, max: 24},
134+
{ key: 'style.title.bold', def: false, type: 'checkbox'},
135+
{ key: 'style.title.margin', def: '0 0 6px 0', type: 'text'},
136+
{ key: 'style.title.subtitle.color', def: '#A1A1A1', type: 'color'},
137+
{ key: 'style.title.subtitle.text', def: 'Lorem ipsum dolor sic amet', type: 'text'},
138+
{ key: 'style.title.subtitle.fontSize', def: 12, type: 'number', min: 8, max: 24},
139+
{ key: 'style.title.subtitle.bold', def: false, type: 'checkbox'}
140+
])
141+
142+
const config = computed(() => convertArrayToObject(model.value))
143+
144+
const step = ref(0)
145+
146+
function selectDatapoint(datapoint) {
147+
console.log({ datapoint })
148+
}
149+
150+
</script>
151+
152+
<template>
153+
<Box>
154+
<template #title>VueUiSparkHistogram</template>
155+
156+
<template #local>
157+
<LocalVueUiSparkHistogram :dataset="dataset" :config="config" :key="`local_${step}`" @selectDatapoint="selectDatapoint">
158+
</LocalVueUiSparkHistogram>
159+
</template>
160+
161+
<template #VDUI-local>
162+
<LocalVueDataUi component="VueUiSparkHistogram" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" @selectDatapoint="selectDatapoint">
163+
</LocalVueDataUi>
164+
</template>
165+
166+
<template #build>
167+
<VueUiSparkHistogram :dataset="dataset" :config="config" :key="`build_${step}`" @selectDatapoint="selectDatapoint">
168+
</VueUiSparkHistogram>
169+
</template>
170+
171+
<template #VDUI-build>
172+
<VueDataUi component="VueUiSparkHistogram" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`" @selectDatapoint="selectDatapoint">
173+
</VueDataUi>
174+
</template>
175+
176+
<template #knobs>
177+
<div
178+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
179+
<div v-for="knob in model">
180+
<label style="font-size: 10px">{{ knob.key }}</label>
181+
<div
182+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
183+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
184+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
185+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
186+
<option v-for="opt in knob.options">{{ opt }}</option>
187+
</select>
188+
</div>
189+
</div>
190+
</div>
191+
</template>
192+
193+
<template #config>
194+
{{ config }}
195+
</template>
196+
</Box>
197+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import ArenaVueUiCandlestick from "../TestingArena/ArenaVueUiCandlestick.vue";
1919
import ArenaVueUiSparkline from "../TestingArena/ArenaVueUiSparkline.vue";
2020
import ArenaVueUiSparkbar from "../TestingArena/ArenaVueUiSparkbar.vue";
2121
import ArenaVueUiSparkStackbar from "../TestingArena/ArenaVueUiSparkStackbar.vue";
22+
import ArenaVueUiSparkHistogram from "../TestingArena/ArenaVueUiSparkHistogram.vue";
2223
2324
const showOldArena = ref(false);
2425
@@ -40,10 +41,11 @@ const components = ref([
4041
"VueUiCandlestick",
4142
"VueUiSparkline",
4243
"VueUiSparkbar",
43-
"VueUiSparkStackbar"
44+
"VueUiSparkStackbar",
45+
"VueUiSparkHistogram"
4446
]);
4547
46-
const selectedComponent = ref(components.value[17]);
48+
const selectedComponent = ref(components.value[18]);
4749
4850
</script>
4951

@@ -110,4 +112,7 @@ const selectedComponent = ref(components.value[17]);
110112

111113
<!-- 17 -->
112114
<ArenaVueUiSparkStackbar v-if="selectedComponent === 'VueUiSparkStackbar'" />
115+
116+
<!-- 18 -->
117+
<ArenaVueUiSparkHistogram v-if="selectedComponent === 'VueUiSparkHistogram'" />
113118
</template>

0 commit comments

Comments
 (0)