From b19fc0169facffc2a9a6715d98ccfc3dfba00e09 Mon Sep 17 00:00:00 2001
From: Dan Onoshko <danon0404@gmail.com>
Date: Fri, 5 Aug 2022 18:59:36 +0700
Subject: [PATCH] fix: pass timestamp to ticks callback (#10540)

* fix: pass timestamp to ticks callback
* docs: edit labelling page
* docs: additions to the migration guide
---
 docs/axes/labelling.md         |  2 +-
 docs/migration/v4-migration.md |  1 +
 src/scales/scale.time.js       | 13 +++++++---
 test/specs/scale.time.tests.js | 46 ++++++++++++++++++++++++++++------
 4 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md
index 5f613b6f8..134979ac3 100644
--- a/docs/axes/labelling.md
+++ b/docs/axes/labelling.md
@@ -22,7 +22,7 @@ To do this, you need to override the `ticks.callback` method in the axis configu
 
 The method receives 3 arguments:
 
-* `value` - the tick value in the **internal data format** of the associated scale.
+* `value` - the tick value in the **internal data format** of the associated scale. For time scale, it is a timestamp.
 * `index` - the tick index in the ticks array.
 * `ticks` - the array containing all of the [tick objects](../api/interfaces/Tick).
 
diff --git a/docs/migration/v4-migration.md b/docs/migration/v4-migration.md
index 252488ca8..8a36b48a0 100644
--- a/docs/migration/v4-migration.md
+++ b/docs/migration/v4-migration.md
@@ -11,6 +11,7 @@ A number of changes were made to the configuration options passed to the `Chart`
 #### Specific changes
 
 * The radialLinear grid indexable and scriptable options don't decrease the index of the specified grid line anymore.
+* Ticks callback on time scale now receives timestamp instead of a formatted label.
 
 #### Type changes
 * The order of the `ChartMeta` parameters have been changed from `<Element, DatasetElement, Type>` to `<Type, Element, DatasetElement>`
diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js
index 04c1ec38e..a3940472a 100644
--- a/src/scales/scale.time.js
+++ b/src/scales/scale.time.js
@@ -232,6 +232,8 @@ export default class TimeScale extends Scale {
        */
       source: 'auto',
 
+      callback: false,
+
       major: {
         enabled: false
       }
@@ -510,6 +512,12 @@ export default class TimeScale extends Scale {
 	 */
   _tickFormatFunction(time, index, ticks, format) {
     const options = this.options;
+    const formatter = options.ticks.callback;
+
+    if (formatter) {
+      return call(formatter, [time, index, ticks], this);
+    }
+
     const formats = options.time.displayFormats;
     const unit = this._unit;
     const majorUnit = this._majorUnit;
@@ -517,9 +525,8 @@ export default class TimeScale extends Scale {
     const majorFormat = majorUnit && formats[majorUnit];
     const tick = ticks[index];
     const major = majorUnit && majorFormat && tick && tick.major;
-    const label = this._adapter.format(time, format || (major ? majorFormat : minorFormat));
-    const formatter = options.ticks.callback;
-    return formatter ? call(formatter, [label, index, ticks], this) : label;
+
+    return this._adapter.format(time, format || (major ? majorFormat : minorFormat));
   }
 
   /**
diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
index 70abc9bbc..3629dc250 100644
--- a/test/specs/scale.time.tests.js
+++ b/test/specs/scale.time.tests.js
@@ -73,6 +73,7 @@ describe('Time scale tests', function() {
       },
       ticks: {
         source: 'auto',
+        callback: false,
         major: {
           enabled: false
         }
@@ -353,8 +354,8 @@ describe('Time scale tests', function() {
                 }
               },
               ticks: {
-                callback: function(value) {
-                  return '<' + value + '>';
+                callback: function(_, i) {
+                  return '<' + i + '>';
                 }
               }
             }
@@ -368,21 +369,21 @@ describe('Time scale tests', function() {
       var labels = getLabels(this.scale);
 
       expect(labels.length).toEqual(21);
-      expect(labels[0]).toEqual('<8:00:00>');
-      expect(labels[labels.length - 1]).toEqual('<8:01:00>');
+      expect(labels[0]).toEqual('<0>');
+      expect(labels[labels.length - 1]).toEqual('<60>');
     });
 
     it('should update ticks.callback correctly', function() {
       var chart = this.chart;
-      chart.options.scales.x.ticks.callback = function(value) {
-        return '{' + value + '}';
+      chart.options.scales.x.ticks.callback = function(_, i) {
+        return '{' + i + '}';
       };
       chart.update();
 
       var labels = getLabels(this.scale);
       expect(labels.length).toEqual(21);
-      expect(labels[0]).toEqual('{8:00:00}');
-      expect(labels[labels.length - 1]).toEqual('{8:01:00}');
+      expect(labels[0]).toEqual('{0}');
+      expect(labels[labels.length - 1]).toEqual('{60}');
     });
   });
 
@@ -1260,4 +1261,33 @@ describe('Time scale tests', function() {
 
     expect(chartOptions).toEqual(chart.options);
   });
+
+  it('should pass timestamp to ticks callback', () => {
+    let callbackValue;
+    window.acquireChart({
+      type: 'line',
+      data: {
+        datasets: [{
+          xAxisID: 'x',
+          data: [0, 0]
+        }],
+        labels: ['2015-01-01T20:00:00', '2015-01-01T20:01:00']
+      },
+      options: {
+        scales: {
+          x: {
+            type: 'time',
+            ticks: {
+              callback(value) {
+                callbackValue = value;
+                return value;
+              }
+            }
+          }
+        }
+      }
+    });
+
+    expect(typeof callbackValue).toBe('number');
+  });
 });