Skip to content

Commit 019cf6b

Browse files
graphierosgraphieros
committed
feat(VueUiTableHeatmap): add slot types
1 parent abb8912 commit 019cf6b

5 files changed

Lines changed: 422 additions & 11 deletions

File tree

‎manual-testing/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ts-playground/src/App.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,9 @@ const TsVueUiWorld = defineAsyncComponent(
171171
const TsVueUiXyCanvas = defineAsyncComponent(
172172
() => import('./components/charts/ts-vue-ui-xy-canvas.vue'),
173173
);
174+
const TsVueUiTableHeatmap = defineAsyncComponent(
175+
() => import('./components/charts/ts-vue-ui-table-heatmap.vue'),
176+
);
174177
175178
const components = shallowRef([
176179
{ name: 'VueUiXy' },
@@ -230,6 +233,7 @@ const components = shallowRef([
230233
{ name: 'VueUiWordCloud' },
231234
{ name: 'VueUiWorld' },
232235
{ name: 'VueUiXyCanvas' },
236+
{ name: 'VueUiTableHeatmap' },
233237
]);
234238
235239
const selectedComponent = shallowRef(components.value[0]);
@@ -332,6 +336,9 @@ const selectedComponent = shallowRef(components.value[0]);
332336
<TsVueUiWordCloud v-if="selectedComponent?.name === 'VueUiWordCloud'" />
333337
<TsVueUiWorld v-if="selectedComponent?.name === 'VueUiWorld'" />
334338
<TsVueUiXyCanvas v-if="selectedComponent?.name === 'VueUiXyCanvas'" />
339+
<TsVueUiTableHeatmap
340+
v-if="selectedComponent?.name === 'VueUiTableHeatmap'"
341+
/>
335342
</div>
336343
</template>
337344

‎ts-playground/src/components/charts/ts-vue-ui-table-heatmap.vue‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
<script setup lang="ts">
2+
/**
3+
* This playground showcases all the slots and their implementations for <VueUiDonut>
4+
*/
5+
import { ref, computed } from 'vue';
6+
import {
7+
VueUiTableHeatmap,
8+
type VueUiTableHeatmapConfig,
9+
type VueUiTableHeatmapDatasetItem,
10+
} from 'vue-data-ui/vue-ui-table-heatmap';
11+
import { mergeConfigs } from 'vue-data-ui/utils';
12+
import 'vue-data-ui/style.css';
13+
14+
import CommonMenuIcon from '../slots/common/menu-icon.vue';
15+
import CommonOptionFullscreen from '../slots/common/option-fullscreen.vue';
16+
17+
const dataset = computed<VueUiTableHeatmapDatasetItem[]>(() => {
18+
return [
19+
{
20+
name: 'Serie 1',
21+
values: [20, 30, 40, 50, 40, 30, 20],
22+
color: '#1f77b4',
23+
shape: 'circle',
24+
},
25+
{
26+
name: 'Serie 2',
27+
values: [30, 40, 50, 60, 50, 40, 30],
28+
color: '#aec7e8',
29+
shape: 'triangle',
30+
},
31+
{
32+
name: 'Serie 3',
33+
values: [40, 50, 60, 70, 60, 50, 40],
34+
color: '#ff7f0e',
35+
shape: 'diamond',
36+
},
37+
{
38+
name: 'Serie 4',
39+
values: [50, 60, 70, 80, 70, 60, 50],
40+
color: '#ffbb78',
41+
shape: 'hexagon',
42+
},
43+
{
44+
name: 'Serie 5',
45+
values: [60, 70, 80, 90, 80, 70, 60],
46+
color: '#2ca02c',
47+
shape: 'star',
48+
},
49+
];
50+
});
51+
52+
const testPreconfig = computed<VueUiTableHeatmapConfig>(() => {
53+
return {
54+
theme: '',
55+
style: {
56+
fontFamily: 'inherit',
57+
backgroundColor: '#FFFFFF',
58+
color: '#2D353C',
59+
shapeSize: 14,
60+
heatmapColors: {
61+
useIndividualScale: false,
62+
min: '#FFFFFF',
63+
max: '#1f77b4',
64+
},
65+
},
66+
table: {
67+
responsiveBreakpoint: 400,
68+
borderWidth: 1,
69+
showSum: true,
70+
showAverage: true,
71+
showMedian: true,
72+
head: {
73+
backgroundColor: '#FFFFFF',
74+
color: '#2D353C',
75+
values: [
76+
{ name: 'A', color: 'red' },
77+
{ name: 'B', color: 'green' },
78+
],
79+
},
80+
},
81+
userOptions: {
82+
show: true,
83+
showOnChartHover: false,
84+
keepStateOnChartLeave: true,
85+
position: 'right',
86+
buttons: {
87+
tooltip: false,
88+
pdf: true,
89+
csv: true,
90+
img: true,
91+
table: false,
92+
labels: false,
93+
fullscreen: true,
94+
sort: false,
95+
stack: false,
96+
animation: false,
97+
annotator: false,
98+
svg: false,
99+
zoom: false,
100+
altCopy: false,
101+
},
102+
callbacks: {
103+
animation: null,
104+
annotator: null,
105+
csv: null,
106+
fullscreen: null,
107+
img: null,
108+
labels: null,
109+
pdf: null,
110+
sort: null,
111+
stack: null,
112+
table: null,
113+
tooltip: null,
114+
svg: null,
115+
zoom: null,
116+
altCopy: null,
117+
},
118+
buttonTitles: {
119+
open: 'Open options',
120+
close: 'Close options',
121+
pdf: 'Download PDF',
122+
csv: 'Download CSV',
123+
img: 'Download PNG',
124+
fullscreen: 'Toggle fullscreen',
125+
altCopy: 'Copy alt text',
126+
},
127+
print: {
128+
scale: 2,
129+
orientation: 'auto',
130+
overflowTolerance: 0.2,
131+
},
132+
useCursorPointer: false,
133+
},
134+
};
135+
});
136+
137+
const config = computed<VueUiTableHeatmapConfig>(() => {
138+
return mergeConfigs({
139+
defaultConfig: testPreconfig.value,
140+
userConfig: {},
141+
});
142+
});
143+
144+
function log(n: unknown) {
145+
console.log(n);
146+
}
147+
</script>
148+
149+
<template>
150+
<div>
151+
<VueUiTableHeatmap :dataset :config>
152+
<template #head="{ value, isResponsive, rowIndex, type }">
153+
<div style="display: flex; flex-direction: column">
154+
<code style="color: chocolate">#head</code>
155+
<span>value: {{ value }}</span>
156+
<span>isResponsive: {{ isResponsive }}</span>
157+
<span>rowIndex: {{ rowIndex }}</span>
158+
<span>type: {{ type }}</span>
159+
</div>
160+
</template>
161+
162+
<template
163+
#rowTitle="{ value, rowIndex, colIndex, type, isResponsive }"
164+
>
165+
<div style="display: flex; flex-direction: column">
166+
<code style="color: chocolate">#rowTitle</code>
167+
<span>value: {{ value }}</span>
168+
<span>isResponsive: {{ isResponsive }}</span>
169+
<span>rowIndex: {{ rowIndex }}</span>
170+
<span>colIndex: {{ colIndex }}</span>
171+
<span>type: {{ type }}</span>
172+
</div>
173+
</template>
174+
175+
<template #sum="{ value, rowIndex, isResponsive }">
176+
<code style="color: chocolate">#sum</code>
177+
<div style="display: flex; flex-direction: column">
178+
<span>value: {{ value }}</span>
179+
<span>rowIndex: {{ rowIndex }}</span>
180+
<span>isResponsive: {{ isResponsive }}</span>
181+
</div>
182+
</template>
183+
184+
<template #average="{ value, rowIndex, isResponsive }">
185+
<code style="color: chocolate">#average</code>
186+
<div style="display: flex; flex-direction: column">
187+
<span>value: {{ value }}</span>
188+
<span>rowIndex: {{ rowIndex }}</span>
189+
<span>isResponsive: {{ isResponsive }}</span>
190+
</div>
191+
</template>
192+
193+
<template #median="{ value, rowIndex, isResponsive }">
194+
<code style="color: chocolate">#median</code>
195+
<div style="display: flex; flex-direction: column">
196+
<span>value: {{ value }}</span>
197+
<span>rowIndex: {{ rowIndex }}</span>
198+
<span>isResponsive: {{ isResponsive }}</span>
199+
</div>
200+
</template>
201+
202+
<template
203+
#cell="{
204+
value,
205+
rowIndex,
206+
colIndex,
207+
type,
208+
isResponsive,
209+
color,
210+
textColor,
211+
}"
212+
>
213+
<div
214+
:style="{
215+
backgroundColor: color,
216+
color: textColor,
217+
display: 'flex',
218+
flexDirection: 'column',
219+
fontSize: '0.7rem',
220+
lineHeight: '0.7rem',
221+
}"
222+
>
223+
<code style="color: chocolate; background: white"
224+
>#cell</code
225+
>
226+
<span>value: {{ value }}</span>
227+
<span>rowIndex: {{ rowIndex }}</span>
228+
<span>colIndex: {{ colIndex }}</span>
229+
<span>isResponsive: {{ isResponsive }}</span>
230+
</div>
231+
</template>
232+
233+
<template #source>
234+
<code style="color: chocolate">#source</code>
235+
</template>
236+
237+
<template #menuIcon="{ isOpen, color }">
238+
<CommonMenuIcon :isOpen :color />
239+
</template>
240+
241+
<template #optionPdf>
242+
<code
243+
style="
244+
color: chocolate;
245+
font-size: 0.7rem;
246+
pointer-events: none;
247+
"
248+
>#optionPdf</code
249+
>
250+
</template>
251+
252+
<template #optionCsv>
253+
<code
254+
style="
255+
color: chocolate;
256+
font-size: 0.7rem;
257+
pointer-events: none;
258+
"
259+
>#optionCsv</code
260+
>
261+
</template>
262+
263+
<template #optionImg>
264+
<code
265+
style="
266+
color: chocolate;
267+
font-size: 0.7rem;
268+
pointer-events: none;
269+
"
270+
>#optionImg</code
271+
>
272+
</template>
273+
274+
<template #optionFullscreen="{ toggleFullscreen, isFullscreen }">
275+
<CommonOptionFullscreen :toggle-fullscreen :is-fullscreen />
276+
</template>
277+
</VueUiTableHeatmap>
278+
</div>
279+
</template>

0 commit comments

Comments
 (0)