From ca50287a76af74c7f25015f704809f49ca425725 Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Sat, 17 Apr 2021 15:09:22 +0300
Subject: [PATCH] Add `initial` property to animation callbacks (#8926)

---
 docs/configuration/animations.md      | 15 +++++++++------
 docs/samples/.eslintrc.yml            |  2 ++
 docs/samples/advanced/progress-bar.md | 24 ++++++++++++++++++++----
 src/core/core.animator.js             |  3 +++
 4 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 docs/samples/.eslintrc.yml

diff --git a/docs/configuration/animations.md b/docs/configuration/animations.md
index 7000f125f6c..36ac0e7c11c 100644
--- 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
index 00000000000..b4e00d7d230
--- /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 26c4675ca13..1ba5554dbaf 100644
--- 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 32d2934f20e..aab04e01881 100644
--- 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: [],