Skip to content

Commit c949a70

Browse files
hal7dfhal7df
committed
Initial commit.
Basic layout complete, no functionality yet.
0 parents  commit c949a70

12 files changed

+16013
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.project

‎css/style.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/** BASIC STYLES **/
2+
body {
3+
background-color: #f5f5f5;
4+
}
5+
.mdl-layout__content {
6+
padding: 5px;
7+
display: flex;
8+
flex-direction: row;
9+
height: 100%;
10+
}
11+
.mdl-layout__content > #data-config-contain {
12+
flex: 0 1 30%;
13+
height: 100%;
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
.mdl-layout__content > #graph-contain {
18+
flex: 0 1 70%;
19+
height: 100%;
20+
margin-left: 5px;
21+
}
22+
.actions-flex {
23+
display: flex;
24+
flex-direction: row;
25+
}
26+
.actions-flex > .spacer {
27+
flex: 1 1 auto;
28+
}
29+
30+
/** PLOT CONFIG **/
31+
32+
#data-config-contain > .mdl-card {
33+
margin: 5px 0;
34+
width: 100%;
35+
}
36+
#data-config-contain > #graph-config {
37+
flex: 0 1 35%;
38+
display: flex;
39+
}
40+
#config {
41+
padding: 0 10px;
42+
overflow-y: auto;
43+
}
44+
.config-range {
45+
width: 50px;
46+
}
47+
48+
/** DATASETS AND FUNCTIONS **/
49+
#data-config-contain > #data-table-contain {
50+
flex: 0 1 65%;
51+
}
52+
#data-table-contain > .mdl-tabs {
53+
flex: 1 1 auto;
54+
}
55+
#data-table-contain > #data-actions {
56+
flex: 0 1 min-content;
57+
}
58+
#data-table {
59+
margin: 0 auto;
60+
overflow: auto;
61+
min-width: 100%;
62+
}
63+
64+
/** GRAPH CARD **/
65+
66+
#graph-contain > #graph {
67+
width: 100%;
68+
flex: 1 1 auto;
69+
}
70+
#graph-contain > .mdl-card__actions {
71+
flex: 0 1 min-content;
72+
}

‎index.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>dataplot.js</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
7+
<link rel="stylesheet" type="text/css" href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css"/>
8+
<link rel="stylesheet" type="text/css" href="css/style.css"/>
9+
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
10+
</head>
11+
<body>
12+
<!-- Always shows a header, even in smaller screens. -->
13+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
14+
<header class="mdl-layout__header">
15+
<div class="mdl-layout__header-row">
16+
<!-- Title -->
17+
<span class="mdl-layout-title">dataplot.js</span>
18+
<!-- Add spacer, to align navigation to the right -->
19+
<div class="mdl-layout-spacer"></div>
20+
<!-- Navigation. We hide it in small screens. -->
21+
<nav class="mdl-navigation mdl-layout--large-screen-only">
22+
</nav>
23+
</div>
24+
</header>
25+
<div class="mdl-layout__drawer">
26+
<span class="mdl-layout-title">Projects</span>
27+
<nav class="mdl-navigation">
28+
<a id="add-project" class="mdl-navigation__link" href=""><i class="material-icons">add</i>&nbsp;New project</a>
29+
</nav>
30+
</div>
31+
<main class="mdl-layout__content">
32+
<div id="data-config-contain">
33+
<div id="graph-config" class="mdl-card mdl-shadow--2dp">
34+
<div class="mdl-card__title">
35+
<h2 class="mdl-card__title-text">Plot settings</h2>
36+
</div>
37+
<form id="config">
38+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
39+
<input class="graph-config mdl-textfield__input" type="text" id="graph-title"/>
40+
<label class="mdl-textfield__label" for="graph-title">Plot title</label>
41+
</div>
42+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
43+
<input class="graph-config mdl-textfield__input" type="text" id="graph-ylabel"/>
44+
<label class="mdl-textfield__label" for="graph-ylabel">Y-axis label</label>
45+
</div>
46+
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="autoscale-x">
47+
<input type="checkbox" id="autoscale-x" class="mdl-checkbox__input" checked/>
48+
<span class="mdl-checkbox__label">Autoscale X-axis</span>
49+
</label>
50+
<span class="config-range mdl-textfield mdl-js-textfield">
51+
<input id="x-min" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
52+
<label class="mdl-textfield__label" for="x-min">min</label>
53+
<span class="mdl-textfield__error">Must be numeric</span>
54+
</span> to
55+
<span class="config-range mdl-textfield mdl-js-textfield">
56+
<input id="x-max" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
57+
<label class="mdl-textfield__label" for="x-max">max</label>
58+
<span class="mdl-textfield__error">Must be numeric</span>
59+
</span>
60+
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="autoscale-y">
61+
<input type="checkbox" id="autoscale-y" class="mdl-checkbox__input" checked/>
62+
<span class="mdl-checkbox__label">Autoscale Y-axis</span>
63+
</label>
64+
<span class="config-range mdl-textfield mdl-js-textfield">
65+
<input id="x-min" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
66+
<label class="mdl-textfield__label" for="x-min">min</label>
67+
<span class="mdl-textfield__error">Must be numeric</span>
68+
</span> to
69+
<span class="config-range mdl-textfield mdl-js-textfield">
70+
<input id="x-max" class="mdl-textfield__input" type="number" pattern="-?[0-9](\.[0-9]+)?" disabled/>
71+
<label class="mdl-textfield__label" for="x-max">max</label>
72+
<span class="mdl-textfield__error">Must be numeric</span>
73+
</span>
74+
</form>
75+
</div>
76+
<div id="data-table-contain" class="mdl-card mdl-shadow--2dp">
77+
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
78+
<div class="mdl-tabs__tab-bar">
79+
<a href="#datasets" class="mdl-tabs__tab is-active">Datasets</a>
80+
<a href="#functions" class="mdl-tabs__tab">Functions</a>
81+
</div>
82+
83+
<div id="datasets" class="mdl-tabs__panel is-active">
84+
<table id="data-table" class="mdl-data-table mdl-js-data-table">
85+
<thead>
86+
<tr>
87+
<th id="x-name">x</th>
88+
<th class="y-name" data-setnum="0">y0</th>
89+
<th id="add-col">
90+
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">add</i></button>
91+
</th>
92+
</tr>
93+
</thead>
94+
<tbody>
95+
<tr>
96+
<td></td>
97+
<td></td>
98+
<td></td>
99+
</tr>
100+
</tbody>
101+
</table>
102+
</div>
103+
<div id="functions" class="mdl-tabs__panel">
104+
</div>
105+
</div>
106+
<div id="dataset-actions" class="actions-flex mdl-card__actions mdl-card--border">
107+
<button id="import" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">file_upload</i></button>
108+
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="import">Import datasets from CSV</div>
109+
<button id="export" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"><i class="material-icons">file_download</i></button>
110+
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="export">Export datasets to CSV</div>
111+
<div class="spacer"></div>
112+
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored mdl-js-ripple-effect">
113+
<i class="material-icons">done</i>
114+
</button>
115+
</div>
116+
</div>
117+
</div>
118+
<div id="graph-contain" class="mdl-card mdl-shadow--2dp">
119+
<canvas id="graph">Your browser does not support dataplot.js. Please upgrade your current browser or switch to a different browser.</canvas>
120+
<div class="mdl-card__actions mdl-card--border">
121+
<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>
122+
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="compute-trendline">Compute and plot trendlines</div>
123+
<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>
124+
<div class="mdl-tooltip mdl-tooltip--top" data-mdl-for="optimal-size">Get plot for use with documents</div>
125+
</div>
126+
</div>
127+
</main>
128+
</div>
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)