Skip to content

Commit 6954548

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiWaffle arena
1 parent df59413 commit 6954548

File tree

2 files changed

+256
-0
lines changed

2 files changed

+256
-0
lines changed

‎TestingArena/ArenaVueUiWaffle.vue‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiWaffle from '../src/components/vue-ui-waffle.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+
name: 'Lorem Ipsum',
11+
values: [100.27]
12+
},
13+
{
14+
name: 'Dolor Amet',
15+
values: [66.3367]
16+
},
17+
{
18+
name: 'Dignissimos Ducimus',
19+
values: [44.25]
20+
}
21+
]);
22+
23+
const model = ref([
24+
{ key: 'useBlurOnHover', def: true, type: 'checkbox'},
25+
{ key: 'useCustomCells', def: false, type: 'checkbox'},
26+
{ key: 'style.fontFamily', def: "inherit", type: 'text'},
27+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
28+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
29+
{ key: 'style.chart.layout.labels.dataLabels.prefix', def: '$', type: 'text'},
30+
{ key: 'style.chart.layout.labels.dataLabels.suffix', def: '€', type: 'text'},
31+
{ key: 'style.chart.layout.labels.captions.show', def: true, type: 'checkbox'},
32+
{ key: 'style.chart.layout.labels.captions.showSerieName', def: true, type: 'checkbox'},
33+
{ key: 'style.chart.layout.labels.captions.serieNameAbbreviation', def: true, type: 'checkbox'},
34+
{ key: 'style.chart.layout.labels.captions.serieNameMaxAbbreviationSize', def: 3, type: 'number', min: 0, max: 12},
35+
{ key: 'style.chart.layout.labels.captions.fontSize', def: 12, type: 'range', min: 8, max: 48},
36+
{ key: 'style.chart.layout.labels.captions.showValue', def: true, type: 'checkbox'},
37+
{ key: 'style.chart.layout.labels.captions.showPercentage', def: true, type: 'checkbox'},
38+
{ key: 'style.chart.layout.labels.captions.roundingValue', def: 2, type: 'range', min: 0, max: 12},
39+
{ key: 'style.chart.layout.labels.captions.roundingPercentage', def: 2, type: 'range', min: 0, max: 12},
40+
{ key: 'style.chart.layout.labels.captions.offsetX', def: 0, type: 'number', min: -100, max: 100},
41+
{ key: 'style.chart.layout.labels.captions.offsetY', def: 0, type: 'number', min: -100, max: 100},
42+
{ key: 'style.chart.layout.grid.size', def: 10, type: 'range', min: 2, max: 20},
43+
{ key: 'style.chart.layout.grid.spaceBetween', def: 0, type: 'number', min: 0, max: 20},
44+
{ key: 'style.chart.layout.grid.vertical', def: false, type: 'checkbox'},
45+
{ key: 'style.chart.layout.rect.rounded', def: true, type: 'checkbox'},
46+
{ key: 'style.chart.layout.rect.rounding', def: 2, type: 'number', min: 0, max: 100},
47+
{ key: 'style.chart.layout.rect.stroke', def: '#1A1A1A', type: 'text'},
48+
{ key: 'style.chart.layout.rect.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
49+
{ key: 'style.chart.layout.rect.useGradient', def: true, type: 'checkbox'},
50+
{ key: 'style.chart.layout.rect.gradientIntensity', def: 40, type: 'range', min: 0, max: 100},
51+
{ key: 'style.chart.layout.useDiv', def: true, type: 'checkbox'}, // DEPRECATED
52+
{ key: 'style.chart.title.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
53+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color'},
54+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 8, max: 48},
55+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox'},
56+
{ key: 'style.chart.title.subtitle.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
57+
{ key: 'style.chart.title.subtitle.color', def: '#CCCCCC', type: 'color'},
58+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'range', min: 8, max: 48},
59+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox'},
60+
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
61+
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
62+
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
63+
{ key: 'style.chart.tooltip.fontSize', def: 12, type: 'range', min: 8, max: 48},
64+
{ key: 'style.chart.tooltip.showValue', def: true, type: 'checkbox'},
65+
{ key: 'style.chart.tooltip.showPercentage', def: true, type: 'checkbox'},
66+
{ key: 'style.chart.tooltip.roundingValue', def: 0, type: 'range', min: 0, max: 12},
67+
{ key: 'style.chart.tooltip.roundingPercentage', def: 0, type: 'range', min: 0, max: 12},
68+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
69+
{ key: 'table.show', def: false, type: 'checkbox'},
70+
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
71+
{ key: 'table.columnNames.series', def: 'Series', type: 'text' },
72+
{ key: 'table.columnNames.value', def: 'Value', type: 'text' },
73+
{ key: 'table.columnNames.percentage', def: 'Percentage', type: 'text' },
74+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
75+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
76+
{ key: 'table.th.outline', def: 'none', type: 'text'},
77+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
78+
{ key: 'table.td.color', def: ' #1A1A1A', type: 'color'},
79+
{ key: 'table.td.outline', def: 'none', type: 'text'},
80+
{ key: 'table.td.roundingValue', def: 0, type: 'range', min: 0, max: 12},
81+
{ key: 'table.td.roundingPercentage', def: 0, type: 'range', min: 0, max: 12},
82+
])
83+
84+
const testCustomTooltip = ref(false);
85+
86+
const config = computed(() => {
87+
const c = convertArrayToObject(model.value);
88+
if(testCustomTooltip.value) {
89+
return {
90+
...c,
91+
style: {
92+
...c.style,
93+
chart: {
94+
...c.style.chart,
95+
tooltip: {
96+
...c.style.chart.tooltip,
97+
customFormat: ({ datapoint }) => {
98+
let html = '';
99+
console.log(datapoint);
100+
return "test"
101+
}
102+
}
103+
}
104+
}
105+
106+
}
107+
} else {
108+
return {
109+
...c
110+
}
111+
}
112+
});
113+
114+
const step = ref(0)
115+
116+
</script>
117+
118+
<template>
119+
<div style="margin: 12px 0">
120+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip" />
121+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
122+
</div>
123+
<Box>
124+
<template #title>VueUiWaffle</template>
125+
126+
<template #local>
127+
<LocalVueUiWaffle :dataset="dataset" :config="config" :key="`local_${step}`">
128+
<template #cell="{ cell, isSelected }">
129+
<div :style="`opacity:${isSelected ? 1 : 0.3}`">
130+
<VueUiIcon
131+
v-if="cell.name === 'Lorem Ipsum'"
132+
name="lambda"
133+
size="40"
134+
:stroke="cell.color"
135+
/>
136+
<VueUiIcon
137+
v-if="cell.name === 'Dolor Amet'"
138+
name="func"
139+
size="40"
140+
:stroke="cell.color"
141+
/>
142+
<VueUiIcon
143+
v-if="cell.name === 'Dignissimos Ducimus'"
144+
name="mu"
145+
size="40"
146+
:stroke="cell.color"
147+
/>
148+
</div>
149+
</template>
150+
</LocalVueUiWaffle>
151+
</template>
152+
153+
<template #VDUI-local>
154+
<LocalVueDataUi component="VueUiWaffle" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
155+
<template #cell="{ cell, isSelected }">
156+
<div :style="`opacity:${isSelected ? 1 : 0.3}`">
157+
<VueUiIcon
158+
v-if="cell.name === 'Lorem Ipsum'"
159+
name="lambda"
160+
:size="40"
161+
:stroke="cell.color"
162+
/>
163+
<VueUiIcon
164+
v-if="cell.name === 'Dolor Amet'"
165+
name="func"
166+
:size="40"
167+
:stroke="cell.color"
168+
/>
169+
<VueUiIcon
170+
v-if="cell.name === 'Dignissimos Ducimus'"
171+
name="mu"
172+
:size="40"
173+
:stroke="cell.color"
174+
/>
175+
</div>
176+
</template>
177+
</LocalVueDataUi>
178+
</template>
179+
180+
<template #build>
181+
<VueUiWaffle :dataset="dataset" :config="config" :key="`build_${step}`" >
182+
<template #cell="{ cell, isSelected }">
183+
<div :style="`opacity:${isSelected ? 1 : 0.3}`">
184+
<VueUiIcon
185+
v-if="cell.name === 'Lorem Ipsum'"
186+
name="lambda"
187+
size="40"
188+
:stroke="cell.color"
189+
/>
190+
<VueUiIcon
191+
v-if="cell.name === 'Dolor Amet'"
192+
name="func"
193+
size="40"
194+
:stroke="cell.color"
195+
/>
196+
<VueUiIcon
197+
v-if="cell.name === 'Dignissimos Ducimus'"
198+
name="mu"
199+
size="40"
200+
:stroke="cell.color"
201+
/>
202+
</div>
203+
</template>
204+
</VueUiWaffle>
205+
</template>
206+
207+
<template #VDUI-build>
208+
<VueDataUi component="VueUiWaffle" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
209+
<template #cell="{ cell, isSelected }">
210+
<div :style="`opacity:${isSelected ? 1 : 0.3}`">
211+
<VueUiIcon
212+
v-if="cell.name === 'Lorem Ipsum'"
213+
name="lambda"
214+
size="40"
215+
:stroke="cell.color"
216+
/>
217+
<VueUiIcon
218+
v-if="cell.name === 'Dolor Amet'"
219+
name="func"
220+
size="40"
221+
:stroke="cell.color"
222+
/>
223+
<VueUiIcon
224+
v-if="cell.name === 'Dignissimos Ducimus'"
225+
name="mu"
226+
size="40"
227+
:stroke="cell.color"
228+
/>
229+
</div>
230+
</template>
231+
</VueDataUi>
232+
</template>
233+
234+
<template #knobs>
235+
<div
236+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
237+
<div v-for="knob in model">
238+
<label style="font-size: 10px">{{ knob.key }}</label>
239+
<div
240+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
241+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
242+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
243+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
244+
<option v-for="opt in knob.options">{{ opt }}</option>
245+
</select>
246+
</div>
247+
</div>
248+
</div>
249+
</template>
250+
251+
<template #config>
252+
{{ config }}
253+
</template>
254+
</Box>
255+
</template>

‎TestingArena/ArenaVueUiXy.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ const model = ref([
126126
{ key: 'chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'tooltip' },
127127
{ key: 'chart.tooltip.roundingValue', def: 3, type: 'number', min: 0, max: 6, label: 'valueRounding', category: 'tooltip' },
128128
{ key: 'chart.tooltip.roundingPercentage', def: 0, type: 'number', min: 0, max: 6, label: 'percentageRounding', category: 'tooltip' },
129+
{ key: 'chart.tooltip.fontSize', def: 14, type: 'range', min: 8, max: 48},
129130
130131
{ key: 'chart.userOptions.show', def: true, type: 'checkbox', label: 'showUserOptions', category: 'general' },
131132

0 commit comments

Comments
 (0)