Minor fixes

Author: graphieros

package-lock.json

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

package.json

@@ -2635,6 +2635,7 @@ const moodRadarConfig = ref({
   })
 
 const donutConfig = ref({
+  useCssAnimation: true,
   style: {
     chart: {
       layout: {
@@ -3302,7 +3303,7 @@ const quickDatasetLine = ref([
   },
   {
     name: 'Serie2',
-    values: [5, 6, 7, 6, -10, 8, 7, 8, 9]
+    values: [5, 6, 7, 6, 5, 8, 7, 8, 9]
   },
   {
     name: 'Serie3',
@@ -3311,7 +3312,7 @@ const quickDatasetLine = ref([
 ])
 
 
-const quickDatasetSimpleLine = ref([1, 2, 3, 5, -8, 13, 21, 34, 55, 89])
+const quickDatasetSimpleLine = ref([1, 2, 3, 5, 8, 13, 21, 34, 55, 89])
 const quickDatasetSimpleBar = ref([1, 2, -10, -5, 8])
 
 const quickDatasetBar = ref([
@@ -3321,7 +3322,7 @@ const quickDatasetBar = ref([
   },
   {
     name: 'Serie2',
-    values: [5, 6, 7, 6, 7]
+    values: [5, 6, -7, 6, 7]
   },
   {
     name: 'Serie3',

src/App.vue

@@ -144,6 +144,7 @@ function getData() {
 const segregated = ref([]);
 const rafUp = ref(null);
 const rafDown = ref(null);
+const isAnimating = ref(false);
 
 function segregate(index) {
     const target = immutableSet.value.find((_, idx) => idx === index)
@@ -164,8 +165,10 @@ function segregate(index) {
                     } else {
                         return ds
                     }
-                })
+                });
+                isAnimating.value = false;
             } else {
+                isAnimating.value = true;
                 initVal += (targetVal * 0.025);
                 mutableSet.value = mutableSet.value.map((ds, i) => {
                     if((index === i)) {
@@ -195,8 +198,10 @@ function segregate(index) {
                     } else {
                         return ds
                     }
-                })
+                });
+                isAnimating.value = false;
             } else {
+                isAnimating.value = true;
                 initVal /= 1.1;
                 mutableSet.value = mutableSet.value.map((ds, i) => {
                     if(index === i) {
@@ -463,8 +468,6 @@ const isSafari = computed(() => {
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 })
 
-console.log(isSafari.value)
-
 function selectDatapoint(datapoint, index) {
     emit('selectDatapoint', { datapoint, index })
 }
@@ -691,7 +694,7 @@ defineExpose({
             </text>
 
             <!-- DATALABELS -->
-            <g v-for="(arc, i) in currentDonut" :filter="getBlurFilter(i)" class="animated">
+            <g v-for="(arc, i) in currentDonut" :filter="getBlurFilter(i)" :class="{ 'animated': donutConfig.useCssAnimation}">
                 <g v-if="donutConfig.style.chart.layout.labels.dataLabels.useLabelSlots">
                     <foreignObject
                         :x="calcMarkerOffsetX(arc, true).anchor === 'end' ? calcMarkerOffsetX(arc).x - 120 : calcMarkerOffsetX(arc, true).anchor === 'middle' ? calcMarkerOffsetX(arc).x - 60 : calcMarkerOffsetX(arc).x"

src/components/vue-ui-donut.vue

@@ -229,7 +229,6 @@ const donut = computed(() => {
             id: `donut_${i}`
         }
     })
-    // .sort((a, b) => b.value - a.value)
     .map((ds, i) => {
         return {
             ...ds,
@@ -280,7 +279,6 @@ const donut = computed(() => {
 
             tooltipContent.value = `<div>${html}</div>`;
         }
-
         isTooltip.value = true;
     }
 
@@ -382,11 +380,11 @@ const line = computed(() => {
         maxSeries: Math.max(...ds.map(d => d.values.length))
     }
 
+    const scale = calculateNiceScale(extremes.min < 0 ? extremes.min : 0, extremes.max, quickConfig.value.xyScaleSegments)
     const absoluteMin = extremes.min < 0 ? Math.abs(extremes.min) : 0;
-    const absoluteZero = drawingArea.bottom - (absoluteMin / (extremes.max + absoluteMin) * drawingArea.height)
+    const absoluteZero = drawingArea.bottom - (absoluteMin / (scale.max + absoluteMin) * drawingArea.height)
     const slotSize = drawingArea.width / extremes.maxSeries;
 
-    const scale = calculateNiceScale(extremes.min < 0 ? extremes.min : 0, extremes.max, quickConfig.value.xyScaleSegments)
 
     const yLabels = scale.ticks.map(t => {
         return {
@@ -402,7 +400,7 @@ const line = computed(() => {
             coordinates: d.values.map((v,j) => {
                 return {
                     x: drawingArea.left + (slotSize * (j + 1)) - (slotSize / 2),
-                    y: drawingArea.bottom - (((v + absoluteMin) / (extremes.max + absoluteMin)) * drawingArea.height),
+                    y: drawingArea.bottom - (((v + absoluteMin) / (scale.max + absoluteMin)) * drawingArea.height),
                     value: v
                 }
             })
@@ -537,11 +535,11 @@ const bar = computed(() => {
         maxSeries: Math.max(...ds.filter(d => !segregated.value.includes(d.id)).map(d => d.values.length))
     }
 
+    const scale = calculateNiceScale(extremes.min < 0 ? extremes.min : 0, extremes.max, quickConfig.value.xyScaleSegments)
     const absoluteMin = extremes.min < 0 ? Math.abs(extremes.min) : 0;
-    const absoluteZero = drawingArea.bottom - (absoluteMin / (extremes.max + absoluteMin) * drawingArea.height)
+    const absoluteZero = drawingArea.bottom - (absoluteMin / (scale.max + absoluteMin) * drawingArea.height)
     const slotSize = drawingArea.width / extremes.maxSeries;
 
-    const scale = calculateNiceScale(extremes.min < 0 ? extremes.min : 0, extremes.max, quickConfig.value.xyScaleSegments)
 
     const yLabels = scale.ticks.map(t => {
         return {

src/components/vue-ui-quick-chart.vue

@@ -94,7 +94,7 @@ describe('<VueUiXy />', () => {
       cy.get(`[data-cy="xy-bar-progression-label-1"]`).should('contain', '-91.67%');
 
       cy.get(`[data-cy="xy-plot-progression-0"]`).should('exist');
-      cy.get(`[data-cy="xy-plot-progression-label-0"]`).should('contain', '100.00%');
+      cy.get(`[data-cy="xy-plot-progression-label-0"]`).should('contain', '100%');
 
       for(let i = 0; i < 10; i += 1) {
         cy.get(`[data-cy="xy-plot-0-${i}"]`).should('exist');

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

@@ -173,7 +173,11 @@
                             :font-size="chartConfig.chart.labels.fontSize"
                             :fill="serie.color"
                         >
-                            {{ `${(calcLinearProgression(serie.plots).trend * 100).toFixed(2)}%` }}
+                            {{  dataLabel({
+                                v: calcLinearProgression(serie.plots).trend * 100,
+                                s: '%',
+                                r: 2
+                            }) }}
                         </text>
                     </g>
                 </g>
@@ -223,7 +227,11 @@
                             :font-size="chartConfig.chart.labels.fontSize"
                             :fill="serie.color"
                         >
-                            {{ `${(calcLinearProgression(serie.plots).trend * 100).toFixed(2)}%` }}
+                            {{  dataLabel({
+                                v: calcLinearProgression(serie.plots).trend * 100,
+                                s: '%',
+                                r: 2
+                            }) }}
                         </text>
                     </g>
                 </g>
@@ -294,7 +302,11 @@
                             :font-size="chartConfig.chart.labels.fontSize"
                             :fill="serie.color"
                         >
-                            {{ `${(calcLinearProgression(serie.plots).trend * 100).toFixed(2)}%` }}
+                            {{  dataLabel({
+                                v: calcLinearProgression(serie.plots).trend * 100,
+                                s: '%',
+                                r: 2
+                            }) }}
                         </text>
                     </g>
                 </g>