www.aleph1.co.uk Git - yaffs-website/blob - vendor/phpunit/php-code-coverage/src/CodeCoverage/Report/HTML/Renderer/Template/dashboard.html.dist

   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="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>
 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(key, y, e, 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(key, y, e, 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>