Skip to content

handle various time formats in ticklabelmode period #5065

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

Merged
merged 14 commits into from
Aug 13, 2020
Merged

handle various time formats in ticklabelmode period #5065

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e220b65
handle various time formats in ticklabelmode period
archmoj Aug 11, 2020
9424347
move weekdays to ONEDAY bucket
archmoj Aug 12, 2020
cd53a6a
Merge remote-tracking branch 'origin/master' into new-formats-in-peri…
archmoj Aug 12, 2020
ca993b9
apply weekly and quarter offsets in periodic labels
archmoj Aug 12, 2020
4a87806
declare week and average quarter in milliseconds in numerical constants
archmoj Aug 12, 2020
c3e5181
update baseline
archmoj Aug 12, 2020
854c8c7
reuse constants for weeks and quarters
archmoj Aug 12, 2020
7b9391f
replace Sunday with Monday for ISO and Monday-based formats
archmoj Aug 12, 2020
e265f0d
replace multiple incexOf calls with a regex call
archmoj Aug 12, 2020
40c6df6
add jasmine tests for various tickformat using period mode
archmoj Aug 12, 2020
9399031
fix issue 5071
archmoj Aug 12, 2020
f0f078a
convert milliseconds to date strings in tests
archmoj Aug 12, 2020
90ee834
test label text based on different tick time formats
archmoj Aug 13, 2020
1c94ba9
merge assert functions
archmoj Aug 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/constants/numerical.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ module.exports = {
* have the same length
*/
ONEAVGYEAR: 31557600000, // 365.25 days
ONEAVGQUARTER: 7889400000, // 1/4 of ONEAVGYEAR
ONEAVGMONTH: 2629800000, // 1/12 of ONEAVGYEAR
ONEWEEK: 604800000, // 7 * ONEDAY
ONEDAY: 86400000,
ONEHOUR: 3600000,
ONEMIN: 60000,
Expand Down
73 changes: 57 additions & 16 deletions src/plots/cartesian/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ var cleanTicks = require('./clean_ticks');

var constants = require('../../constants/numerical');
var ONEAVGYEAR = constants.ONEAVGYEAR;
var ONEAVGQUARTER = constants.ONEAVGQUARTER;
var ONEAVGMONTH = constants.ONEAVGMONTH;
var ONEWEEK = constants.ONEWEEK;
var ONEDAY = constants.ONEDAY;
var ONEHOUR = constants.ONEHOUR;
var ONEMIN = constants.ONEMIN;
Expand Down Expand Up @@ -695,23 +697,51 @@ axes.calcTicks = function calcTicks(ax, opts) {

var definedDelta;
if(isPeriod && ax.tickformat) {
var _has = function(str) {
return ax.tickformat.indexOf(str) !== -1;
};

if(
!_has('%f') &&
!_has('%H') &&
!_has('%I') &&
!_has('%L') &&
!_has('%Q') &&
!_has('%S') &&
!_has('%s') &&
!_has('%X')
!(/%[fLQsSMHIpX]/.test(ax.tickformat))
// %f: microseconds as a decimal number [000000, 999999]
// %L: milliseconds as a decimal number [000, 999]
// %Q: milliseconds since UNIX epoch
// %s: seconds since UNIX epoch
// %S: second as a decimal number [00,61]
// %M: minute as a decimal number [00,59]
// %H: hour (24-hour clock) as a decimal number [00,23]
// %I: hour (12-hour clock) as a decimal number [01,12]
// %p: either AM or PM
// %X: the locale’s time, such as %-I:%M:%S %p
) {
if(_has('%x') || _has('%d') || _has('%e') || _has('%j')) definedDelta = ONEDAY;
else if(_has('%B') || _has('%b') || _has('%m')) definedDelta = ONEAVGMONTH;
else if(_has('%Y') || _has('%y')) definedDelta = ONEAVGYEAR;
if(
/%[Aadejuwx]/.test(ax.tickformat)
// %A: full weekday name
// %a: abbreviated weekday name
// %d: zero-padded day of the month as a decimal number [01,31]
// %e: space-padded day of the month as a decimal number [ 1,31]
// %j: day of the year as a decimal number [001,366]
// %u: Monday-based (ISO 8601) weekday as a decimal number [1,7]
// %w: Sunday-based weekday as a decimal number [0,6]
// %x: the locale’s date, such as %-m/%-d/%Y
) definedDelta = ONEDAY;
else if(
/%[UVW]/.test(ax.tickformat)
// %U: Sunday-based week of the year as a decimal number [00,53]
// %V: ISO 8601 week of the year as a decimal number [01, 53]
// %W: Monday-based week of the year as a decimal number [00,53]
) definedDelta = ONEWEEK;
else if(
/%[Bbm]/.test(ax.tickformat)
// %B: full month name
// %b: abbreviated month name
// %m: month as a decimal number [01,12]
) definedDelta = ONEAVGMONTH;
else if(
/%[q]/.test(ax.tickformat)
// %q: quarter of the year as a decimal number [1,4]
) definedDelta = ONEAVGQUARTER;
else if(
/%[Yy]/.test(ax.tickformat)
// %Y: year with century as a decimal number, such as 1999
// %y: year without century as a decimal number [00,99]
) definedDelta = ONEAVGYEAR;
}
}

Expand Down Expand Up @@ -748,8 +778,12 @@ axes.calcTicks = function calcTicks(ax, opts) {
var delta = definedDelta || Math.abs(B - A);
if(delta >= ONEDAY * 365) { // Years could have days less than ONEAVGYEAR period
v += ONEAVGYEAR / 2;
} else if(delta >= ONEAVGQUARTER) {
v += ONEAVGQUARTER / 2;
} else if(delta >= ONEDAY * 28) { // Months could have days less than ONEAVGMONTH period
v += ONEAVGMONTH / 2;
} else if(delta >= ONEWEEK) {
v += ONEWEEK / 2;
} else if(delta >= ONEDAY) {
v += ONEDAY / 2;
}
Expand All @@ -764,7 +798,7 @@ axes.calcTicks = function calcTicks(ax, opts) {
}

if(removedPreTick0Label) {
for(i = 1; i < ticksOut.length; i++) {
for(i = 0; i < ticksOut.length; i++) {
if(ticksOut[i].periodX <= maxRange && ticksOut[i].periodX >= minRange) {
// redo first visible tick
ax._prevDateHead = '';
Expand Down Expand Up @@ -882,6 +916,13 @@ axes.autoTicks = function(ax, roughDTick) {
// this will also move the base tick off 2000-01-01 if dtick is
// 2 or 3 days... but that's a weird enough case that we'll ignore it.
ax.tick0 = Lib.dateTick0(ax.calendar, true);

if(/%[uVW]/.test(ax.tickformat)) {
// replace Sunday with Monday for ISO and Monday-based formats
var len = ax.tick0.length;
var lastD = +ax.tick0[len - 1];
ax.tick0 = ax.tick0.substring(0, len - 2) + String(lastD + 1);
}
} else if(roughX2 > ONEHOUR) {
ax.dtick = roundDTick(roughDTick, ONEHOUR, roundBase24);
} else if(roughX2 > ONEMIN) {
Expand Down
3 changes: 2 additions & 1 deletion src/plots/cartesian/set_convert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ var numConstants = require('../../constants/numerical');
var FP_SAFE = numConstants.FP_SAFE;
var BADNUM = numConstants.BADNUM;
var LOG_CLIP = numConstants.LOG_CLIP;
var ONEWEEK = numConstants.ONEWEEK;
var ONEDAY = numConstants.ONEDAY;
var ONEHOUR = numConstants.ONEHOUR;
var ONEMIN = numConstants.ONEMIN;
Expand Down Expand Up @@ -734,7 +735,7 @@ module.exports = function setConvert(ax, fullLayout) {

switch(brk.pattern) {
case WEEKDAY_PATTERN:
step = 7 * ONEDAY;
step = ONEWEEK;

bndDelta = (
(b1 < b0 ? 7 : 0) +
Expand Down
Binary file modified test/image/baselines/date_axes_period.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
237 changes: 237 additions & 0 deletions test/jasmine/tests/axes_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5196,6 +5196,243 @@ describe('Test axes', function() {
});
});
});

describe('label positioning using *ticklabelmode*: "period"', function() {
var gd;

beforeEach(function() {
gd = createGraphDiv();
});

afterEach(destroyGraphDiv);

function _assert(msg, exp) {
var labelPositions = gd._fullLayout.xaxis._vals.map(function(d) { return d.periodX; });
Copy link
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! But can we use _fullLayout.xaxis.c2d(d.periodX) to get these back into date string form - eg 1562079600000 would give '2019-07-02 15:00', and it's not clear to me how we got that precise value, but at least it has a recognizable meaning.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Also perhaps we can test the text that's stored in xaxis._vals[].text so it's obvious what labels we're showing at what datetime values?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Very nice tests! But can we use _fullLayout.xaxis.c2d(d.periodX) to get these back into date string form - eg 1562079600000 would give '2019-07-02 15:00', and it's not clear to me how we got that precise value, but at least it has a recognizable meaning.

Good call. Done in f0f078a.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Also perhaps we can test the text that's stored in xaxis._vals[].text so it's obvious what labels we're showing at what datetime values?

Done in 90ee834.

expect(labelPositions).withContext(msg).toEqual(exp);
}

['%Y', '%y'].forEach(function(tickformat) {
it('should respect yearly tickformat that includes ' + tickformat, function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-01-01', '2026-01-01']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: tickformat
}
}
})
.then(function() {
_assert('', [
1562079600000,
1593615600000,
1625238000000,
1656774000000,
1688310000000,
1719846000000,
1751468400000,
1783004400000
]);
})
.catch(failTest)
.then(done);
});
});

it('should respect quarters tickformat that includes %q', function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-01-01', '2022-01-01']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: '%Y-%q'
}
}
})
.then(function() {
_assert('', [
1573832700000,
1581781500000,
1589643900000,
1597506300000,
1605455100000,
1613403900000,
1621179900000,
1629042300000,
1636991100000,
1644939900000
]);
})
.catch(failTest)
.then(done);
});

['%B', '%b', '%m'].forEach(function(tickformat) {
it('should respect monthly tickformat that includes ' + tickformat, function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-01-01', '2020-07-01']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: '%q-' + tickformat
}
}
})
.then(function() {
_assert('', [
1576473300000,
1579151700000,
1581830100000,
1584335700000,
1587014100000,
1589606100000,
1592284500000,
1594876500000
]);
})
.catch(failTest)
.then(done);
});
});

it('should respect Sunday-based week tickformat that includes %U', function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-02-01', '2020-04-01']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: '%b-%U'
}
}
})
.then(function() {
_assert('', [
1580299200000,
1580904000000,
1581508800000,
1582113600000,
1582718400000,
1583323200000,
1583928000000,
1584532800000,
1585137600000,
1585742400000
]);
})
.catch(failTest)
.then(done);
});

['%V', '%W'].forEach(function(tickformat) {
it('should respect Monday-based week tickformat that includes ' + tickformat, function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-02-01', '2020-04-01']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: '%b-' + tickformat
}
}
})
.then(function() {
_assert('', [
1580385600000,
1580990400000,
1581595200000,
1582200000000,
1582804800000,
1583409600000,
1584014400000,
1584619200000,
1585224000000,
1585828800000
]);
})
.catch(failTest)
.then(done);
});
});

['%A', '%a', '%d', '%e', '%j', '%u', '%w', '%x'].forEach(function(tickformat) {
it('should respect daily tickformat that includes ' + tickformat, function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-01-01', '2020-01-08']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: '%b-' + tickformat
}
}
})
.then(function() {
_assert('', [
1577793600000,
1577880000000,
1577966400000,
1578052800000,
1578139200000,
1578225600000,
1578312000000,
1578398400000,
1578484800000
]);
})
.catch(failTest)
.then(done);
});
});

['%f', '%L', '%Q', '%s', '%S', '%M', '%H', '%I', '%p', '%X'].forEach(function(tickformat) {
it('should respect daily tickformat that includes ' + tickformat, function(done) {
Plotly.newPlot(gd, {
data: [{
x: ['2020-01-01', '2020-01-02']
}],
layout: {
width: 1000,
xaxis: {
ticklabelmode: 'period',
tickformat: '%a-' + tickformat
}
}
})
.then(function() {
_assert('', [
1577826000000,
1577836800000,
1577847600000,
1577858400000,
1577869200000,
1577880000000,
1577890800000,
1577901600000,
1577912400000,
1577923200000
]);
})
.catch(failTest)
.then(done);
});
});
});
});

function getZoomInButton(gd) {
Expand Down