-
Notifications
You must be signed in to change notification settings - Fork 2
/
plot-main.html
152 lines (136 loc) · 4.93 KB
/
plot-main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Main plot</title>
<script src="external/all-min.js"></script>
<link rel='stylesheet' type = "text/css", a href='external/all-min.css' />
<link rel="stylesheet", type="text/css", a href = "plot-main.css" />
</head>
<body>
<!-- left panel -->
<div id = "settings-panel" class = "side-panel">
<!-- plot range and chart display options -->
<div id = "chart-settings">
<b>Plot range</b><br />
<b>x</b> from
<input type = "number" id = "x-min" class = "plot-range">
to <input type = "number" id = "x-max" class = "plot-range">
<br />
<b>y</b> from <input type = "number" id = "y-min" class = "plot-range">
to <input type = "number" id = "y-max" class = "plot-range"><br />
<b>Chart background</b>
<input type = "color" id = "chart-color">
<br /><br />
<b>Show legend</b>
<input type = "checkbox" id = "toggle-legend" checked>
<text> </text>
<b>Show lines</b>
<input type = "checkbox" id = "toggle-ls" checked><br />
<b>Point marker</b>
<select id = "mark-type" checked>
<option value = "true">All points</option>
<option value = "null" selected>Sparse</option>
<option value = "false">None</option>
</select>
<br />
</div>
<!-- series display options -->
<div id = "series-view">
<!-- series list area -->
<div class = "select-series">
<button id = "remove-series">Remove</button>
<button id = "show-all">Show</button>
<button id = "hide-all">Hide</button><br /><br />
<!-- option name and value equal series name -->
<select multiple size = "7" id = "series-list">
</select><br /><br />
<span> </span>Add series <br />
<input type = "file" id = "add-series" multiple>
</div>
<div id = "set-series">
<span class = "one-series"> </span><br />
<span class = "one-series space"></span>
<span class = "one-series">Upload plot data</span><br />
<input type = "file" id = "series-data"><br /><br/>
<span class = "one-series">Name</span> <input type = "text" id = "series-name"><br/><br/>
<span class = "text">Color</span> <input type = "color" id = "series-color">
<br/><br/> <span class = "text">Symbol</span>
<select id = "series-symbol">
<option name = "circle">circle</option>
<option name = "square">square</option>
<option name = "diamond">diamond</option>
<option name = "triangle">triangle</option>
<option name = "triangle-down">triangle-down</option>
</select>
<br /><br />
<button id = "gen-mean">Plot mean</button>
<button id = "gen-hist">Histogram</button>
</div>
</div>
</div>
<div id = "inner-expand" class = "expand">
<span>⇽</span>
</div>
<div id = "spreadsheet-panel" class = "side-panel">
<div id = "sheet-search">
<b>Find by x</b> <text> </text> <input type = "number" id = "sheet-series-x"> <br />
<text class = "sheet-search-error">No such x-value</text>
</div>
<table id = "series-spreadsheet">
<thead id = "sheet-header">
<tr>
<th colspan = "2" id = "sheet-title">No series selected</th></tr>
</thead>
<tbody id = "sheet-data">
</tbody>
</table>
</div>
<div id = "outer-expand" class = "expand">
<span>⇾</span>
</div>
<!-- chart area -->
<div id = "chart-container">
<div id = "chart"></div>
</div>
<!-- edit chart title -->
<div class = "edit-label" id = "edit-title">
Title <input type = "text" class = "label-text"><br />
<!-- options in plot-main.js -->
Font <select class = "label-font"></select>
<span></span>
<input type = "color" class = "label-color">
<span></span>
<input type = "number" class = "label-size"> <br />
<button class = 'apply-label'>Apply</button>
<button class = 'cancel'>Cancel</button>
</div>
<!-- edit x-axis label -->
<div class = "edit-label" id = "edit-x-label">
Title <input type = "text" class = "label-text"><br />
Font <select class = "label-font"></select>
<span></span>
<input type = "color" class = "label-color">
<span></span>
<input type = "number" class = "label-size"> <br />
Tick interval <input type = "number" class = "tick-interval"> <br />
<button class = 'apply-label'>Apply</button>
<button class = 'cancel'>Cancel</button>
</div>
<!-- edit y-axis label -->
<div class = "edit-label" id = "edit-y-label">
Title <input type = "text" class = "label-text"><br />
Font <select class = "label-font"></select>
<span></span>
<input type = "color" class = "label-color">
<span></span>
<input type = "number" class = "label-size"> <br />
Tick interval <input type = "number" class = "tick-interval"> <br />
<button class = 'apply-label'>Apply</button>
<button class = 'cancel'>Cancel</button>
</div>
<!-- main script -->
<script src = "common-display.js"></script>
<script src = "plot-main.js"></script>
</body>
</html>