templates/overview.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Reporting - Overview</title>
<link href="resources/bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="resources/bootstrap-4.0.0-dist/themes/bootstrap-theme-yeti.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="resources/jquery-3.3.1.min.js"></script>
<script src="resources/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
<script src="resources/Chart.min.js"></script>
<style>
* {
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="text-center" style="font-size:2em;">Overview</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Group Summary</div>
<div class="panel-body">
<span class="pull-right"><%= @total_examples %> Examples</span>
<canvas id="overview_chart" width="300" height="300"></canvas>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Group</th>
<th>Duration</th>
<th class="warning">Pending</th>
<th class="danger">Failed</th>
<th class="success">Passed</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<% i = 1 %>
<% @overview.each do |group_name, group| %>
<tr>
<td><%= i %></td>
<td>
<a href="<%= group_name %>.html"><%= group[:group] %></a>
</td>
<td><%= group[:duration] %></td>
<td class="warning"><span><%= group[:pending].size %></span></td>
<td class="danger"><span><%= group[:failed].size %></span></td>
<td class="success"><span><%= group[:passed].size %></span></td>
<td><span class="label label-<%= group[:status_type]%>"><%= group[:status] %></span></td>
</tr>
<% i+= 1%>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var pieCtx = document.getElementById("overview_chart");
var pieChart = new Chart(pieCtx, {
type: 'doughnut',
data: {
labels: ["Passed", "Failed", "Pending"],
datasets: [{
label: 'Examples',
data: [<%= @passed %>, <%= @failed %>, <%= @pending %>],
backgroundColor: [
'#3c9a5f',
'#ea2f10',
'#e99002'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
});
</script>
</body>
</html>