From 2194c4e0a996b67f7ad76c7600b0dc78b488b74f Mon Sep 17 00:00:00 2001 From: James Cole Date: Sat, 27 Jun 2015 16:00:50 +0200 Subject: [PATCH] Expand some layouts to accept chartJS charts. --- public/js/charts.js | 147 ++++++++++++++++++++++++++- public/js/index.js | 2 +- public/js/reports.js | 13 ++- resources/twig/accounts/index.twig | 4 + resources/twig/accounts/show.twig | 9 ++ resources/twig/bills/show.twig | 4 + resources/twig/budgets/show.twig | 4 + resources/twig/categories/index.twig | 4 + resources/twig/categories/show.twig | 4 + resources/twig/index.twig | 18 +++- resources/twig/piggy-banks/show.twig | 4 + resources/twig/reports/month.twig | 11 +- resources/twig/reports/year.twig | 4 + 13 files changed, 217 insertions(+), 11 deletions(-) diff --git a/public/js/charts.js b/public/js/charts.js index 4d2e2aa526..d998bab31d 100644 --- a/public/js/charts.js +++ b/public/js/charts.js @@ -1,33 +1,174 @@ +/* globals $, Chart, currencySymbol */ + +/* + Make some colours: + */ +var colourSet = [ + [53, 124, 165], + [0, 141, 76], + [219, 139, 11], + [202, 25, 90] +]; + +var fillColors = []; +var strokePointHighColors = []; +for (var i = 0; i < colourSet.length; i++) { + fillColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.2)"); + strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)"); +} +/* + Set default options: + */ +var defaultAreaOptions = { + scaleShowGridLines: false, + pointDotRadius: 2, + datasetStrokeWidth: 1, + pointHitDetectionRadius: 5, + datasetFill: true, + scaleFontSize: 10, + responsive: true, + scaleLabel: "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>", + tooltipFillColor: "rgba(0,0,0,0.5)", + multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>" +}; +var defaultLineOptions = defaultAreaOptions; +defaultLineOptions.datasetFill = false; +/** + * Function to draw a line chart: + * @param URL + * @param container + * @param options + */ function lineChart(URL, container, options) { "use strict"; - console.log('no impl for lineChart'); + options = options || defaultLineOptions; + + $.getJSON(URL).success(function (data) { + var ctx = document.getElementById(container).getContext("2d"); + var newData = {}; + newData.datasets = []; + + for (var i = 0; i < data.count; i++) { + newData.labels = data.labels; + var dataset = data.datasets[i]; + dataset.fillColor = fillColors[i]; + dataset.strokeColor = strokePointHighColors[i]; + dataset.pointColor = strokePointHighColors[i]; + dataset.pointStrokeColor = "#fff"; + dataset.pointHighlightFill = "#fff"; + dataset.pointHighlightStroke = strokePointHighColors[i]; + newData.datasets.push(dataset); + } + var myAreaChart = new Chart(ctx).Line(newData, options); + + }).fail(function () { + $('#' + container).addClass('google-chart-error'); + }); + console.log('URL for line chart : ' + URL); } +/** + * Function to draw an area chart: + * + * @param URL + * @param container + * @param options + */ function areaChart(URL, container, options) { "use strict"; - console.log('no impl for areaChart'); + options = options || defaultAreaOptions; + + $.getJSON(URL).success(function (data) { + var ctx = document.getElementById(container).getContext("2d"); + var newData = {}; + newData.datasets = []; + + for (var i = 0; i < data.count; i++) { + newData.labels = data.labels; + var dataset = data.datasets[i]; + dataset.fillColor = fillColors[i]; + dataset.strokeColor = strokePointHighColors[i]; + dataset.pointColor = strokePointHighColors[i]; + dataset.pointStrokeColor = "#fff"; + dataset.pointHighlightFill = "#fff"; + dataset.pointHighlightStroke = strokePointHighColors[i]; + newData.datasets.push(dataset); + } + new Chart(ctx).Line(newData, options); + + }).fail(function () { + $('#' + container).addClass('google-chart-error'); + }); + + console.log('URL for area chart: ' + URL); } +/** + * + * @param URL + * @param container + * @param options + */ function columnChart(URL, container, options) { "use strict"; - console.log('no impl for columnChart'); + + $.getJSON(URL).success(function (data) { + var ctx = document.getElementById(container).getContext("2d"); + var newData = {}; + newData.datasets = []; + + for (var i = 0; i < data.count; i++) { + newData.labels = data.labels; + var dataset = data.datasets[i]; + dataset.fillColor = fillColors[i]; + dataset.strokeColor = strokePointHighColors[i]; + dataset.pointColor = strokePointHighColors[i]; + dataset.pointStrokeColor = "#fff"; + dataset.pointHighlightFill = "#fff"; + dataset.pointHighlightStroke = strokePointHighColors[i]; + newData.datasets.push(dataset); + } + new Chart(ctx).Column(newData, options); + + }).fail(function () { + $('#' + container).addClass('google-chart-error'); + }); + console.log('URL for column chart : ' + URL); } +/** + * + * @param URL + * @param container + * @param options + */ function stackedColumnChart(URL, container, options) { "use strict"; console.log('no impl for stackedColumnChart'); } +/** + * + * @param URL + * @param container + * @param options + */ function comboChart(URL, container, options) { "use strict"; console.log('no impl for comboChart'); } +/** + * + * @param URL + * @param container + * @param options + */ function pieChart(URL, container, options) { "use strict"; console.log('no impl for pieChart'); diff --git a/public/js/index.js b/public/js/index.js index e1fba6d38f..4fc1d3bf4f 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -15,7 +15,7 @@ function drawChart() { "use strict"; areaChart('chart/account/frontpage', 'accounts-chart'); pieChart('chart/bill/frontpage', 'bills-chart'); - stackedColumnChart('chart/budget/frontpage', 'budgets-chart'); + columnChart('chart/budget/frontpage', 'budgets-chart'); columnChart('chart/category/frontpage', 'categories-chart'); diff --git a/public/js/reports.js b/public/js/reports.js index 5b6f0d4baa..563ea30237 100644 --- a/public/js/reports.js +++ b/public/js/reports.js @@ -1,7 +1,13 @@ /* globals google, expenseRestShow:true, incomeRestShow:true, year, shared, month, hideTheRest, showTheRest, showTheRestExpense, hideTheRestExpense, columnChart, lineChart, stackedColumnChart */ -if (typeof(google) !== 'undefined') { - google.setOnLoadCallback(drawChart); -} + +$(function () { + "use strict"; + if (typeof(google) !== 'undefined') { + google.setOnLoadCallback(drawChart); + } else { + drawChart(); + } +}); function drawChart() { @@ -16,7 +22,6 @@ function drawChart() { } - function openModal(e) { "use strict"; var target = $(e.target).parent(); diff --git a/resources/twig/accounts/index.twig b/resources/twig/accounts/index.twig index dd03537fd0..0de927345e 100644 --- a/resources/twig/accounts/index.twig +++ b/resources/twig/accounts/index.twig @@ -55,6 +55,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/accounts/show.twig b/resources/twig/accounts/show.twig index 74585ff6d7..3ec6b8a25f 100644 --- a/resources/twig/accounts/show.twig +++ b/resources/twig/accounts/show.twig @@ -24,7 +24,12 @@
+ {% if Config.get('firefly.chart') == 'google' %}
+ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + {% endif %}
@@ -57,6 +62,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} diff --git a/resources/twig/bills/show.twig b/resources/twig/bills/show.twig index 9e918b3251..3ad0d9ec74 100644 --- a/resources/twig/bills/show.twig +++ b/resources/twig/bills/show.twig @@ -114,6 +114,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/budgets/show.twig b/resources/twig/budgets/show.twig index 5cba6d42c2..8dbf2a3800 100644 --- a/resources/twig/budgets/show.twig +++ b/resources/twig/budgets/show.twig @@ -111,6 +111,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/categories/index.twig b/resources/twig/categories/index.twig index de703ec740..14208e2bbf 100644 --- a/resources/twig/categories/index.twig +++ b/resources/twig/categories/index.twig @@ -39,6 +39,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/categories/show.twig b/resources/twig/categories/show.twig index 4b59e4a484..32884ac3cb 100644 --- a/resources/twig/categories/show.twig +++ b/resources/twig/categories/show.twig @@ -51,6 +51,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/index.twig b/resources/twig/index.twig index 27db7e13e8..bd8dc6f34f 100644 --- a/resources/twig/index.twig +++ b/resources/twig/index.twig @@ -6,6 +6,8 @@ {% block content %} + + {% include 'partials/boxes.twig' %}
@@ -20,7 +22,12 @@
-
+ {% if Config.get('firefly.chart') == 'google' %} +
+ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + {% endif %}
@@ -34,7 +41,12 @@
-
+ {% if Config.get('firefly.chart') == 'google' %} +
+ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + {% endif %}
@@ -230,3 +242,5 @@ {% endif %} {% endblock %} +{% block styles %} +{% endblock %} \ No newline at end of file diff --git a/resources/twig/piggy-banks/show.twig b/resources/twig/piggy-banks/show.twig index 50f3cad115..851fdd2021 100644 --- a/resources/twig/piggy-banks/show.twig +++ b/resources/twig/piggy-banks/show.twig @@ -97,5 +97,9 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/reports/month.twig b/resources/twig/reports/month.twig index a74b1fd62d..0b9111669b 100644 --- a/resources/twig/reports/month.twig +++ b/resources/twig/reports/month.twig @@ -13,7 +13,12 @@

{{ 'accountBalances'|_ }}

-
+ {% if Config.get('firefly.chart') == 'google' %} +
+ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + {% endif %}
@@ -72,6 +77,10 @@ {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %} {% endif %} + {% if Config.get('firefly.chart') == 'chartjs' %} + + + {% endif %}