Skip to content

Commit a68819b

Browse files
richardnm-2richardnm-2
committed
getLabelBox dynamic
1 parent 3615690 commit a68819b

File tree

5 files changed

+327
-86
lines changed

5 files changed

+327
-86
lines changed

‎devtools/test_dashboard/index - boxplot.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Plotly.js Devtools</title>
5+
<link
6+
rel="stylesheet"
7+
type="text/css"
8+
href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"
9+
/>
10+
<link rel="stylesheet" type="text/css" href="./style.css" />
11+
</head>
12+
<body>
13+
<header>
14+
<img
15+
src="http://images.plot.ly/logo/[email protected]"
16+
onClick="Tabs.reload();"
17+
/>
18+
<span id="reload-time"></span>
19+
20+
<input id="mocks-search" type="text" placeholder="mocks search" />
21+
<input id="css-transform" type="text" placeholder="css transform" />
22+
</header>
23+
24+
<section id="mocks-list"></section>
25+
<div id="plots">
26+
<div id="graph">
27+
<div id="tester" style="width: 600px; height: 250px"></div>
28+
</div>
29+
</div>
30+
<div id="snapshot"></div>
31+
32+
<script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
33+
<script charset="utf-8" id="source" src="../../build/plotly.js">
34+
// type="module"
35+
// import Plotly from "../../build/plotly.js"
36+
</script>
37+
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
38+
<script>
39+
let x1 = [
40+
1234, 1234, 1234, 2222, 3333, 4444, 4444, 2222, 3333, 4444, 4444, 1234,
41+
2222, 3333, 3333, 4444, 4444, 1234, 1234, 1234, 2222, 2222, 4444, 4444,
42+
4444,
43+
];
44+
45+
let x2 = [
46+
1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.2, 1.25, 1.25, 1.25, 1.1, 1.1, 1.1,
47+
1.1, 1.1, 1.1, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.25,
48+
];
49+
50+
let x3 = [
51+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
52+
2,
53+
];
54+
55+
let y = [
56+
74.794746, 73.263952, 73.175294, 89.929494, 87.071843, 78.117551,
57+
76.690038, 85.818503, 97.373488, 76.747523, 73.172017, 68.891727,
58+
79.342691, 84.390967, 82.548122, 70.278573, 72.255796, 74.747855,
59+
73.312634, 70.067858, 81.736596, 84.71945, 80.099938, 82.208555,
60+
74.795867,
61+
];
62+
63+
var trace1 = {
64+
x: [x1, x2, x3],
65+
66+
y: y,
67+
type: "box",
68+
};
69+
70+
// var trace2 = {
71+
// x: [x1, x2],
72+
73+
// y: y,
74+
// type: "box",
75+
// };
76+
77+
var data = [trace1];
78+
79+
Plotly.newPlot("tester", data);
80+
</script>
81+
</body>
82+
</html>

‎devtools/test_dashboard/index copy 2.html

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Plotly.js Devtools</title>
5+
<link
6+
rel="stylesheet"
7+
type="text/css"
8+
href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300,200|Droid+Sans|PT+Sans+Narrow|Gravitas+One|Droid+Sans+Mono|Droid+Serif|Raleway|Old+Standard+TT"
9+
/>
10+
<link rel="stylesheet" type="text/css" href="./style.css" />
11+
</head>
12+
<body>
13+
<header>
14+
<img
15+
src="http://images.plot.ly/logo/[email protected]"
16+
onClick="Tabs.reload();"
17+
/>
18+
<span id="reload-time"></span>
19+
20+
<input id="mocks-search" type="text" placeholder="mocks search" />
21+
<input id="css-transform" type="text" placeholder="css transform" />
22+
</header>
23+
24+
<section id="mocks-list"></section>
25+
<div id="plots">
26+
<div id="graph">
27+
<div id="tester" style="width: 600px; height: 250px"></div>
28+
</div>
29+
</div>
30+
<div id="snapshot"></div>
31+
32+
<script src="../../node_modules/mathjax-v2/MathJax.js?config=TeX-AMS-MML_SVG"></script>
33+
<script charset="utf-8" id="source" src="../../build/plotly.js">
34+
// type="module"
35+
// import Plotly from "../../build/plotly.js"
36+
</script>
37+
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
38+
<script>
39+
// let fullData = [
40+
// {
41+
// x: [
42+
// ["AA", "AA", "AA", "BB"],
43+
// // "DD", "DD", "DD", "DD", "BB", "BB"],
44+
// ["DD", "CC", "DD", "DD"],
45+
// ["2", "1", "3", "4"],
46+
// // "VV", "MM", "AA"],
47+
// ],
48+
// y: [10, 8, 11, 12],
49+
// line: {
50+
// color: "orange",
51+
// width: 3,
52+
// },
53+
// // 14, 17, 8, 10, 10, 9],
54+
// // type: "bar",
55+
// },
56+
// {
57+
// x: [
58+
// ["AA", "AA", "AA", "BB"],
59+
// // "DD", "DD", "DD", "DD", "BB", "BB"],
60+
// ["DD", "CC", "DD", "DD"],
61+
// ["2", "1", "3", "4"],
62+
// // "VV", "MM", "AA"],
63+
// ],
64+
// y: [12, 10, 13, 14],
65+
// line: {
66+
// color: "blue",
67+
// width: 3,
68+
// },
69+
// // 14, 17, 8, 10, 10, 9],
70+
// // type: "bar",
71+
// },
72+
// ];
73+
// var trace1 = {
74+
// x: [
75+
// ["AA", "AA", "AA", "BB"],
76+
// ["DD", "CC", "DD", "DD"],
77+
// ["2", "1", "3", "4"],
78+
// ],
79+
80+
// // y: y0,
81+
// // y: [12, 10, 13, 14],
82+
// y: [y0, y1, y2, y3],
83+
// type: "box",
84+
// };
85+
// TESTER = document.getElementById("tester");
86+
// // Plotly.newPlot(TESTER, fullData, {
87+
// // margin: { t: 0 },
88+
// // });
89+
</script>
90+
<script>
91+
var y0 = [];
92+
var y1 = [];
93+
var y2 = [];
94+
var y3 = [];
95+
96+
for (var i = 0; i < 50; i++) {
97+
y0[i] = Math.random();
98+
y1[i] = Math.random() * 10;
99+
y2[i] = Math.random() * 20;
100+
y3[i] = Math.random() * 30;
101+
}
102+
103+
var ys = [y0, y1, y2, y3];
104+
105+
var spreadYs = [...y0, ...y1, ...y2, ...y3];
106+
107+
var trace1 = {
108+
x: [
109+
["AA", "AA", "AA", "BB"],
110+
["DD", "CC", "DD", "DD"],
111+
["2", "1", "3", "4"],
112+
],
113+
114+
// y: y0,
115+
y: spreadYs,
116+
// y: [12, 10, 13, 14],
117+
// y: [y0, y1, y2, y3],
118+
type: "box",
119+
};
120+
var data = [trace1];
121+
122+
// Plotly.newPlot("tester", data);
123+
</script>
124+
<script>
125+
let x1 = [
126+
1111, 1111, 1111, 1111, 2222, 2222, 3333, 3333, 3333, 4444, 4444, 4444,
127+
4444, 1111, 1111, 1111, 2222, 2222, 2222, 4444, 4444, 3333, 4444, 4444,
128+
4444,
129+
];
130+
131+
let x2 = [
132+
1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.2, 1.25, 1.25, 1.25, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.25,
133+
];
134+
135+
let x3 = [
136+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
137+
2,
138+
];
139+
140+
let y = [
141+
68.89172741012955, 74.7947463431226, 73.26395158502746,
142+
73.17529436801782, 89.92949351516832, 79.34269143320005,
143+
84.39096735673589, 87.07184294113185, 82.5481218835995,
144+
70.27857346850803, 78.11755050565934, 76.69003807419446,
145+
72.25579607260464, 74.74785526725371, 73.31263433475021,
146+
70.06785817806055, 81.73659630835789, 84.71945002499666,
147+
85.81850329438534, 80.09993832704379, 82.20855460624422,
148+
97.37348751144206, 76.7475232225902, 74.79586728812728,
149+
73.17201742069297,
150+
];
151+
152+
var trace1 = {
153+
x: [x1, x2, x3],
154+
155+
y: y,
156+
type: "box",
157+
};
158+
159+
// var trace2 = {
160+
// x: [x1, x2],
161+
162+
// y: y,
163+
// type: "box",
164+
// };
165+
166+
var data = [trace1];
167+
168+
Plotly.newPlot("tester", data, { margin: { t: 0, l: 50, r: 0 } });
169+
</script>
170+
</body>
171+
</html>

‎devtools/test_dashboard/index.html

Lines changed: 44 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -35,58 +35,7 @@
3535
// import Plotly from "../../build/plotly.js"
3636
</script>
3737
<script charset="utf-8" src="../../build/test_dashboard-bundle.js"></script>
38-
<script>
39-
// let fullData = [
40-
// {
41-
// x: [
42-
// ["AA", "AA", "AA", "BB"],
43-
// // "DD", "DD", "DD", "DD", "BB", "BB"],
44-
// ["DD", "CC", "DD", "DD"],
45-
// ["2", "1", "3", "4"],
46-
// // "VV", "MM", "AA"],
47-
// ],
48-
// y: [10, 8, 11, 12],
49-
// line: {
50-
// color: "orange",
51-
// width: 3,
52-
// },
53-
// // 14, 17, 8, 10, 10, 9],
54-
// // type: "bar",
55-
// },
56-
// {
57-
// x: [
58-
// ["AA", "AA", "AA", "BB"],
59-
// // "DD", "DD", "DD", "DD", "BB", "BB"],
60-
// ["DD", "CC", "DD", "DD"],
61-
// ["2", "1", "3", "4"],
62-
// // "VV", "MM", "AA"],
63-
// ],
64-
// y: [12, 10, 13, 14],
65-
// line: {
66-
// color: "blue",
67-
// width: 3,
68-
// },
69-
// // 14, 17, 8, 10, 10, 9],
70-
// // type: "bar",
71-
// },
72-
// ];
73-
// var trace1 = {
74-
// x: [
75-
// ["AA", "AA", "AA", "BB"],
76-
// ["DD", "CC", "DD", "DD"],
77-
// ["2", "1", "3", "4"],
78-
// ],
7938

80-
// // y: y0,
81-
// // y: [12, 10, 13, 14],
82-
// y: [y0, y1, y2, y3],
83-
// type: "box",
84-
// };
85-
// TESTER = document.getElementById("tester");
86-
// // Plotly.newPlot(TESTER, fullData, {
87-
// // margin: { t: 0 },
88-
// // });
89-
</script>
9039
<script>
9140
var y0 = [];
9241
var y1 = [];
@@ -123,8 +72,8 @@
12372
</script>
12473
<script>
12574
let x1 = [
126-
1234, 1234, 1234, 2222, 3333, 4444, 4444, 2222, 3333, 4444, 4444, 1234,
127-
2222, 3333, 3333, 4444, 4444, 1234, 1234, 1234, 2222, 2222, 4444, 4444,
75+
1111, 1111, 1111, 1111, 2222, 2222, 3333, 3333, 3333, 4444, 4444, 4444,
76+
4444, 1111, 1111, 1111, 2222, 2222, 2222, 4444, 4444, 3333, 4444, 4444,
12877
4444,
12978
];
13079

@@ -139,11 +88,15 @@
13988
];
14089

14190
let y = [
142-
74.794746, 73.263952, 73.175294, 89.929494, 87.071843, 78.117551,
143-
76.690038, 85.818503, 97.373488, 76.747523, 73.172017, 68.891727,
144-
79.342691, 84.390967, 82.548122, 70.278573, 72.255796, 74.747855,
145-
73.312634, 70.067858, 81.736596, 84.71945, 80.099938, 82.208555,
146-
74.795867,
91+
68.89172741012955, 74.7947463431226, 73.26395158502746,
92+
73.17529436801782, 89.92949351516832, 79.34269143320005,
93+
84.39096735673589, 87.07184294113185, 82.5481218835995,
94+
70.27857346850803, 78.11755050565934, 76.69003807419446,
95+
72.25579607260464, 74.74785526725371, 73.31263433475021,
96+
70.06785817806055, 81.73659630835789, 84.71945002499666,
97+
85.81850329438534, 80.09993832704379, 82.20855460624422,
98+
97.37348751144206, 76.7475232225902, 74.79586728812728,
99+
73.17201742069297,
147100
];
148101

149102
var trace1 = {
@@ -153,16 +106,45 @@
153106
type: "box",
154107
};
155108

109+
var trace2 = {
110+
x: [
111+
// [1111, 1111, 1111],
112+
// [1.1, 1.1, 1.1],
113+
// [1, 2, 3],
114+
[1111, 1111],
115+
[1.1, 1.2],
116+
[1, 2],
117+
// [1111], [1.1], [1],
118+
// [1111, 1.1, 2],
119+
],
120+
121+
// y: [72, 67, 62],
122+
y: [72, 67],
123+
// type: "scatter",
124+
};
125+
var trace3 = {
126+
// x: [[1111], [1.1], [2]],
127+
// y: [67],
128+
// // type: "scatter",
129+
};
130+
156131
// var trace2 = {
157-
// x: [x1, x2],
132+
// x: [
133+
// ["AA", "AA", "AA", "BB"],
134+
// ["DD", "CC", "DD", "DD"],
135+
// ["2", "1", "3", "4"],
136+
// ],
158137

159-
// y: y,
138+
// // y: y0,
139+
// y: [12, 10, 13, 14],
140+
// }
141+
// y: [y0, y1, y2, y3],
160142
// type: "box",
161143
// };
162144

163-
var data = [trace1];
145+
var data = [trace2];
164146

165-
Plotly.newPlot("tester", data);
147+
Plotly.newPlot("tester", data, { margin: { t: 0, l: 50, r: 0 } });
166148
</script>
167149
</body>
168150
</html>

0 commit comments

Comments
 (0)