-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (130 loc) · 6.78 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>dataplot.js</title>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" type="text/css" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script async src="js/matrix.js"></script>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">dataplot.js</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Projects</span>
<nav class="mdl-navigation">
<a id="add-project" class="mdl-navigation__link" href=""><i class="material-icons">add</i> New project</a>
</nav>
</div>
<main class="mdl-layout__content">
<div id="data-config-contain">
<div id="graph-config" class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Plot settings</h2>
</div>
<form id="config">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="graph-config mdl-textfield__input" type="text" id="graph-title"/>
<label class="mdl-textfield__label" for="graph-title">Plot title</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="graph-config mdl-textfield__input" type="text" id="graph-ylabel"/>
<label class="mdl-textfield__label" for="graph-ylabel">Y-axis label</label>
</div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="autoscale-x">
<input type="checkbox" id="autoscale-x" class="mdl-checkbox__input" checked/>
<span class="mdl-checkbox__label">Autoscale X-axis</span>
</label>
<span class="config-range mdl-textfield mdl-js-textfield">
<input id="x-min" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
<label class="mdl-textfield__label" for="x-min">min</label>
<span class="mdl-textfield__error">Must be numeric</span>
</span> to
<span class="config-range mdl-textfield mdl-js-textfield">
<input id="x-max" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
<label class="mdl-textfield__label" for="x-max">max</label>
<span class="mdl-textfield__error">Must be numeric</span>
</span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="autoscale-y">
<input type="checkbox" id="autoscale-y" class="mdl-checkbox__input" checked/>
<span class="mdl-checkbox__label">Autoscale Y-axis</span>
</label>
<span class="config-range mdl-textfield mdl-js-textfield">
<input id="x-min" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
<label class="mdl-textfield__label" for="x-min">min</label>
<span class="mdl-textfield__error">Must be numeric</span>
</span> to
<span class="config-range mdl-textfield mdl-js-textfield">
<input id="x-max" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
<label class="mdl-textfield__label" for="x-max">max</label>
<span class="mdl-textfield__error">Must be numeric</span>
</span>
</form>
</div>
<div id="data-table-contain" class="mdl-card mdl-shadow--2dp">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#datasets" class="mdl-tabs__tab is-active">Datasets</a>
<a href="#functions" class="mdl-tabs__tab">Functions</a>
</div>
<div id="datasets" class="mdl-tabs__panel is-active">
<table id="data-table" class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th id="x-name">x</th>
<th class="y-name" data-setnum="0">y0</th>
<th id="add-col">
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">add</i></button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="functions" class="mdl-tabs__panel">
</div>
</div>
<div id="dataset-actions" class="actions-flex mdl-card__actions mdl-card--border">
<button id="import" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">file_upload</i></button>
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="import">Import datasets from CSV</div>
<button id="export" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">file_download</i></button>
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="export">Export datasets to CSV</div>
<div class="spacer"></div>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored mdl-js-ripple-effect">
<i class="material-icons">done</i>
</button>
</div>
</div>
</div>
<div id="graph-contain" class="mdl-card mdl-shadow--2dp">
<canvas id="graph">Your browser does not support dataplot.js. Please upgrade your current browser or switch to a different browser.</canvas>
<div class="mdl-card__actions mdl-card--border">
<button id="compute-trendline" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">trending_up</i></button>
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="compute-trendline">Compute and plot trendlines</div>
<button id="optimal-size" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">image_aspect_ratio</i></button>
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="optimal-size">Get plot for use with documents</div>
</div>
</div>
</main>
</div>
</body>
</html>