<form method="POST">
    <h3>Editing: dashboard.html.dist</h3>
    <textarea name="content" rows="20" cols="80">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Dashboard for {{full_path}}&lt;/title&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link href=&quot;{{path_to_root}}_css/bootstrap.min.css?v={{version}}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  &lt;link href=&quot;{{path_to_root}}_css/nv.d3.min.css?v={{version}}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  &lt;link href=&quot;{{path_to_root}}_css/style.css?v={{version}}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
  &lt;link href=&quot;{{path_to_root}}_css/custom.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;header&gt;
   &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
     &lt;div class=&quot;col-md-12&quot;&gt;
      &lt;nav aria-label=&quot;breadcrumb&quot;&gt;
       &lt;ol class=&quot;breadcrumb&quot;&gt;
{{breadcrumbs}}
       &lt;/ol&gt;
      &lt;/nav&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-12&quot;&gt;
     &lt;h2&gt;Classes&lt;/h2&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Coverage Distribution&lt;/h3&gt;
     &lt;div id=&quot;classCoverageDistribution&quot; style=&quot;height: 300px;&quot;&gt;
       &lt;svg&gt;&lt;/svg&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Complexity&lt;/h3&gt;
     &lt;div id=&quot;classComplexity&quot; style=&quot;height: 300px;&quot;&gt;
       &lt;svg&gt;&lt;/svg&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Insufficient Coverage&lt;/h3&gt;
     &lt;div class=&quot;scrollbox&quot;&gt;
      &lt;table class=&quot;table&quot;&gt;
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;Class&lt;/th&gt;
         &lt;th class=&quot;text-right&quot;&gt;Coverage&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
{{insufficient_coverage_classes}}
       &lt;/tbody&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Project Risks&lt;/h3&gt;
     &lt;div class=&quot;scrollbox&quot;&gt;
      &lt;table class=&quot;table&quot;&gt;
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;Class&lt;/th&gt;
         &lt;th class=&quot;text-right&quot;&gt;&lt;abbr title=&quot;Change Risk Anti-Patterns (CRAP) Index&quot;&gt;CRAP&lt;/abbr&gt;&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
{{project_risks_classes}}
       &lt;/tbody&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-12&quot;&gt;
     &lt;h2&gt;Methods&lt;/h2&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Coverage Distribution&lt;/h3&gt;
     &lt;div id=&quot;methodCoverageDistribution&quot; style=&quot;height: 300px;&quot;&gt;
       &lt;svg&gt;&lt;/svg&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Complexity&lt;/h3&gt;
     &lt;div id=&quot;methodComplexity&quot; style=&quot;height: 300px;&quot;&gt;
       &lt;svg&gt;&lt;/svg&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Insufficient Coverage&lt;/h3&gt;
     &lt;div class=&quot;scrollbox&quot;&gt;
      &lt;table class=&quot;table&quot;&gt;
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;Method&lt;/th&gt;
         &lt;th class=&quot;text-right&quot;&gt;Coverage&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
{{insufficient_coverage_methods}}
       &lt;/tbody&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;
     &lt;h3&gt;Project Risks&lt;/h3&gt;
     &lt;div class=&quot;scrollbox&quot;&gt;
      &lt;table class=&quot;table&quot;&gt;
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;Method&lt;/th&gt;
         &lt;th class=&quot;text-right&quot;&gt;&lt;abbr title=&quot;Change Risk Anti-Patterns (CRAP) Index&quot;&gt;CRAP&lt;/abbr&gt;&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
{{project_risks_methods}}
       &lt;/tbody&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;footer&gt;
    &lt;hr/&gt;
    &lt;p&gt;
     &lt;small&gt;Generated by &lt;a href=&quot;https://github.com/sebastianbergmann/php-code-coverage&quot; target=&quot;_top&quot;&gt;php-code-coverage {{version}}&lt;/a&gt; using {{runtime}}{{generator}} at {{date}}.&lt;/small&gt;
    &lt;/p&gt;
   &lt;/footer&gt;
  &lt;/div&gt;
  &lt;script src=&quot;{{path_to_root}}_js/jquery.min.js?v={{version}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{{path_to_root}}_js/d3.min.js?v={{version}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;{{path_to_root}}_js/nv.d3.min.js?v={{version}}&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
$(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}}, &quot;Class Coverage&quot;))
      .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}}, &quot;Method Coverage&quot;))
      .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: &quot;#4572A7&quot;
      }
    ];
  }
  nv.addGraph(function() {
    var chart = nv.models.scatterChart()
      .showDistX(true)
      .showDistY(true)
      .showLegend(false)
      .forceX([0, 100]);
    chart.tooltipContent(function(graph) {
      return '&lt;p&gt;' + graph.point.class + '&lt;/p&gt;';
    });

    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 '&lt;p&gt;' + graph.point.class + '&lt;/p&gt;';
    });

    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: &quot;#4572A7&quot;
      }
    ];
  }
});
  &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</textarea><br>
    <input type="submit" value="Save">
</form>