VueUiOnion improved gradient implementation

Author: graphieros

package-lock.json

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

package.json

@@ -4052,7 +4052,7 @@ function selectBar(bar) {
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_scatter)">
         <template #title>
           <BaseIcon name="chartScatter" />
           VueUiScatter
@@ -4151,7 +4151,7 @@ function selectBar(bar) {
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
         <template #title>
           <BaseIcon name="chartOnion" />
           VueUiOnion

src/App.vue

@@ -409,13 +409,13 @@ defineExpose({
         <!-- CHART -->
         <svg v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`max-width:100%;overflow:visible;background:${onionConfig.style.chart.backgroundColor};color:${onionConfig.style.chart.color}`" >
 
-            <defs>
+            <!-- <defs>
                 <radialGradient :id="`onion_gradient_${uid}`">
                     <stop offset="0%" :stop-color="`${convertColorToHex(onionConfig.style.chart.backgroundColor)}00`" />
                     <stop offset="90%" :stop-color="'#FFFFFF' + opacity[onionConfig.style.chart.gradientIntensity]" />
                     <stop offset="100%" :stop-color="`${convertColorToHex(onionConfig.style.chart.backgroundColor)}00`" />
                 </radialGradient>
-            </defs>
+            </defs> -->
 
             <!-- TITLE AS G -->
             <g v-if="onionConfig.style.chart.title.text && mutableConfig.inside && !isPrinting">
@@ -477,18 +477,26 @@ defineExpose({
                 style="transform:rotate(-90deg);transform-origin: 50% 50%"
             />
 
-
-
             <!-- GRADIENT -->
-            <g v-if="onionConfig.style.chart.useGradient">            
-                <circle 
-                    v-for="onion in mutableDataset" 
+            <defs>
+                <filter :id="`blur_${uid}`" x="-50%" y="-50%" width="200%" height="200%">
+                    <feGaussianBlur in="SourceGraphic" :stdDeviation="100 / onionConfig.style.chart.gradientIntensity" />
+                </filter>
+            </defs>
+
+            <g :filter="`url(#blur_${uid})`" v-if="onionConfig.style.chart.useGradient">
+                <circle
+                    v-for="(onion, i) in mutableDataset" 
                     :cx="drawableArea.centerX" 
                     :cy="drawableArea.centerY" 
-                    :r="onion.radius * 1.1" 
-                    stroke="none" 
-                    :fill="`url(#onion_gradient_${uid})`"
-                    style="transform:rotate(-90deg);transform-origin: 50% 50%"
+                    :r="onion.radius" 
+                    :stroke="`white`" 
+                    :stroke-width="onionSkin.track / 3" 
+                    fill="none"
+                    stroke-linecap="round"
+                    :stroke-dasharray="onion.path.dashArray"
+                    :stroke-dashoffset="onion.path.dashOffset"
+                    style="transform:rotate(-90deg);transform-origin: 50% 50%;"
                 />
             </g>
             

src/components/vue-ui-onion.vue

@@ -1206,7 +1206,7 @@
             "chart": {
                 "backgroundColor": "#FFFFFF",
                 "color": "#2D353C",
-                "useGradient": false,
+                "useGradient": true,
                 "gradientIntensity": 20,
                 "layout": {
                     "useDiv": true,