Skip to content

Commit 9a8089c

Browse files
archmojarchmoj
authored
Merge pull request #5010 from plotly/arrow-markers
Implement horizontal and vertical markers for arrow charts
2 parents 556b5d4 + 8cd6767 commit 9a8089c

File tree

4 files changed

+313
-0
lines changed

4 files changed

+313
-0
lines changed

‎src/components/drawing/symbol_defs.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,5 +482,81 @@ module.exports = {
482482
needLine: true,
483483
noDot: true,
484484
noFill: true
485+
},
486+
'arrow-up': {
487+
n: 45,
488+
f: function(r) {
489+
var rx = d3.round(r, 2);
490+
var ry = d3.round(r * 2, 2);
491+
return 'M0,0L-' + rx + ',' + ry + 'H' + rx + 'Z';
492+
},
493+
noDot: true
494+
},
495+
'arrow-down': {
496+
n: 46,
497+
f: function(r) {
498+
var rx = d3.round(r, 2);
499+
var ry = d3.round(r * 2, 2);
500+
return 'M0,0L-' + rx + ',-' + ry + 'H' + rx + 'Z';
501+
},
502+
noDot: true
503+
},
504+
'arrow-left': {
505+
n: 47,
506+
f: function(r) {
507+
var rx = d3.round(r * 2, 2);
508+
var ry = d3.round(r, 2);
509+
return 'M0,0L' + rx + ',-' + ry + 'V' + ry + 'Z';
510+
},
511+
noDot: true
512+
},
513+
'arrow-right': {
514+
n: 48,
515+
f: function(r) {
516+
var rx = d3.round(r * 2, 2);
517+
var ry = d3.round(r, 2);
518+
return 'M0,0L-' + rx + ',-' + ry + 'V' + ry + 'Z';
519+
},
520+
noDot: true
521+
},
522+
'arrow-bar-up': {
523+
n: 49,
524+
f: function(r) {
525+
var rx = d3.round(r, 2);
526+
var ry = d3.round(r * 2, 2);
527+
return 'M-' + rx + ',0H' + rx + 'M0,0L-' + rx + ',' + ry + 'H' + rx + 'Z';
528+
},
529+
needLine: true,
530+
noDot: true
531+
},
532+
'arrow-bar-down': {
533+
n: 50,
534+
f: function(r) {
535+
var rx = d3.round(r, 2);
536+
var ry = d3.round(r * 2, 2);
537+
return 'M-' + rx + ',0H' + rx + 'M0,0L-' + rx + ',-' + ry + 'H' + rx + 'Z';
538+
},
539+
needLine: true,
540+
noDot: true
541+
},
542+
'arrow-bar-left': {
543+
n: 51,
544+
f: function(r) {
545+
var rx = d3.round(r * 2, 2);
546+
var ry = d3.round(r, 2);
547+
return 'M0,-' + ry + 'V' + ry + 'M0,0L' + rx + ',-' + ry + 'V' + ry + 'Z';
548+
},
549+
needLine: true,
550+
noDot: true
551+
},
552+
'arrow-bar-right': {
553+
n: 52,
554+
f: function(r) {
555+
var rx = d3.round(r * 2, 2);
556+
var ry = d3.round(r, 2);
557+
return 'M0,-' + ry + 'V' + ry + 'M0,0L-' + rx + ',-' + ry + 'V' + ry + 'Z';
558+
},
559+
needLine: true,
560+
noDot: true
485561
}
486562
};

‎test/image/baselines/arrow-markers.png

51.1 KB
Loading

‎test/image/mocks/arrow-markers.json

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
{
2+
"data": [
3+
{
4+
"type": "scatter",
5+
"mode": "lines+markers",
6+
"line": {
7+
"width": 5,
8+
"color": "black"
9+
},
10+
"marker": {
11+
"line": {
12+
"width": 5,
13+
"color": "black"
14+
},
15+
"color": "yellow",
16+
"size": [
17+
40,
18+
40,
19+
40,
20+
null,
21+
40,
22+
40,
23+
40
24+
],
25+
"symbol": [
26+
0,
27+
"arrow-up",
28+
"arrow-down",
29+
null,
30+
100,
31+
145,
32+
146
33+
]
34+
},
35+
"x": [
36+
0,
37+
0,
38+
0,
39+
null,
40+
1,
41+
1,
42+
1
43+
],
44+
"y": [
45+
0,
46+
1,
47+
-1,
48+
null,
49+
0,
50+
1,
51+
-1
52+
]
53+
},
54+
{
55+
"type": "scatter",
56+
"mode": "lines+markers",
57+
"line": {
58+
"width": 5,
59+
"color": "black"
60+
},
61+
"marker": {
62+
"line": {
63+
"width": 5,
64+
"color": "black"
65+
},
66+
"color": "yellow",
67+
"size": [
68+
40,
69+
40,
70+
40,
71+
null,
72+
40,
73+
40,
74+
40
75+
],
76+
"symbol": [
77+
0,
78+
"arrow-bar-up",
79+
"arrow-bar-down",
80+
null,
81+
100,
82+
149,
83+
150
84+
]
85+
},
86+
"x": [
87+
0,
88+
0,
89+
0,
90+
null,
91+
1,
92+
1,
93+
1
94+
],
95+
"y": [
96+
0,
97+
1,
98+
-1,
99+
null,
100+
0,
101+
1,
102+
-1
103+
],
104+
"xaxis": "x2",
105+
"yaxis": "y2"
106+
},
107+
{
108+
"type": "scatter",
109+
"mode": "lines+markers",
110+
"line": {
111+
"width": 5,
112+
"color": "black"
113+
},
114+
"marker": {
115+
"line": {
116+
"width": 5,
117+
"color": "black"
118+
},
119+
"color": "yellow",
120+
"size": [
121+
40,
122+
40,
123+
40,
124+
null,
125+
40,
126+
40,
127+
40
128+
],
129+
"symbol": [
130+
0,
131+
"arrow-right",
132+
"arrow-left",
133+
null,
134+
100,
135+
148,
136+
147
137+
]
138+
},
139+
"y": [
140+
0,
141+
0,
142+
0,
143+
null,
144+
1,
145+
1,
146+
1
147+
],
148+
"x": [
149+
0,
150+
1,
151+
-1,
152+
null,
153+
0,
154+
1,
155+
-1
156+
],
157+
"xaxis": "x3",
158+
"yaxis": "y3"
159+
},
160+
{
161+
"type": "scatter",
162+
"mode": "lines+markers",
163+
"line": {
164+
"width": 5,
165+
"color": "black"
166+
},
167+
"marker": {
168+
"line": {
169+
"width": 5,
170+
"color": "black"
171+
},
172+
"color": "yellow",
173+
"size": [
174+
40,
175+
40,
176+
40,
177+
null,
178+
40,
179+
40,
180+
40
181+
],
182+
"symbol": [
183+
0,
184+
"arrow-bar-right",
185+
"arrow-bar-left",
186+
null,
187+
100,
188+
152,
189+
151
190+
]
191+
},
192+
"y": [
193+
0,
194+
0,
195+
0,
196+
null,
197+
1,
198+
1,
199+
1
200+
],
201+
"x": [
202+
0,
203+
1,
204+
-1,
205+
null,
206+
0,
207+
1,
208+
-1
209+
],
210+
"xaxis": "x4",
211+
"yaxis": "y4"
212+
}
213+
],
214+
"layout": {
215+
"title": {
216+
"text": "<b>arrow</b> and <b>arrow-bar</b> markers"
217+
},
218+
"showlegend": false,
219+
"width": 800,
220+
"height": 800,
221+
"margin": {
222+
"t": 80,
223+
"b": 40,
224+
"l": 40,
225+
"r": 40
226+
},
227+
"grid": {
228+
"rows": 2,
229+
"columns": 2,
230+
"xgap": 0.1,
231+
"ygap": 0.1,
232+
"pattern": "independent"
233+
}
234+
}
235+
}

‎test/jasmine/tests/mock_test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ var list = [
3838
'animation_bar',
3939
'annotations',
4040
'annotations-autorange',
41+
'arrow-markers',
4142
'automargin-mirror-all',
4243
'automargin-mirror-allticks',
4344
'automargin-multiline-titles',
@@ -1081,6 +1082,7 @@ figs['animation'] = require('@mocks/animation');
10811082
figs['animation_bar'] = require('@mocks/animation_bar');
10821083
// figs['annotations'] = require('@mocks/annotations');
10831084
// figs['annotations-autorange'] = require('@mocks/annotations-autorange');
1085+
figs['arrow-markers'] = require('@mocks/arrow-markers');
10841086
figs['automargin-mirror-all'] = require('@mocks/automargin-mirror-all');
10851087
figs['automargin-mirror-allticks'] = require('@mocks/automargin-mirror-allticks');
10861088
figs['automargin-multiline-titles'] = require('@mocks/automargin-multiline-titles');

0 commit comments

Comments
 (0)