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

chartjs · Jan 13, 2018 · 37ec838 · 37ec838
1 parent 2d7f0a4
commit 37ec838
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 2 deletions.
diff --git 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
@@ -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',