Skip to content

Commit 02bb49b

Browse files
graphierosgraphieros
committed
Fix - VueUiTreemap - Fixed cell color disappearing when zooming on Safari
1 parent 2c578b8 commit 02bb49b

File tree

1 file changed

+60
-57
lines changed

1 file changed

+60
-57
lines changed

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

Lines changed: 60 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ onMounted(() => {
5959
}
6060
});
6161
62+
const isSafari = computed(() => {
63+
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
64+
})
65+
6266
const uid = ref(createUid());
6367
const defaultConfig = ref(mainConfig.vue_ui_treemap);
6468
const isPrinting = ref(false);
@@ -497,70 +501,69 @@ defineExpose({
497501

498502
<g v-for="(rect, i) in squarified">
499503
<defs v-if="treemapConfig.style.chart.layout.rects.gradient.show">
500-
<radialGradient :id="`tgrad_${rect.id}`" gradientTransform="translate(-1, -1) scale(2, 2)">
504+
<radialGradient :id="`tgrad_${rect.id}`" gradientTransform="translate(-1, -1.000001) scale(2, 2)">
501505
<stop offset="18%" :stop-color="rect.color"/>
502506
<stop offset="100%" :stop-color="lightenHexColor(rect.color, treemapConfig.style.chart.layout.rects.gradient.intensity / 100)"/>
503507
</radialGradient>
504508
</defs>
505509
</g>
506510

507-
508-
<g v-for="(rect, i) in squarified">
509-
<rect
510-
:x="rect.x0"
511-
:y="rect.y0"
512-
:height="getHeight(rect)"
513-
:width="getWidth(rect)"
514-
:fill="treemapConfig.style.chart.layout.rects.gradient.show ? `url(#tgrad_${rect.id})` : rect.color"
515-
:rx="treemapConfig.style.chart.layout.rects.borderRadius"
516-
:stroke="selectedRect && selectedRect.id === rect.id ? treemapConfig.style.chart.layout.rects.selected.stroke : treemapConfig.style.chart.layout.rects.stroke"
517-
:stroke-width="selectedRect && selectedRect.id === rect.id ? treemapConfig.style.chart.layout.rects.selected.strokeWidth : treemapConfig.style.chart.layout.rects.strokeWidth"
518-
@click="zoom(rect)"
519-
@mouseenter="() => useTooltip({
520-
datapoint: rect,
521-
seriesIndex: i,
522-
})"
523-
@mouseleave="selectedRect = null; isTooltip = false"
524-
:style="`opacity:${selectedRect ? selectedRect.id === rect.id ? 1 : treemapConfig.style.chart.layout.rects.selected.unselectedOpacity : 1}`"
525-
class="vue-ui-treemap-rect"
526-
/>
527-
528-
<foreignObject
529-
:x="rect.x0"
530-
:y="rect.y0"
531-
:height="getHeight(rect)"
532-
:width="getWidth(rect)"
533-
class="vue-ui-treemap-cell-foreignObject"
534-
>
535-
<div style="width: 100%; height: 100%" class="vue-ui-treemap-cell">
536-
<div
537-
class="vue-ui-treemap-cell-default"
538-
v-if="treemapConfig.style.chart.layout.labels.showDefaultLabels && (rect.proportion > treemapConfig.style.chart.layout.labels.hideUnderProportion || isZoom)" :style="`width:calc(100% - ${calcFontSize(rect) / 1.5}px);text-align:left;line-height:${calcFontSize(rect) < 14 ? 14 : calcFontSize(rect)}px;padding:${calcFontSize(rect) / 3}px; color:${adaptColorToBackground(rect.color)}`"
539-
>
540-
<span :style="`width:100%;font-size:${calcFontSize(rect)}px;`">
541-
{{ rect.name }}
542-
</span><br>
543-
<span :style="`width:100%;font-size:${calcFontSize(rect)}px;`">
544-
{{ dataLabel({
545-
p: treemapConfig.style.chart.layout.labels.prefix,
546-
v: rect.value,
547-
s: treemapConfig.style.chart.layout.labels.suffix,
548-
r: treemapConfig.style.chart.layout.labels.rounding
549-
}) }}
550-
</span>
551-
</div>
552-
<slot
553-
name="rect"
554-
v-bind="{
555-
rect,
556-
shouldShow: rect.proportion > treemapConfig.style.chart.layout.labels.hideUnderProportion || isZoom,
557-
fontSize: calcFontSize(rect),
558-
isZoom,
559-
textColor: adaptColorToBackground(rect.color)
560-
}"/>
511+
<g v-for="(rect, i) in squarified">
512+
<rect
513+
:x="rect.x0"
514+
:y="rect.y0"
515+
:height="getHeight(rect)"
516+
:width="getWidth(rect)"
517+
:fill="isSafari ? rect.color : treemapConfig.style.chart.layout.rects.gradient.show ? `url(#tgrad_${rect.id})` : rect.color"
518+
:rx="treemapConfig.style.chart.layout.rects.borderRadius"
519+
:stroke="selectedRect && selectedRect.id === rect.id ? treemapConfig.style.chart.layout.rects.selected.stroke : treemapConfig.style.chart.layout.rects.stroke"
520+
:stroke-width="selectedRect && selectedRect.id === rect.id ? treemapConfig.style.chart.layout.rects.selected.strokeWidth : treemapConfig.style.chart.layout.rects.strokeWidth"
521+
@click="zoom(rect)"
522+
@mouseenter="() => useTooltip({
523+
datapoint: rect,
524+
seriesIndex: i,
525+
})"
526+
@mouseleave="selectedRect = null; isTooltip = false"
527+
:style="`opacity:${selectedRect ? selectedRect.id === rect.id ? 1 : treemapConfig.style.chart.layout.rects.selected.unselectedOpacity : 1}`"
528+
class="vue-ui-treemap-rect"
529+
/>
530+
531+
<foreignObject
532+
:x="rect.x0"
533+
:y="rect.y0"
534+
:height="getHeight(rect)"
535+
:width="getWidth(rect)"
536+
class="vue-ui-treemap-cell-foreignObject"
537+
>
538+
<div style="width: 100%; height: 100%" class="vue-ui-treemap-cell">
539+
<div
540+
class="vue-ui-treemap-cell-default"
541+
v-if="treemapConfig.style.chart.layout.labels.showDefaultLabels && (rect.proportion > treemapConfig.style.chart.layout.labels.hideUnderProportion || isZoom)" :style="`width:calc(100% - ${calcFontSize(rect) / 1.5}px);text-align:left;line-height:${calcFontSize(rect) < 14 ? 14 : calcFontSize(rect)}px;padding:${calcFontSize(rect) / 3}px; color:${adaptColorToBackground(rect.color)}`"
542+
>
543+
<span :style="`width:100%;font-size:${calcFontSize(rect)}px;`">
544+
{{ rect.name }}
545+
</span><br>
546+
<span :style="`width:100%;font-size:${calcFontSize(rect)}px;`">
547+
{{ dataLabel({
548+
p: treemapConfig.style.chart.layout.labels.prefix,
549+
v: rect.value,
550+
s: treemapConfig.style.chart.layout.labels.suffix,
551+
r: treemapConfig.style.chart.layout.labels.rounding
552+
}) }}
553+
</span>
561554
</div>
562-
</foreignObject>
563-
</g>
555+
<slot
556+
name="rect"
557+
v-bind="{
558+
rect,
559+
shouldShow: rect.proportion > treemapConfig.style.chart.layout.labels.hideUnderProportion || isZoom,
560+
fontSize: calcFontSize(rect),
561+
isZoom,
562+
textColor: adaptColorToBackground(rect.color)
563+
}"/>
564+
</div>
565+
</foreignObject>
566+
</g>
564567
<slot name="svg" v-bind="{ svg, isZoom, rect: selectedRect, config: treemapConfig }"/>
565568
</svg>
566569

0 commit comments

Comments
 (0)