Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

add 'tickformatstops' #1965

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.

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 17 commits into from
Oct 16, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
add tests for tickformatstops
  • Loading branch information
apalchys committed Aug 28, 2017
commit 304d96b6de1d4cbc39c8d07b346551799b472775
4 changes: 2 additions & 2 deletions 4 src/plots/cartesian/axes.js
Original file line number Diff line number Diff line change
Expand Up @@ -1516,8 +1516,8 @@ axes.getTickFormat = function(ax) {
var convertFn = convert || function(x) { return x;};
var leftDtick = range[0];
var rightDtick = range[1];
return (leftDtick === null || convertFn(leftDtick) <= convertFn(dtick)) &&
(rightDtick === null || convertFn(rightDtick) >= convertFn(dtick));
return ((!leftDtick && typeof leftDtick !== 'number') || convertFn(leftDtick) <= convertFn(dtick)) &&
((!rightDtick && typeof rightDtick !== 'number') || convertFn(rightDtick) >= convertFn(dtick));
}
function getRangeWidth(range, convert) {
var convertFn = convert || function(x) { return x;};
Expand Down
46 changes: 46 additions & 0 deletions 46 test/image/mocks/tickformatstops.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"data": [
{
"x": ["2005-01","2005-02","2005-03","2005-04","2005-05","2005-06","2005-07"],
"y": [-20,10,-5,0,5,-10,20]
}
],
"layout": {
"xaxis": {
"tickformatstops": [
{
"dtickrange": [null, 1000],
"value": "%H:%M:%S.%L ms"
},
{
"dtickrange": [1000, 60000],
"value": "%H:%M:%S s"
},
{
"dtickrange": [60000, 3600000],
"value": "%H:%M m"
},
{
"dtickrange": [3600000, 86400000],
"value": "%H:%M h"
},
{
"dtickrange": [86400000, 604800000],
"value": "%e. %b d"
},
{
"dtickrange": [604800000, "M1"],
"value": "%e. %b w"
},
{
"dtickrange": ["M1", "M12"],
"value": "%b '%y M"
},
{
"dtickrange": ["M12", null],
"value": "%Y Y"
}
]
}
}
}
294 changes: 294 additions & 0 deletions 294 test/jasmine/tests/tickformatstops_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
var Plotly = require('@lib/index');
var Lib = require('@src/lib');
var Axes = require('@src/plots/cartesian/axes');
var Fx = require('@src/components/fx');
var d3 = require('d3');
var createGraphDiv = require('../assets/create_graph_div');
var destroyGraphDiv = require('../assets/destroy_graph_div');
var selectButton = require('../assets/modebar_button');

var mock = require('@mocks/tickformatstops.json');

function getZoomInButton(gd) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we merge this file into axes_test.js? I don't see the need to break src file / test file symmetry here.

Copy link
Collaborator

Choose a reason for hiding this comment

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

done in 0e6747f

return selectButton(gd._fullLayout._modeBar, 'zoomIn2d');
}

function getZoomOutButton(gd) {
return selectButton(gd._fullLayout._modeBar, 'zoomOut2d');
}

function getFormatter(format) {
return d3.time.format.utc(format);
}

describe('Test Axes.getTickformat', function() {
it('get proper tickformatstop for linear axis', function() {
var lineartickformatstops = [
{
dtickrange: [null, 1],
value: '.f2',
},
{
dtickrange: [1, 100],
value: '.f1',
},
{
dtickrange: [100, null],
value: 'g',
}
];
expect(Axes.getTickFormat({
type: 'linear',
tickformatstops: lineartickformatstops,
dtick: 0.1
})).toEqual(lineartickformatstops[0].value);

expect(Axes.getTickFormat({
type: 'linear',
tickformatstops: lineartickformatstops,
dtick: 1
})).toEqual(lineartickformatstops[1].value);

expect(Axes.getTickFormat({
type: 'linear',
tickformatstops: lineartickformatstops,
dtick: 99
})).toEqual(lineartickformatstops[1].value);
expect(Axes.getTickFormat({
type: 'linear',
tickformatstops: lineartickformatstops,
dtick: 99999
})).toEqual(lineartickformatstops[2].value);
});

it('get proper tickformatstop for date axis', function() {
var MILLISECOND = 1;
var SECOND = MILLISECOND * 1000;
var MINUTE = SECOND * 60;
var HOUR = MINUTE * 60;
var DAY = HOUR * 24;
var WEEK = DAY * 7;
var MONTH = 'M1'; // or YEAR / 12;
var YEAR = 'M12'; // or 365.25 * DAY;
var datetickformatstops = [
{
dtickrange: [null, SECOND],
value: '%H:%M:%S.%L ms' // millisecond
},
{
dtickrange: [SECOND, MINUTE],
value: '%H:%M:%S s' // second
},
{
dtickrange: [MINUTE, HOUR],
value: '%H:%M m' // minute
},
{
dtickrange: [HOUR, DAY],
value: '%H:%M h' // hour
},
{
dtickrange: [DAY, WEEK],
value: '%e. %b d' // day
},
{
dtickrange: [WEEK, MONTH],
value: '%e. %b w' // week
},
{
dtickrange: [MONTH, YEAR],
value: '%b \'%y M' // month
},
{
dtickrange: [YEAR, null],
value: '%Y Y' // year
}
];
expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 100
})).toEqual(datetickformatstops[0].value); // millisecond

expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 1000
})).toEqual(datetickformatstops[1].value); // second

expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 1000 * 60 * 60 * 3 // three hours
})).toEqual(datetickformatstops[3].value); // hour

expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 1000 * 60 * 60 * 24 * 7 * 2 // two weeks
})).toEqual(datetickformatstops[5].value); // week

expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 'M1'
})).toEqual(datetickformatstops[6].value); // month

expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 'M5'
})).toEqual(datetickformatstops[6].value); // month

expect(Axes.getTickFormat({
type: 'date',
tickformatstops: datetickformatstops,
dtick: 'M24'
})).toEqual(datetickformatstops[7].value); // year
});

it('get proper tickformatstop for log axis', function() {
var logtickformatstops = [
{
dtickrange: [null, 'L0.01'],
value: '.f3',
},
{
dtickrange: ['L0.01', 'L1'],
value: '.f2',
},
{
dtickrange: ['D1', 'D2'],
value: '.f1',
},
{
dtickrange: [1, null],
value: 'g'
}
];
expect(Axes.getTickFormat({
type: 'log',
tickformatstops: logtickformatstops,
dtick: 'L0.0001'
})).toEqual(logtickformatstops[0].value);

expect(Axes.getTickFormat({
type: 'log',
tickformatstops: logtickformatstops,
dtick: 'L0.1'
})).toEqual(logtickformatstops[1].value);

expect(Axes.getTickFormat({
type: 'log',
tickformatstops: logtickformatstops,
dtick: 'L2'
})).toEqual(undefined);
expect(Axes.getTickFormat({
type: 'log',
tickformatstops: logtickformatstops,
dtick: 'D2'
})).toEqual(logtickformatstops[2].value);
expect(Axes.getTickFormat({
type: 'log',
tickformatstops: logtickformatstops,
dtick: 1
})).toEqual(logtickformatstops[3].value);
});
});

describe('Test tickformatstops:', function() {

var mockCopy, gd;

beforeEach(function() {
gd = createGraphDiv();
mockCopy = Lib.extendDeep({}, mock);
});

afterEach(destroyGraphDiv);

describe('Zooming-in until milliseconds zoom level', function() {
it('Zoom in', function(done) {
var promise = Plotly.plot(gd, mockCopy.data, mockCopy.layout);
var zoomIn = function() {
promise = promise.then(function() {
getZoomInButton(gd).click();
var xLabels = Axes.calcTicks(gd._fullLayout.xaxis);
var formatter = getFormatter(Axes.getTickFormat(gd._fullLayout.xaxis));
var expectedLabels = xLabels.map(function(d) {return formatter(new Date(d.x));});
var actualLabels = xLabels.map(function(d) {return d.text;});
expect(expectedLabels).toEqual(actualLabels);
if(gd._fullLayout.xaxis.dtick > 1) {
zoomIn();
} else {
done();
}
});
};
zoomIn();
});
});

describe('Zooming-out until years zoom level', function() {
it('Zoom out', function(done) {
var promise = Plotly.plot(gd, mockCopy.data, mockCopy.layout);

var zoomOut = function() {
promise = promise.then(function() {
getZoomOutButton(gd).click();
var xLabels = Axes.calcTicks(gd._fullLayout.xaxis);
var formatter = getFormatter(Axes.getTickFormat(gd._fullLayout.xaxis));
var expectedLabels = xLabels.map(function(d) {return formatter(new Date(d.x));});
var actualLabels = xLabels.map(function(d) {return d.text;});
expect(expectedLabels).toEqual(actualLabels);
if(typeof gd._fullLayout.xaxis.dtick === 'number' ||
typeof gd._fullLayout.xaxis.dtick === 'string' && parseInt(gd._fullLayout.xaxis.dtick.replace(/\D/g, '')) < 48) {
zoomOut();
} else {
done();
}
});
};
zoomOut();
});
});

describe('Check tickformatstops for hover', function() {
'use strict';

var evt = { xpx: 270, ypx: 10 };

afterEach(destroyGraphDiv);

beforeEach(function() {
gd = createGraphDiv();
mockCopy = Lib.extendDeep({}, mock);
});

describe('hover info', function() {

it('responds to hover', function(done) {
var mockCopy = Lib.extendDeep({}, mock);

Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() {
Fx.hover(gd, evt, 'xy');

var hoverTrace = gd._hoverdata[0];
var formatter = getFormatter(Axes.getTickFormat(gd._fullLayout.xaxis));

expect(hoverTrace.curveNumber).toEqual(0);
expect(hoverTrace.pointNumber).toEqual(3);
expect(hoverTrace.x).toEqual('2005-04-01');
expect(hoverTrace.y).toEqual(0);

expect(d3.selectAll('g.axistext').size()).toEqual(1);
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
expect(d3.selectAll('g.axistext').select('text').html()).toEqual(formatter(new Date(hoverTrace.x)));
expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('0');
done();
});
});
});
});

});
Morty Proxy This is a proxified and sanitized view of the page, visit original site.