[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

1 files changed, 22 insertions, 2 deletions

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) );
         });