Merge pull request #207 from graphieros/ft-donut-animations

Ft donut animations

Author: graphieros

TestingArena/ArenaVueUiDonut.vue

@@ -66,7 +66,13 @@ function alterDataset() {
 }
 
 const model = ref([
-    { key: 'type', def: 'classic', type: 'select', options: ['classic', 'polar']},
+    { key: 'type', def: 'polar', type: 'select', options: ['classic', 'polar']},
+    { key: 'serieToggleAnimation.show', def: true, type: 'checkbox'},
+    { key: 'serieToggleAnimation.durationMs', def: 500, type: 'number', min: 0, max: 5000, step: 100},
+    { key: 'loadAnimation.show', def: true, type: 'checkbox'},
+    { key: 'loadAnimation.durationMs', def: 1000, type: 'number', min: 0, max: 5000, step: 500},
+    { key: 'loadAnimation.staggerMs', def: 50, type: 'number', min: 0, max: 1000, step: 25},
+
     { key: 'responsive', def: false, type: 'checkbox'},
     { key: 'userOptions.show', def: true, type: 'checkbox', label: 'showUserOptions', category: 'general' },
     { key: 'userOptions.buttons.pdf', def: true, type: 'checkbox' },
@@ -134,9 +140,9 @@ const model = ref([
     { key: 'style.chart.layout.labels.hollow.average.value.suffix', def: '', type: 'text', label: ['hollow', 'average', 'value', 'is', 'suffix'], category: 'labels' },
     { key: 'style.chart.layout.labels.hollow.average.value.offsetY', def: 0, type: 'number', min: -100, max: 100, label: ['hollow', 'average', 'value', 'is', 'offsetY'], category: 'labels' },
     { 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: 6, type: 'range', min: 3, max: 130, label: 'thickness', category: 'donut' },
+    { 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' },

cypress/fixtures/vdui-components.js

@@ -520,6 +520,9 @@ export const components = [
             { name: "C", values: [3], comment: "C-C" },
         ],
         config: {
+            loadAnimation: {
+                show: false,
+            },
             style: {
                 chart: {
                     comments: {

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.10.2",
+  "version": "2.10.3-beta.3",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [

package.json

@@ -125,7 +125,7 @@ const components = ref([             //------|
  * Modify the index to display a component
  * [0] = VueUiXy 
  */
- const selectedComponent = ref(components.value[37]);
+ const selectedComponent = ref(components.value[1]);
 
 /**
  * Legacy testing arena where some non chart components can be tested

src/App.vue

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