VueUiDonut VueUiOnion add blurOnHover config option

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.7",
+  "version": "1.9.8",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -340,7 +340,8 @@ defineExpose({
                 class="vue-ui-donut-arc-path"
                 :data-cy="`donut-arc-${i}`"
                 :d="arc.path" 
-                :stroke="`${arc.color}CC`" 
+                :stroke="`${arc.color}CC`"
+                :class="!defaultConfig.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? '' : 'vue-ui-donut-blur'"
                 :stroke-width="defaultConfig.style.chart.layout.donut.strokeWidth" 
                 fill="none"
             />
@@ -675,4 +676,10 @@ path {
 .vue-ui-dna * {
     animation: none !important;
 }
+
+.vue-ui-donut-blur {
+    filter: blur(3px) opacity(50%) grayscale(100%);
+    transition: all 0.15s ease-in-out;
+}
+
 </style>

src/components/vue-ui-donut.vue

@@ -179,6 +179,8 @@ function closeDetails(){
     }
 }
 
+const selectedSerie = ref(undefined);
+
 defineExpose({
     getData,
     generatePdf,
@@ -298,13 +300,13 @@ defineExpose({
                 :stroke-dasharray="onion.path.bgDashArray"
                 :stroke-dashoffset="onion.path.fullOffset"
                 stroke-linecap="round"
-                class="vue-ui-onion-path"
+                :class="{'vue-ui-onion-path': true, 'vue-ui-onion-blur': onionConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && selectedSerie !== i}"
                 style="transform:rotate(-90deg);transform-origin: 50% 50%"
             />
 
             <!-- TRACKS -->
             <circle 
-                v-for="onion in mutableDataset" 
+                v-for="(onion, i) in mutableDataset" 
                 :cx="drawableArea.centerX" 
                 :cy="drawableArea.centerY" 
                 :r="onion.radius" 
@@ -313,11 +315,31 @@ defineExpose({
                 fill="none"
                 :stroke-dasharray="onion.path.dashArray"
                 :stroke-dashoffset="onion.path.dashOffset"
-                class="vue-ui-onion-path"
+                :class="{'vue-ui-onion-path': true, 'vue-ui-onion-blur': onionConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && selectedSerie !== i}"
                 stroke-linecap="round"
                 style="transform:rotate(-90deg);transform-origin: 50% 50%"
             />
 
+            <!-- TOOLTIP TRAPS -->
+            <circle 
+                v-for="(onion, i) in mutableDataset" 
+                :data-cy="`onion-track-${i}`"
+                :cx="drawableArea.centerX" 
+                :cy="drawableArea.centerY" 
+                :r="onion.radius" 
+                stroke="transparent" 
+                :stroke-width="Math.max(onionSkin.track, onionSkin.gutter)" 
+                fill="none"
+                :stroke-dasharray="onion.path.bgDashArray"
+                :stroke-dashoffset="onion.path.fullOffset"
+                stroke-linecap="round"
+                class="vue-ui-onion-path"
+                style="transform:rotate(-90deg);transform-origin: 50% 50%"
+                @mouseenter="selectedSerie = i"
+                @mouseleave="selectedSerie = undefined"
+            />
+
+
             <!-- GRADIENT -->
             <g v-if="onionConfig.style.chart.useGradient">            
                 <circle 
@@ -555,4 +577,9 @@ circle {
 .vue-ui-dna * {
     animation: none !important;
 }
+
+.vue-ui-onion-blur {
+    filter: blur(3px) opacity(50%) grayscale(100%);
+    transition: all 0.15s ease-in-out;
+}
 </style>

src/components/vue-ui-onion.vue

@@ -303,6 +303,7 @@
     },
     "vue_ui_donut": {
         "useCssAnimation": true,
+        "useBlurOnHover": true,
         "style": {
             "fontFamily": "inherit",
             "chart": {
@@ -1008,6 +1009,7 @@
     },
     "vue_ui_onion": {
         "useCssAnimation": true,
+        "useBlurOnHover": true,
         "style": {
             "fontFamily": "inherit",
             "chart": {

src/default_configs.json

@@ -1133,6 +1133,7 @@ declare module 'vue-data-ui' {
 
     export type VueUiDonutConfig = {
         useCssAnimation?: boolean;
+        useBlurOnHover?: boolean;
         style?: {
             fontFamily?: string;
             chart?: {