diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js index e906f058bd1..83855a2da16 100644 --- a/src/traces/parcoords/attributes.js +++ b/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: { diff --git a/src/traces/parcoords/defaults.js b/src/traces/parcoords/defaults.js index 54769588341..ff93e6e83e0 100644 --- a/src/traces/parcoords/defaults.js +++ b/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); }; diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index 7c58aa1c9ef..237ea08e384 100644 --- a/src/traces/parcoords/parcoords.js +++ b/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,10 +561,11 @@ 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) @@ -567,11 +573,6 @@ module.exports = function(root, svg, styledData, layout, callbacks) { 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); diff --git a/test/image/baselines/gl2d_parcoords.png b/test/image/baselines/gl2d_parcoords.png index 199e830096a..8906b42dd67 100644 Binary files a/test/image/baselines/gl2d_parcoords.png and b/test/image/baselines/gl2d_parcoords.png differ diff --git a/test/image/baselines/gl2d_parcoords_1.png b/test/image/baselines/gl2d_parcoords_1.png index 7fe742b670f..5ef8844c4f2 100644 Binary files a/test/image/baselines/gl2d_parcoords_1.png and b/test/image/baselines/gl2d_parcoords_1.png differ diff --git a/test/image/baselines/gl2d_parcoords_2.png b/test/image/baselines/gl2d_parcoords_2.png index 835bd876f2b..6b30941fbb5 100644 Binary files a/test/image/baselines/gl2d_parcoords_2.png and b/test/image/baselines/gl2d_parcoords_2.png differ diff --git a/test/image/baselines/gl2d_parcoords_blocks.png b/test/image/baselines/gl2d_parcoords_blocks.png index 895d3895be9..eb3d695b3d5 100644 Binary files a/test/image/baselines/gl2d_parcoords_blocks.png and b/test/image/baselines/gl2d_parcoords_blocks.png differ diff --git a/test/image/baselines/gl2d_parcoords_large.png b/test/image/baselines/gl2d_parcoords_large.png index 843955bf6c6..492369d28a0 100644 Binary files a/test/image/baselines/gl2d_parcoords_large.png and b/test/image/baselines/gl2d_parcoords_large.png differ diff --git a/test/image/mocks/gl2d_parcoords_2.json b/test/image/mocks/gl2d_parcoords_2.json index ce2df465999..3f475bd360e 100644 --- a/test/image/mocks/gl2d_parcoords_2.json +++ b/test/image/mocks/gl2d_parcoords_2.json @@ -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": [ diff --git a/test/jasmine/tests/parcoords_test.js b/test/jasmine/tests/parcoords_test.js index 0a15b3a4d5c..643839742c9 100644 --- a/test/jasmine/tests/parcoords_test.js +++ b/test/jasmine/tests/parcoords_test.js @@ -38,6 +38,26 @@ 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() { @@ -45,7 +65,7 @@ describe('parcoords initialization tests', function() { function _supply(traceIn) { var traceOut = { visible: true }, defaultColor = '#444', - layout = { }; + layout = { font: Plots.layoutAttributes.font }; Parcoords.supplyDefaults(traceIn, traceOut, defaultColor, layout);