Skip to content

Commit 29210eb

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiHeatmap testing arena
1 parent 4f09a2c commit 29210eb

File tree

2 files changed

+259
-2
lines changed

2 files changed

+259
-2
lines changed

‎TestingArena/ArenaVueUiHeatmap.vue‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiHeatmap from '../src/components/vue-ui-heatmap.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 = computed(() => {
9+
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
10+
const arr = [];
11+
const dsLen = 26;
12+
const serieLen = days.length;
13+
for (let i = 0; i < serieLen; i += 1) {
14+
const values = [];
15+
for (let j = 0; j < dsLen; j += 1) {
16+
values.push((i + j * 2))
17+
}
18+
arr.push({
19+
name: `${days[i]}`,
20+
values
21+
})
22+
}
23+
return arr
24+
});
25+
26+
const model = ref([
27+
{ key: 'style.fontFamily', def: "inherit", type: 'text'},
28+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
29+
{ key: 'style.color', def: '#1A1A1A', type: 'color'},
30+
{ key: 'style.layout.useDiv', def: true, type: 'checkbox'}, // DEPRECATED
31+
{ key: 'style.layout.padding.top', def: 36, type: 'number', min: 0, max: 100},
32+
{ key: 'style.layout.padding.right', def: 12, type: 'number', min: 0, max: 100},
33+
{ key: 'style.layout.padding.bottom', def: 12, type: 'number', min: 0, max: 100},
34+
{ key: 'style.layout.padding.left', def: 48, type: 'number', min: 0, max: 100},
35+
{ key: 'style.layout.cells.height', def: 36, type: 'number', min: 12, max: 64},
36+
{ key: 'style.layout.cells.value.show', def: true, type: 'checkbox'},
37+
{ key: 'style.layout.cells.value.fontSize', def: 18, type: 'number', min: 8, max: 48},
38+
{ key: 'style.layout.cells.value.bold', def: false, type: 'checkbox'},
39+
{ key: 'style.layout.cells.value.roundingValue', def: 2, type: 'number', min: 0, max: 12},
40+
{ key: 'style.layout.cells.value.color', def: '#1A1A1A', type: 'color'},
41+
{ key: 'style.layout.cells.colors.hot', def: '#dc3912', type: 'color'},
42+
{ key: 'style.layout.cells.colors.cold', def: '#3366cc', type: 'color'},
43+
{ key: 'style.layout.cells.colors.underlayer', def: '#FFFFFF', type: 'color'},
44+
{ key: 'style.layout.cells.spacing', def: 2, type: 'number', min: 0, max: 12},
45+
{ key: 'style.layout.cells.selected.border', def: 2, type: 'number', min: 0, max: 12},
46+
{ key: 'style.layout.cells.selected.color', def: '#1A1A1A', type: 'color'},
47+
{ key: 'style.layout.dataLabels.prefix', def: 'P', type: 'text'},
48+
{ key: 'style.layout.dataLabels.suffix', def: 'S', type: 'text'},
49+
{ key: 'style.layout.dataLabels.xAXis.show', def: true, type: 'checkbox'},
50+
{ key: 'style.layout.dataLabels.xAxis.fontSize', def: 8, type: 'number', min: 8, max: 24},
51+
{ key: 'style.layout.dataLabels.xAxis.color', def: '#1A1A1A', type: 'color'},
52+
{ key: 'style.layout.dataLabels.xAxis.bold', def: false, type: 'checkbox'},
53+
{ key: 'style.layout.dataLabels.xAxis.offsetX', def: 0, type: 'number', min: -100, max: 100},
54+
{ key: 'style.layout.dataLabels.xAxis.offsetY', def: 0, type: 'number', min: -100, max: 100},
55+
{ key: 'style.layout.dataLabels.yAxis.show', def: true, type: 'checkbox'},
56+
{ key: 'style.layout.dataLabels.yAxis.fontSize', def: 8, type: 'number', min: 8, max: 24},
57+
{ key: 'style.layout.dataLabels.yAxis.color', def: '#1A1A1A', type: 'color'},
58+
{ key: 'style.layout.dataLabels.yAxis.bold', def: false, type: 'checkbox'},
59+
{ key: 'style.layout.dataLabels.yAxis.offsetY', def: 0, type: 'number', min: -100, max: 100},
60+
{ key: 'style.layout.dataLabels.yAxis.offsetX', def: 0, type: 'number', min: -100, max: 100},
61+
{ key: 'style.title.text', def: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
62+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color'},
63+
{ key: 'style.title.fontSize', def: 20, type: 'range', min: 8, max: 48},
64+
{ key: 'style.title.bold', def: true, type: 'checkbox'},
65+
{ key: 'style.title.subtitle.text', def:'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis', type: 'text'},
66+
{ key: 'style.title.subtitle.color', def: '#CCCCCC', type: 'color'},
67+
{ key: 'style.title.subtitle.fontSize', def: 16, type: 'range', min: 8, max: 48},
68+
{ key: 'style.title.subtitle.bold', def: false, type: 'checkbox'},
69+
{ key: 'style.legend.show', def: true, type: 'checkbox'},
70+
{ key: 'style.legend.bold', def: true, type: 'checkbox'},
71+
{ key: 'style.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
72+
{ key: 'style.legend.color', def: '#1A1A1A', type: 'color'},
73+
{ key: 'style.legend.fontSize', def: 12, type: 'range', min: 8, max: 48},
74+
{ key: 'style.legend.roundingValue', def: 2, type: 'range', min: 0, max: 12},
75+
{ key: 'style.legend.position', def: 'right', type: 'select', options: ['right', 'bottom']},
76+
{ key: 'style.legend.scaleBorderRadius', def: 18, type: 'number', min: 0, max: 48},
77+
{ key: 'style.tooltip.show', def: true, type: 'checkbox'},
78+
{ key: 'style.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
79+
{ key: 'style.tooltip.color', def: '#1A1A1A', type: 'color'},
80+
{ key: 'style.tooltip.fontSize', def: 12, type: 'range', min: 8, max: 48},
81+
{ key: 'style.tooltip.roundingValue', def: 0, type: 'range', min: 0, max: 12},
82+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
83+
{ key: 'table.show', def: false, type: 'checkbox'},
84+
{ key: 'table.responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800},
85+
{ key: 'table.colNames.xAxis', def: 'X AXIS', type: 'text'},
86+
{ key: 'table.th.backgroundColor', def: '#FFFFFF', type: 'color'},
87+
{ key: 'table.th.color', def: '#1A1A1A', type: 'color'},
88+
{ key: 'table.th.outline', def: 'none', type: 'text'},
89+
{ key: 'table.td.backgroundColor', def: '#FFFFFF', type: 'color'},
90+
{ key: 'table.td.color', def: ' #1A1A1A', type: 'color'},
91+
{ key: 'table.td.outline', def: 'none', type: 'text'},
92+
{ key: 'table.td.roundingValue', def: 0, type: 'range', min: 0, max: 12},
93+
])
94+
95+
const testCustomTooltip = ref(false);
96+
97+
const config = computed(() => {
98+
const c = convertArrayToObject(model.value);
99+
if(testCustomTooltip.value) {
100+
return {
101+
...c,
102+
style: {
103+
...c.style,
104+
tooltip: {
105+
...c.style.tooltip,
106+
customFormat: ({ datapoint }) => {
107+
let html = '';
108+
console.log(datapoint);
109+
return "test"
110+
}
111+
}
112+
}
113+
114+
}
115+
} else {
116+
return {
117+
...c,
118+
style: {
119+
...c.style,
120+
layout: {
121+
...c.style.layout,
122+
dataLabels: {
123+
...c.style.layout.dataLabels,
124+
xAxis: {
125+
...c.style.layout.dataLabels.xAxis,
126+
values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 24, 24, 25]
127+
}
128+
}
129+
},
130+
}
131+
}
132+
}
133+
});
134+
135+
const step = ref(0)
136+
137+
</script>
138+
139+
<template>
140+
<div style="margin: 12px 0">
141+
<input type="checkbox" v-model="testCustomTooltip" id="custom-tooltip" />
142+
<label for="custom-tooltip" style="color:#CCCCCC">Test custom tooltip</label>
143+
</div>
144+
<Box>
145+
<template #title>VueUiHeatmap</template>
146+
147+
<template #local>
148+
<LocalVueUiHeatmap :dataset="dataset" :config="config" :key="`local_${step}`">
149+
<template #svg="{ svg }">
150+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
151+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
152+
</template>
153+
<template #legend="{ legend }">
154+
#LEGEND
155+
<div style="font-size: 8px">
156+
{{ legend }}
157+
</div>
158+
</template>
159+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
160+
#BEFORE {{ series.name }}
161+
</template>
162+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
163+
#AFTER {{ series.name }}
164+
</template>
165+
</LocalVueUiHeatmap>
166+
</template>
167+
168+
<template #VDUI-local>
169+
<LocalVueDataUi component="VueUiHeatmap" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`">
170+
<template #svg="{ svg }">
171+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
172+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
173+
</template>
174+
<template #legend="{ legend }">
175+
#LEGEND
176+
<div style="font-size: 8px">
177+
{{ legend }}
178+
</div>
179+
</template>
180+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
181+
#BEFORE {{ series.name }}
182+
</template>
183+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
184+
#AFTER {{ series.name }}
185+
</template>
186+
</LocalVueDataUi>
187+
</template>
188+
189+
<template #build>
190+
<VueUiHeatmap :dataset="dataset" :config="config" :key="`build_${step}`">
191+
<template #svg="{ svg }">
192+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
193+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
194+
</template>
195+
<template #legend="{ legend }">
196+
#LEGEND
197+
<div style="font-size: 8px">
198+
{{ legend }}
199+
</div>
200+
</template>
201+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
202+
#BEFORE {{ series.name }}
203+
</template>
204+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
205+
#AFTER {{ series.name }}
206+
</template>
207+
</VueUiHeatmap>
208+
</template>
209+
210+
<template #VDUI-build>
211+
<VueDataUi component="VueUiHeatmap" :dataset="dataset" :config="config" :key="`VDUI-build_${step}`">
212+
<template #svg="{ svg }">
213+
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
214+
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>
215+
</template>
216+
<template #legend="{ legend }">
217+
#LEGEND
218+
<div style="font-size: 8px">
219+
{{ legend }}
220+
</div>
221+
</template>
222+
<template #tooltip-before="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
223+
#BEFORE {{ series.name }}
224+
</template>
225+
<template #tooltip-after="{ datapoint, seriesIndex, series, config, bars, lines, plots }">
226+
#AFTER {{ series.name }}
227+
</template>
228+
</VueDataUi>
229+
</template>
230+
231+
<template #knobs>
232+
<div
233+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
234+
<div v-for="knob in model">
235+
<label style="font-size: 10px">{{ knob.key }}</label>
236+
<div
237+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
238+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
239+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
240+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
241+
<option v-for="opt in knob.options">{{ opt }}</option>
242+
</select>
243+
</div>
244+
</div>
245+
</div>
246+
</template>
247+
248+
<template #config>
249+
{{ config }}
250+
</template>
251+
</Box>
252+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ArenaVueUiTiremarks from "../TestingArena/ArenaVueUiTiremarks.vue";
1313
import ArenaVueUiChestnut from "../TestingArena/ArenaVueUiChestnut.vue";
1414
import ArenaVueUiOnion from "../TestingArena/ArenaVueUiOnion.vue";
1515
import ArenaVueUiVerticalBar from "../TestingArena/ArenaVueUiVerticalBar.vue";
16+
import ArenaVueUiHeatmap from "../TestingArena/ArenaVueUiHeatmap.vue";
1617
1718
const showOldArena = ref(false);
1819
@@ -28,10 +29,11 @@ const components = ref([
2829
"VueUiTiremarks",
2930
"VueUiChestnut",
3031
"VueUiOnion",
31-
"VueUiVerticalBar"
32+
"VueUiVerticalBar",
33+
"VueUiHeatmap"
3234
]);
3335
34-
const selectedComponent = ref(components.value[11]);
36+
const selectedComponent = ref(components.value[12]);
3537
3638
</script>
3739

@@ -80,4 +82,7 @@ const selectedComponent = ref(components.value[11]);
8082

8183
<!-- 11 -->
8284
<ArenaVueUiVerticalBar v-if="selectedComponent === 'VueUiVerticalBar'" />
85+
86+
<!-- 12 -->
87+
<ArenaVueUiHeatmap v-if="selectedComponent === 'VueUiHeatmap'" />
8388
</template>

0 commit comments

Comments
 (0)