fix and 🔒 ticks and tick labels hide/show edits

Author: etpinard

src/plots/ternary/ternary.js

@@ -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;
@@ -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);
@@ -430,6 +457,11 @@ proto.drawAxes = function(doTitles) {
     }
 };
 
+function strTickLayout(axLayout) {
+    return axLayout.ticks + String(axLayout.ticklen) + String(axLayout.showticklabels);
+}
+
+
 // 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;

test/jasmine/tests/ternary_test.js

@@ -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]
+            );
+        })
+        .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();