-
Notifications
You must be signed in to change notification settings - Fork 0
/
neutron.html
274 lines (253 loc) · 10.4 KB
/
neutron.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cerebro - mark II</title>
<meta name="description"content="mobile first, app, web app, responsive, admin dashboard, flat, flat ui">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"type="text/css"/>
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"type="text/css"/>
<link rel="stylesheet"href="css/neutron.css"type="text/css"/>
<!--[if lt IE 9]> <script src="js/ie/respond.min.js" cache="false"></script> <script src="js/ie/html5.js" cache="false"></script> <script src="js/ie/excanvas.js" cache="false"></script> <![endif]-->
</head>
<body class="admin">
<div class="header">
<div class="logo">
<i class="fa fa-bar-chart-o fa-lg"></i>
<span>Cerebro</span>
</div>
<a class="fa fa-bars fa-lg expander"></a>
</div>
<div class="sidebar">
<ul>
<li class="active">
<a href="#" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" aria-controls="submenu1" class="collapsed">
<i class="fa fa-rocket fa-lg"></i>
<span>Releases</span>
<span class="fa fa-arrow pull-right"></span>
</a>
<ul id="submenu1" class="submenu collapse">
<li><a href="#">Releases list</a></li>
<li><a href="#">Releases status</a></li>
<li><a href="#">Releases timeslots</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-bomb fa-lg"></i>
<span>Menu item</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-list fa-lg"></i>
<span>Menu item</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-puzzle-piece fa-lg"></i>
<span>Menu item</span>
</a>
</li>
</ul>
</div>
<!-- /sidebar -->
<!-- Content begins -->
<div class="container-fluid content">
<div class="filters">
From
<input type="text">
to
<input type="text">
</div>
<div class="col-md-12">
<div class="panel panel-default">
<strong>Releases of the week</strong>
<div id="releases-list"></div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<strong>Releases timeslots</strong>
<div id="chart"></div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<strong>Releases status</strong>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 84%">
84% Success
</div>
<div class="progress-bar progress-bar-danger" style="width: 16%">
16% Fail
</div>
</div>
</div>
</div>
</div>
<!-- //content -->
</body>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
$( ".expander" ).click(function() {
$( ".header, .sidebar, .container-fluid" ).toggleClass( "sidebar-collapsed" );
});
</script><!-- /sidebar expand -->
<script>
HorizontalBarGraph = function(el, series) {
this.el = d3.select(el);
this.series = series;
};
HorizontalBarGraph.prototype.draw = function() {
var x = d3.scale.linear()
.domain([0, d3.max(this.series, function(d) { return d.value })])
.range([0, 100]);
var segment = this.el
.selectAll(".horizontal-bar-graph-segment")
.data(this.series)
.enter()
.append("div").classed("horizontal-bar-graph-segment", true);
segment
.append("div").classed("horizontal-bar-graph-label", true)
.text(function(d) { return d.label });
segment
.append("div").classed("horizontal-bar-graph-value", true)
.append("div").classed("horizontal-bar-graph-value-bar", true)
.style("background-color", function(d) { return d.color })
.text(function(d) { return d.inner_label ? d.inner_label : "" })
.transition()
.duration(1000)
.style("min-width", function(d) { return x(d.value) + "%" });
};
var graph = new HorizontalBarGraph('#releases-list', [
{label: "project 1", inner_label: "8 deploys", value: 8, color: "#1BBC9B" },
{label: "project-2", inner_label: "4 deploys", value: 4, color: "#1BBC9B" },
{label: "project_3", inner_label: "2 deploys", value: 2, color: "#1BBC9B" },
{label: "project 4", inner_label: "1 deploys", value: 1, color: "#1BBC9B" },
{label: "project 5", inner_label: "6 deploys", value: 6, color: "#1BBC9B" },
{label: "project with a very long name", inner_label: "3 deploys", value: 3, color: "#1BBC9B" }
]);
graph.draw();
</script>
<script>
// Get the margin to width ratio as a percent
// using the margin object properties
function getRatio(side) {
return (( margin[side] / width ) * 100) + "%";
}
// Simple example dataset
var letters =[
"09:00 - 10:00",
"10:00 - 11:00",
"11:00 - 12:00",
"12:00 - 13:00",
"13:00 - 14:00",
"14:00 - 15:00",
"15:00 - 16:00",
"16:00 - 17:00",
"17:00 - 18:00",
"18:00 - 19:00"
]
var numbers = [
20,
60,
30,
20,
42,
51,
29,
06,
84,
09
]
// Declare Dimensions to create graph
// Margin is used to show x and y axes
// Size here is declared in pixels, although this
// defines the relative values, since the chart changes depending
// on container
var margin = { left: 50, top: 10, right: 50, bottom: 30 },
width = 700,
height = 400,
// marginRatio converts margin absolute values to
// percent values to keep SVG responsive
marginRatio = {
left: getRatio("left"),
top: getRatio("top"),
right: getRatio("right"),
bottom: getRatio("bottom")
},
barWidth = width / numbers.length;
var svg = d3.select("div#chart")
// Create div to act as SVG container
.append("div")
.attr("id","svg-container")
// Add SVG that will contain Graph elements
.append("svg")
// Add margin to show axes
.style("padding", marginRatio.top + " " + marginRatio.right + " " + marginRatio.bottom + " " + marginRatio.left )
// Preserve aspect ratio xMinYmin ensures SVG fills #svg-container
.attr("preserveAspectRatio", "xMinYMin meet")
// Sets the viewbox, for more info on viewbox, combined with preveserveAspectRatio, this is what turns the bar chart
// into a responsive bar chart
.attr("viewBox", "0 0 " + ( width + margin.left + margin.right )+ " " +( height + margin.top + margin.bottom ) )
// Id to target with CSS
.attr("id", "svg-content-responsive");
// Define the x scale as ordinal, ordinal means the data cannot be meassured by a
// standard of difference. This is different to a linear scale that we will use later
var x = d3.scale.ordinal()
// Domain stands for input domain, this is the data we want to display
.domain( letters )
// Range stands for Output Range, this is the width the data will take up
// Here it is used for the x axis. 0 is the start of our graph, width is the
// end of it
.rangeRoundBands([ 0, width], 0.1, 0.1);
// Here we define the x axis using the svg.axis() method. The x scale we just
// defined tells the axis what data to display and how big the intervals
// between that data is on the axis. Orient bottom means it will be shown below
// the bars.
var xAxis = d3.svg.axis()
.scale( x )
.orient( "bottom" );
// Here we repeat the process for the y axis. The difference is that we have numerical
// data, so we can use scale.linear.
var y = d3.scale.linear()
// Instead of using the whole array for the input domain, we use 0, since we
// want our y axis to start at 0, and the biggest value of our dataset
// d3.max returns the largest value of an array
.domain([d3.max(numbers), 0])
.range( [ 0 , height] );
// This is defined in the same wat the x axis is defined, except the orient is now left
// instead of bottom - for obvious reasons.
var yAxis = d3.svg.axis()
.scale( y )
.orient( "left" );
// Bind data to bar groups
var bar = svg.selectAll("g")
.data(numbers)
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + i * barWidth + ", 0)";});
// Add x axis to svgContainer
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
.attr("transform", "translate(0," + height + ")");
// Add y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
// Add SVG rectangles that act as bars
// barWidth is calculated dynamically from the width divided by data.length
// The y attribute and height is based on the data, scaled to the height of
// graph. Remember input domain and output range
bar.append("rect")
.attr("class", "bar")
.attr("width", barWidth - 1)
.attr("y", function(d) { return y(d); })
.attr("height", function(d) { return height - y(d); })
</script>
</html>