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