VueUiSparkHistogram added optional animation; improved VueUiSparkline animation consistency

graphieros · graphieros · commit ad470753c3b9 · 2024-04-02T17:24:21.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.55",
+  "version": "2.0.56",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
@@ -965,6 +965,46 @@ const sparklineDataset2 = ref([
     period: "period2",
     value: 2,
   },
+  {
+    period: "period2",
+    value: 6,
+  },
+  {
+    period: "period2",
+    value: 3,
+  },
+  {
+    period: "period2",
+    value: 1,
+  },
+  {
+    period: "period2",
+    value: 5,
+  },
+  {
+    period: "period2",
+    value: 2,
+  },
+  {
+    period: "period2",
+    value: 8,
+  },
+  {
+    period: "period2",
+    value: 9,
+  },
+  {
+    period: "period2",
+    value: 3,
+  },
+  {
+    period: "period2",
+    value: 5,
+  },
+  {
+    period: "period2",
+    value: 2,
+  },
 
 ]);
 
@@ -1905,7 +1945,7 @@ const histoConfig = ref({
                 }
             },
             "bars": {
-              "shape": "star",
+              "shape": "square",
                 "strokeWidth": 0,
                 "colors": {
                     "positive": "#3366cc",
@@ -3100,7 +3140,7 @@ const kpiConfig = ref(
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
         <template #title>
           <BaseIcon name="chartTable"/>
           VueUiTableSparkline
@@ -3459,7 +3499,7 @@ const kpiConfig = ref(
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
         <template #title>
           <BaseIcon name="chartSparkline" />
           VueUiSparkline
@@ -3570,7 +3610,7 @@ const kpiConfig = ref(
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkhistogram)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkhistogram)">
         <template #title>
           <BaseIcon name="chartSparkHistogram" />
           VueUiSparkHistogram
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -82,6 +82,10 @@ const sparkBarConfig = computed(() => {
     return {
         style: {
             backgroundColor: radarConfig.value.style.chart.tooltip.backgroundColor,
+            animation: {
+                show: radarConfig.value.style.chart.tooltip.animation.show,
+                animationFrames: radarConfig.value.style.chart.tooltip.animation.animationFrames
+            },
             labels: {
                 fontSize: radarConfig.value.style.chart.tooltip.fontSize,
                 name: {
diff --git a/src/components/vue-ui-sparkhistogram.vue b/src/components/vue-ui-sparkhistogram.vue
@@ -128,6 +128,10 @@ function selectDatapoint(datapoint, index) {
     emits('selectDatapoint', { datapoint, index })
 }
 
+const animation = computed(() => {
+    return `${histoConfig.value.style.animation.speedMs}ms`
+})
+
 </script>
 
 <template>
@@ -166,15 +170,17 @@ function selectDatapoint(datapoint, index) {
                     :stroke="rect.stroke"
                     :stroke-width="histoConfig.style.bars.strokeWidth"
                     :rx="`${histoConfig.style.bars.borderRadius * rect.proportion / 12}%`"
+                    :class="{'vue-ui-sparkhistogram-shape' : histoConfig.style.animation.show }"
                 />
             </g>
-            <g v-else>
+            <g v-else>                
                 <Shape 
                     v-for="(rect, i) in computedDataset"
                     :plot="{ x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }"
                     :color="histoConfig.style.bars.colors.gradient.show ? rect.gradient : rect.color"
                     :shape="histoConfig.style.bars.shape"
                     :radius="rect.height * 0.4"
+                    :class="{'vue-ui-sparkhistogram-shape' : histoConfig.style.animation.show }"
                 />
             </g>
 
@@ -238,4 +244,27 @@ function selectDatapoint(datapoint, index) {
 
         </svg>
     </div>
-</template>
+</template>
+
+<style scoped>
+.vue-ui-sparkhistogram-shape {
+    animation: expand v-bind(animation) ease-in forwards;
+    transform-origin: center;
+    transform: scale(1, 0);
+}
+
+@keyframes expand {
+    80% {
+        transform: scale(1, 1.1);
+    }
+    90% {
+        transform: scale(1, 0.95);
+    }
+    95% {
+        transform: scale(1, 1.03);
+    }
+    100% {
+        transform: scale(1, 1);
+    }
+}
+</style>
diff --git a/src/components/vue-ui-sparkline.vue b/src/components/vue-ui-sparkline.vue
@@ -86,9 +86,9 @@ onMounted(() => {
         })
     }
 
-    if (sparklineConfig.value.style.animation.show) {
+    if (sparklineConfig.value.style.animation.show && props.dataset.length > 1) {
         safeDatasetCopy.value = [];
-        const chunks = sparklineConfig.value.style.animation.animationFrames;
+        const chunks = sparklineConfig.value.style.animation.animationFrames / props.dataset.length;
         let start = 0;
 
         function animate() {
diff --git a/src/components/vue-ui-table-sparkline.vue b/src/components/vue-ui-table-sparkline.vue
@@ -434,6 +434,10 @@ defineExpose({
                                 type: tableConfig.sparkline.type,
                                 style: {
                                     backgroundColor: tableConfig.tbody.backgroundColor,
+                                    animation: {
+                                        show: tableConfig.sparkline.animation.show,
+                                        animationFrames: tableConfig.sparkline.animation.animationFrames
+                                    },
                                     line: {
                                         color: tr.color,
                                         smooth: tableConfig.sparkline.smooth,
diff --git a/src/default_configs.json b/src/default_configs.json
@@ -745,7 +745,11 @@
                     "showPercentage": true,
                     "roundingValue": 0,
                     "roundingPercentage": 0,
-                    "customFormat": null
+                    "customFormat": null,
+                    "animation": {
+                        "show": true,
+                        "animationFrames": 60
+                    }
                 },
                 "legend": {
                     "show": true,
@@ -1683,7 +1687,7 @@
         "style": {
             "animation": {
                 "show": true,
-                "animationFrames": 60
+                "animationFrames": 360
             },
             "backgroundColor":"#FFFFFF",
             "fontFamily": "inherit",
@@ -2596,6 +2600,10 @@
         "style": {
             "backgroundColor":"#FFFFFF",
             "fontFamily":"inherit",
+            "animation": {
+                "show": true,
+                "speedMs": 500
+            },
             "layout": {
                 "height": 96,
                 "width": 640,
@@ -3202,7 +3210,11 @@
             "showArea": true,
             "strokeWidth": 3,
             "type": "line",
-            "smooth": true
+            "smooth": true,
+            "animation": {
+                "show": true,
+                "animationFrames": 360
+            }
         },
         "translations": {
             "serie": "Serie",
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -291,6 +291,10 @@ declare module 'vue-data-ui' {
             strokeWidth?: number;
             type?: "line" | "bar",
             smooth?: boolean;
+            animation?: {
+                show?: boolean;
+                animationFrames?: number;
+            };
         };
         translations?: {
             serie?: string;
@@ -983,6 +987,10 @@ declare module 'vue-data-ui' {
         style?: {
             backgroundColor?: string;
             fontFamily?: string;
+            animation?: {
+                show?: boolean;
+                speedMs?: number;
+            };
             layout?: {
                 height?: number;
                 width?: number;
@@ -2863,6 +2871,10 @@ declare module 'vue-data-ui' {
                     showPercentage?: boolean;
                     roundingValue?: number;
                     roundingPercentage?: number;
+                    animation?: {
+                        show?: boolean;
+                        animationFrames?: number;
+                    };
                     customFormat?: (params: VueUiTooltipParams<VueUiRadarDatapoint, VueUiRadarSeries, VueUiRadarConfig>) => string;
                 };
                 legend?: {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-data-ui",`
`3`	`3`	`"private": false,`
`4`		`- "version": "2.0.55",`
	`4`	`+ "version": "2.0.56",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"description": "A user-empowering data visualization Vue components library",`
`7`	`7`	`"keywords": [`