Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 1ffb102

Browse filesBrowse files
etpinardetpinard
authored
Merge pull request plotly#1624 from plotly/parcoords-fonts
Parcoords fonts
2 parents 30eb865 + c0e0845 commit 1ffb102
Copy full SHA for 1ffb102

10 files changed

+79
-18
lines changed

‎src/traces/parcoords/attributes.js

Copy file name to clipboardExpand all lines: src/traces/parcoords/attributes.js
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var colorAttributes = require('../../components/colorscale/color_attributes');
1212
var colorbarAttrs = require('../../components/colorbar/attributes');
1313
var colorscales = require('../../components/colorscale/scales');
1414
var axesAttrs = require('../../plots/cartesian/layout_attributes');
15+
var fontAttrs = require('../../plots/font_attributes');
1516

1617
var extendDeep = require('../../lib/extend').extendDeep;
1718
var extendFlat = require('../../lib/extend').extendFlat;
@@ -47,6 +48,16 @@ module.exports = {
4748
}
4849
},
4950

51+
labelfont: extendFlat({}, fontAttrs, {
52+
description: 'Sets the font for the `dimension` labels.'
53+
}),
54+
tickfont: extendFlat({}, fontAttrs, {
55+
description: 'Sets the font for the `dimension` tick values.'
56+
}),
57+
rangefont: extendFlat({}, fontAttrs, {
58+
description: 'Sets the font for the `dimension` range values.'
59+
}),
60+
5061
dimensions: {
5162
_isLinkedToArray: 'dimension',
5263
label: {

‎src/traces/parcoords/defaults.js

Copy file name to clipboardExpand all lines: src/traces/parcoords/defaults.js
+12-1Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ function dimensionsDefaults(traceIn, traceOut) {
8181
return dimensionsOut;
8282
}
8383

84-
8584
module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
8685
function coerce(attr, dflt) {
8786
return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
@@ -97,4 +96,16 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
9796
if(!Array.isArray(dimensions) || !dimensions.length) {
9897
traceOut.visible = false;
9998
}
99+
100+
// make default font size 10px,
101+
// scale linearly with global font size
102+
var fontDflt = {
103+
family: layout.font.family,
104+
size: Math.round(layout.font.size * (10 / 12)),
105+
color: layout.font.color
106+
};
107+
108+
Lib.coerceFont(coerce, 'labelfont', fontDflt);
109+
Lib.coerceFont(coerce, 'tickfont', fontDflt);
110+
Lib.coerceFont(coerce, 'rangefont', fontDflt);
100111
};

‎src/traces/parcoords/parcoords.js

Copy file name to clipboardExpand all lines: src/traces/parcoords/parcoords.js
+16-14Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var lineLayerMaker = require('./lines');
1212
var c = require('./constants');
1313
var Lib = require('../../lib');
1414
var d3 = require('d3');
15+
var Drawing = require('../../components/drawing');
1516

1617

1718
function keyFun(d) {return d.key;}
@@ -122,7 +123,10 @@ function model(layout, d, i) {
122123
line = trace.line,
123124
domain = trace.domain,
124125
dimensions = trace.dimensions,
125-
width = layout.width;
126+
width = layout.width,
127+
labelFont = trace.labelfont,
128+
tickFont = trace.tickfont,
129+
rangeFont = trace.rangefont;
126130

127131
var lines = Lib.extendDeep({}, line, {
128132
color: lineColor.map(domainToUnitScale({values: lineColor, range: [line.cmin, line.cmax]})),
@@ -144,6 +148,9 @@ function model(layout, d, i) {
144148
tickDistance: c.tickDistance,
145149
unitToColor: unitToColorScale(cscale),
146150
lines: lines,
151+
labelFont: labelFont,
152+
tickFont: tickFont,
153+
rangeFont: rangeFont,
147154
translateX: domain.x[0] * width,
148155
translateY: layout.height - domain.y[1] * layout.height,
149156
pad: pad,
@@ -227,8 +234,6 @@ function styleExtentTexts(selection) {
227234
selection
228235
.classed('axisExtentText', true)
229236
.attr('text-anchor', 'middle')
230-
.style('font-weight', 100)
231-
.style('font-size', '10px')
232237
.style('cursor', 'default')
233238
.style('user-select', 'none');
234239
}
@@ -556,22 +561,18 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
556561
null)
557562
.tickFormat(d.ordinal ? function(d) {return d;} : null)
558563
.scale(scale));
564+
Drawing.font(axis.selectAll('text'), d.model.tickFont);
559565
});
560566

561567
axis
562-
.selectAll('.domain, .tick')
568+
.selectAll('.domain, .tick>line')
563569
.attr('fill', 'none')
564570
.attr('stroke', 'black')
565571
.attr('stroke-opacity', 0.25)
566572
.attr('stroke-width', '1px');
567573

568574
axis
569575
.selectAll('text')
570-
.style('font-weight', 100)
571-
.style('font-size', '10px')
572-
.style('fill', 'black')
573-
.style('fill-opacity', 1)
574-
.style('stroke', 'none')
575576
.style('text-shadow', '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff')
576577
.style('cursor', 'default')
577578
.style('user-select', 'none');
@@ -590,15 +591,14 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
590591
.append('text')
591592
.classed('axisTitle', true)
592593
.attr('text-anchor', 'middle')
593-
.style('font-family', 'sans-serif')
594-
.style('font-size', '10px')
595594
.style('cursor', 'ew-resize')
596595
.style('user-select', 'none')
597596
.style('pointer-events', 'auto');
598597

599598
axisTitle
600599
.attr('transform', 'translate(0,' + -c.axisTitleOffset + ')')
601-
.text(function(d) {return d.label;});
600+
.text(function(d) {return d.label;})
601+
.each(function(d) {Drawing.font(axisTitle, d.model.labelFont);});
602602

603603
var axisExtent = axisOverlays.selectAll('.axisExtent')
604604
.data(repeat, keyFun);
@@ -631,7 +631,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
631631
.call(styleExtentTexts);
632632

633633
axisExtentTopText
634-
.text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);});
634+
.text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);})
635+
.each(function(d) {Drawing.font(axisExtentTopText, d.model.rangeFont);});
635636

636637
var axisExtentBottom = axisExtent.selectAll('.axisExtentBottom')
637638
.data(repeat, keyFun);
@@ -653,7 +654,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
653654
.call(styleExtentTexts);
654655

655656
axisExtentBottomText
656-
.text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);});
657+
.text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);})
658+
.each(function(d) {Drawing.font(axisExtentBottomText, d.model.rangeFont);});
657659

658660
var axisBrush = axisOverlays.selectAll('.axisBrush')
659661
.data(repeat, keyFun);

‎test/image/baselines/gl2d_parcoords.png

Copy file name to clipboard
-916 Bytes
Loading

‎test/image/baselines/gl2d_parcoords_1.png

Copy file name to clipboard
-149 Bytes
Loading

‎test/image/baselines/gl2d_parcoords_2.png

Copy file name to clipboard
5.01 KB
Loading

‎test/image/baselines/gl2d_parcoords_blocks.png

Copy file name to clipboard
107 Bytes
Loading

‎test/image/baselines/gl2d_parcoords_large.png

Copy file name to clipboard
-1.63 KB
Loading

‎test/image/mocks/gl2d_parcoords_2.json

Copy file name to clipboardExpand all lines: test/image/mocks/gl2d_parcoords_2.json
+19-2Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"layout": {
33
"width": 500,
4-
"height": 500
4+
"height": 500,
5+
"font": {
6+
"size": 15
7+
}
58
},
69

710
"data": [{
@@ -13,13 +16,27 @@
1316
"y": [0.2, 0.7]
1417
},
1518

19+
"labelfont": {
20+
"color": "red",
21+
"size": 20
22+
},
23+
"tickfont": {
24+
"color": "blue"
25+
},
26+
"rangefont": {
27+
"color": "green"
28+
},
29+
1630
"line": {
1731
"showscale": true,
1832
"reversescale": true,
1933
"colorscale": "Jet",
2034
"cmin": -4000,
2135
"cmax": -100,
22-
"color": [-41, -1317, -164, -1856, -79, -931, -191, -2983, -341, -3846]
36+
"color": [-41, -1317, -164, -1856, -79, -931, -191, -2983, -341, -3846],
37+
"colorbar": {
38+
"x": 1.1
39+
}
2340
},
2441

2542
"dimensions": [

‎test/jasmine/tests/parcoords_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/parcoords_test.js
+21-1Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,34 @@ describe('parcoords initialization tests', function() {
3838
expect(gd._fullData[0].opacity).toBeUndefined();
3939
});
4040

41+
it('should use global font as label, tick and range font defaults', function() {
42+
var gd = Lib.extendDeep({}, mock1);
43+
gd.layout.font = {
44+
family: 'Gravitas',
45+
size: 20,
46+
color: 'blue'
47+
};
48+
49+
Plots.supplyDefaults(gd);
50+
51+
var expected = {
52+
family: 'Gravitas',
53+
size: 17,
54+
color: 'blue'
55+
};
56+
57+
expect(gd._fullData[0].labelfont).toEqual(expected);
58+
expect(gd._fullData[0].tickfont).toEqual(expected);
59+
expect(gd._fullData[0].rangefont).toEqual(expected);
60+
});
4161
});
4262

4363
describe('parcoords defaults', function() {
4464

4565
function _supply(traceIn) {
4666
var traceOut = { visible: true },
4767
defaultColor = '#444',
48-
layout = { };
68+
layout = { font: Plots.layoutAttributes.font };
4969

5070
Parcoords.supplyDefaults(traceIn, traceOut, defaultColor, layout);
5171

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.