From 4dc7b4a85357168a8018b938d6a79ea5cce336db Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Thu, 22 Feb 2018 16:01:33 +0000
Subject: [UK] Linebreak long Y-axis labels on Dashboard bar chart

Y-axis labels in the Dashboard ranking tables now break onto multiple
lines if they are more than 4 words long.

/web/vendor/chart.min.js showing as modified because we updated it to
include a recent fix to label alignment on vertical scales:
https://github.com/mysociety/Chart.js/commit/4130c31
---
 web/js/dashboard.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

(limited to 'web/js/dashboard.js')

diff --git a/web/js/dashboard.js b/web/js/dashboard.js
index b35af2996..0eb53f964 100644
--- a/web/js/dashboard.js
+++ b/web/js/dashboard.js
@@ -1,7 +1,7 @@
 $(function(){
 
     Chart.defaults.global.defaultFontSize = 16;
-    Chart.defaults.global.defaultFontFamily = $('body').css('font-family');
+    // Chart.defaults.global.defaultFontFamily = $('body').css('font-family');
 
     var colours = [
         '#FF4343', // red
@@ -53,6 +53,26 @@ $(function(){
         return pointRadius;
     };
 
+    // Wraps a row label onto two equal equal lines,
+    // if it is longer than 4 words.
+    var linewrapLabel = function(text) {
+        if ( text.split(' ').length < 5 ) {
+            return text;
+        }
+
+        var middle = Math.floor(text.length / 2);
+        var before = text.lastIndexOf(' ', middle);
+        var after = text.indexOf(' ', middle + 1);
+
+        if (before < after) {
+            middle = after;
+        } else {
+            middle = before;
+        }
+
+        return [ text.substr(0, middle), text.substr(middle + 1) ];
+    };
+
     var makeSparkline = function makeSparkline($el, valuesStr, color, title){
         var values = [];
         var labels = [];
@@ -180,7 +200,7 @@ $(function(){
         var rowValues = [];
 
         $trs.each(function(){
-            rowLabels.push( $(this).find('th').text() );
+            rowLabels.push( linewrapLabel($(this).find('th').text()) );
             rowValues.push( parseInt($(this).find('td').text(), 10) );
         });
 
-- 
cgit v1.2.3


From 8ed2f5d17ab6c80f977439a7fcf3013545e5433d Mon Sep 17 00:00:00 2001
From: Zarino Zappia <mail@zarino.co.uk>
Date: Thu, 22 Feb 2018 16:21:32 +0000
Subject: [UK] Properly align Dashboard bar chart value labels

---
 web/js/dashboard.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'web/js/dashboard.js')

diff --git a/web/js/dashboard.js b/web/js/dashboard.js
index 0eb53f964..23c5496e6 100644
--- a/web/js/dashboard.js
+++ b/web/js/dashboard.js
@@ -226,7 +226,6 @@ $(function(){
                             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) {
@@ -238,10 +237,12 @@ $(function(){
                                 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;
+                                    textX = bar._model.x + gutter;
+                                    ctx.textAlign = 'left';
                                     ctx.fillStyle = bar._model.backgroundColor;
                                 } else {
                                     textX = bar._model.x - gutter;
+                                    ctx.textAlign = 'right';
                                     ctx.fillStyle = '#fff';
                                 }
                                 ctx.fillText( dataValue, textX, bar._model.y );
-- 
cgit v1.2.3


From 80b41eed05751ea6975793d289be151f834d8db2 Mon Sep 17 00:00:00 2001
From: Martin Wright <martin@mysociety.org>
Date: Wed, 28 Mar 2018 14:48:05 +0100
Subject: Don't run through this JavaScript in IE9

---
 web/js/dashboard.js | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'web/js/dashboard.js')

diff --git a/web/js/dashboard.js b/web/js/dashboard.js
index 23c5496e6..1f7f7c3e5 100644
--- a/web/js/dashboard.js
+++ b/web/js/dashboard.js
@@ -1,4 +1,7 @@
 $(function(){
+    if ($('html').is('.ie9')) {
+        return;
+    }
 
     Chart.defaults.global.defaultFontSize = 16;
     // Chart.defaults.global.defaultFontFamily = $('body').css('font-family');
-- 
cgit v1.2.3


From 2a569a3b42465cfb51ae5073d6885ed758072ecf Mon Sep 17 00:00:00 2001
From: Martin Wright <martin@mysociety.org>
Date: Wed, 28 Mar 2018 15:24:21 +0100
Subject: No longer horizontally align label with JS.

Fixes positioning bugs in all versions of IE due
to calculating the wrong horizontal position.
---
 web/js/dashboard.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'web/js/dashboard.js')

diff --git a/web/js/dashboard.js b/web/js/dashboard.js
index 1f7f7c3e5..82b5e6188 100644
--- a/web/js/dashboard.js
+++ b/web/js/dashboard.js
@@ -27,7 +27,6 @@ $(function(){
 
     var setUpLabelsForChart = function(chart){
         var $parent = $(chart.chart.canvas).parent();
-        var xGutterInPixels = 30;
 
         var lasty = 0;
         $.each(chart.config.data.datasets, function(datasetIndex, dataset){
@@ -38,8 +37,7 @@ $(function(){
                 y = lasty;
             }
             $label.css({
-                top: y,
-                left: latestPoint._model.x + xGutterInPixels
+                top: y
             });
             lasty = y + $label.height() + 8;
         });
-- 
cgit v1.2.3