Skip to content

Commit 38bd5ec

Browse files
archmojarchmoj
committed
in legend with pattern revise sizes
1 parent 69f91e2 commit 38bd5ec

8 files changed

+120
-19
lines changed

Diff for: ‎src/components/drawing/index.js

+3-14
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,6 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
359359
*
360360
* @param {object} sel: d3 selection to apply this pattern to
361361
* You can use `selection.call(Drawing.pattern, ...)`
362-
* @param {string} calledBy: option to know the caller component
363362
* @param {DOM element} gd: the graph div `sel` is part of
364363
* @param {string} patternID: a unique (within this plot) identifier
365364
* for this pattern, so that we don't create unnecessary definitions
@@ -371,9 +370,7 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
371370
* @param {string} fgcolor: foreground color for this pattern
372371
* @param {number} fgopacity: foreground opacity for this pattern
373372
*/
374-
drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity, mcc, fillmode, bgcolor, fgcolor, fgopacity) {
375-
var isLegend = calledBy === 'legend';
376-
373+
drawing.pattern = function(sel, gd, patternID, shape, size, solidity, mcc, fillmode, bgcolor, fgcolor, fgopacity) {
377374
if(mcc) {
378375
if(fillmode === 'overlay') {
379376
bgcolor = mcc;
@@ -530,8 +527,7 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
530527
'id': fullID,
531528
'width': width + 'px',
532529
'height': height + 'px',
533-
'patternUnits': 'userSpaceOnUse',
534-
'patternTransform': isLegend ? 'scale(0.7)' : ''
530+
'patternUnits': 'userSpaceOnUse'
535531
});
536532

537533
if(bgcolor) {
@@ -600,13 +596,6 @@ drawing.getPatternAttr = function(mp, i, dflt) {
600596
return mp;
601597
};
602598

603-
drawing.getPatternLegendDim = function(mp, i, dflt) {
604-
if(mp && Lib.isArrayOrTypedArray(mp)) {
605-
return dflt;
606-
}
607-
return mp;
608-
};
609-
610599
drawing.pointStyle = function(s, trace, gd) {
611600
if(!s.size()) return;
612601

@@ -745,7 +734,7 @@ drawing.singlePointStyle = function(d, sel, trace, fns, gd) {
745734
if(perPointPattern) patternID += '-' + d.i;
746735

747736
drawing.pattern(
748-
sel, 'point', gd, patternID,
737+
sel, gd, patternID,
749738
patternShape, patternSize, patternSolidity,
750739
d.mcc, markerPattern.fillmode,
751740
patternBGColor, patternFGColor, patternFGOpacity

Diff for: ‎src/components/legend/style.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -366,11 +366,11 @@ module.exports = function style(s, gd, legend) {
366366
var patternBGColor = Drawing.getPatternAttr(markerPattern.bgcolor, 0, null);
367367
var patternFGColor = Drawing.getPatternAttr(markerPattern.fgcolor, 0, null);
368368
var patternFGOpacity = markerPattern.fgopacity;
369-
var patternSize = Math.min(12, Drawing.getPatternLegendDim(markerPattern.size, 0, 8));
370-
var patternSolidity = Drawing.getPatternLegendDim(markerPattern.solidity, 0, 0.3);
369+
var patternSize = dimAttr(markerPattern.size, 6, 8);
370+
var patternSolidity = dimAttr(markerPattern.solidity, 0.5, 1);
371371
var patternID = 'legend-' + trace.uid;
372372
p.call(
373-
Drawing.pattern, 'legend', gd, patternID,
373+
Drawing.pattern, gd, patternID,
374374
patternShape, patternSize, patternSolidity,
375375
mcc, markerPattern.fillmode,
376376
patternBGColor, patternFGColor, patternFGOpacity
@@ -677,3 +677,9 @@ function getStyleGuide(d) {
677677
anyFill: showFill || showGradientFill,
678678
};
679679
}
680+
681+
function dimAttr(v, dflt, max) {
682+
if(v && Lib.isArrayOrTypedArray(v)) return dflt;
683+
if(v > max) return max;
684+
return v;
685+
}

Diff for: ‎test/image/baselines/pattern_bars.png

-188 Bytes
Loading

Diff for: ‎test/image/baselines/pattern_fgcolor_overlay_fillmode.png

-206 Bytes
Loading

Diff for: ‎test/image/baselines/pattern_legend_variations.png

67.3 KB
Loading

Diff for: ‎test/image/baselines/pattern_with_colorscale.png

-102 Bytes
Loading

Diff for: ‎test/image/mocks/pattern_legend_variations.json

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
{
2+
"data": [
3+
{
4+
"name": "size: 4",
5+
"type": "bar",
6+
"x": ["A", "B", "C", "D", "E"],
7+
"y": [1, 1, 1, 1, 1],
8+
"marker": {
9+
"colorscale": "Greens", "reversescale": true,
10+
"line": { "color": "#444", "width": 1 },
11+
"color": [1, 2, 3, 4, 5],
12+
"pattern": {
13+
"fillmode": "replace",
14+
"size": 4,
15+
"shape": "."
16+
}
17+
}
18+
},
19+
{
20+
"name": "size: 6",
21+
"type": "bar",
22+
"x": ["A", "B", "C", "D", "E"],
23+
"y": [1, 1, 1, 1, 1],
24+
"marker": {
25+
"colorscale": "Greens", "reversescale": true,
26+
"line": { "color": "#444", "width": 1 },
27+
"color": [1, 2, 3, 4, 5],
28+
"pattern": {
29+
"fillmode": "overlay", "fgopacity": 1,
30+
"size": 6,
31+
"shape": "."
32+
}
33+
}
34+
},
35+
{
36+
"name": "size: 8",
37+
"type": "bar",
38+
"x": ["A", "B", "C", "D", "E"],
39+
"y": [1, 1, 1, 1, 1],
40+
"marker": {
41+
"colorscale": "Reds",
42+
"line": { "color": "#444", "width": 1 },
43+
"color": [1, 2, 3, 4, 5],
44+
"pattern": {
45+
"fillmode": "replace",
46+
"size": 8,
47+
"shape": "."
48+
}
49+
}
50+
},
51+
{
52+
"name": "size: 10",
53+
"type": "bar",
54+
"x": ["A", "B", "C", "D", "E"],
55+
"y": [1, 1, 1, 1, 1],
56+
"marker": {
57+
"colorscale": "Reds",
58+
"line": { "color": "#444", "width": 1 },
59+
"color": [1, 2, 3, 4, 5],
60+
"pattern": {
61+
"fillmode": "overlay", "fgopacity": 1,
62+
"size": 10,
63+
"shape": "."
64+
}
65+
}
66+
},
67+
{
68+
"name": "size: 12",
69+
"type": "bar",
70+
"x": ["A", "B", "C", "D", "E"],
71+
"y": [1, 1, 1, 1, 1],
72+
"marker": {
73+
"colorscale": "Blues", "reversescale": true,
74+
"line": { "color": "#444", "width": 1 },
75+
"color": [1, 2, 3, 4, 5],
76+
"pattern": {
77+
"fillmode": "replace",
78+
"size": 12,
79+
"shape": "."
80+
}
81+
}
82+
},
83+
{
84+
"name": "size: [ ]",
85+
"type": "bar",
86+
"x": ["A", "B", "C", "D", "E"],
87+
"y": [1, 1, 1, 1, 1],
88+
"marker": {
89+
"colorscale": "Blues", "reversescale": true,
90+
"line": { "color": "#444", "width": 1 },
91+
"color": [1, 2, 3, 4, 5],
92+
"pattern": {
93+
"fillmode": "overlay", "fgopacity": 1,
94+
"size": [4, 6, 8, 10, 12],
95+
"shape": "."
96+
}
97+
}
98+
}
99+
],
100+
"layout": {
101+
"title": {
102+
"text": "legend pattern size range"
103+
},
104+
"width": 800,
105+
"height": 400,
106+
"hovermode": "x unified"
107+
}
108+
}

Diff for: ‎test/image/mocks/pattern_with_colorscale.json

-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"y": [4, 3, 2, 1],
77
"name": "replace bar",
88
"type": "bar",
9-
"textposition": "outside",
109
"marker": {
1110
"line": { "color": "lightblue", "width": 2 },
1211
"color": [4, 3, 2, 1],
@@ -24,7 +23,6 @@
2423
"y": [4, 3, 2, 1],
2524
"name": "overlay bar",
2625
"type": "bar",
27-
"textposition": "outside",
2826
"marker": {
2927
"line": { "color": "lightblue", "width": 2 },
3028
"color": [4, 3, 2, 1],

0 commit comments

Comments
 (0)