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