<!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/billboard.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="classesCoverageDistribution" 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="methodsCoverageDistribution" 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/billboard.pkgd.min.js?v={{version}}" type="text/javascript"></script>
  <script type="application/json" id="complexity_class">{{complexity_class}}</script>
  <script type="application/json" id="complexity_method">{{complexity_method}}</script>
  <script type="text/javascript" defer>
  const barLabels = [
    '0%',
    '0-10%',
    '10-20%',
    '20-30%',
    '30-40%',
    '40-50%',
    '50-60%',
    '60-70%',
    '70-80%',
    '80-90%',
    '90-100%',
    '100%'
  ];
  const barConfig = (name, fullName, values) => ({
    axis: {
      x: {
        type: "category",
        categories: barLabels,
      },
      y: {
        label: {
          text: `#${name}`,
          position: 'outer-top',
        },
      },
    },
    bindto: `#${name}CoverageDistribution`,
    data: {
      columns: [
        [fullName].concat(values),
      ],
      colors: {
        [fullName]: "rgba(69, 114, 167, 0.75)",
      },
      type: "bar",
    },
    bar: {
      width: {
        ratio: 0.9,
      },
    },
    grid: {
      focus: {
        show: false,
      },
      x: {
        show: true,
      },
      y: {
        show: true,
      },
    },
    legend: {
      show: false,
    },
    tooltip: {
      contents: function (data) {
        return `<table class="bb-tooltip"><tbody>
            <tr><th colspan="2">Coverage ${barLabels[data[0].x]}</th></tr>
            <tr><td class="value">${data[0].value} ${name}</td></tr>
          </tbody></table>`;
      },
      grouped: false,
    },
  });
  bb.generate(
    barConfig('classes', "Class Coverage", {{class_coverage_distribution}})
  );
  bb.generate(
    barConfig('methods', "Method Coverage", {{method_coverage_distribution}})
  );

  const scatterConfig = (name, complexityData) => ({
    axis: {
      x: {
        label: {
          text: 'Code Coverage (in percent)',
          position: 'outer-right',
        },
        tick: {
          values: [0, 20, 40, 60, 80, 100],
        },
      },
      y: {
        label: {
          text: 'Cyclomatic Complexity',
          position: 'outer-top',
        },
        min: 0,
        padding: {
          bottom: 0,
          top: 5,
        },
      },
    },
    bindto: `#${name}Complexity`,
    data: {
      columns: [
        ["complexity_x"].concat(complexityData.map(d => d[0])),
        ["complexity"].concat(complexityData.map(d => d[1])),
      ],
      onclick: function(data, element) {
        window.location = complexityData[data.index][2];
      },
      type: "scatter",
      xs: {
        "complexity": "complexity_x",
      },
    },
    grid: {
      focus: {
        show: true,
        y: true,
      },
      x: {
        show: true,
      },
      y: {
        show: true,
      },
    },
    legend: {
      show: false,
    },
    tooltip: {
      contents: function (data) {
        const coverage = Math.round(data[0].x);
        const complexity = data[0].value;
        const targetName = complexityData[data[0].index][3];
        return `<table class="bb-tooltip"><tbody>
            <tr><th colspan="2">${targetName}</th></tr>
            <tr class="bb-tooltip-name-complexity"><td>Coverage</td><td class="name">${coverage}%</td></tr>
            <tr class="bb-tooltip-name-complexity"><td>Complexity</td><td class="value">${complexity}</td></tr>
          </tbody></table>`;
      },
      grouped: false,
    },
  });
  const classComplexityData = JSON.parse(document.getElementById('complexity_class').textContent);
  bb.generate(
    scatterConfig("class", classComplexityData)
  );
  const methodComplexityData = JSON.parse(document.getElementById('complexity_method').textContent);
  bb.generate(
    scatterConfig("method", methodComplexityData),
  );
  </script>
 </body>
</html>
