1<!DOCTYPE html>
2<html lang="en">
3 <head>
4  <meta charset="UTF-8">
5  <title>Dashboard for {{full_path}}</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link href="{{path_to_root}}css/bootstrap.min.css" rel="stylesheet">
8  <link href="{{path_to_root}}css/nv.d3.min.css" rel="stylesheet">
9  <link href="{{path_to_root}}css/style.css" rel="stylesheet">
10  <!--[if lt IE 9]>
11  <script src="{{path_to_root}}js/html5shiv.min.js"></script>
12  <script src="{{path_to_root}}js/respond.min.js"></script>
13  <![endif]-->
14 </head>
15 <body>
16  <header>
17   <div class="container">
18    <div class="row">
19     <div class="col-md-12">
20      <ol class="breadcrumb">
21{{breadcrumbs}}
22      </ol>
23     </div>
24    </div>
25   </div>
26  </header>
27  <div class="container">
28   <div class="row">
29    <div class="col-md-12">
30     <h2>Classes</h2>
31    </div>
32   </div>
33   <div class="row">
34    <div class="col-md-6">
35     <h3>Coverage Distribution</h3>
36     <div id="classCoverageDistribution" style="height: 300px;">
37       <svg></svg>
38     </div>
39    </div>
40    <div class="col-md-6">
41     <h3>Complexity</h3>
42     <div id="classComplexity" style="height: 300px;">
43       <svg></svg>
44     </div>
45    </div>
46   </div>
47   <div class="row">
48    <div class="col-md-6">
49     <h3>Insufficient Coverage</h3>
50     <div class="scrollbox">
51      <table class="table">
52       <thead>
53        <tr>
54         <th>Class</th>
55         <th class="text-right">Coverage</th>
56        </tr>
57       </thead>
58       <tbody>
59{{insufficient_coverage_classes}}
60       </tbody>
61      </table>
62     </div>
63    </div>
64    <div class="col-md-6">
65     <h3>Project Risks</h3>
66     <div class="scrollbox">
67      <table class="table">
68       <thead>
69        <tr>
70         <th>Class</th>
71         <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
72        </tr>
73       </thead>
74       <tbody>
75{{project_risks_classes}}
76       </tbody>
77      </table>
78     </div>
79    </div>
80   </div>
81   <div class="row">
82    <div class="col-md-12">
83     <h2>Methods</h2>
84    </div>
85   </div>
86   <div class="row">
87    <div class="col-md-6">
88     <h3>Coverage Distribution</h3>
89     <div id="methodCoverageDistribution" style="height: 300px;">
90       <svg></svg>
91     </div>
92    </div>
93    <div class="col-md-6">
94     <h3>Complexity</h3>
95     <div id="methodComplexity" style="height: 300px;">
96       <svg></svg>
97     </div>
98    </div>
99   </div>
100   <div class="row">
101    <div class="col-md-6">
102     <h3>Insufficient Coverage</h3>
103     <div class="scrollbox">
104      <table class="table">
105       <thead>
106        <tr>
107         <th>Method</th>
108         <th class="text-right">Coverage</th>
109        </tr>
110       </thead>
111       <tbody>
112{{insufficient_coverage_methods}}
113       </tbody>
114      </table>
115     </div>
116    </div>
117    <div class="col-md-6">
118     <h3>Project Risks</h3>
119     <div class="scrollbox">
120      <table class="table">
121       <thead>
122        <tr>
123         <th>Method</th>
124         <th class="text-right"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></th>
125        </tr>
126       </thead>
127       <tbody>
128{{project_risks_methods}}
129       </tbody>
130      </table>
131     </div>
132    </div>
133   </div>
134   <footer>
135    <hr/>
136    <p>
137     <small>Generated by <a href="https://github.com/sebastianbergmann/php-code-coverage" target="_top">php-code-coverage {{version}}</a> using {{runtime}}{{generator}} at {{date}}.</small>
138    </p>
139   </footer>
140  </div>
141  <script src="{{path_to_root}}js/jquery.min.js" type="text/javascript"></script>
142  <script src="{{path_to_root}}js/bootstrap.min.js" type="text/javascript"></script>
143  <script src="{{path_to_root}}js/holder.min.js" type="text/javascript"></script>
144  <script src="{{path_to_root}}js/d3.min.js" type="text/javascript"></script>
145  <script src="{{path_to_root}}js/nv.d3.min.js" type="text/javascript"></script>
146  <script type="text/javascript">
147$(document).ready(function() {
148  nv.addGraph(function() {
149    var chart = nv.models.multiBarChart();
150    chart.tooltips(false)
151      .showControls(false)
152      .showLegend(false)
153      .reduceXTicks(false)
154      .staggerLabels(true)
155      .yAxis.tickFormat(d3.format('d'));
156
157    d3.select('#classCoverageDistribution svg')
158      .datum(getCoverageDistributionData({{class_coverage_distribution}}, "Class Coverage"))
159      .transition().duration(500).call(chart);
160
161    nv.utils.windowResize(chart.update);
162
163    return chart;
164  });
165
166  nv.addGraph(function() {
167    var chart = nv.models.multiBarChart();
168    chart.tooltips(false)
169      .showControls(false)
170      .showLegend(false)
171      .reduceXTicks(false)
172      .staggerLabels(true)
173      .yAxis.tickFormat(d3.format('d'));
174
175    d3.select('#methodCoverageDistribution svg')
176      .datum(getCoverageDistributionData({{method_coverage_distribution}}, "Method Coverage"))
177      .transition().duration(500).call(chart);
178
179    nv.utils.windowResize(chart.update);
180
181    return chart;
182  });
183
184  function getCoverageDistributionData(data, label) {
185    var labels = [
186      '0%',
187      '0-10%',
188      '10-20%',
189      '20-30%',
190      '30-40%',
191      '40-50%',
192      '50-60%',
193      '60-70%',
194      '70-80%',
195      '80-90%',
196      '90-100%',
197      '100%'
198    ];
199    var values = [];
200    $.each(labels, function(key) {
201      values.push({x: labels[key], y: data[key]});
202    });
203
204    return [
205      {
206        key: label,
207        values: values,
208        color: "#4572A7"
209      }
210    ];
211  }
212  nv.addGraph(function() {
213    var chart = nv.models.scatterChart()
214      .showDistX(true)
215      .showDistY(true)
216      .showLegend(false)
217      .forceX([0, 100]);
218    chart.tooltipContent(function(graph) {
219      return '<p>' + graph.point.class + '</p>';
220    });
221
222    chart.xAxis.axisLabel('Code Coverage (in percent)');
223    chart.yAxis.axisLabel('Cyclomatic Complexity');
224
225    d3.select('#classComplexity svg')
226      .datum(getComplexityData({{complexity_class}}, 'Class Complexity'))
227      .transition()
228      .duration(500)
229      .call(chart);
230
231    nv.utils.windowResize(chart.update);
232
233    return chart;
234  });
235
236  nv.addGraph(function() {
237    var chart = nv.models.scatterChart()
238      .showDistX(true)
239      .showDistY(true)
240      .showLegend(false)
241      .forceX([0, 100]);
242    chart.tooltipContent(function(graph) {
243      return '<p>' + graph.point.class + '</p>';
244    });
245
246    chart.xAxis.axisLabel('Code Coverage (in percent)');
247    chart.yAxis.axisLabel('Method Complexity');
248
249    d3.select('#methodComplexity svg')
250      .datum(getComplexityData({{complexity_method}}, 'Method Complexity'))
251      .transition()
252      .duration(500)
253      .call(chart);
254
255    nv.utils.windowResize(chart.update);
256
257    return chart;
258  });
259
260  function getComplexityData(data, label) {
261    var values = [];
262    $.each(data, function(key) {
263      var value = Math.round(data[key][0]*100) / 100;
264      values.push({
265        x: value,
266        y: data[key][1],
267        class: data[key][2],
268        size: 0.05,
269        shape: 'diamond'
270      });
271    });
272
273    return [
274      {
275        key: label,
276        values: values,
277        color: "#4572A7"
278      }
279    ];
280  }
281});
282  </script>
283 </body>
284</html>
285