Skip to content

Commit a77b3d2

Browse files
graphierosgraphieros
committed
VueUiWaffle added #cell scoped slot for custom cell content
1 parent be00e03 commit a77b3d2

File tree

7 files changed

+67
-31
lines changed

7 files changed

+67
-31
lines changed

‎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.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.79",
4+
"version": "2.0.80",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2657,6 +2657,7 @@ const xyConfig = ref({
26572657
})
26582658
26592659
const waffleConfig = ref({
2660+
useCustomCells: true,
26602661
style: {
26612662
chart: {
26622663
layout: {
@@ -3581,7 +3582,7 @@ function selectBar(bar) {
35813582
</template>
35823583
</Box>
35833584

3584-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_3d_bar)">
3585+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_3d_bar)">
35853586
<template #title>
35863587
<BaseIcon name="chart3dBar"/>
35873588
VueUi3dBar
@@ -4578,7 +4579,7 @@ function selectBar(bar) {
45784579
</template>
45794580
</Box>
45804581

4581-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_waffle)">
4582+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_waffle)">
45824583
<template #title>
45834584
<BaseIcon name="chartWaffle"/>
45844585
VueUiWaffle
@@ -4598,15 +4599,21 @@ function selectBar(bar) {
45984599
:config="waffleConfig"
45994600
@selectLegend="selectLegendWaffle"
46004601
>
4602+
<template #cell="{ cell, isSelected }">
4603+
4604+
<div :style="`width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:${isSelected ? 1 : 0.3}`">
4605+
<BaseIcon name="smiley" :stroke="cell.color" :size="30" />
4606+
</div>
4607+
</template>
46014608
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
46024609
{{ seriesIndex }}
46034610
</template>
46044611
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
46054612
{{ seriesIndex }}
46064613
</template>
4607-
<template #svg="{ svg }">
4614+
<!-- <template #svg="{ svg }">
46084615
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
4609-
</template>
4616+
</template> -->
46104617
</VueDataUiTest>
46114618
</template>
46124619
<template #prod>
@@ -4617,6 +4624,11 @@ function selectBar(bar) {
46174624
:config="waffleConfig"
46184625
@selectLegend="selectLegendWaffle"
46194626
>
4627+
<template #cell="{ cell }">
4628+
<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">
4629+
<BaseIcon name="chartWaffle" :stroke="cell.color" :size="30" />
4630+
</div>
4631+
</template>
46204632
<template #svg="{ svg }">
46214633
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
46224634
</template>

‎src/components/vue-data-ui.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -888,6 +888,9 @@ defineExpose({
888888
@selectLegend="(d) => emit('selectLegend', d)"
889889
ref="vue_ui_waffle"
890890
>
891+
<template #cell="{ cell, isSelected }">
892+
<slot name="cell" v-bind="{ cell, isSelected }"/>
893+
</template>
891894
<template #tooltip-before="{ datapoint, seriesIndex, dataset, config }">
892895
<slot name="tooltip-before" v-bind="{datapoint, seriesIndex, dataset, config }"></slot>
893896
</template>

‎src/components/vue-ui-waffle.vue‎

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -584,30 +584,48 @@ defineExpose({
584584
</g>
585585

586586
<!-- RECTS -->
587-
<rect
588-
v-for="(position, i) in positions"
589-
:data-cy="`waffle-rect-underlayer-${i}`"
590-
:rx="waffleConfig.style.chart.layout.rect.rounded ? waffleConfig.style.chart.layout.rect.rounding : 0"
591-
:x="position.x"
592-
:y="position.y"
593-
:height="rectDimension"
594-
:width="rectDimension"
595-
fill="white"
596-
:stroke="waffleConfig.style.chart.layout.rect.stroke"
597-
:stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
598-
/>
599-
<rect
600-
v-for="(position, i) in positions"
601-
:class="{'vue-ui-waffle-blur': waffleConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && rects[i].serieIndex !== selectedSerie}"
602-
:rx="waffleConfig.style.chart.layout.rect.rounded ? waffleConfig.style.chart.layout.rect.rounding : 0"
603-
:x="position.x"
604-
:y="position.y"
605-
:height="rectDimension"
606-
:width="rectDimension"
607-
:fill="waffleConfig.style.chart.layout.rect.useGradient && waffleConfig.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${uid}_${i})` : rects[i].color"
608-
:stroke="waffleConfig.style.chart.layout.rect.stroke"
609-
:stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
610-
/>
587+
<!-- CUSTOM CELLS SLOTS -->
588+
<template v-if="waffleConfig.useCustomCells">
589+
<foreignObject
590+
v-for="(position, i) in positions"
591+
:x="position.x"
592+
:y="position.y"
593+
:height="rectDimension"
594+
:width="rectDimension"
595+
class="vue-ui-waffle-custom-cell-foreignObject"
596+
>
597+
<slot name="cell" v-bind="{ cell: {...position, color: rects[i].color}, isSelected: [null, undefined].includes(selectedSerie) ? true : rects[i].serieIndex === selectedSerie }"/>
598+
</foreignObject>
599+
</template>
600+
601+
<template v-else>
602+
<rect
603+
v-for="(position, i) in positions"
604+
:data-cy="`waffle-rect-underlayer-${i}`"
605+
:rx="waffleConfig.style.chart.layout.rect.rounded ? waffleConfig.style.chart.layout.rect.rounding : 0"
606+
:x="position.x"
607+
:y="position.y"
608+
:height="rectDimension"
609+
:width="rectDimension"
610+
fill="white"
611+
:stroke="waffleConfig.style.chart.layout.rect.stroke"
612+
:stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
613+
/>
614+
<rect
615+
v-for="(position, i) in positions"
616+
:class="{'vue-ui-waffle-blur': waffleConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && rects[i].serieIndex !== selectedSerie}"
617+
:rx="waffleConfig.style.chart.layout.rect.rounded ? waffleConfig.style.chart.layout.rect.rounding : 0"
618+
:x="position.x"
619+
:y="position.y"
620+
:height="rectDimension"
621+
:width="rectDimension"
622+
:fill="waffleConfig.style.chart.layout.rect.useGradient && waffleConfig.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${uid}_${i})` : rects[i].color"
623+
:stroke="waffleConfig.style.chart.layout.rect.stroke"
624+
:stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
625+
/>
626+
</template>
627+
628+
<!-- DATA LABELS -->
611629
<template v-for="(position, i) in positions">
612630
<foreignObject
613631
v-if="!waffleConfig.style.chart.layout.grid.vertical && waffleConfig.style.chart.layout.labels.captions.show && ((rects[i].isFirst && position.position < waffleConfig.style.chart.layout.grid.size - 2) || (rects[i].isAbsoluteFirst && i % waffleConfig.style.chart.layout.grid.size === 0 && rects[i].absoluteStartIndex))"
@@ -632,6 +650,7 @@ defineExpose({
632650
</div>
633651
</foreignObject>
634652
</template>
653+
635654
<rect
636655
v-for="(position, i) in positions"
637656
:data-cy="`waffle-rect-${i}`"

‎src/default_configs.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,6 +583,7 @@
583583
},
584584
"vue_ui_waffle": {
585585
"useBlurOnHover": true,
586+
"useCustomCells": false,
586587
"style": {
587588
"fontFamily": "inherit",
588589
"chart": {

‎types/vue-data-ui.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2847,6 +2847,7 @@ declare module 'vue-data-ui' {
28472847

28482848
export type VueUiWaffleConfig = {
28492849
useBlurOnHover?: boolean;
2850+
useCustomCells?: boolean;
28502851
style?: {
28512852
fontFamily?: string;
28522853
chart?: {

0 commit comments

Comments
 (0)