Skip to content

Ternary w/o ticks fixes #2993

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 4 commits into from
Sep 11, 2018
Merged

Ternary w/o ticks fixes #2993

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b495131
fix and :lock: ternary showticklabels
etpinard Aug 20, 2018
05f58ce
mv ternary/layout/* to layout_defaults.js and layout_attributes.js
etpinard Sep 10, 2018
937f5cf
fix and :lock: ticks and tick labels hide/show edits
etpinard Sep 10, 2018
68e0628
wrap toggle() test functions
etpinard Sep 11, 2018
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
44 changes: 38 additions & 6 deletions src/plots/ternary/ternary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ function Ternary(options, fullLayout) {
this.graphDiv = options.graphDiv;
this.init(fullLayout);
this.makeFramework(fullLayout);

// unfortunately, we have to keep track of some axis tick settings
// as ternary subplots do not implement the 'ticks' editType
this.aTickLayout = null;
this.bTickLayout = null;
this.cTickLayout = null;
}

module.exports = Ternary;
Expand Down Expand Up @@ -375,12 +381,33 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
};

proto.drawAxes = function(doTitles) {
var _this = this,
gd = _this.graphDiv,
titlesuffix = _this.id.substr(7) + 'title',
aaxis = _this.aaxis,
baxis = _this.baxis,
caxis = _this.caxis;
var _this = this;
var gd = _this.graphDiv;
var titlesuffix = _this.id.substr(7) + 'title';
var layers = _this.layers;
var aaxis = _this.aaxis;
var baxis = _this.baxis;
var caxis = _this.caxis;
var newTickLayout;

newTickLayout = strTickLayout(aaxis);
if(_this.aTickLayout !== newTickLayout) {
layers.aaxis.selectAll('.ytick').remove();
_this.aTickLayout = newTickLayout;
}

newTickLayout = strTickLayout(baxis);
if(_this.bTickLayout !== newTickLayout) {
layers.baxis.selectAll('.xtick').remove();
_this.bTickLayout = newTickLayout;
}

newTickLayout = strTickLayout(caxis);
if(_this.cTickLayout !== newTickLayout) {
layers.caxis.selectAll('.ytick').remove();
_this.cTickLayout = newTickLayout;
}

// 3rd arg true below skips titles, so we can configure them
// correctly later on.
Axes.doTicksSingle(gd, aaxis, true);
Expand Down Expand Up @@ -430,6 +457,11 @@ proto.drawAxes = function(doTitles) {
}
};

function strTickLayout(axLayout) {
return axLayout.ticks + String(axLayout.ticklen) + String(axLayout.showticklabels);
Copy link
Collaborator

Choose a reason for hiding this comment

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

There are other inherited attributes that have editType: 'ticks' in cartesian... how did you know which ones need to be included here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Axes.doTicks is able to re-style existing nodes (e.g. relayout calls involving tickfont) e.g. see this test:

plotly.js/test/jasmine/tests/ternary_test.js

Lines 352 to 383 in 2a667d0

it('should be able to relayout axis tickfont attributes', function(done) {
var gd = createGraphDiv();
var fig = Lib.extendDeep({}, require('@mocks/ternary_simple.json'));
function _assert(family, color, size) {
var tick = d3.select('g.aaxis > g.ytick > text').node();
expect(tick.style['font-family']).toBe(family, 'font family');
expect(parseFloat(tick.style['font-size'])).toBe(size, 'font size');
expect(tick.style.fill).toBe(color, 'font color');
}
Plotly.plot(gd, fig).then(function() {
_assert('"Open Sans", verdana, arial, sans-serif', 'rgb(204, 204, 204)', 12);
return Plotly.relayout(gd, 'ternary.aaxis.tickfont.size', 5);
})
.then(function() {
_assert('"Open Sans", verdana, arial, sans-serif', 'rgb(204, 204, 204)', 5);
return Plotly.relayout(gd, 'ternary.aaxis.tickfont', {
family: 'Roboto',
color: 'red',
size: 20
});
})
.then(function() {
_assert('Roboto', 'rgb(255, 0, 0)', 20);
})
.catch(failTest)
.then(done);
});

but it can't handle hide/show. Cartesian axes rely on this block:

plotly.js/src/plots/cartesian/axes.js

Lines 1550 to 1555 in 2a667d0

plotinfo.xaxislayer.selectAll('.' + xa._id + 'tick').remove();
plotinfo.yaxislayer.selectAll('.' + ya._id + 'tick').remove();
if(plotinfo.gridlayer) plotinfo.gridlayer.selectAll('path').remove();
if(plotinfo.zerolinelayer) plotinfo.zerolinelayer.selectAll('path').remove();
fullLayout._infolayer.select('.g-' + xa._id + 'title').remove();
fullLayout._infolayer.select('.g-' + ya._id + 'title').remove();

which isn't compatible with non-cartesian subplots.

}


// hard coded paths for zoom corners
// uses the same sizing as cartesian, length is MINZOOM/2, width is 3px
var CLEN = constants.MINZOOM / 2 + 0.87;
Expand Down
70 changes: 70 additions & 0 deletions test/jasmine/tests/ternary_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,76 @@ describe('ternary plots', function() {
.then(done);
});

it('should be able to hide/show ticks and tick labels', function(done) {
var gd = createGraphDiv();
var fig = Lib.extendDeep({}, require('@mocks/ternary_simple.json'));

function assertCnt(selector, expected, msg) {
var sel = d3.select(gd).selectAll(selector);
expect(sel.size()).toBe(expected, msg);
}

function toggle(selector, astr, vals, exps) {
return Plotly.relayout(gd, astr, vals[0]).then(function() {
assertCnt(selector, exps[0], astr + ' ' + vals[0]);
return Plotly.relayout(gd, astr, vals[1]);
})
.then(function() {
assertCnt(selector, exps[1], astr + ' ' + vals[1]);
return Plotly.relayout(gd, astr, vals[0]);
})
.then(function() {
assertCnt(selector, exps[0], astr + ' ' + vals[0]);
});
}

Plotly.plot(gd, fig)
.then(function() {
return toggle(
'.aaxis > .ytick > text',
'ternary.aaxis.showticklabels',
[true, false], [4, 0]
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Minor style comment: you can put the extra function wrapping inside the definition of toggle, so that the individual calls are just .then(toggle(...))

Regardless toggle is a very nice simplification!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good call. Done in -> 68e0628

})
.then(function() {
return toggle(
'.baxis > .xtick > text',
'ternary.baxis.showticklabels',
[true, false], [5, 0]
);
})
.then(function() {
return toggle(
'.caxis > .ytick > text',
'ternary.caxis.showticklabels',
[true, false], [4, 0]
);
})
.then(function() {
return toggle(
'.aaxis > path.ytick',
'ternary.aaxis.ticks',
['outside', ''], [4, 0]
);
})
.then(function() {
return toggle(
'.baxis > path.xtick',
'ternary.baxis.ticks',
['outside', ''], [5, 0]
);
})
.then(function() {
return toggle(
'.caxis > path.ytick',
'ternary.caxis.ticks',
['outside', ''], [4, 0]
);
})
.catch(failTest)
.then(done);
});

it('should render a-axis and c-axis with negative offsets', function(done) {
var gd = createGraphDiv();

Expand Down