Axis toolpanel fixes

Author: rreusser

src/plot_api/plot_api.js

@@ -1313,9 +1313,29 @@ function _restyle(gd, aobj, _traces) {
         'xcalendar', 'ycalendar',
         'cumulative', 'cumulative.enabled', 'cumulative.direction', 'cumulative.currentbin',
         'a0', 'da', 'b0', 'db', 'atype', 'btype',
-        'cheaterslope', 'carpetid', 'sum'
+        'cheaterslope', 'carpetid', 'sum',
     ];
 
+    var carpetAxisAttributes = [
+        'color', 'smoothing', 'title', 'titlefont', 'titlefont.size', 'titlefont.family',
+        'titlefont.color', 'titleoffset', 'type', 'autorange', 'rangemode', 'range',
+        'fixedrange', 'cheatertype', 'tickmode', 'nticks', 'tickvals', 'ticktext',
+        'ticks', 'mirror', 'ticklen', 'tickwidth', 'tickcolor', 'showticklabels',
+        'tickfont', 'tickfont.size', 'tickfont.family', 'tickfont.color', 'tickprefix',
+        'showtickprefix', 'ticksuffix', 'showticksuffix', 'showexponent', 'exponentformat',
+        'separatethousands', 'tickformat', 'categoryorder', 'categoryarray', 'labelpadding',
+        'labelprefix', 'labelsuffix', 'labelfont', 'labelfont.family', 'labelfont.size',
+        'labelfont.color', 'showline', 'linecolor', 'linewidth', 'gridcolor', 'gridwidth',
+        'showgrid', 'minorgridcount', 'minorgridwidth', 'minorgridcolor', 'startline',
+        'startlinecolor', 'startlinewidth', 'endline', 'endlinewidth', 'endlinecolor',
+        'tick0', 'dtick', 'arraytick0', 'arraydtick', 'hoverformat', 'tickangle'
+    ];
+
+    for(i = 0; i < carpetAxisAttributes.length; i++) {
+        recalcAttrs.push('aaxis.' + carpetAxisAttributes[i]);
+        recalcAttrs.push('baxis.' + carpetAxisAttributes[i]);
+    }
+
     for(i = 0; i < traces.length; i++) {
         if(Registry.traceIs(fullData[traces[i]], 'box')) {
             recalcAttrs.push('name');

src/traces/carpet/axis_attributes.js

@@ -54,7 +54,7 @@ module.exports = {
         // '-' means we haven't yet run autotype or couldn't find any data
         // it gets turned into linear in gd._fullLayout but not copied back
         // to gd.data like the others are.
-        values: ['-', 'linear', 'log', 'date', 'category'],
+        values: ['-', 'linear', 'date', 'category'],
         dflt: '-',
         role: 'info',
         description: [
@@ -160,17 +160,6 @@ module.exports = {
             'Used with `tickvals`.'
         ].join(' ')
     },
-    ticks: {
-        valType: 'enumerated',
-        values: ['outside', 'inside', ''],
-        role: 'style',
-        description: [
-            'Determines whether ticks are drawn or not.',
-            'If **, this axis\' ticks are not drawn.',
-            'If *outside* (*inside*), this axis\' are drawn outside (inside)',
-            'the axis lines.'
-        ].join(' ')
-    },
     mirror: {
         valType: 'enumerated',
         values: [true, 'ticks', false, 'all', 'allticks'],
@@ -187,26 +176,6 @@ module.exports = {
             'on all shared-axes subplots.'
         ].join(' ')
     },
-    ticklen: {
-        valType: 'number',
-        min: 0,
-        dflt: 5,
-        role: 'style',
-        description: 'Sets the tick length (in px).'
-    },
-    tickwidth: {
-        valType: 'number',
-        min: 0,
-        dflt: 1,
-        role: 'style',
-        description: 'Sets the tick width (in px).'
-    },
-    tickcolor: {
-        valType: 'color',
-        dflt: colorAttrs.defaultLine,
-        role: 'style',
-        description: 'Sets the tick color.'
-    },
     showticklabels: {
         valType: 'enumerated',
         values: ['start', 'end', 'both', 'none'],
@@ -358,9 +327,6 @@ module.exports = {
         role: 'style',
         description: 'Sets a axis label suffix.'
     },
-    labelfont: extendFlat({}, fontAttrs, {
-        description: 'Sets the label font.'
-    }),
     // lines and grids
     showline: {
         valType: 'boolean',
@@ -492,19 +458,4 @@ module.exports = {
         role: 'info',
         description: 'The stride between grid lines along the axis'
     },
-    hoverformat: {
-        valType: 'string',
-        dflt: '',
-        role: 'style',
-        description: [
-            'Sets the hover text formatting rule using d3 formatting mini-languages',
-            'which are very similar to those in Python. For numbers, see:',
-            'https://github.com/d3/d3-format/blob/master/README.md#locale_format',
-            'And for dates see:',
-            'https://github.com/d3/d3-time-format/blob/master/README.md#locale_format',
-            'We add one item to d3\'s date formatter: *%{n}f* for fractional seconds',
-            'with n digits. For example, *2016-10-13 09:15:23.456* with tickformat',
-            '*%H~%M~%S.%2f* would display *09~15~23.46*'
-        ].join(' ')
-    },
 };

src/traces/carpet/axis_defaults.js

@@ -15,7 +15,6 @@ var addOpacity = require('../../components/color').addOpacity;
 var Registry = require('../../registry');
 var Lib = require('../../lib');
 var handleTickValueDefaults = require('../../plots/cartesian/tick_value_defaults');
-var handleTickMarkDefaults = require('../../plots/cartesian/tick_mark_defaults');
 var handleTickLabelDefaults = require('../../plots/cartesian/tick_label_defaults');
 var handleCategoryOrderDefaults = require('../../plots/cartesian/category_order_defaults');
 var setConvert = require('../../plots/cartesian/set_convert');
@@ -40,6 +39,8 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
         font = options.font || {},
         attributes = carpetAttrs[letter + 'axis'];
 
+    options.noHover = true;
+
     function coerce(attr, dflt) {
         return Lib.coerce(containerIn, containerOut, attributes, attr, dflt);
     }
@@ -120,13 +121,10 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
         size: Math.round(font.size * 1.2),
         color: dfltFontColor
     });
+
     coerce('titleoffset');
 
-    Lib.coerceFont(coerce, 'tickfont', {
-        family: font.family,
-        size: Math.round(font.size * 1.2),
-        color: dfltFontColor
-    });
+    coerce('tickangle');
 
     var validRange = (
         (containerIn.range || []).length === 2 &&
@@ -144,13 +142,17 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
 
     handleTickValueDefaults(containerIn, containerOut, coerce, axType);
     handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options);
-    handleTickMarkDefaults(containerIn, containerOut, coerce, options);
     handleCategoryOrderDefaults(containerIn, containerOut, coerce);
 
     var gridColor = coerce2('gridcolor', addOpacity(dfltColor, 0.3));
     var gridWidth = coerce2('gridwidth');
     var showGrid = coerce('showgrid');
 
+    if(!showGrid) {
+        delete containerOut.gridcolor;
+        delete containerOut.gridwidth;
+    }
+
     var startLineColor = coerce2('startlinecolor', dfltColor);
     var startLineWidth = coerce2('startlinewidth', gridWidth);
     var showStartLine = coerce('startline', containerOut.showgrid || !!startLineColor || !!startLineWidth);
@@ -176,6 +178,11 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
         coerce('minorgridcount');
         coerce('minorgridwidth', gridWidth);
         coerce('minorgridcolor', addOpacity(gridColor, 0.06));
+
+        if(!containerOut.minorgridcount) {
+            delete containerOut.minorgridwidth;
+            delete containerOut.minorgridcolor;
+        }
     }
 
     containerOut._separators = options.fullLayout.separators;
@@ -185,16 +192,32 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)
         orderedCategories(letter, containerOut.categoryorder, containerOut.categoryarray, options.data) :
         [];
 
+    if(containerOut.showticklabels === 'none') {
+        delete containerOut.tickfont;
+        delete containerOut.tickangle;
+        delete containerOut.showexponent;
+        delete containerOut.exponentformat;
+        delete containerOut.tickformat;
+        delete containerOut.showticksuffix;
+        delete containerOut.showtickprefix;
+    }
+
+    if(!containerOut.showticksuffix) {
+        delete containerOut.ticksuffix;
+    }
+
+    if(!containerOut.showtickprefix) {
+        delete containerOut.tickprefix;
+    }
+
     // It needs to be coerced, then something above overrides this deep in the axis code,
     // but no, we *actually* want to coerce this.
     coerce('tickmode');
 
-    // We'll never draw this. We just need a couple category management functions.
-    Lib.coerceFont(coerce, 'labelfont', {
-        family: font.family,
-        size: font.size,
-        color: containerOut.startlinecolor
-    });
+    if(!containerOut.title || (containerOut.title && containerOut.title.length === 0)) {
+        delete containerOut.titlefont;
+        delete containerOut.titleoffset;
+    }
 
     return containerOut;
 };

src/traces/carpet/calc_labels.js

@@ -31,7 +31,7 @@ module.exports = function calcLabels(trace, axis) {
                 dxy: gridline.dxy(0, 0),
                 axis: gridline.axis,
                 length: gridline.crossAxis.length,
-                font: gridline.crossAxis.labelfont,
+                font: gridline.axis.tickfont,
                 isFirst: i === 0,
                 isLast: i === gridlines.length - 1
             });
@@ -48,7 +48,7 @@ module.exports = function calcLabels(trace, axis) {
                 dxy: gridline.dxy(gridline.crossLength - 2, 1),
                 axis: gridline.axis,
                 length: gridline.crossAxis.length,
-                font: gridline.crossAxis.labelfont,
+                font: gridline.axis.tickfont,
                 isFirst: i === 0,
                 isLast: i === gridlines.length - 1
             });

src/traces/carpet/orient_text.js

@@ -9,11 +9,19 @@
 
 'use strict';
 
-module.exports = function orientText(trace, xaxis, yaxis, xy, dxy) {
+module.exports = function orientText(trace, xaxis, yaxis, xy, dxy, refDxy) {
     var dx = dxy[0] * trace.dpdx(xaxis);
     var dy = dxy[1] * trace.dpdy(yaxis);
     var flip = 1;
 
+    var offsetMultiplier = 1.0;
+    if(refDxy) {
+        var l1 = Math.sqrt(dxy[0] * dxy[0] + dxy[1] * dxy[1]);
+        var l2 = Math.sqrt(refDxy[0] * refDxy[0] + refDxy[1] * refDxy[1]);
+        var dot = (dxy[0] * refDxy[0] + dxy[1] * refDxy[1]) / l1 / l2;
+        offsetMultiplier = Math.max(0.0, dot);
+    }
+
     var angle = Math.atan2(dy, dx) * 180 / Math.PI;
     if(angle < -90) {
         angle += 180;
@@ -26,6 +34,7 @@ module.exports = function orientText(trace, xaxis, yaxis, xy, dxy) {
     return {
         angle: angle,
         flip: flip,
-        p: trace.c2p(xy, xaxis, yaxis)
+        p: trace.c2p(xy, xaxis, yaxis),
+        offsetMultplier: offsetMultiplier
     };
 };

src/traces/carpet/plot.js

@@ -47,6 +47,8 @@ function plotOne(gd, plotinfo, cd) {
     var boundaryLayer = makeg(gridLayer, 'g', 'boundarylayer');
     var labelLayer = makeg(gridLayer, 'g', 'labellayer');
 
+    gridLayer.style('opacity', trace.opacity);
+
     drawGridLines(xa, ya, majorLayer, aax, 'a', aax._gridlines, true);
     drawGridLines(xa, ya, majorLayer, bax, 'b', bax._gridlines, true);
     drawGridLines(xa, ya, minorLayer, aax, 'a', aax._minorgridlines, true);
@@ -142,7 +144,13 @@ function drawAxisLabels(tester, xaxis, yaxis, trace, t, layer, labels, labelClas
     labelJoin.each(function(label) {
         // Most of the positioning is done in calc_labels. Only the parts that depend upon
         // the screen space representation of the x and y axes are here:
-        var orientation = orientText(trace, xaxis, yaxis, label.xy, label.dxy);
+        var orientation;
+        if(label.axis.tickangle === 'auto') {
+            orientation = orientText(trace, xaxis, yaxis, label.xy, label.dxy);
+        } else {
+            var angle = (label.axis.tickangle + 180.0) * Math.PI / 180.0;
+            orientation = orientText(trace, xaxis, yaxis, label.xy, [Math.cos(angle), Math.sin(angle)]);
+        }
         var direction = (label.endAnchor ? -1 : 1) * orientation.flip;
         var bbox = measureText(tester, label.text, label.font);
 
@@ -184,21 +192,28 @@ function drawAxisTitles(layer, trace, t, xa, ya, maxAExtent, maxBExtent) {
 }
 
 function drawAxisTitle(layer, trace, t, xy, dxy, axis, xa, ya, offset, labelClass) {
-    var titleJoin = layer.selectAll('text.' + labelClass).data([0]);
+    var data = [];
+    if(axis.title) data.push(axis.title);
+    var titleJoin = layer.selectAll('text.' + labelClass).data(data);
 
     titleJoin.enter().append('text')
         .classed(labelClass, true);
 
-    var orientation = orientText(trace, xa, ya, xy, dxy);
-
-    // In addition to the size of the labels, add on some extra padding:
-    offset += axis.titlefont.size + axis.titleoffset;
-
     // There's only one, but we'll do it as a join so it's updated nicely:
     titleJoin.each(function() {
+        var orientation = orientText(trace, xa, ya, xy, dxy);
+
+        if(['start', 'both'].indexOf(axis.showticklabels) === -1) {
+            offset = 0;
+        }
+
+        // In addition to the size of the labels, add on some extra padding:
+        offset += axis.titlefont.size + axis.titleoffset;
+
+
         var el = d3.select(this);
 
-        el.text(axis.title)
+        el.text(axis.title || '')
             .attr('transform',
                 'translate(' + orientation.p[0] + ',' + orientation.p[1] + ') ' +
                 'rotate(' + orientation.angle + ') ' +

test/image/mocks/airfoil.json

@@ -2,6 +2,8 @@
   "data":[
     {
       "type":"carpet",
+      "name": "carpet axis",
+      "opacity": 0.2,
       "a":[
         0.1, 0.1, 0.1, 0.1,
         0.3, 0.3, 0.3, 0.3,