Format the label in the time scale tooltip (#5095)

diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js
index 90904f9e6f0e7b7ae9be4fe22e1ef477c6b7de2f..4892eea9996c2070c154c068365ace6878ce1fc1 100644 (file)
--- a/src/scales/scale.time.js
+++ b/src/scales/scale.time.js
@@ -403,6 +403,27 @@ function ticksFromTimestamps(values, majorUnit) {
        return ticks;
 }
 
+function determineLabelFormat(data, timeOpts) {
+       var i, momentDate, hasTime;
+       var ilen = data.length;
+
+       // find the label with the most parts (milliseconds, minutes, etc.)
+       // format all labels with the same level of detail as the most specific label
+       for (i = 0; i < ilen; i++) {
+               momentDate = momentify(data[i], timeOpts);
+               if (momentDate.millisecond() !== 0) {
+                       return 'MMM D, YYYY h:mm:ss.SSS a';
+               }
+               if (momentDate.second() !== 0 || momentDate.minute() !== 0 || momentDate.hour() !== 0) {
+                       hasTime = true;
+               }
+       }
+       if (hasTime) {
+               return 'MMM D, YYYY h:mm:ss a';
+       }
+       return 'MMM D, YYYY';
+}
+
 module.exports = function(Chart) {
 
        var defaultConfig = {
@@ -621,6 +642,7 @@ module.exports = function(Chart) {
                        me._majorUnit = determineMajorUnit(me._unit);
                        me._table = buildLookupTable(me._timestamps.data, min, max, options.distribution);
                        me._offsets = computeOffsets(me._table, ticks, min, max, options);
+                       me._labelFormat = determineLabelFormat(me._timestamps.data, timeOpts);
 
                        return ticksFromTimestamps(ticks, me._majorUnit);
                },
@@ -636,10 +658,13 @@ module.exports = function(Chart) {
                                label = me.getRightValue(value);
                        }
                        if (timeOpts.tooltipFormat) {
-                               label = momentify(label, timeOpts).format(timeOpts.tooltipFormat);
+                               return momentify(label, timeOpts).format(timeOpts.tooltipFormat);
+                       }
+                       if (typeof label === 'string') {
+                               return label;
                        }
 
-                       return label;
+                       return momentify(label, timeOpts).format(me._labelFormat);
                },
 
                /**

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
index e4c1739e6c579bce874afbaf8a9eb1ba917c3c45..964e25e080a2bea09ab305611ad73a814690553b 100755 (executable)
--- a/test/specs/scale.time.tests.js
+++ b/test/specs/scale.time.tests.js
@@ -584,6 +584,115 @@ describe('Time scale tests', function() {
                expect(xScale.getLabelForIndex(6, 0)).toBe('2015-01-10T12:00');
        });
 
+       it('should get the correct label when time is specified as a string', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       xAxisID: 'xScale0',
+                                       data: [{t: '2015-01-01T20:00:00', y: 10}, {t: '2015-01-02T21:00:00', y: 3}]
+                               }],
+                       },
+                       options: {
+                               scales: {
+                                       xAxes: [{
+                                               id: 'xScale0',
+                                               type: 'time',
+                                               position: 'bottom'
+                                       }],
+                               }
+                       }
+               });
+
+               var xScale = chart.scales.xScale0;
+               expect(xScale.getLabelForIndex(0, 0)).toBeTruthy();
+               expect(xScale.getLabelForIndex(0, 0)).toBe('2015-01-01T20:00:00');
+       });
+
+       it('should get the correct label for a timestamp with milliseconds', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       xAxisID: 'xScale0',
+                                       data: [
+                                               {t: +new Date('2018-01-08 05:14:23.234'), y: 10},
+                                               {t: +new Date('2018-01-09 06:17:43.426'), y: 3}
+                                       ]
+                               }],
+                       },
+                       options: {
+                               scales: {
+                                       xAxes: [{
+                                               id: 'xScale0',
+                                               type: 'time',
+                                               position: 'bottom'
+                                       }],
+                               }
+                       }
+               });
+
+               var xScale = chart.scales.xScale0;
+               var label = xScale.getLabelForIndex(0, 0);
+               expect(label).toEqual('Jan 8, 2018 5:14:23.234 am');
+       });
+
+       it('should get the correct label for a timestamp with time', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       xAxisID: 'xScale0',
+                                       data: [
+                                               {t: +new Date('2018-01-08 05:14:23'), y: 10},
+                                               {t: +new Date('2018-01-09 06:17:43'), y: 3}
+                                       ]
+                               }],
+                       },
+                       options: {
+                               scales: {
+                                       xAxes: [{
+                                               id: 'xScale0',
+                                               type: 'time',
+                                               position: 'bottom'
+                                       }],
+                               }
+                       }
+               });
+
+               var xScale = chart.scales.xScale0;
+               var label = xScale.getLabelForIndex(0, 0);
+               expect(label).toEqual('Jan 8, 2018 5:14:23 am');
+       });
+
+       it('should get the correct label for a timestamp representing a date', function() {
+               var chart = window.acquireChart({
+                       type: 'line',
+                       data: {
+                               datasets: [{
+                                       xAxisID: 'xScale0',
+                                       data: [
+                                               {t: +new Date('2018-01-08 00:00:00'), y: 10},
+                                               {t: +new Date('2018-01-09 00:00:00'), y: 3}
+                                       ]
+                               }],
+                       },
+                       options: {
+                               scales: {
+                                       xAxes: [{
+                                               id: 'xScale0',
+                                               type: 'time',
+                                               position: 'bottom'
+                                       }],
+                               }
+                       }
+               });
+
+               var xScale = chart.scales.xScale0;
+               var label = xScale.getLabelForIndex(0, 0);
+               expect(label).toEqual('Jan 8, 2018');
+       });
+
        it('should get the correct pixel for only one data in the dataset', function() {
                var chart = window.acquireChart({
                        type: 'line',