Add initial property to animation callbacks (#8926)

chartjs · Apr 17, 2021 · ca50287 · ca50287
1 parent c56cded
commit ca50287
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git 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
@@ -0,0 +1,2 @@
+rules:
+  no-console: "off"
diff --git 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
@@ -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: [],