add parcoords labelside (top|bottom) help display tilted labels with no conflict with the title

Author: archmoj

src/traces/parcoords/attributes.js

@@ -22,11 +22,28 @@ module.exports = {
     labelangle: {
         valType: 'angle',
         dflt: 0,
-        role: 'style',
+        role: 'info',
         editType: 'plot',
         description: [
             'Sets the angle of the labels with respect to the horizontal.',
-            'For example, a `tickangle` of -90 draws the labels vertically.'
+            'For example, a `tickangle` of -90 draws the labels vertically.',
+            'Tilted labels with *labelangle* may be positioned better',
+            'inside margins when `labelposition` is set to *bottom*.'
+        ].join(' ')
+    },
+
+    labelside: {
+        valType: 'enumerated',
+        role: 'info',
+        values: ['top', 'bottom'],
+        dflt: 'top',
+        editType: 'plot',
+        description: [
+            'Specifies the location of the `label`.',
+            '*top* positions labels above, next to the title',
+            '*bottom* positions labels below the graph',
+            'Tilted labels with *labelangle* may be positioned better',
+            'inside margins when `labelposition` is set to *bottom*.'
         ].join(' ')
     },
 

src/traces/parcoords/defaults.js

@@ -102,4 +102,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     Lib.coerceFont(coerce, 'rangefont', fontDflt);
 
     coerce('labelangle');
+    coerce('labelside');
 };

src/traces/parcoords/parcoords.js

@@ -148,6 +148,7 @@ function model(layout, d, i) {
     var dimensions = trace.dimensions;
     var width = layout.width;
     var labelAngle = trace.labelangle;
+    var labelSide = trace.labelside;
     var labelFont = trace.labelfont;
     var tickFont = trace.tickfont;
     var rangeFont = trace.rangefont;
@@ -177,6 +178,7 @@ function model(layout, d, i) {
         unitToColor: unitToColorScale(cscale),
         lines: lines,
         labelAngle: labelAngle,
+        labelSide: labelSide,
         labelFont: labelFont,
         tickFont: tickFont,
         rangeFont: rangeFont,
@@ -347,11 +349,13 @@ function parcoordsInteractionState() {
     };
 }
 
-function calcTilt(angle) {
+function calcTilt(angle, position) {
+    var dir = (position === 'top') ? 1 : -1;
     var radians = angle * Math.PI / 180;
     var dx = Math.sin(radians);
     var dy = Math.cos(radians);
     return {
+        dir: dir,
         dx: dx,
         dy: dy,
         degrees: angle
@@ -634,19 +638,21 @@ module.exports = function(gd, svg, parcoordsLineLayers, cdModule, layout, callba
             svgTextUtils.convertToTspans(e, gd);
         })
         .attr('transform', function(d) {
-            var tilt = calcTilt(d.model.labelAngle);
+            var tilt = calcTilt(d.model.labelAngle, d.model.labelSide);
             var r = c.axisTitleOffset;
             return (
+                (tilt.dir > 0 ? '' : 'translate(0,' + (2 * r + d.model.height) + ')') +
                 'rotate(' + tilt.degrees + ')' +
-                'translate(' + -r * tilt.dx + ',' + -r * tilt.dy + ')'
+                'translate(' + (-r * tilt.dx) + ',' + (-r * tilt.dy) + ')'
             );
         })
         .attr('text-anchor', function(d) {
-            var tilt = calcTilt(d.model.labelAngle);
+            var tilt = calcTilt(d.model.labelAngle, d.model.labelSide);
             var adx = Math.abs(tilt.dx);
             var ady = Math.abs(tilt.dy);
+
             if(2 * adx > ady) {
-                return (tilt.dx < 0) ? 'start' : 'end';
+                return (tilt.dir * tilt.dx < 0) ? 'start' : 'end';
             } else {
                 return 'middle';
             }

test/image/baselines/gl2d_parcoords_60_dims.png

@@ -3,6 +3,7 @@
         {
             "type": "parcoords",
             "labelangle": -45,
+            "labelside": "bottom",
             "dimensions": [
                 {
                     "label": "one",
@@ -1606,10 +1607,6 @@
         "height": 500,
         "title": {
             "text": "60 dimensions"
-        },
-        "margin": {
-            "t": 200,
-            "b": 25
         }
     }
 }

test/image/baselines/gl2d_parcoords_tick_format.png

@@ -3,6 +3,7 @@
         {
             "type": "parcoords",
             "labelangle": -90,
+            "labelside": "bottom",
             "dimensions": [
                 {
                     "label": "Apples",
@@ -35,10 +36,6 @@
         "height": 400,
         "title": {
             "text": "<sup>Tick formatting and <i><b>labelangle</b></i></sup>"
-        },
-        "margin": {
-            "t": 150,
-            "b": 25
         }
     }
 }