Skip to content

Commit 657ec2e

Browse files
committed
improved mock for shape label text templates
1 parent 0b2bb2a commit 657ec2e

File tree

1 file changed

+316
-16
lines changed

1 file changed

+316
-16
lines changed
Lines changed: 316 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,323 @@
11
{
2-
"data":[{
3-
"x":[0,10],
4-
"y":[0,10],
5-
"mode":"markers"
6-
}],
2+
"data": [
3+
{
4+
"xaxis": "x",
5+
"yaxis": "y",
6+
"x": [
7+
0,
8+
10
9+
],
10+
"y": [
11+
0,
12+
10
13+
],
14+
"mode": "markers"
15+
},
16+
{
17+
"xaxis": "x2",
18+
"yaxis": "y2",
19+
"x": [
20+
0,
21+
10
22+
],
23+
"y": [
24+
1e-1,
25+
1e+6
26+
],
27+
"mode": "markers"
28+
},
29+
{
30+
"xaxis": "x3",
31+
"yaxis": "y3",
32+
"x": [
33+
1e-1,
34+
1e+4
35+
],
36+
"y": [
37+
1e-1,
38+
1e+6
39+
],
40+
"mode": "markers"
41+
},
42+
{
43+
"xaxis": "x4",
44+
"yaxis": "y4",
45+
"x": [
46+
"2021-01-01",
47+
"2023-01-01"
48+
],
49+
"y": [
50+
0,
51+
10
52+
],
53+
"mode": "markers"
54+
}
55+
],
756
"layout": {
8-
"xaxis":{"title":{"text":"linear"},"range":[0,10],"type":"linear","showgrid":false,"zeroline":false,"showticklabels":false},
9-
"yaxis":{"title":{"text":"linear"},"range":[0,10],"type":"linear","showgrid":false,"zeroline":false,"showticklabels":false},
10-
"height":400,
11-
"width":800,
12-
"margin": {"l":20,"r":20,"pad":0},
13-
"showlegend":false,
14-
"shapes":[
15-
{"label":{"text":"this will be overridden", "texttemplate": "Here is x0 divided by 2: %{x0/2:.2f}"}, "layer":"below","x0":2,"x1":5,"y0":6,"y1":9,"opacity":0.5,"fillcolor":"#05e","line":{"width":3,"color":"#025","dash":"dashdot"}, "editable": true},
16-
{"label":{"text":"this will be overridden", "texttemplate": "Here is the slope: %{slope:.3f}"}, "layer":"below","x0":5,"x1":9,"y0":2.5,"y1":9,"type": "line", "opacity":0.5,"fillcolor":"#05e","line":{"width":3,"color":"#025"}, "editable": true}
57+
"xaxis": {
58+
"minor": {
59+
"showgrid": true
60+
},
61+
"anchor": "y",
62+
"domain": [
63+
0,
64+
0.475
65+
],
66+
"gridcolor": "white"
67+
},
68+
"yaxis": {
69+
"minor": {
70+
"showgrid": true
71+
},
72+
"anchor": "x",
73+
"domain": [
74+
0,
75+
0.475
76+
],
77+
"gridcolor": "white"
78+
},
79+
"xaxis2": {
80+
"minor": {
81+
"showgrid": true
82+
},
83+
"anchor": "y2",
84+
"domain": [
85+
0.525,
86+
1
87+
],
88+
"gridcolor": "white"
89+
},
90+
"yaxis2": {
91+
"minor": {
92+
"showgrid": true
93+
},
94+
"anchor": "x2",
95+
"domain": [
96+
0,
97+
0.475
98+
],
99+
"type": "log",
100+
"gridcolor": "white"
101+
},
102+
"xaxis3": {
103+
"minor": {
104+
"showgrid": true
105+
},
106+
"anchor": "y3",
107+
"domain": [
108+
0.525,
109+
1
110+
],
111+
"type": "log",
112+
"gridcolor": "white"
113+
},
114+
"yaxis3": {
115+
"minor": {
116+
"showgrid": true
117+
},
118+
"anchor": "x3",
119+
"domain": [
120+
0.525,
121+
1
122+
],
123+
"type": "log",
124+
"gridcolor": "white"
125+
},
126+
"xaxis4": {
127+
"minor": {
128+
"showgrid": true
129+
},
130+
"anchor": "y4",
131+
"domain": [
132+
0,
133+
0.475
134+
],
135+
"gridcolor": "white"
136+
},
137+
"yaxis4": {
138+
"minor": {
139+
"showgrid": true
140+
},
141+
"anchor": "x4",
142+
"domain": [
143+
0.525,
144+
1
145+
],
146+
"gridcolor": "white"
147+
},
148+
"font": {
149+
"family": "Raleway"
150+
},
151+
"plot_bgcolor": "lightblue",
152+
"showlegend": false,
153+
"width": 1000,
154+
"height": 1000,
155+
"shapes": [
156+
{
157+
"label": {
158+
"text": "this will be overridden",
159+
"texttemplate": "Here is x0 divided by 2: %{x0/2:.2f}"
160+
},
161+
"layer": "above",
162+
"x0": 0.5,
163+
"x1": 6.5,
164+
"y0": 7,
165+
"y1": 8.5,
166+
"opacity": 0.5,
167+
"fillcolor": "#05e",
168+
"line": {
169+
"width": 3,
170+
"color": "#025",
171+
"dash": "dashdot"
172+
},
173+
"editable": true
174+
},
175+
{
176+
"label": {
177+
"texttemplate": "Here is the slope: %{slope:.3f}"
178+
},
179+
"layer": "above",
180+
"x0": 5,
181+
"x1": 9,
182+
"y0": 2.5,
183+
"y1": 9,
184+
"type": "line",
185+
"opacity": 0.5,
186+
"line": {
187+
"width": 3,
188+
"color": "#025"
189+
},
190+
"editable": true
191+
},
192+
{
193+
"label": {
194+
"texttemplate": "paths have no slope: %{slope}",
195+
"textposition": "top center",
196+
"yanchor": "bottom"
197+
},
198+
"editable": true,
199+
"path": "M3.71,0.75L2.26,3.99L3.71,3.99Z",
200+
"layer": "above"
201+
},
202+
{
203+
"label": {
204+
"texttemplate": "dy: %{dy:.2f}<br>dx: %{dx:.2f}<br>slope: %{slope:.2f}<br>length: %{length:.2f}<br>",
205+
"textposition": "start",
206+
"yanchor": "top"
207+
},
208+
"layer": "above",
209+
"xref": "x2",
210+
"yref": "y2",
211+
"x0": 2,
212+
"x1": 10,
213+
"y0": 1000000,
214+
"y1": 10000,
215+
"type": "line",
216+
"opacity": 0.5,
217+
"line": {
218+
"width": 3,
219+
"color": "#025"
220+
},
221+
"editable": true
222+
},
223+
{
224+
"label": {
225+
"texttemplate": "x0: %{x0:.2f}<br>x1: %{x1:.2f}<br>xcenter: %{xcenter:.2f}<br>dx: %{dx:.2f}<br>width: %{width:.2f}<br><br>y0: %{y0:.2f}<br>y1: %{y1:.2f}<br>ycenter: %{ycenter:.2f}<br>dy: %{dy:.2f}<br>height: %{height:.2f}"
226+
},
227+
"layer": "above",
228+
"xref": "x2",
229+
"yref": "y2",
230+
"x0": 2,
231+
"x1": 6.5,
232+
"y0": 1,
233+
"y1": 20000,
234+
"type": "circle",
235+
"line": {
236+
"width": 2,
237+
"color": "#025"
238+
},
239+
"editable": true
240+
},
241+
{
242+
"label": {
243+
"texttemplate": "dy: %{dy:.2f}<br>dx: %{dx:.2f}<br>slope: %{slope:.2f}<br>length: %{length:.2f}",
244+
"textposition": "start",
245+
"yanchor": "top"
246+
},
247+
"layer": "above",
248+
"xref": "x3",
249+
"yref": "y3",
250+
"x0": 1,
251+
"x1": 10000,
252+
"y0": 1000000,
253+
"y1": 10000,
254+
"type": "line",
255+
"opacity": 0.5,
256+
"line": {
257+
"width": 3,
258+
"color": "#025"
259+
},
260+
"editable": true
261+
},
262+
{
263+
"label": {
264+
"texttemplate": "x0: %{x0:.2f}<br>x1: %{x1:.2f}<br>xcenter: %{xcenter:.2f}<br>dx: %{dx:.2f}<br>width: %{width:.2f}<br><br>y0: %{y0:.2f}<br>y1: %{y1:.2f}<br>ycenter: %{ycenter:.2f}<br>dy: %{dy:.2f}<br>height: %{height:.2f}<br><br>length: %{length}"
265+
},
266+
"layer": "above",
267+
"xref": "x3",
268+
"yref": "y3",
269+
"x0": 10,
270+
"x1": 1000,
271+
"y0": 0.25,
272+
"y1": 20000,
273+
"type": "rect",
274+
"line": {
275+
"width": 2,
276+
"color": "#025"
277+
},
278+
"editable": true
279+
},
280+
{
281+
"label": {
282+
"texttemplate": "Rate = %{slope*31536000000:.3f} per year"
283+
},
284+
"layer": "above",
285+
"xref": "x4",
286+
"yref": "y4",
287+
"x0": "2021-01-01",
288+
"x1": "2023-01-01",
289+
"y0": 2.5,
290+
"y1": 6,
291+
"type": "line",
292+
"line": {
293+
"width": 2,
294+
"color": "#025"
295+
},
296+
"editable": true
297+
},
298+
{
299+
"label": {
300+
"texttemplate": "x0: %{x0|%m %b %Y}<br>x1: %{x1|%m %b %Y}<br>xcenter: %{xcenter|%m %b %Y}<br>dx: %{dx/86400000:d} days<br>width: %{width/86400000:d} days<br><br>y0: %{y0:.1f}<br>y1: %{y1:.1f}<br>ycenter: %{ycenter:.1f}<br>dy: %{dy:.1f}<br>height: %{height:.1f}<br>",
301+
"textposition": "top left"
302+
},
303+
"layer": "above",
304+
"xref": "x4",
305+
"yref": "y4",
306+
"x0": "2021-07-01",
307+
"x1": "2022-07-01",
308+
"y0": 2.5,
309+
"y1": 10,
310+
"type": "rect",
311+
"line": {
312+
"width": 2,
313+
"color": "#025"
314+
},
315+
"editable": true
316+
}
17317
],
18318
"newshape": {
19319
"label": {
20-
"texttemplate": "New shapes display a slope! Slope = %{slope:.1f}"
320+
"texttemplate": "Slope! %{slope*31536000000:.2f}"
21321
}
22322
}
23323
},
@@ -31,4 +331,4 @@
31331
"eraseshape"
32332
]
33333
}
34-
}
334+
}

0 commit comments

Comments
 (0)