--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Dashboard for {{full_path}}</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="{{path_to_root}}css/bootstrap.min.css" rel="stylesheet">
+ <link href="{{path_to_root}}css/nv.d3.min.css" rel="stylesheet">
+ <link href="{{path_to_root}}css/style.css" rel="stylesheet">
+ <!--[if lt IE 9]>
+ <script src="{{path_to_root}}js/html5shiv.min.js"></script>
+ <script src="{{path_to_root}}js/respond.min.js"></script>
+ <![endif]-->
+ </head>
+ <body>
+ <header>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <ol class="breadcrumb">
+{{breadcrumbs}}
+ </ol>
+ </div>
+ </div>
+ </div>
+ </header>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <h2>Classes</h2>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <h3>Coverage Distribution</h3>
+ <div id="classCoverageDistribution" style="height: 300px;">
+ <svg></svg>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h3>Complexity</h3>
+ <div id="classComplexity" style="height: 300px;">
+ <svg></svg>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <h3>Insufficient Coverage</h3>
+ <div class="scrollbox">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Class</th>
+ <th class="text-right">Coverage</th>
+ </tr>
+ </thead>
+ <tbody>
+{{insufficient_coverage_classes}}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h3>Project Risks</h3>
+ <div class="scrollbox">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Class</th>
+ <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
+ </tr>
+ </thead>
+ <tbody>
+{{project_risks_classes}}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <h2>Methods</h2>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <h3>Coverage Distribution</h3>
+ <div id="methodCoverageDistribution" style="height: 300px;">
+ <svg></svg>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h3>Complexity</h3>
+ <div id="methodComplexity" style="height: 300px;">
+ <svg></svg>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <h3>Insufficient Coverage</h3>
+ <div class="scrollbox">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th class="text-right">Coverage</th>
+ </tr>
+ </thead>
+ <tbody>
+{{insufficient_coverage_methods}}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h3>Project Risks</h3>
+ <div class="scrollbox">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Method</th>
+ <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
+ </tr>
+ </thead>
+ <tbody>
+{{project_risks_methods}}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <footer>
+ <hr/>
+ <p>
+ <small>Generated by <a href="http://github.com/sebastianbergmann/php-code-coverage" target="_top">PHP_CodeCoverage {{version}}</a> using <a href="{{runtime_link}}" target="_top">{{runtime_name}} {{runtime_version}}</a>{{generator}} at {{date}}.</small>
+ </p>
+ </footer>
+ </div>
+ <script src="{{path_to_root}}js/jquery.min.js" type="text/javascript"></script>
+ <script src="{{path_to_root}}js/bootstrap.min.js" type="text/javascript"></script>
+ <script src="{{path_to_root}}js/holder.min.js" type="text/javascript"></script>
+ <script src="{{path_to_root}}js/d3.min.js" type="text/javascript"></script>
+ <script src="{{path_to_root}}js/nv.d3.min.js" type="text/javascript"></script>
+ <script type="text/javascript">
+$(document).ready(function() {
+ nv.addGraph(function() {
+ var chart = nv.models.multiBarChart();
+ chart.tooltips(false)
+ .showControls(false)
+ .showLegend(false)
+ .reduceXTicks(false)
+ .staggerLabels(true)
+ .yAxis.tickFormat(d3.format('d'));
+
+ d3.select('#classCoverageDistribution svg')
+ .datum(getCoverageDistributionData({{class_coverage_distribution}}, "Class Coverage"))
+ .transition().duration(500).call(chart);
+
+ nv.utils.windowResize(chart.update);
+
+ return chart;
+ });
+
+ nv.addGraph(function() {
+ var chart = nv.models.multiBarChart();
+ chart.tooltips(false)
+ .showControls(false)
+ .showLegend(false)
+ .reduceXTicks(false)
+ .staggerLabels(true)
+ .yAxis.tickFormat(d3.format('d'));
+
+ d3.select('#methodCoverageDistribution svg')
+ .datum(getCoverageDistributionData({{method_coverage_distribution}}, "Method Coverage"))
+ .transition().duration(500).call(chart);
+
+ nv.utils.windowResize(chart.update);
+
+ return chart;
+ });
+
+ function getCoverageDistributionData(data, label) {
+ var labels = [
+ '0%',
+ '0-10%',
+ '10-20%',
+ '20-30%',
+ '30-40%',
+ '40-50%',
+ '50-60%',
+ '60-70%',
+ '70-80%',
+ '80-90%',
+ '90-100%',
+ '100%'
+ ];
+ var values = [];
+ $.each(labels, function(key) {
+ values.push({x: labels[key], y: data[key]});
+ });
+
+ return [
+ {
+ key: label,
+ values: values,
+ color: "#4572A7"
+ }
+ ];
+ }
+ nv.addGraph(function() {
+ var chart = nv.models.scatterChart()
+ .showDistX(true)
+ .showDistY(true)
+ .showLegend(false)
+ .forceX([0, 100]);
+ chart.tooltipContent(function(key, y, e, graph) {
+ return '<p>' + graph.point.class + '</p>';
+ });
+
+ chart.xAxis.axisLabel('Code Coverage (in percent)');
+ chart.yAxis.axisLabel('Cyclomatic Complexity');
+
+ d3.select('#classComplexity svg')
+ .datum(getComplexityData({{complexity_class}}, 'Class Complexity'))
+ .transition()
+ .duration(500)
+ .call(chart);
+
+ nv.utils.windowResize(chart.update);
+
+ return chart;
+ });
+
+ nv.addGraph(function() {
+ var chart = nv.models.scatterChart()
+ .showDistX(true)
+ .showDistY(true)
+ .showLegend(false)
+ .forceX([0, 100]);
+ chart.tooltipContent(function(key, y, e, graph) {
+ return '<p>' + graph.point.class + '</p>';
+ });
+
+ chart.xAxis.axisLabel('Code Coverage (in percent)');
+ chart.yAxis.axisLabel('Method Complexity');
+
+ d3.select('#methodComplexity svg')
+ .datum(getComplexityData({{complexity_method}}, 'Method Complexity'))
+ .transition()
+ .duration(500)
+ .call(chart);
+
+ nv.utils.windowResize(chart.update);
+
+ return chart;
+ });
+
+ function getComplexityData(data, label) {
+ var values = [];
+ $.each(data, function(key) {
+ var value = Math.round(data[key][0]*100) / 100;
+ values.push({
+ x: value,
+ y: data[key][1],
+ class: data[key][2],
+ size: 0.05,
+ shape: 'diamond'
+ });
+ });
+
+ return [
+ {
+ key: label,
+ values: values,
+ color: "#4572A7"
+ }
+ ];
+ }
+});
+ </script>
+ </body>
+</html>