<!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>Rspec HTML Reports - Overview</title> <!-- Bootstrap --> <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/js/jquery-1.11.1.min.js"></script> <script src="resources/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script> <script src="resources/tether-1.3.3/js/tether.min.js"></script> <script src="resources/js/Chart.js"></script> <style> * { font-size: 14px; } <%= Rouge::Themes::Github.render(:scope => '.highlight') %> </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="pieChart" 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[:klass]%>"><%= group[:status] %></span></td> </tr> <% i+= 1%> <% end %> </tbody> </table> </div> </div> </div> <script type="text/javascript"> var pieCtx = document.getElementById("pieChart"); 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>