From 9ccb67db8a96fd8cbea389511c1ecc97034ab82b Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Fri, 29 Jan 2016 13:35:08 +0100
Subject: [PATCH] Charts "columnChart" and "stackedColumnChart" now support
 beforeDraw() which will check the data to see if the chart should be drawn.
 This cleans up the front page for new users and empty months.

---
 public/js/charts.js | 38 +++++++++++++++++++++++++++++---------
 public/js/index.js  | 29 ++++++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/public/js/charts.js b/public/js/charts.js
index 0e29140169..3111645a18 100644
--- a/public/js/charts.js
+++ b/public/js/charts.js
@@ -27,16 +27,16 @@ var colourSet = [
 // Settings object that controls default parameters for library methods:
 accounting.settings = {
     currency: {
-        symbol : currencySymbol,   // default currency symbol is '$'
+        symbol: currencySymbol,   // default currency symbol is '$'
         format: "%s %v", // controls output: %s = symbol, %v = value/number (can be object: see below)
-        decimal : mon_decimal_point,  // decimal point separator
+        decimal: mon_decimal_point,  // decimal point separator
         thousand: mon_thousands_sep,  // thousands separator
-        precision : frac_digits   // decimal places
+        precision: frac_digits   // decimal places
     },
     number: {
-        precision : 0,  // default precision on numbers is 0
+        precision: 0,  // default precision on numbers is 0
         thousand: ",",
-        decimal : "."
+        decimal: "."
     }
 };
 
@@ -92,7 +92,7 @@ var defaultLineOptions = {
     datasetFill: false,
     scaleFontSize: 10,
     responsive: false,
-    scaleLabel:      "<%= '" + currencySymbol + " ' + Number(value).toFixed(0).replace('.', ',') %>",
+    scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(0).replace('.', ',') %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
@@ -107,9 +107,9 @@ var defaultColumnOptions = {
     scaleFontSize: 10,
     responsive: false,
     animation: false,
-    scaleLabel:           "<%= accounting.formatMoney(value) %>",
+    scaleLabel: "<%= accounting.formatMoney(value) %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
-    tooltipTemplate:      "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
+    tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
 };
 
@@ -122,7 +122,7 @@ var defaultStackedColumnOptions = {
     animation: false,
     scaleFontSize: 10,
     responsive: false,
-    scaleLabel:           "<%= accounting.formatMoney(value) %>",
+    scaleLabel: "<%= accounting.formatMoney(value) %>",
     tooltipFillColor: "rgba(0,0,0,0.5)",
     multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
 
@@ -204,8 +204,19 @@ function areaChart(URL, container, options) {
 function columnChart(URL, container, options) {
     "use strict";
 
+    options = options || {};
+
     $.getJSON(URL).success(function (data) {
 
+        var result = true;
+        if (options.beforeDraw) {
+            result = options.beforeDraw(data, {url: URL, container: container});
+        }
+        if (result === false) {
+            return;
+        }
+        console.log('Will draw columnChart(' + URL + ')');
+
         var ctx = document.getElementById(container).getContext("2d");
         var newData = {};
         newData.datasets = [];
@@ -240,6 +251,15 @@ function stackedColumnChart(URL, container, options) {
 
     $.getJSON(URL).success(function (data) {
 
+        var result = true;
+        if (options.beforeDraw) {
+            result = options.beforeDraw(data, {url: URL, container: container});
+        }
+        if (result === false) {
+            return;
+        }
+
+
         var ctx = document.getElementById(container).getContext("2d");
         var newData = {};
         newData.datasets = [];
diff --git a/public/js/index.js b/public/js/index.js
index 12d602f5e6..87bae2bf0f 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -34,14 +34,37 @@ function drawChart() {
     "use strict";
     areaChart('chart/account/frontpage', 'accounts-chart');
     pieChart('chart/bill/frontpage', 'bills-chart');
-    stackedColumnChart('chart/budget/frontpage', 'budgets-chart');
-    columnChart('chart/category/frontpage', 'categories-chart');
-    columnChart('chart/account/expense', 'expense-accounts-chart');
+    stackedColumnChart('chart/budget/frontpage', 'budgets-chart', {beforeDraw: beforeDrawIsEmpty});
+    columnChart('chart/category/frontpage', 'categories-chart', {beforeDraw: beforeDrawIsEmpty});
+    columnChart('chart/account/expense', 'expense-accounts-chart', {beforeDraw: beforeDrawIsEmpty});
 
 
     getBoxAmounts();
 }
 
+/**
+ * Removes a chart container if there is nothing for the chart to draw.
+ *
+ * @param data
+ * @param options
+ * @returns {boolean}
+ */
+function beforeDrawIsEmpty(data, options) {
+    "use strict";
+
+    // check if chart holds data.
+    if (data.labels.length === 0) {
+        // remove the chart container + parent
+        console.log(options.container + ' appears empty. Removed.');
+        $('#' + options.container).parent().parent().remove();
+
+        // return false so script stops.
+        return false;
+    }
+    return true;
+}
+
+
 function getBoxAmounts() {
     "use strict";
     var boxes = ['in', 'out', 'bills-unpaid', 'bills-paid'];