Add bar chart functionality, for area summary page

1 files changed, 147 insertions, 43 deletions

diff --git a/web/js/dashboard.js b/web/js/dashboard.js
index f436b8d18..3bac4f983 100644
--- a/web/js/dashboard.js
+++ b/web/js/dashboard.js
@@ -1,6 +1,26 @@
 $(function(){
 
     Chart.defaults.global.defaultFontSize = 16;
+    Chart.defaults.global.defaultFontFamily = $('body').css('font-family');
+
+    var colours = [
+        '#FF4343', // red
+        '#F4A140', // orange
+        '#FFD000', // yellow
+        '#62B356', // green
+        '#4D96E5', // blue
+        '#B446CA', // purple
+        '#7B8B98', // gunmetal
+        '#BCB590', // taupe
+        '#9C0101', // dark red
+        '#CA6D00', // dark orange
+        '#C2A526', // dark yellow
+        '#1D7710', // dark green
+        '#1D64B1', // dark blue
+        '#7A108F', // dark purple
+        '#3B576E', // dark gunmetal
+        '#655F3A'  // dark taupe
+    ];
 
     var setUpLabelsForChart = function(chart){
         var $parent = $(chart.chart.canvas).parent();
@@ -89,54 +109,138 @@ $(function(){
         );
     });
 
-    var $allReports = $('#chart-all-reports'),
-        labels = $allReports.data('labels'),
-        data0 = $allReports.data('values-reports'),
-        data1 = $allReports.data('values-fixed');
-    window.chartAllReports = new Chart($allReports, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: [{
-                data: data0,
-                pointRadius: pointRadiusFinalDot(data0.length, 4),
-                pointBackgroundColor: '#F4A140',
-                borderColor: '#F4A140'
-            }, {
-                data: data1,
-                pointRadius: pointRadiusFinalDot(data1.length, 4),
-                pointBackgroundColor: '#62B356',
-                borderColor: '#62B356'
-            }]
-        },
-        options: {
-            animation: {
-                onComplete: function(){
-                    setUpLabelsForChart(this);
-                }
-            },
-            layout: {
-                padding: {
-                    top: 4
-                }
+    $('#chart-all-reports').each(function(){
+        var $allReports = $(this),
+            labels = $allReports.data('labels'),
+            data0 = $allReports.data('values-reports'),
+            data1 = $allReports.data('values-fixed');
+
+        window.chartAllReports = new Chart($allReports, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: data0,
+                    pointRadius: pointRadiusFinalDot(data0.length, 4),
+                    pointBackgroundColor: colours[1],
+                    borderColor: colours[1]
+                }, {
+                    data: data1,
+                    pointRadius: pointRadiusFinalDot(data1.length, 4),
+                    pointBackgroundColor: colours[3],
+                    borderColor: colours[3]
+                }]
             },
-            scales: {
-                xAxes: [{
-                    type: 'category',
-                    gridLines: {
-                        display: false
+            options: {
+                animation: {
+                    onComplete: function(){
+                        setUpLabelsForChart(this);
                     }
-                }],
-                yAxes: [{
-                    type: "linear",
-                    ticks: {
-                        display: false
+                },
+                layout: {
+                    padding: {
+                        top: 4
                     }
+                },
+                scales: {
+                    xAxes: [{
+                        type: 'category',
+                        gridLines: {
+                            display: false
+                        }
+                    }],
+                    yAxes: [{
+                        type: "linear",
+                        ticks: {
+                            display: false
+                        }
+                    }]
+                },
+                onResize: function(chart, size){
+                    setUpLabelsForChart(chart);
+                }
+            }
+        });
+    });
+
+    $('.js-make-bar-chart').each(function(){
+        var $table = $(this);
+        var $trs = $table.find('tr');
+        var $wrapper = $('<div>').addClass('responsive-bar-chart').insertBefore($table);
+        var $canvas = $('<canvas>').attr({
+            'width': 600,
+            'height': 30 * $trs.length
+        }).appendTo($wrapper);
+        var rowLabels = [];
+        var rowValues = [];
+
+        $trs.each(function(){
+            rowLabels.push( $(this).find('th').text() );
+            rowValues.push( parseInt($(this).find('td').text(), 10) );
+        });
+
+        var barChart = new Chart($canvas, {
+            type: 'horizontalBar',
+            data: {
+                labels: rowLabels,
+                datasets: [{
+                    label: "",
+                    data: rowValues,
+                    backgroundColor: colours
                 }]
             },
-            onResize: function(chart, size){
-                setUpLabelsForChart(chart);
+            options: {
+                animation: {
+                    onComplete: function(){
+                        // Label each bar with the numerical value.
+                        var chartInstance = this.chart,
+                            ctx = chartInstance.ctx;
+
+                        ctx.font = Chart.helpers.fontString( Chart.defaults.global.defaultFontSize * 0.8, 'bold', Chart.defaults.global.defaultFontFamily);
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'middle';
+
+                        this.data.datasets.forEach(function (dataset, i) {
+                            var meta = chartInstance.controller.getDatasetMeta(i);
+                            meta.data.forEach(function (bar, index) {
+                                var dataValue = dataset.data[index];
+                                var width_text = ctx.measureText(dataValue).width;
+                                var width_bar = bar._model.x - bar._model.base;
+                                var gutter = (bar._model.height - (Chart.defaults.global.defaultFontSize * 0.8)) / 2;
+                                var textX;
+                                if (width_text + 2 * gutter > width_bar) {
+                                    textX = bar._model.x + 2 * gutter;
+                                    ctx.fillStyle = bar._model.backgroundColor;
+                                } else {
+                                    textX = bar._model.x - gutter;
+                                    ctx.fillStyle = '#fff';
+                                }
+                                ctx.fillText( dataValue, textX, bar._model.y );
+                            });
+                        });
+                    }
+                },
+                scales: {
+                    xAxes: [{
+                        gridLines: {
+                            drawBorder: false,
+                            drawTicks: false
+                        },
+                        ticks: {
+                            beginAtZero: true,
+                            maxTicksLimit: 11,
+                            display: false
+                        }
+                    }],
+                    yAxes: [{
+                        gridLines: {
+                            display: false
+                        }
+                    }]
+                }
             }
-        }
+        });
+
+        $table.hide();
     });
 });