OwlCyberSecurity - MANAGER
Edit File: dashboard.html.dist
<!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?v={{version}}" rel="stylesheet" type="text/css"> <link href="{{path_to_root}}_css/nv.d3.min.css?v={{version}}" rel="stylesheet" type="text/css"> <link href="{{path_to_root}}_css/style.css?v={{version}}" rel="stylesheet" type="text/css"> <link href="{{path_to_root}}_css/custom.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> {{breadcrumbs}} </ol> </nav> </div> </div> </div> </header> <div class="container-fluid"> <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="https://github.com/sebastianbergmann/php-code-coverage" target="_top">php-code-coverage {{version}}</a> using {{runtime}}{{generator}} at {{date}}.</small> </p> </footer> </div> <script src="{{path_to_root}}_js/jquery.min.js?v={{version}}" type="text/javascript"></script> <script src="{{path_to_root}}_js/d3.min.js?v={{version}}" type="text/javascript"></script> <script src="{{path_to_root}}_js/nv.d3.min.js?v={{version}}" 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(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(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>