Skip to content

Commit c7fac10

Browse files
graphierosgraphieros
committed
Fixed blur effect not working on Safari
1 parent fcf5460 commit c7fac10

File tree

6 files changed

+59
-32
lines changed

6 files changed

+59
-32
lines changed

‎package-lock.json‎

Lines changed: 3 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.85",
4+
"version": "2.0.86",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2658,7 +2658,8 @@ const xyConfig = ref({
26582658
})
26592659
26602660
const waffleConfig = ref({
2661-
useCustomCells: true,
2661+
useCustomCells: false,
2662+
useBlurOnHover: true,
26622663
style: {
26632664
chart: {
26642665
layout: {
@@ -3441,7 +3442,7 @@ function selectBar(bar) {
34413442
</template>
34423443
</Box>
34433444

3444-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_nested_donuts)">
3445+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_nested_donuts)">
34453446
<template #title>
34463447
<BaseIcon name="chartNestedDonuts"/>
34473448
VueUiNestedDonuts
@@ -4151,7 +4152,7 @@ function selectBar(bar) {
41514152
</template>
41524153
</Box>
41534154

4154-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
4155+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
41554156
<template #title>
41564157
<BaseIcon name="chartOnion" />
41574158
VueUiOnion
@@ -4610,12 +4611,12 @@ function selectBar(bar) {
46104611
:config="waffleConfig"
46114612
@selectLegend="selectLegendWaffle"
46124613
>
4613-
<template #cell="{ cell, isSelected }">
4614+
<!-- <template #cell="{ cell, isSelected }">
46144615
46154616
<div :style="`width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:${isSelected ? 1 : 0.3}`">
46164617
<BaseIcon name="smiley" :stroke="cell.color" :size="30" />
46174618
</div>
4618-
</template>
4619+
</template> -->
46194620
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
46204621
{{ seriesIndex }}
46214622
</template>

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

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,14 @@ function useTooltip({datapoint, relativeIndex, seriesIndex, show = false}) {
267267
}
268268
}
269269
270+
function getBlurFilter(index) {
271+
if (donutConfig.value.useBlurOnHover && ![null, undefined].includes(selectedSerie.value) && selectedSerie.value !== index) {
272+
return `url(#blur_${uid.value})`;
273+
} else {
274+
return '';
275+
}
276+
}
277+
270278
const __to__ = ref(null);
271279
272280
function showSpinnerPdf() {
@@ -482,6 +490,13 @@ defineExpose({
482490
</g>
483491

484492
<!-- LABEL CONNECTOR -->
493+
<defs>
494+
<filter :id="`blur_${uid}`" x="-50%" y="-50%" width="200%" height="200%">
495+
<feGaussianBlur in="SourceGraphic" :stdDeviation="5" :id="`blur_std_${uid}`" />
496+
<feColorMatrix type="saturate" values="0" />
497+
</filter>
498+
</defs>
499+
485500
<g v-for="(arc, i) in currentDonut">
486501
<path
487502
v-if="isArcBigEnough(arc) && mutableConfig.dataLabels.show"
@@ -491,7 +506,7 @@ defineExpose({
491506
stroke-linecap="round"
492507
stroke-linejoin="round"
493508
fill="none"
494-
:class="!defaultConfig.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? '' : 'vue-ui-donut-blur'"
509+
:filter="getBlurFilter(i)"
495510
/>
496511
</g>
497512

@@ -507,9 +522,9 @@ defineExpose({
507522
:data-cy="`donut-arc-${i}`"
508523
:d="arc.arcSlice"
509524
:fill="`${arc.color}CC`"
510-
:class="!defaultConfig.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? '' : 'vue-ui-donut-blur'"
511525
:stroke="donutConfig.style.chart.backgroundColor"
512526
:stroke-width="donutConfig.style.chart.layout.donut.borderWidth"
527+
:filter="getBlurFilter(i)"
513528
/>
514529

515530
<!-- HOLLOW -->
@@ -593,7 +608,7 @@ defineExpose({
593608
</text>
594609

595610
<!-- DATALABELS -->
596-
<g v-for="(arc, i) in currentDonut">
611+
<g v-for="(arc, i) in currentDonut" :filter="getBlurFilter(i)">
597612
<text
598613
:data-cy="`donut-datalabel-value-${i}`"
599614
v-if="isArcBigEnough(arc) && mutableConfig.dataLabels.show"
@@ -603,7 +618,7 @@ defineExpose({
603618
:fill="arc.color"
604619
:font-size="donutConfig.style.chart.layout.labels.percentage.fontSize * 0.8"
605620
font-family="Arial"
606-
:class="!defaultConfig.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? '' : 'vue-ui-donut-blur'"
621+
:filter="!defaultConfig.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? ``: `url(#blur_${uid})`"
607622
@click="selectDatapoint(arc, i)"
608623
>
609624
⬤
@@ -778,8 +793,4 @@ path {
778793
width:100%;
779794
}
780795
781-
.vue-ui-donut-blur {
782-
filter: blur(3px) opacity(50%) grayscale(100%);
783-
transition: all 0.15s ease-in-out;
784-
}
785796
</style>

‎src/components/vue-ui-nested-donuts.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -316,15 +316,15 @@ function isArcBigEnough(arc) {
316316
return arc.proportion * 100 > donutConfig.value.style.chart.layout.labels.dataLabels.hideUnderValue;
317317
}
318318
319-
function blurClass(arc, index) {
319+
function getBlurFilter(arc, index) {
320320
if (!donutConfig.value.useBlurOnHover) {
321321
return '';
322322
}
323323
if (donutConfig.value.style.chart.tooltip.showAllItemsAtIndex && segregated.value.length === 0) {
324324
if ([null, undefined].includes(selectedDatapointIndex.value) || selectedDatapointIndex.value === index) {
325325
return ''
326326
} else {
327-
return 'vue-ui-nested-donuts-blur'
327+
return `url(#blur_${uid.value})`;
328328
}
329329
}
330330
if (!donutConfig.value.style.chart.tooltip.showAllItemsAtIndex || segregated.value.length) {
@@ -334,7 +334,7 @@ function blurClass(arc, index) {
334334
if(selectedDatapoint.value === arc.id) {
335335
return ''
336336
} else {
337-
return 'vue-ui-nested-donuts-blur'
337+
return `url(#blur_${uid.value})`;
338338
}
339339
}
340340
}
@@ -552,9 +552,9 @@ defineExpose({
552552
class="vue-ui-donut-arc-path"
553553
:d="arc.arcSlice"
554554
:fill="`${arc.color}CC`"
555-
:class="blurClass(arc, j)"
556555
:stroke="donutConfig.style.chart.backgroundColor"
557556
:stroke-width="donutConfig.style.chart.layout.donut.borderWidth"
557+
:filter="getBlurFilter(arc, j)"
558558
/>
559559
</g>
560560
</g>
@@ -567,6 +567,14 @@ defineExpose({
567567
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
568568
</radialGradient>
569569
</defs>
570+
571+
<defs>
572+
<filter :id="`blur_${uid}`" x="-50%" y="-50%" width="200%" height="200%">
573+
<feGaussianBlur in="SourceGraphic" :stdDeviation="5" :id="`blur_std_${uid}`" />
574+
<feColorMatrix type="saturate" values="0" />
575+
</filter>
576+
</defs>
577+
570578
<g v-if="donutConfig.style.chart.useGradient">
571579
<g v-for="(gradient, i) in gradientSets">
572580
<path
@@ -599,7 +607,7 @@ defineExpose({
599607
<!-- DATALABELS -->
600608
<g v-if="donutConfig.style.chart.layout.labels.dataLabels.show">
601609
<g v-for="(item, i) in mutableDataset">
602-
<g v-for="(arc, j) in item.donut">
610+
<g v-for="(arc, j) in item.donut" :filter="getBlurFilter(arc, j)">
603611
<text
604612
v-if="isArcBigEnough(arc) && mutableConfig.dataLabels.show && donutConfig.style.chart.layout.labels.dataLabels.showPercentage"
605613
:text-anchor="calcMarkerOffsetX(arc, true).anchor"
@@ -766,11 +774,6 @@ path {
766774
}
767775
}
768776
769-
.vue-ui-nested-donuts-blur {
770-
filter: blur(3px) opacity(50%) grayscale(100%);
771-
transition: all 0.15s ease-in-out;
772-
}
773-
774777
.vue-ui-nested-donuts-legend {
775778
display: grid;
776779
grid-template-columns: repeat(2, 1fr);

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,14 @@ const table = computed(() => {
380380
return { head, body };
381381
});
382382
383+
function getBlurFilter(index) {
384+
if (waffleConfig.value.useBlurOnHover && ![null, undefined].includes(selectedSerie.value) && selectedSerie.value !== index) {
385+
return `url(#blur_${uid.value})`;
386+
} else {
387+
return '';
388+
}
389+
}
390+
383391
const __to__ = ref(null);
384392
385393
function showSpinnerPdf() {
@@ -584,6 +592,12 @@ defineExpose({
584592
</g>
585593

586594
<!-- RECTS -->
595+
<defs>
596+
<filter :id="`blur_${uid}`" x="-50%" y="-50%" width="200%" height="200%">
597+
<feGaussianBlur in="SourceGraphic" :stdDeviation="5" :id="`blur_std_${uid}`" />
598+
<feColorMatrix type="saturate" values="0" />
599+
</filter>
600+
</defs>
587601
<!-- CUSTOM CELLS SLOTS -->
588602
<template v-if="waffleConfig.useCustomCells">
589603
<foreignObject
@@ -610,10 +624,10 @@ defineExpose({
610624
fill="white"
611625
:stroke="waffleConfig.style.chart.layout.rect.stroke"
612626
:stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
627+
:filter="getBlurFilter(rects[i].serieIndex)"
613628
/>
614629
<rect
615630
v-for="(position, i) in positions"
616-
:class="{'vue-ui-waffle-blur': waffleConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && rects[i].serieIndex !== selectedSerie}"
617631
:rx="waffleConfig.style.chart.layout.rect.rounded ? waffleConfig.style.chart.layout.rect.rounding : 0"
618632
:x="position.x"
619633
:y="position.y"
@@ -622,6 +636,7 @@ defineExpose({
622636
:fill="waffleConfig.style.chart.layout.rect.useGradient && waffleConfig.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${uid}_${i})` : rects[i].color"
623637
:stroke="waffleConfig.style.chart.layout.rect.stroke"
624638
:stroke-width="waffleConfig.style.chart.layout.rect.strokeWidth"
639+
:filter="getBlurFilter(rects[i].serieIndex)"
625640
/>
626641
</template>
627642

@@ -633,6 +648,7 @@ defineExpose({
633648
:y="position.y + waffleConfig.style.chart.layout.labels.captions.offsetY"
634649
:height="absoluteRectDimension"
635650
:width="absoluteRectDimension * waffleConfig.style.chart.layout.grid.size"
651+
:filter="getBlurFilter(rects[i].serieIndex)"
636652
>
637653
<div class="vue-ui-waffle-caption" :style="`height: 100%; width: 100%; font-size:${waffleConfig.style.chart.layout.labels.captions.fontSize}px;display:flex;align-items:center;justify-content:flex-start;padding: 0 ${absoluteRectDimension / 12}px;color:${adaptColorToBackground(rects[i].color)};gap:2px`">
638654
<span v-if="waffleConfig.style.chart.layout.labels.captions.showSerieName">
@@ -784,9 +800,4 @@ defineExpose({
784800
text-align:center;
785801
width:100%;
786802
}
787-
788-
.vue-ui-waffle-blur {
789-
filter: blur(3px) opacity(50%) grayscale(100%);
790-
transition: all 0.15s ease-in-out;
791-
}
792803
</style>

0 commit comments

Comments
 (0)