Skip to content

Commit 44e2cdd

Browse files
graphierosgraphieros
committed
Dev environment - Add VueUiStackbar testing arena
1 parent 94fee7b commit 44e2cdd

File tree

3 files changed

+239
-2
lines changed

3 files changed

+239
-2
lines changed

‎TestingArena/ArenaVueUiStackBar.vue‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<script setup>
2+
import { ref, computed, onMounted } from "vue";
3+
import LocalVueUiStackbar from '../src/components/vue-ui-stackbar.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
import { useArena } from "../src/useArena";
8+
9+
const dataset = ref([
10+
{
11+
name: "Serie 1",
12+
series: [2, 20.07, 30, 40, 50, 60, 10, 20],
13+
},
14+
{
15+
name: "Serie 2",
16+
series: [0, 3, 9, 13, 25, 31, 12, 16],
17+
},
18+
{
19+
name: "Serie 3",
20+
series: [5, 3, 9, 13, 25, 31, 12, 16],
21+
},
22+
{
23+
name: "Serie 4",
24+
series: [5, 3, 9, 13, 25, 31, 12, 16],
25+
26+
},
27+
{
28+
name: "Serie 5",
29+
series: [5, 9, 12],
30+
},
31+
]);
32+
33+
const model = ref([
34+
{ key: 'responsive', def: false, type: 'checkbox'},
35+
{ key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']},
36+
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
37+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
38+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
39+
{ key: 'style.chart.height', def: 500, type: 'number', min: 200, max: 1000},
40+
{ key: 'style.chart.width', def: 800, type: 'number', min: 200, max: 1000},
41+
{ key: 'style.chart.padding.top', def: 24, type: 'number', min: 0, max: 100},
42+
{ key: 'style.chart.padding.right', def: 24, type: 'number', min: 0, max: 100},
43+
{ key: 'style.chart.padding.bottom', def: 36, type: 'number', min: 0, max: 100},
44+
{ key: 'style.chart.padding.left', def: 48, type: 'number', min: 0, max: 100},
45+
46+
{ key: 'style.chart.title.text', def: 'Lorem ipsum', type: 'text' },
47+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color' },
48+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 42 },
49+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox' },
50+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text' },
51+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color' },
52+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 8, max: 42 },
53+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox' },
54+
{ key: 'style.chart.title.textAlign', def: 'center', type: 'select', options: ['left', 'center', 'right'] },
55+
56+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox' },
57+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
58+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
59+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
60+
{ key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 42},
61+
62+
{ key: 'style.chart.zoom.show', def: true, type: 'checkbox'},
63+
{ key: 'style.chart.zoom.color', def: '#CCCCCC', type: 'color'},
64+
{ key: 'style.chart.zoom.highlightColor', def: '#5A5A5A', type: 'color'},
65+
{ key: 'style.chart.zoom.fontSize', def: 14, type: 'number', min: 8, max: 42},
66+
67+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
68+
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
69+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
70+
{ key: 'style.chart.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 42},
71+
{ key: 'style.chart.tooltip.borderRadius', def: 4, type: 'number', min: 0, max: 24},
72+
{ key: 'style.chart.tooltip.borderColor', def: '#E1E5E8', type: 'color'},
73+
{ key: 'style.chart.tooltip.borderWidth', def: 1, type: 'number', min: 0, max: 12},
74+
{ key: 'style.chart.tooltip.backgroundOpacity', def: 100, type: 'range', min: 0, max: 100},
75+
{ key: 'style.chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']},
76+
{ key: 'style.chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 64},
77+
{ key: 'style.chart.tooltip.showValue', def: true, type: 'checkbox'},
78+
{ key: 'style.chart.tooltip.showPercentage', def: true, type: 'checkbox'},
79+
{ key: 'style.chart.tooltip.roundingValue', def: 0, type: 'number', min: 0, max: 6},
80+
{ key: 'style.chart.tooltip.roundingPercentage', def: 0, type: 'number', min: 0, max: 6},
81+
82+
{ key: 'style.chart.highlighter.color', def: '#1A1A1A', type: 'color'},
83+
{ key: 'style.chart.highlighter.opacity', def: 5, type: 'range', min: 0, max: 30},
84+
85+
{ key: 'style.chart.bars.gapRatio', def: 0.5, type: 'range', min: 0, max: 1, step: 0.01 },
86+
{ key: 'style.chart.bars.distributed', def: false, type: 'checkbox'},
87+
{ key: 'style.chart.bars.showDistributedPercentage', def: true, type: 'checkbox'},
88+
{ key: 'style.chart.bars.borderRadius', def: 6, type: 'number', min: 0, max: 12},
89+
{ key: 'style.chart.bars.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
90+
91+
{ key: 'style.chart.bars.gradient.show', def: true, type: 'checkbox'},
92+
{ key: 'style.chart.bars.gradient.intensity', def: 20, type: 'range', min: 0, max: 100},
93+
94+
{ key: 'style.chart.bars.totalValues.show', def: true, type: 'checkbox' },
95+
{ key: 'style.chart.bars.totalValues.offsetY', def: 0, type: 'number', min: -100, max: 100},
96+
{ key: 'style.chart.bars.totalValues.fontSize', def: 16, type: 'number', min: 8, max: 42},
97+
{ key: 'style.chart.bars.totalValues.bold', def: false, type: 'checkbox'},
98+
{ key: 'style.chart.bars.totalValues.color', def: '#1A1A1A', type: 'color'},
99+
100+
{ key: 'style.chart.bars.dataLabels.show', def: true, type: 'checkbox'},
101+
{ key: 'style.chart.bars.dataLabels.adaptColorToBackground', def: true, type: 'checkbox'},
102+
{ key: 'style.chart.bars.dataLabels.color', def: '#FFFFFF', type: 'color'},
103+
{ key: 'style.chart.bars.dataLabels.fontSize', def: 14, type: 'number', min: 8, max: 42},
104+
{ key: 'style.chart.bars.dataLabels.bold', def: false, type: 'checkbox'},
105+
{ key: 'style.chart.bars.dataLabels.rounding', def: 2, type: 'number', min: 0, max: 6},
106+
{ key: 'style.chart.bars.dataLabels.prefix', def: 'P', type: 'text'},
107+
{ key: 'style.chart.bars.dataLabels.suffix', def: 'S', type: 'text'},
108+
109+
{ key: 'style.chart.grid.scale.ticks', def: 10, type: 'select', options: [2, 5, 10, 20]},
110+
111+
{ key: 'style.chart.grid.x.showAxis', def: true, type: 'checkbox'},
112+
{ key: 'style.chart.grid.x.showHorizontalLines', def: false, type: 'checkbox'},
113+
{ key: 'style.chart.grid.x.axisColor', def: '#E1E5E8', type: 'color'},
114+
{ key: 'style.chart.grid.x.axisThickness', def: 2, type: 'number', min: 0, max: 12},
115+
{ key: 'style.chart.grid.x.axisName.show', def: true, type: 'checkbox'},
116+
{ key: 'style.chart.grid.x.axisName.text', def: 'X AXIS', type: 'text'},
117+
{ key: 'style.chart.grid.x.axisName.fontSize', def: 14, type: 'number', min: 8, max: 42},
118+
{ key: 'style.chart.grid.x.axisName.color', def: '#1A1A1A', type: 'color'},
119+
{ key: 'style.chart.grid.x.axisName.bold', def: false, type: 'checkbox'},
120+
{ key: 'style.chart.grid.x.axisName.offsetY', def: 0, type: 'number', min: -100, max: 100},
121+
122+
{ key: 'style.chart.grid.x.timeLabels.show', def: true, type: 'checkbox'},
123+
{ key: 'style.chart.grid.x.timeLabels.offsetY', def: 0, type: 'number', min: -100, max: 100},
124+
{ key: 'style.chart.grid.x.timeLabels.rotation', def: 0, type: 'range', min: -90, max: 90},
125+
{ key: 'style.chart.grid.x.timeLabels.fontSize', def: 14, type: 'number', min: 8, max: 42},
126+
{ key: 'style.chart.grid.x.timeLabels.color', def: '#1A1A1A', type: 'color'},
127+
{ key: 'style.chart.grid.x.timeLabels.bold', def: false, type: 'checkbox'},
128+
129+
{ key: 'style.chart.grid.y.showAxis', def: true, type: 'checkbox'},
130+
{ key: 'style.chart.grid.y.showVerticalLines', def: false, type: 'checkbox'},
131+
{ key: 'style.chart.grid.y.axisColor', def: '#E1E5E8', type: 'color'},
132+
{ key: 'style.chart.grid.y.axisThickness', def: 2, type: 'number', min: 0, max: 12},
133+
{ key: 'style.chart.grid.y.axisName.show', def: true, type: 'checkbox'},
134+
{ key: 'style.chart.grid.y.axisName.text', def: 'Y AXIS', type: 'text'},
135+
{ key: 'style.chart.grid.y.axisName.fontSize', def: 14, type: 'number', min: 8, max: 42},
136+
{ key: 'style.chart.grid.y.axisName.color', def: '#1A1A1A', type: 'color'},
137+
{ key: 'style.chart.grid.y.axisName.bold', def: false, type: 'checkbox'},
138+
{ key: 'style.chart.grid.y.axisName.offsetX', def: 0, type: 'number', min: -100, max: 100},
139+
140+
{ key: 'style.chart.grid.y.axisLabels.show', def: true, type: 'checkbox'},
141+
{ key: 'style.chart.grid.y.axisLabels.color', def: '#1A1A1A', type: 'color'},
142+
{ key: 'style.chart.grid.y.axisLabels.fontSize', def: 14, type: 'number', min: -100, max: 100},
143+
{ key: 'style.chart.grid.y.axisLabels.bold', def: false, type: 'checkbox'},
144+
145+
])
146+
147+
const config = computed(() => {
148+
const c = convertArrayToObject(model.value);
149+
return {
150+
...c,
151+
style: {
152+
...c.style,
153+
chart: {
154+
...c.style.chart,
155+
grid: {
156+
...c.style.chart.grid,
157+
x: {
158+
...c.style.chart.grid.x,
159+
timeLabels: {
160+
...c.style.chart.grid.x.timeLabels,
161+
values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
162+
}
163+
}
164+
}
165+
}
166+
}
167+
}
168+
});
169+
170+
const step = ref(0);
171+
172+
173+
</script>
174+
175+
<template>
176+
177+
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
178+
<LocalVueUiStackbar :dataset="dataset" :config="{
179+
...config,
180+
responsive: true,
181+
}" :key="`local_resp_${step}`">
182+
</LocalVueUiStackbar>
183+
</div>
184+
185+
<Box>
186+
<template #title>VueUiStackbar</template>
187+
188+
<template #local>
189+
<LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`">
190+
</LocalVueUiStackbar>
191+
</template>
192+
193+
<template #VDUI-local>
194+
<LocalVueDataUi component="VueUiStackbar" :dataset="dataset" :config="config" :key="`local_vdui_${step}`">
195+
</LocalVueDataUi>
196+
</template>
197+
198+
<template #build>
199+
<VueUiStackbar :dataset="dataset" :config="config" :key="`build_${step}`">
200+
</VueUiStackbar>
201+
</template>
202+
203+
<template #VDUI-build>
204+
<VueDataUi component="VueUiStackbar" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
205+
</VueDataUi>
206+
</template>
207+
208+
<template #knobs>
209+
<div
210+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
211+
<div v-for="knob in model">
212+
<label style="font-size: 10px">{{ knob.key }}</label>
213+
<div
214+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
215+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
216+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
217+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
218+
<option v-for="opt in knob.options">{{ opt }}</option>
219+
</select>
220+
</div>
221+
</div>
222+
</div>
223+
</template>
224+
225+
<template #config>
226+
{{ config }}
227+
</template>
228+
</Box>
229+
230+
</template>

‎src/App.vue‎

100644100755
Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import ArenaVueUiTimer from "../TestingArena/ArenaVueUiTimer.vue";
4646
import ArenaVueUiCarouselTable from "../TestingArena/ArenaVueUiCarouselTable.vue";
4747
import ArenaVueUiGizmo from "../TestingArena/ArenaVueUiGizmo.vue";
4848
import ArenaVueUiKpi from "../TestingArena/ArenaVueUiKpi.vue";
49+
import ArenaVueUiStackbar from "../TestingArena/ArenaVueUiStackbar.vue";
4950
5051
const showOldArena = ref(false);
5152
@@ -95,13 +96,14 @@ const components = ref([
9596
/*_________*/"VueUiCarouselTable", // 42
9697
/*_________________*/"VueUiGizmo", // 43
9798
/*___________________*/"VueUiKpi", // 44
99+
/*______________*/"VueUiStackbar", // 45
98100
99101
// screenshot
100102
// dashboard
101103
// cursor
102104
]);
103105
104-
const selectedComponent = ref(components.value[44]);
106+
const selectedComponent = ref(components.value[45]);
105107
106108
</script>
107109

@@ -250,4 +252,7 @@ const selectedComponent = ref(components.value[44]);
250252

251253
<!-- 44 -->
252254
<ArenaVueUiKpi v-if="selectedComponent === 'VueUiKpi'" />
255+
256+
<!-- 45 -->
257+
<ArenaVueUiStackbar v-if="selectedComponent === 'VueUiStackbar'" />
253258
</template>

‎src/main.js‎

100644100755
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ import {
5858
VueUiTimer,
5959
VueUiCarouselTable,
6060
VueUiGizmo,
61-
VueUiKpi
61+
VueUiKpi,
62+
VueUiStackbar
6263
} from 'vue-data-ui';
6364
import 'vue-data-ui/style.css';
6465

@@ -120,5 +121,6 @@ app.component("VueUiTimer", VueUiTimer);
120121
app.component("VueUiCarouselTable", VueUiCarouselTable);
121122
app.component("VueUiGizmo", VueUiGizmo);
122123
app.component("VueUiKpi", VueUiKpi);
124+
app.component("VueUiStackbar", VueUiStackbar);
123125

124126
app.mount('#app');

0 commit comments

Comments
 (0)