burnchart/templates/burndown.eco

109 lines
3.2 KiB
Plaintext

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Burndown App</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/rickshaw.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/d3.min.js"></script>
<script src="js/d3.layout.min.js"></script>
<script src="js/rickshaw.min.js"></script>
</head>
<body>
<header class="navbar blue blue2 navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<ul class="nav pull-left">
<li><a><i class="icon-white icon-fire"></i> Burndown App</a></li>
</ul>
<ul class="nav pull-right">
<li><a><i class="icon-white icon-book"></i> <%= @project %></a></li>
</ul>
</div>
</div>
</header>
<section class="container-fluid pad40">
<section class="row-fluid">
<div class="span2 sideBar">
<br>
<ul>
<li class="active">
<figure>
<a href="/burndown"><i class="icon-signal"></i> Burndown Chart</a>
</figure>
</li>
<li>
<figure>
<a href="/issues"><i class="icon-tasks"></i> Issues</a>
</figure>
</li>
</ul>
</div>
<section class="span10 content borBox">
<div class="row-fluid">
<div class="page-header">
<h1>Burndown chart <small>showing actual vs. ideal velocity on each day</small></h1>
</div>
</div>
<br>
<div class="row-fluid">
<div class="span12">
<div id="chart"></div>
</div>
</div>
</section>
</section>
</section>
<script>
(function() {
var ideal = [], actual = [], i = 0;
<% for day, data of @days: %>
ideal.push({ 'x': <%= day / 1000 %>, 'y': <%= data['ideal'] %> });
actual.push({ 'x': <%= day / 1000 %>, 'y': <%= data['actual'] %> });
i++;
<% end %>
// The line graph.
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
height: 600,
renderer: 'line',
series: [{
data: ideal,
color: '#75ABC5',
name: 'Ideal'
}, {
data: actual,
color: '#F89406',
name: 'Actual'
}]
});
graph.render();
// Onhover.
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph,
xFormatter: function(d) { return new Date(d * 1000).toUTCString() },
yFormatter: function(y) { return Math.round(y) + " points left" }
});
// Axes.
var axes = new Rickshaw.Graph.Axis.Time({
graph: graph
});
axes.render();
})();
</script>
</body>
</html>