ternary + scatterternary basic functionality

Author: alexcjohnson

lib/index.js

@@ -29,7 +29,8 @@ Core.register([
     require('./mesh3d'),
     require('./scattergeo'),
     require('./choropleth'),
-    require('./scattergl')
+    require('./scattergl'),
+    require('./scatterternary')
 ]);
 
 module.exports = Core;

lib/scatterternary.js

@@ -0,0 +1,9 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+module.exports = require('../src/traces/scatterternary');

src/components/titles/index.js

@@ -97,9 +97,9 @@ Titles.draw = function(gd, title) {
     }
     else if(axletter === 'x') {
         xa = cont;
-        ya = (xa.anchor === 'free') ?
+        ya = xa._counteraxis || ((xa.anchor === 'free') ?
             {_offset: gs.t + (1 - (xa.position || 0)) * gs.h, _length: 0} :
-            axisIds.getFromId(gd, xa.anchor);
+            axisIds.getFromId(gd, xa.anchor));
 
         x = xa._offset + xa._length / 2;
         y = ya._offset + ((xa.side === 'top') ?
@@ -112,9 +112,9 @@ Titles.draw = function(gd, title) {
     }
     else if(axletter === 'y') {
         ya = cont;
-        xa = (ya.anchor === 'free') ?
+        xa = ya._counteraxis || ((ya.anchor === 'free') ?
             {_offset: gs.l + (ya.position || 0) * gs.w, _length: 0} :
-            axisIds.getFromId(gd, ya.anchor);
+            axisIds.getFromId(gd, ya.anchor));
 
         y = ya._offset + ya._length / 2;
         x = xa._offset + ((ya.side === 'right') ?

src/plots/cartesian/axes.js

@@ -1373,12 +1373,19 @@ axes.doTicks = function(td, axid, skipTitle) {
         pad = (ax.linewidth||1) / 2,
         labelStandoff =
             (ax.ticks==='outside' ? ax.ticklen : 1) + (ax.linewidth||0),
+        labelShift = 0,
         gridWidth = Plotly.Drawing.crispRound(td, ax.gridwidth, 1),
         zeroLineWidth = Plotly.Drawing.crispRound(td, ax.zerolinewidth, gridWidth),
         tickWidth = Plotly.Drawing.crispRound(td, ax.tickwidth, 1),
-        sides, transfn, tickprefix, tickmid,
+        sides, transfn, tickpathfn,
         i;
 
+    if(ax._counterangle && ax.ticks==='outside') {
+        var caRad = ax._counterangle * Math.PI / 180;
+        labelStandoff = ax.ticklen * Math.cos(caRad) + (ax.linewidth || 0);
+        labelShift = ax.ticklen * Math.sin(caRad);
+    }
+
     // positioning arguments for x vs y axes
     if(axletter==='x') {
         sides = ['bottom', 'top'];
@@ -1387,16 +1394,26 @@ axes.doTicks = function(td, axid, skipTitle) {
         };
         // dumb templating with string concat
         // would be better to use an actual template
-        tickprefix = 'M0,';
-        tickmid = 'v';
+        tickpathfn = function(shift, len) {
+            if(ax._counterangle) {
+                var caRad = ax._counterangle * Math.PI / 180;
+                return 'M0,' + shift + 'l' + (Math.sin(caRad) * len) + ',' + (Math.cos(caRad) * len);
+            }
+            else return 'M0,' + shift + 'v' + len;
+        };
     }
     else if(axletter==='y') {
         sides = ['left', 'right'];
         transfn = function(d) {
             return 'translate(0,'+ax.l2p(d.x)+')';
         };
-        tickprefix = 'M';
-        tickmid = ',0h';
+        tickpathfn = function(shift, len) {
+            if(ax._counterangle) {
+                var caRad = ax._counterangle * Math.PI / 180;
+                return 'M' + shift + ',0l' + (Math.cos(caRad) * len) + ',' + (-Math.sin(caRad) * len);
+            }
+            else return 'M' + shift + ',0h' + len;
+        };
     }
     else {
         console.log('unrecognized doTicks axis', axid);
@@ -1444,10 +1461,10 @@ axes.doTicks = function(td, axid, skipTitle) {
             return;
         }
 
-        var labelx, labely, labelanchor, labelpos0;
+        var labelx, labely, labelanchor, labelpos0, flipit;
         if(axletter==='x') {
-            var flipit = axside==='bottom' ? 1 : -1;
-            labelx = function(d) { return d.dx; };
+            flipit = axside==='bottom' ? 1 : -1;
+            labelx = function(d) { return d.dx + labelShift * flipit; };
             labelpos0 = position + (labelStandoff+pad)*flipit;
             labely = function(d) {
                 return d.dy+labelpos0+d.fontSize *
@@ -1461,11 +1478,11 @@ axes.doTicks = function(td, axid, skipTitle) {
             };
         }
         else {
-            labely = function(d) { return d.dy+d.fontSize/2; };
+            flipit = axside==='right' ? 1 : -1;
+            labely = function(d) { return d.dy+d.fontSize/2 - labelShift * flipit; };
             labelx = function(d) {
                 return d.dx + position + (labelStandoff + pad +
-                    (Math.abs(ax.tickangle)===90 ? d.fontSize/2 : 0)) *
-                    (axside==='right' ? 1 : -1);
+                    (Math.abs(ax.tickangle)===90 ? d.fontSize/2 : 0)) * flipit;
             };
             labelanchor = function(angle) {
                 if(isNumeric(angle) && Math.abs(angle)===90) {
@@ -1630,8 +1647,8 @@ axes.doTicks = function(td, axid, skipTitle) {
         var gridcontainer = plotinfo.gridlayer,
             zlcontainer = plotinfo.zerolinelayer,
             gridvals = plotinfo['hidegrid'+axletter]?[]:valsClipped,
-            gridpath = 'M0,0'+((axletter==='x') ? 'v' : 'h') +
-                counteraxis._length,
+            gridpath = ax._gridpath ||
+                'M0,0'+((axletter==='x') ? 'v' : 'h') + counteraxis._length,
             grid = gridcontainer.selectAll('path.'+gcls)
                 .data(ax.showgrid===false ? [] : gridvals, datafn);
         grid.enter().append('path').classed(gcls, 1)
@@ -1649,31 +1666,38 @@ axes.doTicks = function(td, axid, skipTitle) {
         grid.exit().remove();
 
         // zero line
-        var hasBarsOrFill = false;
-        for(var i = 0; i < td._fullData.length; i++) {
-            if(traceHasBarsOrFill(td._fullData[i], subplot)) {
-                hasBarsOrFill = true;
-                break;
+        if(zlcontainer) {
+            var hasBarsOrFill = false;
+            for(var i = 0; i < td._fullData.length; i++) {
+                if(traceHasBarsOrFill(td._fullData[i], subplot)) {
+                    hasBarsOrFill = true;
+                    break;
+                }
             }
+            var showZl = (ax.range[0]*ax.range[1]<=0) && ax.zeroline &&
+                (ax.type==='linear' || ax.type==='-') && gridvals.length &&
+                (hasBarsOrFill || clipEnds({x: 0}) || !ax.showline);
+            var zl = zlcontainer.selectAll('path.'+zcls)
+                .data(showZl ? [{x: 0}] : []);
+            zl.enter().append('path').classed(zcls,1).classed('zl',1)
+                .classed('crisp',1)
+                .attr('d',gridpath);
+            zl.attr('transform',transfn)
+                .call(Plotly.Color.stroke, ax.zerolinecolor || Plotly.Color.defaultLine)
+                .style('stroke-width', zeroLineWidth+'px');
+            zl.exit().remove();
         }
-        var showZl = (ax.range[0]*ax.range[1]<=0) && ax.zeroline &&
-            (ax.type==='linear' || ax.type==='-') && gridvals.length &&
-            (hasBarsOrFill || clipEnds({x: 0}) || !ax.showline);
-
-        var zl = zlcontainer.selectAll('path.'+zcls)
-            .data(showZl ? [{x: 0}] : []);
-        zl.enter().append('path').classed(zcls,1).classed('zl',1)
-            .classed('crisp',1)
-            .attr('d',gridpath);
-        zl.attr('transform',transfn)
-            .call(Plotly.Color.stroke, ax.zerolinecolor || Plotly.Color.defaultLine)
-            .style('stroke-width', zeroLineWidth+'px');
-        zl.exit().remove();
     }
 
     if(independent) {
-        drawTicks(ax._axislayer, tickprefix + (ax._pos+pad*ticksign[2]) +
-            tickmid + (ticksign[2]*ax.ticklen));
+        drawTicks(ax._axislayer, tickpathfn(ax._pos+pad*ticksign[2], ticksign[2]*ax.ticklen));
+        if(ax._counteraxis) {
+            var fictionalPlotinfo = {
+                gridlayer: ax._gridlayer,
+                zerolinelayer: ax._zerolinelayer
+            };
+            drawGrid(fictionalPlotinfo, ax._counteraxis);
+        }
         return drawLabels(ax._axislayer,ax._pos);
     }
     else {
@@ -1713,8 +1737,7 @@ axes.doTicks = function(td, axid, skipTitle) {
                 var pos = linepositions[sidei],
                     tsign = ticksign[sidei];
                 if(showside && isNumeric(pos)) {
-                    tickpath += tickprefix + (pos+pad*tsign) +
-                        tickmid + (tsign*ax.ticklen);
+                    tickpath += tickpathfn(pos+pad*tsign, tsign*ax.ticklen);
                 }
             });
 

src/plots/plots.js

@@ -635,6 +635,7 @@ plots.supplyDataDefaults = function(traceIn, i, layout) {
     // differently for 3D cases.
     coerceSubplotAttr('gl3d', 'scene');
     coerceSubplotAttr('geo', 'geo');
+    coerceSubplotAttr('ternary', 'subplot');
 
     // module-specific attributes --- note: we need to send a trace into
     // the 3D modules to have it removed from the webgl context.

src/plots/ternary/index.js

@@ -16,7 +16,7 @@ var Plots = require('../../plots/plots');
 
 exports.name = 'ternary';
 
-exports.attr = 'ternary';
+exports.attr = 'subplot';
 
 exports.idRoot = 'ternary';
 
@@ -45,7 +45,7 @@ exports.plot = function plotTernary(gd) {
             ternary = new Ternary({
                 id: ternaryId,
                 graphDiv: gd,
-                container: fullLayout._ternarycontainer.node()
+                container: fullLayout._ternarylayer.node()
             },
                 fullLayout
             );
@@ -65,7 +65,8 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
         var oldTernary = oldFullLayout[oldTernaryKey]._ternary;
 
         if(!newFullLayout[oldTernaryKey] && !!oldTernary) {
-            oldTernary.ternaryDiv.remove();
+            oldTernary.plotContainer.remove();
+            oldFullLayout.clipDef.remove();
         }
     }
 };

src/plots/ternary/layout/axis_attributes.js

@@ -18,7 +18,7 @@ module.exports = {
     titlefont: axesAttrs.titlefont,
     color: axesAttrs.color,
     // ticks
-    nticks: axesAttrs.nticks,
+    nticks: extendFlat({}, axesAttrs.nticks, {dflt: 6, min: 1}),
     ticks: axesAttrs.ticks,
     ticklen: axesAttrs.ticklen,
     tickwidth: axesAttrs.tickwidth,

src/plots/ternary/layout/axis_defaults.js

@@ -10,7 +10,7 @@
 'use strict';
 
 var Lib = require('../../../lib');
-var lightColor = require('../../components/color').lightColor;
+var lightColor = require('../../../components/color').lightColor;
 
 var layoutAttributes = require('./axis_attributes');
 var handleTickMarkDefaults = require('../../cartesian/tick_mark_defaults');
@@ -71,7 +71,9 @@ module.exports = function supplyLayoutDefaults(containerIn, containerOut, option
         delete containerOut.linewidth;
     }
 
-    var gridColor = coerce2('gridcolor', lightColor(dfltColor, options.bgColor)),
+    // default grid color is darker here (backFraction 0.6, vs default 0.909)
+    // because the grid is not square so the eye needs heavier cues to follow
+    var gridColor = coerce2('gridcolor', lightColor(dfltColor, options.bgColor, 0.6)),
         gridWidth = coerce2('gridwidth'),
         showGridLines = coerce('showgrid', !!gridColor || !!gridWidth);
 

src/plots/ternary/layout/defaults.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-var Color = require('../../components/color');
+var Color = require('../../../components/color');
 
 var handleSubplotDefaults = require('../../subplot_defaults');
 var layoutAttributes = require('./layout_attributes');
@@ -31,15 +31,33 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
 
 function handleTernaryDefaults(ternaryLayoutIn, ternaryLayoutOut, coerce, options) {
     var bgColor = coerce('bgcolor');
-    coerce('sum');
+    var sum = coerce('sum');
     options.bgColor = Color.combine(bgColor, options.paper_bgcolor);
     var axName, containerIn, containerOut;
 
+    // TODO: allow most (if not all) axis attributes to be set
+    // in the outer container and used as defaults in the individual axes?
+
     for(var j = 0; j < axesNames.length; j++) {
         axName = axesNames[j];
         containerIn = ternaryLayoutIn[axName] || {};
-        containerOut = {_name: axName};
+        containerOut = ternaryLayoutOut[axName] = {_name: axName};
 
         handleAxisDefaults(containerIn, containerOut, options);
     }
+
+    // if the min values contradict each other, set them all to default (0)
+    // and delete *all* the inputs so the user doesn't get confused later by
+    // changing one and having them all change.
+    var aaxis = ternaryLayoutOut.aaxis,
+        baxis = ternaryLayoutOut.baxis,
+        caxis = ternaryLayoutOut.caxis;
+    if(aaxis.min + baxis.min + caxis.min >= sum) {
+        aaxis.min = 0;
+        baxis.min = 0;
+        caxis.min = 0;
+        if(ternaryLayoutIn.aaxis) delete ternaryLayoutIn.aaxis.min;
+        if(ternaryLayoutIn.baxis) delete ternaryLayoutIn.baxis.min;
+        if(ternaryLayoutIn.caxis) delete ternaryLayoutIn.caxis.min;
+    }
 }