From 7143e10201089b9cce70f87d855baea52717c8a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Salvador=20P=C3=A9rez=20Garc=C3=ADa?=
 <jsperezg@gmail.com>
Date: Fri, 14 Sep 2018 12:20:03 +0200
Subject: [PATCH] Graph enhancements

Y axis have received the following enhancement:

It won't show labels for each value in order to improve its readability.

Maximum value will be set according to the maximum number of supports
received for the current proposal.

In case no supports are received it will use the number of supports
required for a successful proposal.
---
 app/assets/javascripts/dashboard_graphs.js | 32 +++++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/dashboard_graphs.js b/app/assets/javascripts/dashboard_graphs.js
index f878e3b15..f2ca99d9e 100644
--- a/app/assets/javascripts/dashboard_graphs.js
+++ b/app/assets/javascripts/dashboard_graphs.js
@@ -12,6 +12,7 @@
     this.targetId = null;
     this.groupBy = null;
     this.proposalSuccess = null;
+    this.maximumValue = 0;
     this.progressLabel = 'Progress';
     this.supportsLabel = 'Supports';
     this.successLabel = 'Success';
@@ -75,6 +76,10 @@
       if (data.hasOwnProperty(key)) {
         this.xColumnValues.push(key);
         this.progressColumnValues.push(data[key]);
+
+        if (this.maximumValue < data[key]) {
+          this.maximumValue = data[key];
+        }
       }
     }
   };
@@ -140,13 +145,14 @@
   };
 
   ProposalGraph.prototype.draw = function() {
-    var colors = {};
+    var colors = {},
+        maximumValue = this.maximumValue === 0 ? this.proposalSuccess : Math.round(this.maximumValue * 1.10);
 
     this.formatXColumnValues();
     
     colors[this.progressColumnValues[0]] = '#004a83';
     colors[this.successfulColumnValues[0]] = '#ff7f0e';
-    
+
     c3.generate({
       bindto: '#' + this.targetId,
       data: {
@@ -160,8 +166,11 @@
       },
       axis: {
         y: {
-          min: this.proposalSuccess * 0.1,
-          max: this.proposalSuccess,
+          tick: {
+            values: this.tickYValues()
+          },
+          min: (this.maximumValue === 0 ? Math.round(this.proposalSuccess * 0.10) : 0),
+          max: maximumValue,
           label: { 
             text: this.supportsLabel,
             position: 'outer-middle'
@@ -188,6 +197,21 @@
     });
   };
 
+  ProposalGraph.prototype.tickYValues = function () {
+    var i,
+        tick = [0],
+        maximumValue = this.maximumValue === 0 ? this.proposalSuccess : Math.round(this.maximumValue * 1.10),
+        step = maximumValue <= 10 ? 1 : Math.round(maximumValue / 10);
+
+    for (i = step; i < maximumValue; i += step) {
+      tick.push(i);
+    }
+
+    tick.push(maximumValue);
+
+    return tick;
+  };
+
   ProposalGraph.prototype.formatXColumnValues = function () {
     var i, l, parts;