Skip to content

Commit 64dbcec

Browse files
graphierosgraphieros
committed
Dev environment - Added VueUiTableHeatmap testing arena
1 parent 3bdfb8b commit 64dbcec

File tree

2 files changed

+288
-2
lines changed

2 files changed

+288
-2
lines changed

‎TestingArena/ArenaVueUiTableHeatmap.vue‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiTableHeatmap from '../src/components/vue-ui-table-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 = ref([
9+
{
10+
name: "Serie 1",
11+
values: [20, 30, 40, 50, 40, 30, 20,],
12+
color: '#1f77b4',
13+
shape: 'circle'
14+
},
15+
{
16+
name: "Serie 2",
17+
values: [30, 40, 50, 60, 50, 40, 30,],
18+
color: '#aec7e8',
19+
shape: 'triangle'
20+
},
21+
{
22+
name: "Serie 3",
23+
values: [40, 50, 60, 70, 60, 50, 40,],
24+
color: '#ff7f0e',
25+
shape: 'diamond'
26+
},
27+
{
28+
name: "Serie 4",
29+
values: [50, 60, 70, 80, 70, 60, 50,],
30+
color: '#ffbb78',
31+
shape: 'hexagon'
32+
},
33+
{
34+
name: "Serie 5",
35+
values: [60, 70, 80, 90, 80, 70, 60,],
36+
color: '#2ca02c',
37+
shape: 'star'
38+
},
39+
]);
40+
41+
const model = ref([
42+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color'},
43+
{ key: 'style.color', def: '#1A1A1A', type: 'color'},
44+
{ key: 'style.fontFamily', def: 'inherit', type: 'text'},
45+
{ key: 'style.shapeSize', def: 14, type: 'number', min: 8, max: 24},
46+
{ key: 'style.heatmapColors.useIndividualScale', def: false, type: 'checkbox'},
47+
{ key: 'style.heatmapColors.min', def: '#FFFFFF', type: 'color'},
48+
{ key: 'style.heatmapColors.max', def: '#5F8BEE', type: 'color'},
49+
{ key: 'table.responsiveBreakpoint', def: 300, type: 'number', min: 300, max: 800},
50+
{ key: 'table.borderWidth', def: 1, type: 'number', min: 0, max: 12},
51+
{ key: 'table.showSum', def: true, type: 'checkbox'},
52+
{ key: 'table.showAverage', def: true, type: 'checkbox'},
53+
{ key: 'table.showMedian', def: true, type: 'checkbox'},
54+
{ key: 'table.head.backgroundColor', def: '#FFFFFF', type: 'color'},
55+
{ key: 'userOptions.show', def: true, type: 'checkbox'}
56+
])
57+
58+
const config = computed(() => {
59+
const c = convertArrayToObject(model.value)
60+
return {
61+
...c,
62+
table: {
63+
...c.table,
64+
head: {
65+
...c.table.head,
66+
values: ["A", "B", "C", "D", "E", "F", "G", "H", "TOT.", "AVG.", "MED."]
67+
}
68+
}
69+
}
70+
})
71+
72+
const step = ref(0)
73+
74+
</script>
75+
76+
<template>
77+
<Box>
78+
<template #title>VueUiTableHeatmap</template>
79+
80+
<template #local>
81+
<LocalVueUiTableHeatmap :dataset="dataset" :config="config" :key="`local_${step}`">
82+
<template #caption>
83+
<div style="width: 100%; height: 40px" class="pb-8 font-black text-2xl text-left pl-2">
84+
TITLE
85+
</div>
86+
</template>
87+
88+
<template #head="{ value, rowIndex, type }">
89+
{{ value }}
90+
</template>
91+
92+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
93+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-start; padding: 0 6px;font-weight:${isResponsive ? 'bold' : 'normal'}`"
94+
class="bg-gray-200 dark:bg-[#2A2A2A] w-full">
95+
{{ value }}
96+
</div>
97+
</template>
98+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor }">
99+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;background:${color};color:${textColor}`"
100+
class="relative">
101+
{{ value }}
102+
</div>
103+
</template>
104+
<template #sum="{ value }">
105+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
106+
class="bg-gray-200 dark:bg-[#2A2A2A]">
107+
{{ value }}
108+
</div>
109+
</template>
110+
<template #average="{ value }">
111+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
112+
class="bg-gray-200 dark:bg-[#2A2A2A]">
113+
{{ value.toFixed(1) }}
114+
</div>
115+
</template>
116+
<template #median="{ value }">
117+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
118+
class="bg-gray-200 dark:bg-[#2A2A2A]">
119+
{{ value.toFixed(1) }}
120+
</div>
121+
</template>
122+
</LocalVueUiTableHeatmap>
123+
</template>
124+
125+
<template #VDUI-local>
126+
<LocalVueDataUi component="VueUiTableHeatmap" :dataset="dataset" :config="config" :key="`vdui_local_${step}`">
127+
<template #caption>
128+
<div style="width: 100%; height: 40px" class="pb-8 font-black text-2xl text-left pl-2">
129+
TITLE
130+
</div>
131+
</template>
132+
133+
<template #head="{ value, rowIndex, type }">
134+
{{ value }}
135+
</template>
136+
137+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
138+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-start; padding: 0 6px;font-weight:${isResponsive ? 'bold' : 'normal'}`"
139+
class="bg-gray-200 dark:bg-[#2A2A2A] w-full">
140+
{{ value }}
141+
</div>
142+
</template>
143+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor }">
144+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;background:${color};color:${textColor}`"
145+
class="relative">
146+
{{ value }}
147+
</div>
148+
</template>
149+
<template #sum="{ value }">
150+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
151+
class="bg-gray-200 dark:bg-[#2A2A2A]">
152+
{{ value }}
153+
</div>
154+
</template>
155+
<template #average="{ value }">
156+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
157+
class="bg-gray-200 dark:bg-[#2A2A2A]">
158+
{{ value.toFixed(1) }}
159+
</div>
160+
</template>
161+
<template #median="{ value }">
162+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
163+
class="bg-gray-200 dark:bg-[#2A2A2A]">
164+
{{ value.toFixed(1) }}
165+
</div>
166+
</template>
167+
</LocalVueDataUi>
168+
</template>
169+
170+
<template #build>
171+
<VueUiTableHeatmap :dataset="dataset" :config="config" :key="`build_${step}`">
172+
<template #caption>
173+
<div style="width: 100%; height: 40px" class="pb-8 font-black text-2xl text-left pl-2">
174+
TITLE
175+
</div>
176+
</template>
177+
178+
<template #head="{ value, rowIndex, type }">
179+
{{ value }}
180+
</template>
181+
182+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
183+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-start; padding: 0 6px;font-weight:${isResponsive ? 'bold' : 'normal'}`"
184+
class="bg-gray-200 dark:bg-[#2A2A2A] w-full">
185+
{{ value }}
186+
</div>
187+
</template>
188+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor }">
189+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;background:${color};color:${textColor}`"
190+
class="relative">
191+
{{ value }}
192+
</div>
193+
</template>
194+
<template #sum="{ value }">
195+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
196+
class="bg-gray-200 dark:bg-[#2A2A2A]">
197+
{{ value }}
198+
</div>
199+
</template>
200+
<template #average="{ value }">
201+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
202+
class="bg-gray-200 dark:bg-[#2A2A2A]">
203+
{{ value.toFixed(1) }}
204+
</div>
205+
</template>
206+
<template #median="{ value }">
207+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
208+
class="bg-gray-200 dark:bg-[#2A2A2A]">
209+
{{ value.toFixed(1) }}
210+
</div>
211+
</template>
212+
</VueUiTableHeatmap>
213+
</template>
214+
215+
<template #VDUI-build>
216+
<VueDataUi component="VueUiTableHeatmap" :dataset="dataset" :config="config" :key="`vdui_build_${step}`">
217+
<template #caption>
218+
<div style="width: 100%; height: 40px" class="pb-8 font-black text-2xl text-left pl-2">
219+
TITLE
220+
</div>
221+
</template>
222+
223+
<template #head="{ value, rowIndex, type }">
224+
{{ value }}
225+
</template>
226+
227+
<template #rowTitle="{ value, rowIndex, colIndex, type, isResponsive }">
228+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-start; padding: 0 6px;font-weight:${isResponsive ? 'bold' : 'normal'}`"
229+
class="bg-gray-200 dark:bg-[#2A2A2A] w-full">
230+
{{ value }}
231+
</div>
232+
</template>
233+
<template #cell="{ value, rowIndex, colIndex, type, color, textColor }">
234+
<div :style="`height: 40px; display: flex; align-items:center; justify-content: flex-end; padding: 0 6px;background:${color};color:${textColor}`"
235+
class="relative">
236+
{{ value }}
237+
</div>
238+
</template>
239+
<template #sum="{ value }">
240+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
241+
class="bg-gray-200 dark:bg-[#2A2A2A]">
242+
{{ value }}
243+
</div>
244+
</template>
245+
<template #average="{ value }">
246+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
247+
class="bg-gray-200 dark:bg-[#2A2A2A]">
248+
{{ value.toFixed(1) }}
249+
</div>
250+
</template>
251+
<template #median="{ value }">
252+
<div style="height:40px; display: flex; text-align:center; align-items:center; justify-content: flex-end; padding: 0 6px;"
253+
class="bg-gray-200 dark:bg-[#2A2A2A]">
254+
{{ value.toFixed(1) }}
255+
</div>
256+
</template>
257+
</VueDataUi>
258+
</template>
259+
260+
<template #knobs>
261+
<div
262+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
263+
<div v-for="knob in model">
264+
<label style="font-size: 10px">{{ knob.key }}</label>
265+
<div
266+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
267+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type"
268+
:min="knob.min ?? 0" :max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
269+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
270+
<option v-for="opt in knob.options">{{ opt }}</option>
271+
</select>
272+
</div>
273+
</div>
274+
</div>
275+
</template>
276+
277+
<template #config>
278+
{{ config }}
279+
</template>
280+
</Box>
281+
</template>

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import ArenaVueUiStripPlot from "../TestingArena/ArenaVueUiStripPlot.vue";
3737
import ArenaVueUiDumbbell from "../TestingArena/ArenaVueUiDumbbell.vue";
3838
import ArenaVueUi3dBar from "../TestingArena/ArenaVueUi3dBar.vue";
3939
import ArenaVueUiTableSparkline from "../TestingArena/ArenaVueUiTableSparkline.vue";
40+
import ArenaVueUiTableHeatmap from "../TestingArena/ArenaVueUiTableHeatmap.vue";
4041
4142
const showOldArena = ref(false);
4243
@@ -76,10 +77,11 @@ const components = ref([
7677
"VueUiStripPlot",
7778
"VueUiDumbbell",
7879
"VueUi3dBar",
79-
"VueUiTableSparkline"
80+
"VueUiTableSparkline",
81+
"VueUiTableHeatmap"
8082
]);
8183
82-
const selectedComponent = ref(components.value[35]);
84+
const selectedComponent = ref(components.value[36]);
8385
8486
</script>
8587

@@ -200,4 +202,7 @@ const selectedComponent = ref(components.value[35]);
200202

201203
<!-- 35 -->
202204
<ArenaVueUiTableSparkline v-if="selectedComponent === 'VueUiTableSparkline'" />
205+
206+
<!-- 36 -->
207+
<ArenaVueUiTableHeatmap v-if="selectedComponent === 'VueUiTableHeatmap'" />
203208
</template>

0 commit comments

Comments
 (0)