Fix overlapping auto-generated ticks on time scale (chartjs#6115)

exwm · May 9, 2019 · 19fb9a2 · 19fb9a2
1 parent 3aba96c
commit 19fb9a2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js
@@ -775,13 +775,20 @@ module.exports = Scale.extend({
 		var me = this;
 		var timeOpts = me.options.time;
 		var displayFormats = timeOpts.displayFormats;
+		var margins = me.margins;
 
 		// pick the longest format (milliseconds) for guestimation
 		var format = displayFormats[timeOpts.unit] || displayFormats.millisecond;
 
 		var exampleLabel = me.tickFormatFunction(exampleTime, 0, [], format);
 		var tickLabelWidth = me.getLabelWidth(exampleLabel);
-		var innerWidth = me.isHorizontal() ? me.width : me.height;
+
+		// Using margins instead of padding because padding is not calculated
+		// at this point (buildTicks). Margins are provided from previous calculation
+		// in layout steps 5/6
+		var innerWidth = me.isHorizontal()
+			? me.width - (margins.left + margins.right)
+			: me.height - (margins.top + margins.bottom);
 		var capacity = Math.floor(innerWidth / tickLabelWidth);
 
 		return capacity > 0 ? capacity : 1;

diff --git a/test/specs/scale.time.tests.js b/test/specs/scale.time.tests.js
@@ -668,8 +668,8 @@ describe('Time scale tests', function() {
 
 			expect(scale._ticks.map(function(tick) {
 				return tick.major;
-			})).toEqual([true, false, false, false, false, false, true]);
-			expect(scale.ticks).toEqual(['<8:00:00 pm>', '<8:00:10 pm>', '<8:00:20 pm>', '<8:00:30 pm>', '<8:00:40 pm>', '<8:00:50 pm>', '<8:01:00 pm>']);
+			})).toEqual([true, false, false, false, true]);
+			expect(scale.ticks).toEqual(['<8:00:00 pm>', '<8:00:15 pm>', '<8:00:30 pm>', '<8:00:45 pm>', '<8:01:00 pm>']);
 		});
 
 		it('should update ticks.callback correctly', function() {
@@ -680,7 +680,7 @@ describe('Time scale tests', function() {
 				return '{' + value + '}';
 			};
 			chart.update();
-			expect(scale.ticks).toEqual(['{8:00:00 pm}', '{8:00:10 pm}', '{8:00:20 pm}', '{8:00:30 pm}', '{8:00:40 pm}', '{8:00:50 pm}', '{8:01:00 pm}']);
+			expect(scale.ticks).toEqual(['{8:00:00 pm}', '{8:00:15 pm}', '{8:00:30 pm}', '{8:00:45 pm}', '{8:01:00 pm}']);
 		});
 	});
 
@@ -707,7 +707,7 @@ describe('Time scale tests', function() {
 								major: {
 									enabled: true,
 									callback: function(value) {
-										return '[' + value + ']';
+										return '[[' + value + ']]';
 									}
 								},
 								minor: {
@@ -728,8 +728,8 @@ describe('Time scale tests', function() {
 
 			expect(scale._ticks.map(function(tick) {
 				return tick.major;
-			})).toEqual([true, false, false, false, false, false, true]);
-			expect(scale.ticks).toEqual(['[8:00 pm]', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '[8:01 pm]']);
+			})).toEqual([true, false, false, false, true]);
+			expect(scale.ticks).toEqual(['[[8:00 pm]]', '(8:00:15 pm)', '(8:00:30 pm)', '(8:00:45 pm)', '[[8:01 pm]]']);
 		});
 
 		it('should only use ticks.minor callback if ticks.major.enabled is false', function() {
@@ -738,7 +738,7 @@ describe('Time scale tests', function() {
 
 			chart.options.scales.xAxes[0].ticks.major.enabled = false;
 			chart.update();
-			expect(scale.ticks).toEqual(['(8:00:00 pm)', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '(8:01:00 pm)']);
+			expect(scale.ticks).toEqual(['(8:00:00 pm)', '(8:00:15 pm)', '(8:00:30 pm)', '(8:00:45 pm)', '(8:01:00 pm)']);
 		});
 
 		it('should use ticks.callback if ticks.major.callback is omitted', function() {
@@ -747,7 +747,7 @@ describe('Time scale tests', function() {
 
 			chart.options.scales.xAxes[0].ticks.major.callback = undefined;
 			chart.update();
-			expect(scale.ticks).toEqual(['<8:00 pm>', '(8:00:10 pm)', '(8:00:20 pm)', '(8:00:30 pm)', '(8:00:40 pm)', '(8:00:50 pm)', '<8:01 pm>']);
+			expect(scale.ticks).toEqual(['<8:00 pm>', '(8:00:15 pm)', '(8:00:30 pm)', '(8:00:45 pm)', '<8:01 pm>']);
 		});
 
 		it('should use ticks.callback if ticks.minor.callback is omitted', function() {
@@ -756,7 +756,7 @@ describe('Time scale tests', function() {
 
 			chart.options.scales.xAxes[0].ticks.minor.callback = undefined;
 			chart.update();
-			expect(scale.ticks).toEqual(['[8:00 pm]', '<8:00:10 pm>', '<8:00:20 pm>', '<8:00:30 pm>', '<8:00:40 pm>', '<8:00:50 pm>', '[8:01 pm]']);
+			expect(scale.ticks).toEqual(['[[8:00 pm]]', '<8:00:15 pm>', '<8:00:30 pm>', '<8:00:45 pm>', '[[8:01 pm]]']);
 		});
 	});