Replace Class Coverage Distribution chart with NVD3.js implementation

Author: tombevers

PHP/CodeCoverage/Report/HTML/Renderer/Template/css/style.css

@@ -84,3 +84,10 @@ span.success, span.warning, span.danger {
  height: 200px;
  width: 475px;
 }
+
+svg text {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  color: #666;
+  fill: #666;
+}

PHP/CodeCoverage/Report/HTML/Renderer/Template/dashboard.html.dist

@@ -28,7 +28,9 @@
    <div class="row">
     <div class="span6">
      <h2>Class Coverage Distribution</h2>
-     <div id="classCoverageDistribution"></div>
+     <div id="classCoverageDistribution">
+       <svg></svg>
+     </div>
     </div>
     <div class="span6">
      <h2>Class Complexity</h2>
@@ -62,31 +64,52 @@
   <script src="js/nv.d3.min.js" type="text/javascript"></script>
   <script type="text/javascript">
 $(document).ready(function() {
- var classCoverageDistribution = new Highcharts.Chart({
-  chart: {
-   renderTo: 'classCoverageDistribution',
-   type: 'column'
-  },
-  title: {text: ''},
-  legend: {enabled: false},
-  credits: {enabled: false},
-  tooltip: {enabled: false},
-  xAxis: {
-   labels: {style: {fontSize: '8px'}},
-   categories: [
-    '0%','0-10%','10-20%','20-30%','30-40%','40-50%','50-60%','60-70%','70-80%','80-90%','90-100%','100%'
-   ],
-   min: 0
-  },
-  yAxis: {
-   title: '',
-   labels: {style: {fontSize: '8px'}},
-   min: 0
-  },
-  series: [{
-   data: {ccd_values}
-  }],
- });
+  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({ccd_values}, "Class 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"
+      }
+    ];
+  }
 
  var classComplexity = new Highcharts.Chart({
   chart: {