Fix - VueUiDonut - Mute transitions when startAnimation is running for polar mode

Author: graphieros

TestingArena/ArenaVueUiDonut.vue

@@ -141,7 +141,7 @@ const model = ref([
     { key: 'style.chart.layout.labels.hollow.average.value.rounding', def: 0, type: 'number', min: 0, max: 6, label: ['hollow', 'average', 'value', 'is', 'rounding'], category: 'labels' },
     { key: 'style.chart.layout.donut.strokeWidth', def: 64, type: 'range', min: 3, max: 130, label: 'thickness', category: 'donut' },
     { key: 'style.chart.layout.donut.borderWidth', def: 1, type: 'range', min: 0, max: 36, label: ['border', 'is', 'thickness'], category: 'donut' },
-    { key: 'style.chart.layout.donut.useShadow', def: false,  type: 'checkbox' },
+    { key: 'style.chart.layout.donut.useShadow', def: true,  type: 'checkbox' },
     { key: 'style.chart.layout.donut.shadowColor', def: '#1A1A1A', type: 'color' },
     { key: 'style.chart.legend.show', def: true, type: 'checkbox', label: 'show', category: 'legend' },
     { key: 'style.chart.legend.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'legend' },

package.json

@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}

src/components/vue-ui-donut.cy.js

@@ -69,10 +69,11 @@ describe('<VueUiDonut />', () => {
 				'path',
 				'pattern',
 				'patternIndex',
+				'seriesIndex',
 				'proportion',
 				'ratio',
 				'separator',
-				'seriesIndex',
+				'ghost',
 				'startX',
 				'startY',
 				'value'

src/components/vue-ui-donut.vue

@@ -291,6 +291,8 @@ const immutableSet = computed(() => {
                 absoluteValues: serie.values,
                 comment: serie.comment || '',
                 patternIndex: i,
+                seriesIndex: i,
+                ghost: false,
                 pattern: `pattern_${uid.value}_${i}`
             }
         })
@@ -957,25 +959,27 @@ defineExpose({
                 <path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path" :data-cy="`donut-arc-${i}`"
                     :d="arc.arcSlice" :fill="setOpacity(arc.color, 80)"
                     :stroke="FINAL_CONFIG.style.chart.backgroundColor"
-                    :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)" />
+                    :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)" 
+                        
+                />
             </template>
 
             <template v-if="total && FINAL_CONFIG.type === 'polar'">
                 <g v-if="currentDonut.length > 1">
                     <path v-for="(arc, i) in noGhostDonut" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
                         :d="polarAreas[i].path" fill="#FFFFFF" 
                         :style="{
-                            transition: isFirstLoad ? '' : 'all 0.1s ease-in-out'
+                            transition: isFirstLoad ? 'none' : 'all 0.1s ease-in-out'
                         }"
                     />
                     <g v-if="FINAL_CONFIG.style.chart.layout.donut.useShadow">
-                        <path data-cy="polar-shadow" v-for="(_arc, i) in currentDonut" class="vue-ui-donut-arc-path"
+                        <path data-cy="polar-shadow" v-for="(_arc, i) in noGhostDonut" class="vue-ui-donut-arc-path"
                             :d="polarAreas[i].path" :fill="'transparent'"
                             :stroke="FINAL_CONFIG.style.chart.backgroundColor"
                             :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
                             :filter="`url(#drop_shadow_${uid})`" 
                             :style="{
-                                transition: isFirstLoad ? '' : 'all 0.1s ease-in-out'
+                                transition: isFirstLoad ? 'none' : 'all 0.1s ease-in-out'
                             }"
                         />
                     </g>
@@ -988,7 +992,7 @@ defineExpose({
                             :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
                             :filter="getBlurFilter(i)"
                             :style="{
-                                transition: isFirstLoad ? '' : 'all 0.1s ease-in-out'
+                                transition: isFirstLoad ? 'none' : 'all 0.1s ease-in-out'
                             }"
                         />
                     </g>
@@ -998,7 +1002,7 @@ defineExpose({
                         :stroke="FINAL_CONFIG.style.chart.backgroundColor"
                         :stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)"
                         :style="{
-                            transition: isFirstLoad ? '' : 'all 0.1s ease-in-out'
+                            transition: isFirstLoad ? 'none' : 'all 0.1s ease-in-out'
                         }"
                     />
                 </g>
@@ -1023,7 +1027,8 @@ defineExpose({
             <circle data-cy="donut-gradient-hollow"
                 v-if="FINAL_CONFIG.style.chart.useGradient && FINAL_CONFIG.type === 'classic'" :cx="svg.width / 2"
                 :cy="svg.height / 2" :r="/* This might require adjustments */minSize <= 0 ? 10 : minSize"
-                :fill="`url(#gradient_${uid})`" />
+                :fill="`url(#gradient_${uid})`"
+            />
 
             <!-- TOOLTIP TRAPS -->
             <template v-if="total">