implement radialaxis.title

Author: etpinard

src/components/titles/index.js

@@ -65,13 +65,14 @@ Titles.draw = function(gd, titleClass, options) {
     var group = options.containerGroup;
 
     var fullLayout = gd._fullLayout;
-    var font = cont.titlefont.family;
-    var fontSize = cont.titlefont.size;
-    var fontColor = cont.titlefont.color;
+    var titlefont = cont.titlefont || {};
+    var font = titlefont.family;
+    var fontSize = titlefont.size;
+    var fontColor = titlefont.color;
 
     var opacity = 1;
     var isplaceholder = false;
-    var txt = cont.title.trim();
+    var txt = (cont.title || '').trim();
 
     // only make this title editable if we positively identify its property
     // as one that has editing enabled.
@@ -120,10 +121,21 @@ Titles.draw = function(gd, titleClass, options) {
     }
 
     function drawTitle(titleEl) {
-        titleEl.attr('transform', transform ?
-            'rotate(' + [transform.rotate, attributes.x, attributes.y] +
-                ') translate(0, ' + transform.offset + ')' :
-            null);
+        var transformVal;
+
+        if(transform) {
+            transformVal = '';
+            if(transform.rotate) {
+                transformVal += 'rotate(' + [transform.rotate, attributes.x, attributes.y] + ')';
+            }
+            if(transform.offset) {
+                transformVal += 'translate(0, ' + transform.offset + ')';
+            }
+        } else {
+            transformVal = null;
+        }
+
+        titleEl.attr('transform', transformVal);
 
         titleEl.style({
             'font-family': font,

src/plots/polar/index.js

@@ -60,6 +60,7 @@ function clean(newFullData, newFullLayout, oldFullData, oldFullLayout) {
 
         if(!newFullLayout[id] && !!oldSubplot) {
             oldSubplot.framework.remove();
+            oldSubplot.layers['radial-axis-title'].remove();
 
             for(var k in oldSubplot.clipPaths) {
                 oldSubplot.clipPaths[k].remove();

src/plots/polar/layout_attributes.js

@@ -119,10 +119,9 @@ var radialAxisAttrs = {
         ].join(' ')
     },
 
-    // not sure about these
-    // maybe just for radialaxis ??
-    title: axesAttrs.title,
-    titlefont: axesAttrs.titlefont,
+    title: extendFlat({}, axesAttrs.title, {editType: 'plot', dflt: ''}),
+    titlefont: overrideAll(axesAttrs.titlefont, 'plot', 'from-root'),
+    // might need a 'titleside' and even 'titledirection' down the road
 
     hoverformat: axesAttrs.hoverformat,
 

src/plots/polar/layout_defaults.js

@@ -104,6 +104,12 @@ function handleDefaults(contIn, contOut, coerce, opts) {
                     coerceAxis('side');
                     coerceAxis('position', sector[0]);
 
+                    coerceAxis('title');
+                    Lib.coerceFont(coerceAxis, 'titlefont', {
+                        family: opts.font.family,
+                        size: Math.round(opts.font.size * 1.2),
+                        color: dfltFontColor
+                    });
                 }
                 break;
 

src/plots/polar/polar.js

@@ -21,11 +21,13 @@ var Axes = require('../cartesian/axes');
 var dragElement = require('../../components/dragelement');
 var dragBox = require('../cartesian/dragbox');
 var Fx = require('../../components/fx');
+var Titles = require('../../components/titles');
 var prepSelect = require('../cartesian/select');
 var setCursor = require('../../lib/setcursor');
 
 var MID_SHIFT = require('../../constants/alignment').MID_SHIFT;
 
+var _ = Lib._;
 var deg2rad = Lib.deg2rad;
 var rad2deg = Lib.rad2deg;
 var wrap360 = Lib.wrap360;
@@ -203,6 +205,7 @@ proto.updateLayout = function(fullLayout, polarLayout) {
     var cy = _this.cy = yOffset2 + radius * sectorBBox[3];
 
     _this.updateRadialAxis(fullLayout, polarLayout);
+    _this.updateRadialAxisTitle(fullLayout, polarLayout);
     _this.updateAngularAxis(fullLayout, polarLayout);
 
     var radialRange = _this.radialAxis.range;
@@ -331,6 +334,42 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
     .call(Color.stroke, radialLayout.linecolor);
 };
 
+proto.updateRadialAxisTitle = function(fullLayout, polarLayout, _angle) {
+    var _this = this;
+    var gd = _this.gd;
+    var radius = _this.radius;
+    var cx = _this.cx;
+    var cy = _this.cy;
+    var radialLayout = polarLayout.radialaxis;
+    var titleClass = _this.id + 'title';
+
+    var angle = _angle !== undefined ? _angle : radialLayout.position;
+    var angleRad = deg2rad(angle);
+    var cosa = Math.cos(angleRad);
+    var sina = Math.sin(angleRad);
+
+    var pad = 0;
+    if(radialLayout.title) {
+        var h = Drawing.bBox(_this.layers['radial-axis'].node()).height;
+        var ts = radialLayout.titlefont.size;
+        pad = radialLayout.side === 'left' ?
+            -h - ts * 0.4 :
+            h + ts * 0.8;
+    }
+
+    _this.layers['radial-axis-title'] = Titles.draw(gd, titleClass, {
+        propContainer: radialLayout,
+        propName: _this.id + '.radialaxis.title',
+        placeholder: _(gd, 'Click to enter radial axis title'),
+        attributes: {
+            x: cx + (radius / 2) * cosa + pad * sina,
+            y: cy - (radius / 2) * sina + pad * cosa,
+            'text-anchor': 'middle'
+        },
+        transform: {rotate: -angle}
+    });
+};
+
 proto.updateAngularAxis = function(fullLayout, polarLayout) {
     var _this = this;
     var gd = _this.gd;

test/image/baselines/polar_blank.png

@@ -18,7 +18,7 @@
     "mode": "markers+text",
     "r": [0],
     "theta": [0],
-    "text": "<b>N.B.</b><br>auotrange<br>for (0,0)<br>gives [-1,1]",
+    "text": "<b>N.B.</b><br>radial<br>auotrange<br>for (0,0)<br>gives [0,1]",
     "textposition": "left",
     "subplot": "polar4"
   }],
@@ -27,6 +27,10 @@
       "domain": {
         "x": [0, 0.46],
         "y": [0.56, 1]
+      },
+      "radialaxis": {
+        "title": "blank",
+        "position": 180
       }
     },
     "polar2": {
@@ -52,6 +56,10 @@
         "x": [0.54, 1],
         "y": [0.56, 1]
       },
+      "radialaxis": {
+        "title": "blank",
+        "side": "left"
+      },
       "angularaxis": {"visible": false}
     },
     "polar4": {

test/image/baselines/polar_subplots.png

@@ -34,12 +34,30 @@
     "polar": {
       "domain": {
         "x": [0, 0.44]
-
+      },
+      "radialaxis": {
+        "showgrid": false,
+        "title": "1st subplot",
+        "titlefont": {
+          "size": 20,
+          "color": "blue"
+        },
+        "position": -45
       }
     },
     "polar2": {
       "domain": {
         "x": [0.56, 1]
+      },
+      "radialaxis": {
+        "range": [0, 4.7],
+        "showgrid": false,
+        "title": "2nd subplot",
+        "titlefont": {
+          "size": 10,
+          "color": "orange"
+        },
+        "position": 45
       }
     }
   }

test/image/mocks/polar_blank.json

@@ -342,4 +342,61 @@ describe('Test relayout on polar subplots:', function() {
         .catch(fail)
         .then(done);
     });
+
+    it('should be able to restyle radial axis title', function(done) {
+        var gd = createGraphDiv();
+        var lastBBox;
+
+        function assertTitle(content, didBBoxChanged) {
+            var radialAxisTitle = d3.select('g.g-polartitle');
+            var txt = radialAxisTitle.select('text');
+            var bb = radialAxisTitle.node().getBBox();
+            var newBBox = [bb.x, bb.y, bb.width, bb.height];
+
+            if(content === '') {
+                expect(txt.size()).toBe(0, 'cleared <text>');
+            } else {
+                expect(txt.text()).toBe(content, 'radial axis title');
+            }
+
+            expect(newBBox).negateIf(didBBoxChanged).toEqual(lastBBox, 'did bbox change');
+            lastBBox = newBBox;
+        }
+
+        Plotly.plot(gd, [{
+            type: 'scatterpolar',
+            r: [1, 2, 3],
+            theta: [10, 20, 30]
+        }], {
+            polar: {
+                radialaxis: {title: 'yo'}
+            }
+        })
+        .then(function() {
+            assertTitle('yo', true);
+            return Plotly.relayout(gd, 'polar.radialaxis.title', '');
+        })
+        .then(function() {
+            assertTitle('', true);
+            return Plotly.relayout(gd, 'polar.radialaxis.title', 'yo2');
+        })
+        .then(function() {
+            assertTitle('yo2', true);
+            return Plotly.relayout(gd, 'polar.radialaxis.ticklen', 20);
+        })
+        .then(function() {
+            assertTitle('yo2', true);
+            return Plotly.relayout(gd, 'polar.radialaxis.titlefont.color', 'red');
+        })
+        .then(function() {
+            assertTitle('yo2', false);
+            return Plotly.relayout(gd, 'title', 'dummy');
+        })
+        .then(function() {
+            assertTitle('yo2', false);
+        })
+        .catch(fail)
+        .then(done);
+    });
+
 });