Merge pull request #1624 from plotly/parcoords-fonts

Parcoords fonts

Author: etpinard

src/traces/parcoords/attributes.js

@@ -12,6 +12,7 @@ var colorAttributes = require('../../components/colorscale/color_attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
 var colorscales = require('../../components/colorscale/scales');
 var axesAttrs = require('../../plots/cartesian/layout_attributes');
+var fontAttrs = require('../../plots/font_attributes');
 
 var extendDeep = require('../../lib/extend').extendDeep;
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -47,6 +48,16 @@ module.exports = {
         }
     },
 
+    labelfont: extendFlat({}, fontAttrs, {
+        description: 'Sets the font for the `dimension` labels.'
+    }),
+    tickfont: extendFlat({}, fontAttrs, {
+        description: 'Sets the font for the `dimension` tick values.'
+    }),
+    rangefont: extendFlat({}, fontAttrs, {
+        description: 'Sets the font for the `dimension` range values.'
+    }),
+
     dimensions: {
         _isLinkedToArray: 'dimension',
         label: {

src/traces/parcoords/defaults.js

@@ -81,7 +81,6 @@ function dimensionsDefaults(traceIn, traceOut) {
     return dimensionsOut;
 }
 
-
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
@@ -97,4 +96,16 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     if(!Array.isArray(dimensions) || !dimensions.length) {
         traceOut.visible = false;
     }
+
+    // make default font size 10px,
+    // scale linearly with global font size
+    var fontDflt = {
+        family: layout.font.family,
+        size: Math.round(layout.font.size * (10 / 12)),
+        color: layout.font.color
+    };
+
+    Lib.coerceFont(coerce, 'labelfont', fontDflt);
+    Lib.coerceFont(coerce, 'tickfont', fontDflt);
+    Lib.coerceFont(coerce, 'rangefont', fontDflt);
 };

src/traces/parcoords/parcoords.js

@@ -12,6 +12,7 @@ var lineLayerMaker = require('./lines');
 var c = require('./constants');
 var Lib = require('../../lib');
 var d3 = require('d3');
+var Drawing = require('../../components/drawing');
 
 
 function keyFun(d) {return d.key;}
@@ -122,7 +123,10 @@ function model(layout, d, i) {
         line = trace.line,
         domain = trace.domain,
         dimensions = trace.dimensions,
-        width = layout.width;
+        width = layout.width,
+        labelFont = trace.labelfont,
+        tickFont = trace.tickfont,
+        rangeFont = trace.rangefont;
 
     var lines = Lib.extendDeep({}, line, {
         color: lineColor.map(domainToUnitScale({values: lineColor, range: [line.cmin, line.cmax]})),
@@ -144,6 +148,9 @@ function model(layout, d, i) {
         tickDistance: c.tickDistance,
         unitToColor: unitToColorScale(cscale),
         lines: lines,
+        labelFont: labelFont,
+        tickFont: tickFont,
+        rangeFont: rangeFont,
         translateX: domain.x[0] * width,
         translateY: layout.height - domain.y[1] * layout.height,
         pad: pad,
@@ -227,8 +234,6 @@ function styleExtentTexts(selection) {
     selection
         .classed('axisExtentText', true)
         .attr('text-anchor', 'middle')
-        .style('font-weight', 100)
-        .style('font-size', '10px')
         .style('cursor', 'default')
         .style('user-select', 'none');
 }
@@ -556,22 +561,18 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
                         null)
                     .tickFormat(d.ordinal ? function(d) {return d;} : null)
                     .scale(scale));
+            Drawing.font(axis.selectAll('text'), d.model.tickFont);
         });
 
     axis
-        .selectAll('.domain, .tick')
+        .selectAll('.domain, .tick>line')
         .attr('fill', 'none')
         .attr('stroke', 'black')
         .attr('stroke-opacity', 0.25)
         .attr('stroke-width', '1px');
 
     axis
         .selectAll('text')
-        .style('font-weight', 100)
-        .style('font-size', '10px')
-        .style('fill', 'black')
-        .style('fill-opacity', 1)
-        .style('stroke', 'none')
         .style('text-shadow', '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff')
         .style('cursor', 'default')
         .style('user-select', 'none');
@@ -590,15 +591,14 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
         .append('text')
         .classed('axisTitle', true)
         .attr('text-anchor', 'middle')
-        .style('font-family', 'sans-serif')
-        .style('font-size', '10px')
         .style('cursor', 'ew-resize')
         .style('user-select', 'none')
         .style('pointer-events', 'auto');
 
     axisTitle
         .attr('transform', 'translate(0,' + -c.axisTitleOffset + ')')
-        .text(function(d) {return d.label;});
+        .text(function(d) {return d.label;})
+        .each(function(d) {Drawing.font(axisTitle, d.model.labelFont);});
 
     var axisExtent = axisOverlays.selectAll('.axisExtent')
         .data(repeat, keyFun);
@@ -631,7 +631,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
         .call(styleExtentTexts);
 
     axisExtentTopText
-        .text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);});
+        .text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);})
+        .each(function(d) {Drawing.font(axisExtentTopText, d.model.rangeFont);});
 
     var axisExtentBottom = axisExtent.selectAll('.axisExtentBottom')
         .data(repeat, keyFun);
@@ -653,7 +654,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
         .call(styleExtentTexts);
 
     axisExtentBottomText
-        .text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);});
+        .text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);})
+        .each(function(d) {Drawing.font(axisExtentBottomText, d.model.rangeFont);});
 
     var axisBrush = axisOverlays.selectAll('.axisBrush')
         .data(repeat, keyFun);

test/image/baselines/gl2d_parcoords.png

@@ -1,7 +1,10 @@
 {
   "layout": {
     "width": 500,
-    "height": 500
+    "height": 500,
+    "font": {
+      "size": 15
+    }
   },
 
   "data": [{
@@ -13,13 +16,27 @@
       "y": [0.2, 0.7]
     },
 
+    "labelfont": {
+      "color": "red",
+      "size": 20
+    },
+    "tickfont": {
+      "color": "blue"
+    },
+    "rangefont": {
+      "color": "green"
+    },
+
     "line": {
       "showscale": true,
       "reversescale": true,
       "colorscale": "Jet",
       "cmin": -4000,
       "cmax": -100,
-      "color": [-41, -1317, -164, -1856, -79, -931, -191, -2983, -341, -3846]
+      "color": [-41, -1317, -164, -1856, -79, -931, -191, -2983, -341, -3846],
+      "colorbar": {
+        "x": 1.1
+      }
     },
 
     "dimensions": [

test/image/baselines/gl2d_parcoords_1.png

@@ -38,14 +38,34 @@ describe('parcoords initialization tests', function() {
             expect(gd._fullData[0].opacity).toBeUndefined();
         });
 
+        it('should use global font as label, tick and range font defaults', function() {
+            var gd = Lib.extendDeep({}, mock1);
+            gd.layout.font = {
+                family: 'Gravitas',
+                size: 20,
+                color: 'blue'
+            };
+
+            Plots.supplyDefaults(gd);
+
+            var expected = {
+                family: 'Gravitas',
+                size: 17,
+                color: 'blue'
+            };
+
+            expect(gd._fullData[0].labelfont).toEqual(expected);
+            expect(gd._fullData[0].tickfont).toEqual(expected);
+            expect(gd._fullData[0].rangefont).toEqual(expected);
+        });
     });
 
     describe('parcoords defaults', function() {
 
         function _supply(traceIn) {
             var traceOut = { visible: true },
                 defaultColor = '#444',
-                layout = { };
+                layout = { font: Plots.layoutAttributes.font };
 
             Parcoords.supplyDefaults(traceIn, traceOut, defaultColor, layout);