Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implemented aligment by senior unit in time axis. #4267

Merged
merged 9 commits into from May 29, 2017
Merged

Implemented aligment by senior unit in time axis. #4267

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4888830
Implemented aligment by senior unit in time axis.
May 16, 2017
a47c7e3
Changed seniorUnit to majorUnit. Added majorUnit check.
May 19, 2017
90eeedd
Time scale majorUnit alignment fixes.
May 18, 2017
9d90575
Scale time tests fix.
May 19, 2017
a6fba63
Renamed seniorDisplayFormat to majorDisplayFormat. Changed aligned ti…
May 22, 2017
deee58f
Added major tick determining in timeHelpers.
May 26, 2017
d7424cf
Added caching of options.majorUnit at timeHelpers. Added alignment of…
May 29, 2017
3f39647
Minor fixes.
May 29, 2017
abe456f
Removed redundant majorUnitStart assignment at timeHelpers.
May 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 19 additions & 19 deletions samples/scales/time/line.html
View file
Open in desktop
Expand Up @@ -28,7 +28,7 @@
<button id="removeData">Remove Data</button>
<script>
var timeFormat = 'MM/DD/YYYY HH:mm';

function newDate(days) {
return moment().add(days, 'd').toDate();
}
Expand All @@ -46,12 +46,12 @@
type: 'line',
data: {
labels: [ // Date Objects
newDate(0),
newDate(1),
newDate(2),
newDate(3),
newDate(4),
newDate(5),
newDate(0),
newDate(1),
newDate(2),
newDate(3),
newDate(4),
newDate(5),
newDate(6)
],
datasets: [{
Expand All @@ -60,12 +60,12 @@
borderColor: window.chartColors.red,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}, {
Expand All @@ -74,12 +74,12 @@
borderColor: window.chartColors.blue,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
}, {
Expand Down
34 changes: 31 additions & 3 deletions src/helpers/helpers.time.js
View file
Open in desktop
Expand Up @@ -55,8 +55,20 @@ module.exports = function(Chart) {
var ticks = [];
if (options.maxTicks) {
var stepSize = options.stepSize;
ticks.push(options.min !== undefined ? options.min : niceRange.min);
var cur = moment(niceRange.min);
var startTick = options.min !== undefined ? options.min : niceRange.min;
var majorUnitStart = startTick;
if (options.majorUnit) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

options.majorUnit is used quite often in this method, I would cache it (var majorUnit = options.majorUnit) to increase minification.

majorUnitStart = moment(startTick).add(1, options.majorUnit).startOf(options.majorUnit);
}
var startRange = majorUnitStart.valueOf() - startTick;
var startFraction = startRange % (interval[options.unit].size * stepSize);
var alignedTick = startTick;
ticks.push(startTick);
if (startFraction && options.majorUnit && !options.timeOpts.round && !options.timeOpts.isoWeekday) {
alignedTick += startFraction;
ticks.push(alignedTick);
}
var cur = moment(alignedTick);
while (cur.add(stepSize, options.unit).valueOf() < niceRange.max) {
ticks.push(cur.valueOf());
}
Expand Down Expand Up @@ -128,6 +140,22 @@ module.exports = function(Chart) {
return unit;
},

/**
* Determine major unit accordingly to passed unit
* @param unit {String} relative unit
* @return {String} major unit
*/
determineMajorUnit: function(unit) {
var units = Object.keys(interval);
var majorUnit = null;
var unitIndex = units.indexOf(unit);
if (unitIndex < units.length - 1) {
majorUnit = units[unitIndex + 1];
}

return majorUnit;
},

/**
* Determines how we scale the unit
* @param min {Number} the scale minimum
Expand Down Expand Up @@ -169,7 +197,7 @@ module.exports = function(Chart) {
generateTicks: function(options, dataRange) {
var niceMin;
var niceMax;
var isoWeekday = options.isoWeekday;
var isoWeekday = options.timeOpts.isoWeekday;
if (options.unit === 'week' && isoWeekday !== false) {
niceMin = moment(dataRange.min).startOf('isoWeek').isoWeekday(isoWeekday).valueOf();
niceMax = moment(dataRange.max).startOf('isoWeek').isoWeekday(isoWeekday);
Expand Down
9 changes: 8 additions & 1 deletion src/scales/scale.time.js
View file
Open in desktop
Expand Up @@ -134,17 +134,24 @@ module.exports = function(Chart) {
}

var maxTicks = me.getLabelCapacity(minTimestamp || dataMin);

var unit = timeOpts.unit || timeHelpers.determineUnit(timeOpts.minUnit, minTimestamp || dataMin, maxTimestamp || dataMax, maxTicks);
var majorUnit = timeHelpers.determineMajorUnit(unit);

me.displayFormat = timeOpts.displayFormats[unit];
me.majorDisplayFormat = timeOpts.displayFormats[majorUnit];
me.unit = unit;
me.majorUnit = majorUnit;

var stepSize = timeOpts.stepSize || timeHelpers.determineStepSize(minTimestamp || dataMin, maxTimestamp || dataMax, unit, maxTicks);
me.ticks = timeHelpers.generateTicks({
maxTicks: maxTicks,
min: minTimestamp,
max: maxTimestamp,
stepSize: stepSize,
majorUnit: majorUnit,
unit: unit,
isoWeekday: timeOpts.isoWeekday
timeOpts: timeOpts
}, {
min: dataMin,
max: dataMax
Expand Down
14 changes: 6 additions & 8 deletions test/specs/scale.time.tests.js
View file
Open in desktop
Expand Up @@ -94,7 +94,7 @@ describe('Time scale tests', function() {
displayFormat: false,
minUnit: 'millisecond',
displayFormats: {
millisecond: 'h:mm:ss.SSS a', // 11:20:01.123 AM
millisecond: 'h:mm:ss.SSS a', // 11:20:01.123 AM,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't need a comma at the end of this line

second: 'h:mm:ss a', // 11:20:01 AM
minute: 'h:mm:ss a', // 11:20:01 AM
hour: 'MMM D, hA', // Sept 4, 5PM
Expand Down Expand Up @@ -122,7 +122,8 @@ describe('Time scale tests', function() {
labels: ['2015-01-01T12:00:00', '2015-01-02T21:00:00', '2015-01-03T22:00:00', '2015-01-05T23:00:00', '2015-01-07T03:00', '2015-01-08T10:00', '2015-01-10T12:00'], // days
};

var scale = createScale(mockData, Chart.scaleService.getScaleDefaults('time'));
var scaleOptions = Chart.scaleService.getScaleDefaults('time');
var scale = createScale(mockData, scaleOptions);
scale.update(1000, 200);
expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 2, 2015', 'Jan 3, 2015', 'Jan 4, 2015', 'Jan 5, 2015', 'Jan 6, 2015', 'Jan 7, 2015', 'Jan 8, 2015', 'Jan 9, 2015', 'Jan 10, 2015', 'Jan 11, 2015']);
});
Expand Down Expand Up @@ -231,6 +232,7 @@ describe('Time scale tests', function() {

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

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

Expand Down Expand Up @@ -463,13 +465,9 @@ describe('Time scale tests', function() {
});

var xScale = chart.scales.xScale0;
var pixel = xScale.getPixelForValue('', 0, 0);

expect(xScale.getPixelForValue('', 0, 0)).toBeCloseToPixel(62);

expect(xScale.getValueForPixel(62)).toBeCloseToTime({
value: moment(chart.data.labels[0]),
unit: 'day',
});
expect(xScale.getValueForPixel(pixel).valueOf()).toEqual(moment(chart.data.labels[0]).valueOf());
});

it('does not create a negative width chart when hidden', function() {
Expand Down