Skip to content

Hoverformat bug with showTickLabels #267

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 7 commits into from
Feb 24, 2016
Merged

Hoverformat bug with showTickLabels #267

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cdeb3fe
Add test for hover label format
mdtusz Feb 19, 2016
3cd0487
Add coersion for hoverformat regardless of showticklabels
mdtusz Feb 19, 2016
34c6fef
Move tickprefix/suffic coersion back into if block
mdtusz Feb 19, 2016
d8e09ee
Add test for handleTickDevaults
mdtusz Feb 22, 2016
bc329a9
Move tickPrefix and tickSuffix coersion out of if block
mdtusz Feb 23, 2016
d16ec29
Change gl test timeout to 500ms
mdtusz Feb 23, 2016
9b5663a
Fix careless mistake
mdtusz Feb 23, 2016
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
22 changes: 10 additions & 12 deletions src/plots/cartesian/tick_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,29 +29,27 @@ module.exports = function handleTickDefaults(containerIn, containerOut, coerce,
delete containerOut.tickcolor;
}

var showAttrDflt = getShowAttrDflt(containerIn);

var showTickLabels = coerce('showticklabels');
if(showTickLabels) {
Lib.coerceFont(coerce, 'tickfont', options.font || {});
coerce('tickangle');

var showAttrDflt = getShowAttrDflt(containerIn);

if(axType !== 'category') {
var tickFormat = coerce('tickformat');
if(!options.noHover) coerce('hoverformat');

if(!tickFormat && axType !== 'date') {
coerce('showexponent', showAttrDflt);
coerce('exponentformat');
}
}

var tickPrefix = coerce('tickprefix');
if(tickPrefix) coerce('showtickprefix', showAttrDflt);

var tickSuffix = coerce('ticksuffix');
if(tickSuffix) coerce('showticksuffix', showAttrDflt);
Copy link
Contributor

Choose a reason for hiding this comment

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

These are not quite right still.

http://codepen.io/etpinard/pen/MKMNXe

tickprefix and ticksuffix have an effect (and should) on the hover labels; they should be coerced regardless of the showTickLabels value.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah yeah that's what I had done before but I thought you were saying they should be in the showTickLabels block. I'll pull them out again then.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, my bad. I wasn't very clear in my previous comment.


var tickFormat = coerce('tickformat');
if(!tickFormat && axType !== 'date') {
Copy link
Contributor

Choose a reason for hiding this comment

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

why is this block not wrapped inside axType !== 'category' ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Whoa good catch. When I pulled out coerce('hoverformat') I completely goofed on that. I'll add it into the if condition right now.

coerce('showexponent', showAttrDflt);
coerce('exponentformat');
Copy link
Contributor

Choose a reason for hiding this comment

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

Does the exponent format affect hover labels?

Or does it only affect the tick labels?

If the latter, we should bring it back into the if(showTickLabels) block.

}
}

if(axType !== 'category' && !options.noHover) coerce('hoverformat');
};

/*
Expand Down
76 changes: 76 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 @@ -7,6 +7,9 @@ var Color = require('@src/components/color');
var handleTickValueDefaults = require('@src/plots/cartesian/tick_value_defaults');
var Axes = PlotlyInternal.Axes;

var createGraph = require('../assets/create_graph_div');
var destroyGraph = require('../assets/destroy_graph_div');


describe('Test axes', function() {
'use strict';
Expand Down Expand Up @@ -252,6 +255,79 @@ describe('Test axes', function() {
});
});

describe('handleTickDefaults', function() {
var data = [{ x: [1,2,3], y: [3,4,5] }],
gd;

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

afterEach(destroyGraph);

it('should set defaults on bad inputs', function() {
var layout = {
yaxis: {
ticklen: 'invalid',
tickwidth: 'invalid',
tickcolor: 'invalid',
showticklabels: 'invalid',
tickfont: 'invalid',
tickangle: 'invalid'
}
};

PlotlyInternal.plot(gd, data, layout);

var yaxis = gd._fullLayout.yaxis;
expect(yaxis.ticklen).toBe(5);
expect(yaxis.tickwidth).toBe(1);
expect(yaxis.tickcolor).toBe('#444');
expect(yaxis.ticks).toBe('outside');
expect(yaxis.showticklabels).toBe(true);
expect(yaxis.tickfont).toEqual({ family: '"Open Sans", verdana, arial, sans-serif', size: 12, color: '#444' });
expect(yaxis.tickangle).toBe('auto');
});

it('should use valid inputs', function() {
var layout = {
yaxis: {
ticklen: 10,
tickwidth: 5,
tickcolor: '#F00',
showticklabels: true,
tickfont: { family: 'Garamond', size: 72, color: '#0FF' },
tickangle: -20
}
};

PlotlyInternal.plot(gd, data, layout);

var yaxis = gd._fullLayout.yaxis;
expect(yaxis.ticklen).toBe(10);
expect(yaxis.tickwidth).toBe(5);
expect(yaxis.tickcolor).toBe('#F00');
expect(yaxis.ticks).toBe('outside');
expect(yaxis.showticklabels).toBe(true);
expect(yaxis.tickfont).toEqual({ family: 'Garamond', size: 72, color: '#0FF' });
expect(yaxis.tickangle).toBe(-20);
});

it('should conditionally coerce based on showticklabels', function() {
var layout = {
yaxis: {
showticklabels: false,
tickangle: -90
}
};

PlotlyInternal.plot(gd, data, layout);

var yaxis = gd._fullLayout.yaxis;
expect(yaxis.tickangle).toBeUndefined();
});
});

describe('handleTickValueDefaults', function() {
function mockSupplyDefaults(axIn, axOut, axType) {
function coerce(attr, dflt) {
Expand Down
39 changes: 39 additions & 0 deletions test/jasmine/tests/hover_label_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ var Lib = require('@src/lib');

var createGraphDiv = require('../assets/create_graph_div');
var destroyGraphDiv = require('../assets/destroy_graph_div');
var mouseEvent = require('../assets/mouse_event');

describe('hover info', function() {
'use strict';
Expand Down Expand Up @@ -242,4 +243,42 @@ describe('hover info', function() {
expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2);
});
});

describe('hoverformat', function() {

var data = [{
x: [1, 2, 3],
y: [0.12345, 0.23456, 0.34567]
}],
layout = {
yaxis: { showticklabels: true, hoverformat: ',.2r' },
width: 600,
height: 400
};

beforeEach(function() {
this. gd = createGraphDiv();
Copy link
Contributor

Choose a reason for hiding this comment

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

Haha. Look at that. A jasmine this. Maybe I should start using those more.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

😸 I'm ok with this when it's idiomatic.

});

it('should display the correct format when ticklabels true', function() {
Plotly.plot(this.gd, data, layout);
mouseEvent('mousemove', 310, 220);

var hovers = d3.selectAll('g.hovertext');

expect(hovers.size()).toEqual(1);
expect(hovers.select('text')[0][0].textContent).toEqual('0.23');
});

it('should display the correct format when ticklabels false', function() {
layout.yaxis.showticklabels = false;
Plotly.plot(this.gd, data, layout);
mouseEvent('mousemove', 310, 220);

var hovers = d3.selectAll('g.hovertext');

expect(hovers.size()).toEqual(1);
expect(hovers.select('text')[0][0].textContent).toEqual('0.23');
Copy link
Contributor

Choose a reason for hiding this comment

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

dope tests.

});
});
});