Skip to content

Fix rangebreaks overlapping and tick positions #4831

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 22 commits into from
Jun 3, 2020
Merged

Fix rangebreaks overlapping and tick positions #4831

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c28d0e5
centralize & refactor range expansions
archmoj Apr 6, 2020
1e63bfc
add rangebreaks tests with hourly and auto dticks
archmoj May 13, 2020
3baed24
revise tick positioning - fix dtick hourly - move tick0 outside the b…
archmoj May 13, 2020
4eab137
drop endpoint ticks that fall inside breaks
archmoj May 14, 2020
a7633c3
move last tick on rangebreaks to the start of break instead of removi…
archmoj May 15, 2020
d2d8e6e
revisit ticks on axes with rangebreaks
archmoj May 19, 2020
ca193eb
reject last tick that may include decimals
archmoj May 19, 2020
6b77b31
refactor - no need for else ifs in axes tickIncrement
archmoj May 19, 2020
ef14d60
add jasmine tests for axes with rangebreaks and set dtick
archmoj May 19, 2020
a0d4d0d
improve auto ticks on axes with rangebreaks
archmoj May 20, 2020
0fb92d4
attempt improving ticks on rangebreaks
archmoj Jun 1, 2020
5c8055b
fix issue 4879
archmoj Jun 1, 2020
0a782d8
invert if statement
archmoj Jun 2, 2020
6cd55b5
drop extra function for hour rangebreaks
archmoj Jun 2, 2020
db7d47d
drop extra logic for dayRatio
archmoj Jun 2, 2020
8c8c928
drop extra logic for dynamic oneDay
archmoj Jun 2, 2020
21f4284
drop extra logic for startHour
archmoj Jun 2, 2020
9e7b80e
drop extra logic for dayHours
archmoj Jun 2, 2020
22e5658
avoid too tick overlaps on x axes with rangebreaks and now only when …
archmoj Jun 2, 2020
b38688d
reverse loop order
archmoj Jun 2, 2020
c5cf45a
fixups to avoid single tick
archmoj Jun 2, 2020
9241578
reduce roughDTick by total length of breaks
archmoj Jun 3, 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
64 changes: 38 additions & 26 deletions src/plots/cartesian/axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,15 @@ var autorange = require('./autorange');
axes.getAutoRange = autorange.getAutoRange;
axes.findExtremes = autorange.findExtremes;

var epsilon = 0.0001;
function expandRange(range) {
var delta = (range[1] - range[0]) * epsilon;
return [
range[0] - delta,
range[1] + delta
];
}

/*
* find the list of possible axes to reference with an xref or yref attribute
* and coerce it to that list
Expand Down Expand Up @@ -566,8 +575,9 @@ axes.calcTicks = function calcTicks(ax) {
ax._tmin = axes.tickFirst(ax);

// add a tiny bit so we get ticks which may have rounded out
var startTick = rng[0] * 1.0001 - rng[1] * 0.0001;
var endTick = rng[1] * 1.0001 - rng[0] * 0.0001;
var exRng = expandRange(rng);
var startTick = exRng[0];
var endTick = exRng[1];
// check for reversed axis
var axrev = (rng[1] < rng[0]);

Expand Down Expand Up @@ -612,23 +622,7 @@ axes.calcTicks = function calcTicks(ax) {

if(ax.rangebreaks) {
// replace ticks inside breaks that would get a tick
if(ax.tickmode === 'auto') {
for(var t = 0; t < tickVals.length; t++) {
var value = tickVals[t].value;
if(ax.maskBreaks(value) === BADNUM) {
// find which break we are in
for(var k = 0; k < ax._rangebreaks.length; k++) {
var brk = ax._rangebreaks[k];
if(value >= brk.min && value < brk.max) {
tickVals[t].value = brk.max; // replace with break end
break;
}
}
}
}
}

// reduce ticks
// and reduce ticks
var len = tickVals.length;
if(len > 2) {
var tf2 = 2 * (ax.tickfont ? ax.tickfont.size : 12);
Expand All @@ -640,11 +634,16 @@ axes.calcTicks = function calcTicks(ax) {
var first = axrev ? 0 : len - 1;
var last = axrev ? len - 1 : 0;
for(var q = first; dir * q <= dir * last; q += dir) { // apply reverse loop to pick greater values in breaks first
var pos = ax.c2p(tickVals[q].value);
var tickVal = tickVals[q];
var value = tickVal.value;
if(ax.maskBreaks(value) === BADNUM) {
tickVal.value = moveToEndOfBreak(tickVal.value, ax);
}

var pos = ax.c2p(tickVal.value);
if(prevPos === undefined || Math.abs(pos - prevPos) > tf2) {
prevPos = pos;
newTickVals.push(tickVals[q]);
newTickVals.push(tickVal);
}
}
tickVals = newTickVals.reverse();
Expand Down Expand Up @@ -691,10 +690,9 @@ function arrayTicks(ax) {
var text = ax.ticktext;
var ticksOut = new Array(vals.length);
var rng = Lib.simpleMap(ax.range, ax.r2l);
var r0expanded = rng[0] * 1.0001 - rng[1] * 0.0001;
var r1expanded = rng[1] * 1.0001 - rng[0] * 0.0001;
var tickMin = Math.min(r0expanded, r1expanded);
var tickMax = Math.max(r0expanded, r1expanded);
var exRng = expandRange(rng);
var tickMin = Math.min(exRng[0], exRng[1]);
var tickMax = Math.max(exRng[0], exRng[1]);
var j = 0;

// without a text array, just format the given values as any other ticks
Expand Down Expand Up @@ -956,10 +954,14 @@ axes.tickFirst = function(ax) {
var sRound = axrev ? Math.floor : Math.ceil;
// add a tiny extra bit to make sure we get ticks
// that may have been rounded out
var r0 = rng[0] * 1.0001 - rng[1] * 0.0001;
var r0 = expandRange(rng)[0];
var dtick = ax.dtick;
var tick0 = r2l(ax.tick0);

if(ax.tickmode === 'auto' && ax.rangebreaks && ax.maskBreaks(tick0) === BADNUM) {
tick0 = moveToEndOfBreak(tick0, ax);
Copy link
Collaborator

Choose a reason for hiding this comment

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

This still bothers me - I see it's only in auto mode but it seems like this will still have strange effects, especially if you do something unusual with the bounds of the break, like [8.75, 17.25]. That said I don't understand how we're getting the results we are in axes_breaks-dtick_auto of ticks at 9am and noon, ie alternating 3-hour and 5-hour gaps. If we're hitting this block then tick0 gets set to 9am, but then to get a tick at noon we'd need a 3-hour dtick, which would then put another tick at 3pm - not what we see. And I don't think we want a 3/5 alternation as an autotick result anyway, we should regularize that to consistent 4-hour spacing.

So a couple of image tests, like you have, are good. But I think we also want to see a bunch of jasmine tests where we just set up an axis and list the ticks (positions and labels) that result within one day. That should let us cover a whole lot more cases: auto-determined dtick from 1 hour to a day and everything between, and a few manually set dtick and tick0 values; each of these tested against each of the hourly rangebreaks I mentioned in #4722 (comment)

}

if(isNumeric(dtick)) {
var tmin = sRound((r0 - tick0) / dtick) * dtick + tick0;

Expand Down Expand Up @@ -3158,3 +3160,13 @@ function swapAxisAttrs(layout, key, xFullAxes, yFullAxes, dfltTitle) {
function isAngular(ax) {
return ax._id === 'angularaxis';
}

function moveToEndOfBreak(v, ax) {
for(var k = 0; k < ax._rangebreaks.length; k++) {
var brk = ax._rangebreaks[k];
if(v >= brk.min && v < brk.max) {
return brk.max;
}
}
return v;
}
Binary file added test/image/baselines/axes_breaks-dtick_auto.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.
Binary file added test/image/baselines/axes_breaks-dtick_hourly.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.
115 changes: 115 additions & 0 deletions test/image/mocks/axes_breaks-dtick_auto.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
{
"data": [
{
"type": "scatter",
"mode": "markers",
"x": [
"2020-04-06T09:00:00",
"2020-04-06T10:00:00",
"2020-04-06T11:00:00",
"2020-04-06T12:00:00",
"2020-04-06T13:00:00",
"2020-04-06T14:00:00",
"2020-04-06T15:00:00",
"2020-04-06T16:00:00",
"2020-04-07T09:00:00",
"2020-04-07T10:00:00",
"2020-04-07T11:00:00",
"2020-04-07T12:00:00",
"2020-04-07T13:00:00",
"2020-04-07T14:00:00",
"2020-04-07T15:00:00",
"2020-04-07T16:00:00",
"2020-04-08T09:00:00",
"2020-04-08T10:00:00",
"2020-04-08T11:00:00",
"2020-04-08T12:00:00",
"2020-04-08T13:00:00",
"2020-04-08T14:00:00",
"2020-04-08T15:00:00",
"2020-04-08T16:00:00",
"2020-04-09T09:00:00",
"2020-04-09T10:00:00",
"2020-04-09T11:00:00",
"2020-04-09T12:00:00",
"2020-04-09T13:00:00",
"2020-04-09T14:00:00",
"2020-04-09T15:00:00",
"2020-04-09T16:00:00",
"2020-04-10T09:00:00",
"2020-04-10T10:00:00",
"2020-04-10T11:00:00",
"2020-04-10T12:00:00",
"2020-04-10T13:00:00",
"2020-04-10T14:00:00",
"2020-04-10T15:00:00",
"2020-04-10T16:00:00"
],
"y": [
0.19742877314456364,
0.1509714558226325,
0.3730270552929804,
0.7394093812216096,
1.2149308862244954,
1.5707342286171064,
1.0824483128021085,
0.9424263772804724,
1.1724169397045303,
0.8440466169659708,
0.8650832231701001,
0.41942121150935374,
0.11941773640575382,
-0.3620604691336322,
-0.06836276577621159,
-0.34443807771583146,
-0.49908639701892876,
-0.07100510355333789,
0.13340929837019488,
-0.33475177209849727,
-0.6700576156005845,
-0.548579214100821,
-0.4713506254966534,
-0.7334578041221448,
-0.299243806197351,
-0.18527785023145504,
-0.14964504720649674,
-0.05973507085192575,
0.17038695866484388,
-0.01766804585555426,
-0.11944698363946238,
-0.40960323466434023,
-0.7234102287840041,
-0.2790378388000705,
-0.039487043750782935,
-0.04902823513321586,
-0.3216136071598926,
-0.5672571253894997,
-1.009227965065624,
-1.0748113395075032
]
}
],
"layout": {
"width": 800,
"height": 600,
"xaxis": {
"rangebreaks": [
{
"bounds": [
17,
9
],
"pattern": "hour"
}
],
"title": {
"text": "time"
}
},
"yaxis": {
"title": {
"text": "values"
}
}
}
}
116 changes: 116 additions & 0 deletions test/image/mocks/axes_breaks-dtick_hourly.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
{
"data": [
{
"type": "scatter",
"mode": "markers",
"x": [
"2020-04-06T09:00:00",
"2020-04-06T10:00:00",
"2020-04-06T11:00:00",
"2020-04-06T12:00:00",
"2020-04-06T13:00:00",
"2020-04-06T14:00:00",
"2020-04-06T15:00:00",
"2020-04-06T16:00:00",
"2020-04-07T09:00:00",
"2020-04-07T10:00:00",
"2020-04-07T11:00:00",
"2020-04-07T12:00:00",
"2020-04-07T13:00:00",
"2020-04-07T14:00:00",
"2020-04-07T15:00:00",
"2020-04-07T16:00:00",
"2020-04-08T09:00:00",
"2020-04-08T10:00:00",
"2020-04-08T11:00:00",
"2020-04-08T12:00:00",
"2020-04-08T13:00:00",
"2020-04-08T14:00:00",
"2020-04-08T15:00:00",
"2020-04-08T16:00:00",
"2020-04-09T09:00:00",
"2020-04-09T10:00:00",
"2020-04-09T11:00:00",
"2020-04-09T12:00:00",
"2020-04-09T13:00:00",
"2020-04-09T14:00:00",
"2020-04-09T15:00:00",
"2020-04-09T16:00:00",
"2020-04-10T09:00:00",
"2020-04-10T10:00:00",
"2020-04-10T11:00:00",
"2020-04-10T12:00:00",
"2020-04-10T13:00:00",
"2020-04-10T14:00:00",
"2020-04-10T15:00:00",
"2020-04-10T16:00:00"
],
"y": [
0.19742877314456364,
0.1509714558226325,
0.3730270552929804,
0.7394093812216096,
1.2149308862244954,
1.5707342286171064,
1.0824483128021085,
0.9424263772804724,
1.1724169397045303,
0.8440466169659708,
0.8650832231701001,
0.41942121150935374,
0.11941773640575382,
-0.3620604691336322,
-0.06836276577621159,
-0.34443807771583146,
-0.49908639701892876,
-0.07100510355333789,
0.13340929837019488,
-0.33475177209849727,
-0.6700576156005845,
-0.548579214100821,
-0.4713506254966534,
-0.7334578041221448,
-0.299243806197351,
-0.18527785023145504,
-0.14964504720649674,
-0.05973507085192575,
0.17038695866484388,
-0.01766804585555426,
-0.11944698363946238,
-0.40960323466434023,
-0.7234102287840041,
-0.2790378388000705,
-0.039487043750782935,
-0.04902823513321586,
-0.3216136071598926,
-0.5672571253894997,
-1.009227965065624,
-1.0748113395075032
]
}
],
"layout": {
"width": 800,
"height": 600,
"xaxis": {
"dtick": 3600000,
"rangebreaks": [
{
"bounds": [
17,
9
],
"pattern": "hour"
}
],
"title": {
"text": "time"
}
},
"yaxis": {
"title": {
"text": "values"
}
}
}
}
4 changes: 4 additions & 0 deletions test/jasmine/tests/mock_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ var list = [
'axes_breaks-candlestick2',
'axes_breaks-contour1d',
'axes_breaks-contour2d',
'axes_breaks-dtick_auto',
'axes_breaks-dtick_hourly',
'axes_breaks-finance',
'axes_breaks-gridlines',
'axes_breaks-heatmap1d',
Expand Down Expand Up @@ -1089,6 +1091,8 @@ figs['axes_breaks-candlestick'] = require('@mocks/axes_breaks-candlestick');
figs['axes_breaks-candlestick2'] = require('@mocks/axes_breaks-candlestick2');
figs['axes_breaks-contour1d'] = require('@mocks/axes_breaks-contour1d');
figs['axes_breaks-contour2d'] = require('@mocks/axes_breaks-contour2d');
figs['axes_breaks-dtick_auto'] = require('@mocks/axes_breaks-dtick_auto');
figs['axes_breaks-dtick_hourly'] = require('@mocks/axes_breaks-dtick_hourly');
figs['axes_breaks-finance'] = require('@mocks/axes_breaks-finance');
figs['axes_breaks-gridlines'] = require('@mocks/axes_breaks-gridlines');
figs['axes_breaks-heatmap1d'] = require('@mocks/axes_breaks-heatmap1d');
Expand Down