Skip to content

Commit

Permalink
Changed time scale ticks store to array of objects.
Browse files Browse the repository at this point in the history
  • Loading branch information
andrew.hurskiy committed May 31, 2017
1 parent 086bf49 commit 7242f96
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 35 deletions.
1 change: 0 additions & 1 deletion samples/scales/time/line-point-data.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,6 @@
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);

};

document.getElementById('randomizeData').addEventListener('click', function() {
Expand Down
20 changes: 5 additions & 15 deletions src/core/core.scale.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
'use strict';

var moment = require('moment');
moment = typeof(moment) === 'function' ? moment : window.moment;

module.exports = function(Chart) {

var helpers = Chart.helpers;
Expand Down Expand Up @@ -551,7 +548,8 @@ module.exports = function(Chart) {
var yTickStart = options.position === 'bottom' ? me.top : me.bottom - tl;
var yTickEnd = options.position === 'bottom' ? me.top + tl : me.bottom;

helpers.each(me.ticks, function(label, index) {
helpers.each(me.ticks, function(tick, index) {
var label = typeof tick === 'object' && typeof tick.value !== 'undefined' ? tick.value : tick;
// If the callback returned a null or undefined value, do not draw this line
if (label === undefined || label === null) {
return;
Expand Down Expand Up @@ -649,13 +647,14 @@ module.exports = function(Chart) {
glBorderDashOffset: borderDashOffset,
rotation: -1 * labelRotationRadians,
label: label,
major: tick.major === true,
textBaseline: textBaseline,
textAlign: textAlign
});
});

// Draw all of the tick labels, tick marks, and grid lines at the correct places
helpers.each(itemsToDraw, function(itemToDraw, index) {
helpers.each(itemsToDraw, function(itemToDraw) {
if (gridLines.display) {
context.save();
context.lineWidth = itemToDraw.glWidth;
Expand Down Expand Up @@ -685,16 +684,7 @@ module.exports = function(Chart) {
context.save();
context.translate(itemToDraw.labelX, itemToDraw.labelY);
context.rotate(itemToDraw.rotation);
var font = tickFont.font;
if (me.ticksAsTimestamps) {
// Add bold style to major units
var tickMoment = moment(me.ticksAsTimestamps[index]);
var tickMomentClone = tickMoment.clone();
if (me.majorUnit && tickMoment.valueOf() === tickMomentClone.startOf(me.majorUnit).valueOf()) {
font = majorTickFont;
}
}
context.font = font;
context.font = itemToDraw.major ? majorTickFont : tickFont.font;
context.textBaseline = itemToDraw.textBaseline;
context.textAlign = itemToDraw.textAlign;

Expand Down
20 changes: 14 additions & 6 deletions src/scales/scale.time.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,11 +184,12 @@ module.exports = function(Chart) {
tickFormatFunction: function(tick, index, ticks) {
var formattedTick;
var tickClone = tick.clone();
if (this.majorUnit &&
this.majorDisplayFormat &&
tick.valueOf() === tickClone.startOf(this.majorUnit).valueOf()) {
var tickTimestamp = tick.valueOf();
var major = false;
if (this.majorUnit && this.majorDisplayFormat && tickTimestamp === tickClone.startOf(this.majorUnit).valueOf()) {
// format as senior unit
formattedTick = tick.format(this.majorDisplayFormat);
major = true;
} else {
// format as base unit
formattedTick = tick.format(this.displayFormat);
Expand All @@ -198,9 +199,15 @@ module.exports = function(Chart) {
var callback = helpers.getValueOrDefault(tickOpts.callback, tickOpts.userCallback);

if (callback) {
return callback(formattedTick, index, ticks);
return {
value: callback(formattedTick, index, ticks),
major: major
};
}
return formattedTick;
return {
value: formattedTick,
major: major
};
},
convertTicksToLabels: function() {
var me = this;
Expand Down Expand Up @@ -268,11 +275,12 @@ module.exports = function(Chart) {
var me = this;

me.displayFormat = me.options.time.displayFormats.millisecond; // Pick the longest format for guestimation
var exampleLabel = me.tickFormatFunction(moment(exampleTime), 0, []);
var exampleLabel = me.tickFormatFunction(moment(exampleTime), 0, []).value;
var tickLabelWidth = me.getLabelWidth(exampleLabel);

var innerWidth = me.isHorizontal() ? me.width : me.height;
var labelCapacity = innerWidth / tickLabelWidth;

return labelCapacity;
}
});
Expand Down
44 changes: 31 additions & 13 deletions test/specs/scale.time.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ describe('Time scale tests', function() {
return scale;
}

function getTicksValues(ticks) {
return ticks.map(function(tick) {
return tick.value;
});
}

beforeEach(function() {
// Need a time matcher for getValueFromPixel
jasmine.addMatchers({
Expand Down Expand Up @@ -125,7 +131,9 @@ describe('Time scale tests', function() {
var scaleOptions = Chart.scaleService.getScaleDefaults('time');
var scale = createScale(mockData, scaleOptions);
scale.update(1000, 200);
expect(scale.ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4, 2015', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11, 2015']);
var ticks = getTicksValues(scale.ticks);

expect(ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4, 2015', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11, 2015']);
});

it('should accept labels as date objects', function() {
Expand All @@ -134,7 +142,9 @@ describe('Time scale tests', function() {
};
var scale = createScale(mockData, Chart.scaleService.getScaleDefaults('time'));
scale.update(1000, 200);
expect(scale.ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4, 2015', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11, 2015']);
var ticks = getTicksValues(scale.ticks);

expect(ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4, 2015', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11, 2015']);
});

it('should accept data as xy points', function() {
Expand Down Expand Up @@ -180,7 +190,9 @@ describe('Time scale tests', function() {

var xScale = chart.scales.xScale0;
xScale.update(800, 200);
expect(xScale.ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4, 2015', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11, 2015']);
var ticks = getTicksValues(xScale.ticks);

expect(ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4, 2015', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11, 2015']);
});
});

Expand Down Expand Up @@ -218,8 +230,8 @@ describe('Time scale tests', function() {
var xScale = chart.scales.xScale0;

// Counts down because the lines are drawn top to bottom
expect(xScale.ticks[0]).toEqualOneOf(['Nov 19', 'Nov 20', 'Nov 21']); // handle time zone changes
expect(xScale.ticks[1]).toEqualOneOf(['Nov 19', 'Nov 20', 'Nov 21']); // handle time zone changes
expect(xScale.ticks[0].value).toEqualOneOf(['Nov 19', 'Nov 20', 'Nov 21']); // handle time zone changes
expect(xScale.ticks[1].value).toEqualOneOf(['Nov 19', 'Nov 20', 'Nov 21']); // handle time zone changes
});

it('should build ticks using the config unit', function() {
Expand All @@ -232,8 +244,9 @@ describe('Time scale tests', function() {

var scale = createScale(mockData, config);
scale.update(2500, 200);
var ticks = getTicksValues(scale.ticks);

expect(scale.ticks).toEqual(['8PM', '9PM', '10PM', '11PM', 'Jan 2', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM']);
expect(ticks).toEqual(['8PM', '9PM', '10PM', '11PM', 'Jan 2', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM']);
});

it('build ticks honoring the minUnit', function() {
Expand All @@ -245,7 +258,9 @@ describe('Time scale tests', function() {
config.time.minUnit = 'day';

var scale = createScale(mockData, config);
expect(scale.ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3']);
var ticks = getTicksValues(scale.ticks);

expect(ticks).toEqual(['Jan 1', 'Jan 2', 'Jan 3']);
});

it('should build ticks using the config diff', function() {
Expand All @@ -259,9 +274,10 @@ describe('Time scale tests', function() {

var scale = createScale(mockData, config);
scale.update(800, 200);
var ticks = getTicksValues(scale.ticks);

// last date is feb 15 because we round to start of week
expect(scale.ticks).toEqual(['Dec 28, 2014', 'Jan 4, 2015', 'Jan 11, 2015', 'Jan 18, 2015', 'Jan 25, 2015', 'Feb 2015', 'Feb 8, 2015', 'Feb 15, 2015']);
expect(ticks).toEqual(['Dec 28, 2014', 'Jan 4, 2015', 'Jan 11, 2015', 'Jan 18, 2015', 'Jan 25, 2015', 'Feb 2015', 'Feb 8, 2015', 'Feb 15, 2015']);
});

describe('when specifying limits', function() {
Expand All @@ -279,7 +295,7 @@ describe('Time scale tests', function() {
config.time.min = '2014-12-29T04:00:00';

var scale = createScale(mockData, config);
expect(scale.ticks[0]).toEqual('Dec 29');
expect(scale.ticks[0].value).toEqual('Dec 29');
});

it('should use the max option', function() {
Expand All @@ -288,7 +304,7 @@ describe('Time scale tests', function() {

var scale = createScale(mockData, config);

expect(scale.ticks[scale.ticks.length - 1]).toEqual('Jan 6');
expect(scale.ticks[scale.ticks.length - 1].value).toEqual('Jan 6');
});
});

Expand All @@ -306,7 +322,9 @@ describe('Time scale tests', function() {
// Wednesday
config.time.isoWeekday = 3;
var scale = createScale(mockData, config);
expect(scale.ticks).toEqual(['Dec 31, 2014', 'Jan 7, 2015']);
var ticks = getTicksValues(scale.ticks);

expect(ticks).toEqual(['Dec 31, 2014', 'Jan 7, 2015']);
});

describe('when rendering several days', function() {
Expand Down Expand Up @@ -395,7 +413,7 @@ describe('Time scale tests', function() {

it('should build the correct ticks', function() {
// Where 'correct' is a two year spacing.
expect(xScale.ticks).toEqual(['2005', '2007', '2009', '2011', '2013', '2015', '2017', '2019']);
expect(getTicksValues(xScale.ticks)).toEqual(['2005', '2007', '2009', '2011', '2013', '2015', '2017', '2019']);
});

it('should have ticks with accurate labels', function() {
Expand All @@ -405,7 +423,7 @@ describe('Time scale tests', function() {
for (var i = 0; i < ticks.length - 1; i++) {
var offset = 2 * pixelsPerYear * i;
expect(xScale.getValueForPixel(xScale.left + offset)).toBeCloseToTime({
value: moment(ticks[i] + '-01-01'),
value: moment(ticks[i].value + '-01-01'),
unit: 'day',
threshold: 0.5,
});
Expand Down

0 comments on commit 7242f96

Please sign in to comment.