Add `initial` property to animation callbacks (#8926)

diff --git a/docs/configuration/animations.md b/docs/configuration/animations.md
index 7000f125f6ce55adbb105ebae34d196c491c383d..36ac0e7c11c125f974a943bf22879be6605db19b 100644 (file)
--- a/docs/configuration/animations.md
+++ b/docs/configuration/animations.md
@@ -252,14 +252,17 @@ The callback is passed the following object:
 
 ```javascript
 {
-    // Chart object
-    chart: Chart,
+  // Chart object
+  chart: Chart,
 
-    // Number of animations still in progress
-    currentStep: number,
+  // Number of animations still in progress
+  currentStep: number,
 
-    // Total number of animations at the start of current animation
-    numSteps: number,
+  // `true` for the initial animation of the chart
+  initial: boolean,
+
+  // Total number of animations at the start of current animation
+  numSteps: number,
 }
 ```
 

diff --git a/docs/samples/.eslintrc.yml b/docs/samples/.eslintrc.yml
new file mode 100644 (file)
index 0000000..b4e00d7
--- /dev/null
+++ b/docs/samples/.eslintrc.yml
@@ -0,0 +1,2 @@
+rules:
+  no-console: "off"

diff --git a/docs/samples/advanced/progress-bar.md b/docs/samples/advanced/progress-bar.md
index 26c4675ca138479e75a036841d06dbdb43834d04..1ba5554dbafc68fbbfb59f1a82dfbbc4572c5443 100644 (file)
--- a/docs/samples/advanced/progress-bar.md
+++ b/docs/samples/advanced/progress-bar.md
@@ -1,5 +1,11 @@
 # Animation Progress Bar
 
+## Initial animation
+
+<progress id="initialProgress" max="1" value="0" style="width: 100%"></progress>
+
+## Other animations
+
 <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
 
 ```js chart-editor
@@ -67,6 +73,7 @@ const actions = [
 // </block:actions>
 
 // <block:setup:1>
+const initProgress = document.getElementById('initialProgress');
 const progress = document.getElementById('animationProgress');
 
 const DATA_COUNT = 7;
@@ -99,11 +106,19 @@ const config = {
   options: {
     animation: {
       duration: 2000,
-      onProgress: function(animation) {
-        progress.value = animation.currentStep / animation.numSteps;
+      onProgress: function(context) {
+        if (context.initial) {
+          initProgress.value = context.currentStep / context.numSteps;
+        } else {
+          progress.value = context.currentStep / context.numSteps;
+        }
       },
-      onComplete: function() {
-        //
+      onComplete: function(context) {
+        if (context.initial) {
+          console.log('Initial animation finished');
+        } else {
+          console.log('animation finished');
+        }
       }
     },
     interaction: {
@@ -124,5 +139,6 @@ const config = {
 module.exports = {
   actions: actions,
   config: config,
+  output: 'console.log output is displayed here'
 };
 ```

diff --git a/src/core/core.animator.js b/src/core/core.animator.js
index 32d2934f20ecc3e447de41771be043ccbd7c0b5e..aab04e0188170ef7cf5888c08bc8c1d5bac40534 100644 (file)
--- a/src/core/core.animator.js
+++ b/src/core/core.animator.js
@@ -26,6 +26,7 @@ export class Animator {
 
     callbacks.forEach(fn => fn({
       chart,
+      initial: anims.initial,
       numSteps,
       currentStep: Math.min(date - anims.start, numSteps)
     }));
@@ -95,6 +96,7 @@ export class Animator {
       if (!items.length) {
         anims.running = false;
         me._notify(chart, anims, date, 'complete');
+        anims.initial = false;
       }
 
       remaining += items.length;
@@ -116,6 +118,7 @@ export class Animator {
     if (!anims) {
       anims = {
         running: false,
+        initial: true,
         items: [],
         listeners: {
           complete: [],