Skip to content

Commit 276b334

Browse files
robywwrobyww
authored
Merge pull request #340 from Caltech-IPAC/dm-9942-add-plotly
DM-9942: Add plotly support
2 parents a6d0295 + 0d17a80 commit 276b334

File tree

11 files changed

+1738
-5
lines changed

11 files changed

+1738
-5
lines changed

‎src/firefly/html/demo/plotly-concepts.html

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6+
<link rel="icon" type="image/x-icon" href="images/fftools-logo-16x16.png">
7+
<meta name="apple-mobile-web-app-capable" content="yes" />
8+
<link rel="apple-touch-icon" href="images/fftools-logo-57x57_ipad.png"/>
9+
<link rel=”apple-touch-startup-image” href=”images/fftools-ipad_splash_768x1004.png”>
10+
<title>Plotly Concept</title>
11+
12+
<script type="text/javascript" src="../plotly-1.25.0.min.js"></script>
13+
</head>
14+
15+
<body style="margin: 0; background-color: rgb(200,200,200)">
16+
<!-- attached location for firefly app -->
17+
<div id='p1' > </div>
18+
<div id='p2' > </div>
19+
<div id='p3' > </div>
20+
<div id='app'/>
21+
22+
23+
<script>
24+
(function() {
25+
var y = [10, 23, 44, 22, 20, 0, 10, 33, 12, 35, 10, 23, 44, 22, 20, 5, 10, 33, 12, 35];
26+
var xcen = [125, 130, 135, 143, 145, 150, 155, 160, 165, 174.5, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220];
27+
var binSize = xcen.map((aX, idx) => idx < xcen.length - 1 ? xcen[idx + 1] - aX : 5);
28+
var x = xcen.map((aX, idx) => aX + binSize[idx] / 2);
29+
var text = y.map((v, idx) => `<b>Bin Center:</b> ${xcen[idx] / 2}<br><b>Range</b>:${xcen[idx]} to ${xcen[idx] + binSize[idx]}<br><b>Count:</b> ${v}<br><b>Bin Size</b>: ${binSize[idx]}`);
30+
var color = xcen.map((v, idx) => idx % 2 === 0 ? 'black' : 'gray');
31+
32+
var data = [
33+
{
34+
y: y,
35+
x: x,
36+
text: text,
37+
hoverinfo: 'text+x',
38+
type: 'bar',
39+
width: binSize,
40+
marker: {
41+
color,
42+
line: {width: 1, color: 'black'},
43+
},
44+
}
45+
];
46+
const layout = {
47+
bargap: 0,
48+
title: 'Variable Bin Histogram Concept'
49+
};
50+
Plotly.newPlot('p1', data, layout);
51+
})();
52+
</script>
53+
54+
55+
56+
<script>
57+
(function() {
58+
59+
const defSquareMarker= { symbol: 'square', size: 10, color: 'pink'};
60+
const highlightMarker= {
61+
symbol: 'circle',
62+
size: 10,
63+
color: 'orange',
64+
line: { color: 'red', width: 1, }
65+
};
66+
const x= [2, 3, 4, 5, 5.1, 5.2, 7, 7.5];
67+
const y= [3, 2, 4, 4, 3.3, 5.5, 2.2, 4];
68+
69+
const data = [
70+
{
71+
x: [1, 2, 3, 4, 4.1, 4.2, 6, 6.5],
72+
y: [2, 1, 3, 4, 3.3, 5.5, 2.2, 4],
73+
error_y: {
74+
type: 'data',
75+
symmetric: false,
76+
array: [0, 0, 0, 0, .1,.3,.3,.4],
77+
arrayminus: [0.2, 0.4, 1, 0.2, .1,.2,.21,.1],
78+
color: 'orange',
79+
},
80+
error_x: {
81+
type: 'data',
82+
symmetric: false,
83+
array: [.05, 0.2, 0.1, 0.1, .05, 0.2, 0.1, 0.1],
84+
arrayminus: [0.2, 0.4, .2, 0.2, 0.24, 0.5, .23, 0.2],
85+
color: 'red',
86+
thickness: 2,
87+
width:3
88+
89+
},
90+
type: 'scatter',
91+
mode: 'lines+markers',
92+
marker: {
93+
symbol: 'circle',
94+
size: 10,
95+
color: 'purple',
96+
line: {
97+
color: 'blue',
98+
width: 1,
99+
//dash : 'dots'
100+
}
101+
102+
},
103+
line: {
104+
width: 1,
105+
color: 'blue'
106+
}
107+
108+
},
109+
{
110+
x,
111+
y,
112+
type: 'scatter',
113+
mode: 'markers',
114+
// marker: x.map( m => defSquareMarker),
115+
marker: defSquareMarker,
116+
},
117+
{
118+
type: 'scatter',
119+
x: [2],
120+
y: [1],
121+
showlegend : false,
122+
marker: highlightMarker,
123+
124+
}
125+
];
126+
const layout = {
127+
title: 'Scatter with error bars and point selection Concept',
128+
hovermode: 'closest'
129+
};
130+
Plotly.newPlot('p2', data, layout);
131+
var myPlot = document.getElementById('p2');
132+
var cnt = 0;
133+
var originalData = Object.assign({}, data);
134+
myPlot.on('plotly_click', function (ev) {
135+
//console.log('data:'+ cnt);
136+
const {curveNumber}= ev.points[0];
137+
if (curveNumber===0) {
138+
console.log('ata', originalData)
139+
console.log('ev', ev);
140+
var update = {
141+
x: [[data[0].x[ev.points[0].pointNumber]]],
142+
y: [[data[0].y[ev.points[0].pointNumber]]]
143+
};
144+
console.log('update', update);
145+
Plotly.restyle(myPlot, update, [2])
146+
}
147+
else if (curveNumber===1) {
148+
149+
}
150+
});
151+
})();
152+
</script>
153+
154+
155+
<script>
156+
(function() {
157+
const data= [ {
158+
"marker": {
159+
colorscale: [[0, 'rgb(0,0,255)'], [1, 'rgb(255,0,0)']],
160+
"color": [
161+
0,
162+
-1,
163+
-2,
164+
-3,
165+
-4,
166+
-5,
167+
-6,
168+
-7,
169+
-8,
170+
-9,
171+
-10,
172+
-11,
173+
-12,
174+
-13,
175+
-14,
176+
-15,
177+
-16,
178+
-17,
179+
-18,
180+
-19,
181+
-20,
182+
-21,
183+
-22,
184+
-23,
185+
-24,
186+
-25,
187+
-26,
188+
-27,
189+
-28,
190+
-29,
191+
-30,
192+
-31,
193+
-32,
194+
-33,
195+
-34,
196+
-35,
197+
-36,
198+
-37,
199+
-38,
200+
-39
201+
],
202+
"size": [
203+
0,
204+
10,
205+
14.142135623730951,
206+
17.320508075688775,
207+
20,
208+
22.360679774997898,
209+
24.49489742783178,
210+
26.457513110645905,
211+
28.284271247461902,
212+
30,
213+
31.622776601683793,
214+
33.166247903554,
215+
34.64101615137755,
216+
36.05551275463989,
217+
37.416573867739416,
218+
38.72983346207417,
219+
40,
220+
41.23105625617661,
221+
42.42640687119285,
222+
43.58898943540674,
223+
44.721359549995796,
224+
45.8257569495584,
225+
46.9041575982343,
226+
47.958315233127195,
227+
48.98979485566356,
228+
50,
229+
50.99019513592785,
230+
51.96152422706632,
231+
52.91502622129181,
232+
53.85164807134504,
233+
54.772255750516614,
234+
55.67764362830022,
235+
56.568542494923804,
236+
57.445626465380286,
237+
58.309518948453004,
238+
59.16079783099616,
239+
60,
240+
60.8276253029822,
241+
61.644140029689765,
242+
62.44997998398398
243+
],
244+
"colorbar": {
245+
"title": "WOW"
246+
}
247+
},
248+
"y": [
249+
5,
250+
5,
251+
5,
252+
5,
253+
5,
254+
5,
255+
5.5,
256+
5,
257+
5,
258+
5,
259+
5,
260+
5,
261+
5,
262+
5,
263+
5,
264+
5.1,
265+
4,
266+
5,
267+
5,
268+
5,
269+
5,
270+
5,
271+
5,
272+
5,
273+
5,
274+
5,
275+
5,
276+
5,
277+
4.9,
278+
5,
279+
5,
280+
5,
281+
5,
282+
5,
283+
5,
284+
5,
285+
5,
286+
5,
287+
5,
288+
5
289+
],
290+
"type": "scatter",
291+
"mode": "markers"
292+
}
293+
];
294+
const layout= {
295+
"title": "scatter + colorbar = <3",
296+
"xaxis": {
297+
"type": "linear",
298+
"range": [
299+
-2.501411175139456,
300+
43.340777299865266
301+
],
302+
"autorange": true
303+
},
304+
"yaxis": {
305+
"type": "linear",
306+
"range": [
307+
4,
308+
6
309+
],
310+
"autorange": true
311+
},
312+
"height": 598,
313+
"width": 1080,
314+
"autosize": true,
315+
"showlegend": false
316+
};
317+
Plotly.newPlot('p3', data, layout);
318+
319+
})();
320+
</script>
321+
322+
323+
</body>
324+
325+
</html>
326+
327+

‎src/firefly/html/firefly.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
],
2121
options : {
2222
MenuItemKeys: {maskOverlay:true},
23-
catalogSpacialOp: 'polygonWhenPlotExist'
23+
catalogSpacialOp: 'polygonWhenPlotExist',
24+
charts: {chartEngine: 'plotly'}
2425
}
2526
},
2627
};

‎src/firefly/html/lsst-api-triview.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
catalogSpacialOp: 'polygonWhenPlotExist',
2727
properties : {
2828
daxUrl: 'http://lsst-qserv-dax01.ncsa.illinois.edu:5000'
29-
}
29+
},
30+
charts: {chartEngine: 'plotly'}
3031
}
3132
}
3233
};

‎src/firefly/html/lsst-pdac-triview.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
MenuItemKeys: {maskOverlay: true},
2424
imageTabs: ['fileUpload', 'url', '2mass', 'wise', 'sdss', 'msx', 'dss', 'iras'],
2525
irsaCatalogFilter: 'lsstFilter',
26-
catalogSpacialOp: 'polygonWhenPlotExist'
26+
catalogSpacialOp: 'polygonWhenPlotExist',
27+
charts: {chartEngine: 'plotly'}
2728
}
2829
}
2930
};

‎src/firefly/html/plotly-1.25.0.min.js

Lines changed: 72 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/firefly/html/ts.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@
1414
menu: [
1515
{label:'Upload', action:'LCUpload'},
1616
{label:'Help', action:'app_data.helpLoad', type:'COMMAND'},
17-
]
17+
],
18+
options : {
19+
charts: {chartEngine: 'plotly'}
20+
}
1821
},
1922
};
2023
</script>

0 commit comments

Comments
 (0)