diff --git a/config/firefly.php b/config/firefly.php index 2c8b29ab39..24d37e4a1e 100644 --- a/config/firefly.php +++ b/config/firefly.php @@ -1,6 +1,7 @@ 'google', // or 'chartjs' 'version' => '3.4.5', 'index_periods' => ['1D', '1W', '1M', '3M', '6M', '1Y', 'custom'], 'budget_periods' => ['daily', 'weekly', 'monthly', 'quarterly', 'half-year', 'yearly'], diff --git a/public/js/accounts.js b/public/js/accounts.js index e6bbc4ac39..7d390f74f5 100644 --- a/public/js/accounts.js +++ b/public/js/accounts.js @@ -1,4 +1,4 @@ -/* global $, googleLineChart, accountID, token */ +/* global $, lineChart, accountID, token */ // Return a helper with preserved width of cells @@ -12,8 +12,8 @@ var fixHelper = function (e, ui) { $(function () { "use strict"; - if (typeof(googleLineChart) === "function" && typeof accountID !== 'undefined') { - googleLineChart('chart/account/' + accountID, 'overview-chart'); + if (typeof(lineChart) === "function" && typeof accountID !== 'undefined') { + lineChart('chart/account/' + accountID, 'overview-chart'); } // sortable! diff --git a/public/js/bills.js b/public/js/bills.js index 58dd7ae943..19c8c4f634 100644 --- a/public/js/bills.js +++ b/public/js/bills.js @@ -1,9 +1,9 @@ -/* global googleComboChart, billID */ +/* global comboChart, billID */ $(document).ready(function () { "use strict"; - if (typeof(googleComboChart) === 'function' && typeof(billID) !== 'undefined') { - googleComboChart('chart/bill/' + billID, 'bill-overview'); + if (typeof(comboChart) === 'function' && typeof(billID) !== 'undefined') { + comboChart('chart/bill/' + billID, 'bill-overview'); } } ); \ No newline at end of file diff --git a/public/js/budgets.js b/public/js/budgets.js index ee4ecceb21..7dfc788244 100644 --- a/public/js/budgets.js +++ b/public/js/budgets.js @@ -1,4 +1,4 @@ -/* globals $, budgeted:true, currencySymbol, budgetIncomeTotal ,budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, googleLineChart */ +/* globals $, budgeted:true, currencySymbol, budgetIncomeTotal, columnChart, budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, lineChart */ function drawSpentBar() { "use strict"; @@ -104,10 +104,10 @@ $(function () { Draw the charts, if necessary: */ if (typeof budgetID !== 'undefined' && typeof repetitionID === 'undefined') { - googleColumnChart('chart/budget/' + budgetID, 'budgetOverview'); + columnChart('chart/budget/' + budgetID, 'budgetOverview'); } if (typeof budgetID !== 'undefined' && typeof repetitionID !== 'undefined') { - googleLineChart('chart/budget/' + budgetID + '/' + repetitionID, 'budgetOverview'); + lineChart('chart/budget/' + budgetID + '/' + repetitionID, 'budgetOverview'); } }); diff --git a/public/js/categories.js b/public/js/categories.js index ffc72468dd..c39e840354 100644 --- a/public/js/categories.js +++ b/public/js/categories.js @@ -1,9 +1,9 @@ -/* globals $, categoryID, googleColumnChart */ +/* globals $, categoryID, columnChart */ $(function () { "use strict"; if (typeof categoryID !== 'undefined') { - googleColumnChart('chart/category/' + categoryID + '/all', 'all'); - googleColumnChart('chart/category/' + categoryID + '/month', 'month'); + columnChart('chart/category/' + categoryID + '/all', 'all'); + columnChart('chart/category/' + categoryID + '/month', 'month'); } diff --git a/public/js/gcharts.js b/public/js/gcharts.js index 664859f960..64c1431dba 100644 --- a/public/js/gcharts.js +++ b/public/js/gcharts.js @@ -1,7 +1,221 @@ -/* globals currencyCode,defaultAreaChartOptions , language, defaultPieChartOptions, defaultLineChartOptions, defaultColumnChartOptions, defaultBarChartOptions, defaultStackedColumnChartOptions, defaultComboChartOptions */ -/* exported googleLineChart, googleBarChart, googleColumnChart, googleStackedColumnChart, googleComboChart, googlePieChart */ +/* globals currencyCode, language */ +/* exported lineChart, googleColumnChart, stackedColumnChart, comboChart, pieChart, defaultLineChartOptions, defaultAreaChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions */ var google = google || {}; -google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'line'],'language': language }); +google.load('visualization', '1.1', {'packages': ['corechart', 'bar', 'line'], 'language': language}); + + +/* exported */ + +var defaultLineChartOptions = { + curveType: 'function', + legend: { + position: 'none' + }, + interpolateNulls: true, + lineWidth: 1, + chartArea: { + left: 50, + top: 10, + width: '95%', + height: '90%' + }, + height: 400, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], + hAxis: { + textStyle: { + color: '#838383', + }, + baselineColor: '#aaaaaa', + gridlines: { + color: 'transparent' + } + }, + fontSize: 11, + vAxis: { + textStyle: { + color: '#838383', + }, + baselineColor: '#aaaaaa', + format: '\u20AC #' + } + + +}; + +var defaultAreaChartOptions = { + curveType: 'function', + legend: { + position: 'none' + }, + interpolateNulls: true, + lineWidth: 1, + chartArea: { + left: 50, + top: 10, + width: '95%', + height: '90%' + }, + height: 400, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], + hAxis: { + textStyle: { + color: '#838383', + }, + baselineColor: '#aaaaaa', + gridlines: { + color: 'transparent' + } + }, + fontSize: 11, + vAxis: { + textStyle: { + color: '#838383', + }, + baselineColor: '#aaaaaa', + format: '\u20AC #' + } + + +}; + +var defaultBarChartOptions = { + height: 400, + bars: 'horizontal', + hAxis: { + textStyle: { + color: '#838383', + }, + baselineColor: '#aaaaaa', + format: '\u20AC #' + + }, + fontSize: 11, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], + vAxis: { + textStyle: { + color: '#838383' + }, + textPosition: 'in', + gridlines: { + + color: 'transparent' + }, + baselineColor: '#aaaaaa' + }, + chartArea: { + left: 15, + top: 10, + width: '100%', + height: '90%' + }, + + legend: { + position: 'none' + } +}; + +var defaultComboChartOptions = { + height: 300, + chartArea: { + left: 75, + top: 10, + width: '100%', + height: '90%' + }, + vAxis: { + minValue: 0, + format: '\u20AC #' + }, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], + fontSize: 11, + legend: { + position: 'none' + }, + series: { + 0: {type: 'line'}, + 1: {type: 'line'}, + 2: {type: 'bars'} + }, + bar: {groupWidth: 20} +}; + +var defaultColumnChartOptions = { + height: 400, + chartArea: { + left: 50, + top: 10, + width: '85%', + height: '80%' + }, + fontSize: 11, + hAxis: { + textStyle: { + color: '#838383' + }, + gridlines: { + color: 'transparent' + }, + baselineColor: '#aaaaaa' + + }, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], + vAxis: { + textStyle: { + color: '#838383' + }, + baselineColor: '#aaaaaa', + format: '\u20AC #' + }, + legend: { + position: 'none' + } +}; + +var defaultStackedColumnChartOptions = { + height: 400, + chartArea: { + left: 50, + top: 10, + width: '85%', + height: '80%' + }, + legend: { + position: 'none' + }, + fontSize: 11, + isStacked: true, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], + hAxis: { + textStyle: { + color: '#838383', + }, + gridlines: { + color: 'transparent' + } + }, + vAxis: { + textStyle: { + color: '#838383', + }, + format: '\u20AC #' + } +}; + +var defaultPieChartOptions = { + chartArea: { + left: 0, + top: 0, + width: '100%', + height: '100%' + }, + fontSize: 11, + height: 200, + legend: { + position: 'none' + }, + colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], +}; + function googleChart(chartType, URL, container, options) { "use strict"; @@ -33,7 +247,7 @@ function googleChart(chartType, URL, container, options) { chart = new google.visualization.LineChart(document.getElementById(container)); options = options || defaultLineChartOptions; } - if(chartType === 'area') { + if (chartType === 'area') { chart = new google.visualization.AreaChart(document.getElementById(container)); options = options || defaultAreaChartOptions; } @@ -74,38 +288,32 @@ function googleChart(chartType, URL, container, options) { } -function googleLineChart(URL, container, options) { +function lineChart(URL, container, options) { "use strict"; return googleChart('line', URL, container, options); } -function googleAreaChart(URL, container, options) { +function areaChart(URL, container, options) { "use strict"; return googleChart('area', URL, container, options); } - -function googleBarChart(URL, container, options) { - "use strict"; - return googleChart('bar', URL, container, options); -} - -function googleColumnChart(URL, container, options) { +function columnChart(URL, container, options) { "use strict"; return googleChart('column', URL, container, options); } -function googleStackedColumnChart(URL, container, options) { +function stackedColumnChart(URL, container, options) { "use strict"; return googleChart('stackedColumn', URL, container, options); } -function googleComboChart(URL, container, options) { +function comboChart(URL, container, options) { "use strict"; return googleChart('combo', URL, container, options); } -function googlePieChart(URL, container, options) { +function pieChart(URL, container, options) { "use strict"; return googleChart('pie', URL, container, options); } diff --git a/public/js/gcharts.options.js b/public/js/gcharts.options.js deleted file mode 100644 index 7d23c26fda..0000000000 --- a/public/js/gcharts.options.js +++ /dev/null @@ -1,212 +0,0 @@ -/* exported defaultLineChartOptions, defaultAreaChartOptions, defaultBarChartOptions, defaultComboChartOptions, defaultColumnChartOptions, defaultStackedColumnChartOptions, defaultPieChartOptions */ - -var defaultLineChartOptions = { - curveType: 'function', - legend: { - position: 'none' - }, - interpolateNulls: true, - lineWidth: 1, - chartArea: { - left: 50, - top: 10, - width: '95%', - height: '90%' - }, - height: 400, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], - hAxis: { - textStyle: { - color: '#838383', - }, - baselineColor: '#aaaaaa', - gridlines: { - color: 'transparent' - } - }, - fontSize: 11, - vAxis: { - textStyle: { - color: '#838383', - }, - baselineColor: '#aaaaaa', - format: '\u20AC #' - } - - -}; - -var defaultAreaChartOptions = { - curveType: 'function', - legend: { - position: 'none' - }, - interpolateNulls: true, - lineWidth: 1, - chartArea: { - left: 50, - top: 10, - width: '95%', - height: '90%' - }, - height: 400, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], - hAxis: { - textStyle: { - color: '#838383', - }, - baselineColor: '#aaaaaa', - gridlines: { - color: 'transparent' - } - }, - fontSize: 11, - vAxis: { - textStyle: { - color: '#838383', - }, - baselineColor: '#aaaaaa', - format: '\u20AC #' - } - - -}; - -var defaultBarChartOptions = { - height: 400, - bars: 'horizontal', - hAxis: { - textStyle: { - color: '#838383', - }, - baselineColor: '#aaaaaa', - format: '\u20AC #' - - }, - fontSize: 11, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], - vAxis: { - textStyle: { - color: '#838383' - }, - textPosition: 'in', - gridlines: { - - color: 'transparent' - }, - baselineColor: '#aaaaaa' - }, - chartArea: { - left: 15, - top: 10, - width: '100%', - height: '90%' - }, - - legend: { - position: 'none' - } -}; - -var defaultComboChartOptions = { - height: 300, - chartArea: { - left: 75, - top: 10, - width: '100%', - height: '90%' - }, - vAxis: { - minValue: 0, - format: '\u20AC #' - }, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], - fontSize: 11, - legend: { - position: 'none' - }, - series: { - 0: {type: 'line'}, - 1: {type: 'line'}, - 2: {type: 'bars'} - }, - bar: {groupWidth: 20} -}; - -var defaultColumnChartOptions = { - height: 400, - chartArea: { - left: 50, - top: 10, - width: '85%', - height: '80%' - }, - fontSize: 11, - hAxis: { - textStyle: { - color: '#838383' - }, - gridlines: { - color: 'transparent' - }, - baselineColor: '#aaaaaa' - - }, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], - vAxis: { - textStyle: { - color: '#838383' - }, - baselineColor: '#aaaaaa', - format: '\u20AC #' - }, - legend: { - position: 'none' - } -}; - -var defaultStackedColumnChartOptions = { - height: 400, - chartArea: { - left: 50, - top: 10, - width: '85%', - height: '80%' - }, - legend: { - position: 'none' - }, - fontSize: 11, - isStacked: true, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], - hAxis: { - textStyle: { - color: '#838383', - }, - gridlines: { - color: 'transparent' - } - }, - vAxis: { - textStyle: { - color: '#838383', - }, - format: '\u20AC #' - } -}; - -var defaultPieChartOptions = { - chartArea: { - left: 0, - top: 0, - width: '100%', - height: '100%' - }, - fontSize: 11, - height: 200, - legend: { - position: 'none' - }, - colors: ["#357ca5", "#008d4c", "#db8b0b", "#ca195a", "#555299", "#4285f4", "#db4437", "#f4b400", "#0f9d58", "#ab47bc", "#00acc1", "#ff7043", "#9e9d24", "#5c6bc0", "#f06292", "#00796b", "#c2185b"], -}; - diff --git a/public/js/index.js b/public/js/index.js index 3d888458ac..db48070fbe 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1,13 +1,13 @@ -/* globals $, googleColumnChart, google, googleLineChart, googlePieChart, googleStackedColumnChart */ +/* globals $, columnChart, google, lineChart, pieChart, stackedColumnChart, areaChart */ google.setOnLoadCallback(drawChart); function drawChart() { "use strict"; - googleAreaChart('chart/account/frontpage', 'accounts-chart'); - googlePieChart('chart/bill/frontpage', 'bills-chart'); - googleStackedColumnChart('chart/budget/frontpage', 'budgets-chart'); - googleColumnChart('chart/category/frontpage', 'categories-chart'); + areaChart('chart/account/frontpage', 'accounts-chart'); + pieChart('chart/bill/frontpage', 'bills-chart'); + stackedColumnChart('chart/budget/frontpage', 'budgets-chart'); + columnChart('chart/category/frontpage', 'categories-chart'); getBoxAmounts(); diff --git a/public/js/piggy-banks.js b/public/js/piggy-banks.js index 4eb976fbe4..36c14e20bc 100644 --- a/public/js/piggy-banks.js +++ b/public/js/piggy-banks.js @@ -1,4 +1,4 @@ -/* globals $, googleLineChart, token, piggyBankID */ +/* globals $, lineChart, token, piggyBankID */ // Return a helper with preserved width of cells var fixHelper = function (e, tr) { @@ -17,8 +17,8 @@ $(function () { $('.addMoney').on('click', addMoney); $('.removeMoney').on('click', removeMoney); - if (typeof(googleLineChart) === 'function' && typeof(piggyBankID) !== 'undefined') { - googleLineChart('chart/piggyBank/' + piggyBankID, 'piggy-bank-history'); + if (typeof(lineChart) === 'function' && typeof(piggyBankID) !== 'undefined') { + lineChart('chart/piggyBank/' + piggyBankID, 'piggy-bank-history'); } $('#sortable tbody').sortable( diff --git a/public/js/reports.js b/public/js/reports.js index bba54bd53c..5b6f0d4baa 100644 --- a/public/js/reports.js +++ b/public/js/reports.js @@ -1,4 +1,4 @@ -/* globals google, expenseRestShow:true, incomeRestShow:true, year, shared, month, hideTheRest, showTheRest, showTheRestExpense, hideTheRestExpense, googleColumnChart, googleLineChart, googleStackedColumnChart */ +/* globals google, expenseRestShow:true, incomeRestShow:true, year, shared, month, hideTheRest, showTheRest, showTheRestExpense, hideTheRestExpense, columnChart, lineChart, stackedColumnChart */ if (typeof(google) !== 'undefined') { google.setOnLoadCallback(drawChart); } @@ -6,13 +6,13 @@ if (typeof(google) !== 'undefined') { function drawChart() { "use strict"; - googleColumnChart('chart/report/in-out/' + year + shared, 'income-expenses-chart'); - googleColumnChart('chart/report/in-out-sum/' + year + shared, 'income-expenses-sum-chart'); + columnChart('chart/report/in-out/' + year + shared, 'income-expenses-chart'); + columnChart('chart/report/in-out-sum/' + year + shared, 'income-expenses-sum-chart'); - googleStackedColumnChart('chart/budget/year/' + year + shared, 'budgets'); - googleStackedColumnChart('chart/category/year/' + year + shared, 'categories'); + stackedColumnChart('chart/budget/year/' + year + shared, 'budgets'); + stackedColumnChart('chart/category/year/' + year + shared, 'categories'); - googleLineChart('/chart/account/month/' + year + '/' + month + shared, 'account-balances-chart'); + lineChart('/chart/account/month/' + year + '/' + month + shared, 'account-balances-chart'); } diff --git a/resources/twig/accounts/index.twig b/resources/twig/accounts/index.twig index 8b6d64bbed..dd03537fd0 100644 --- a/resources/twig/accounts/index.twig +++ b/resources/twig/accounts/index.twig @@ -51,9 +51,10 @@ - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/accounts/show.twig b/resources/twig/accounts/show.twig index 621c78171b..74585ff6d7 100644 --- a/resources/twig/accounts/show.twig +++ b/resources/twig/accounts/show.twig @@ -53,9 +53,10 @@ var accountID = {{ account.id }}; - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} diff --git a/resources/twig/bills/show.twig b/resources/twig/bills/show.twig index e53ed39670..9e918b3251 100644 --- a/resources/twig/bills/show.twig +++ b/resources/twig/bills/show.twig @@ -110,9 +110,10 @@ - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/budgets/show.twig b/resources/twig/budgets/show.twig index 5dbddf3a04..5cba6d42c2 100644 --- a/resources/twig/budgets/show.twig +++ b/resources/twig/budgets/show.twig @@ -107,9 +107,10 @@ - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/categories/index.twig b/resources/twig/categories/index.twig index 430075db65..de703ec740 100644 --- a/resources/twig/categories/index.twig +++ b/resources/twig/categories/index.twig @@ -35,9 +35,10 @@ {% endblock %} {% block scripts %} - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/categories/show.twig b/resources/twig/categories/show.twig index 7ae7dff99a..4b59e4a484 100644 --- a/resources/twig/categories/show.twig +++ b/resources/twig/categories/show.twig @@ -47,9 +47,10 @@ var categoryID = {{ category.id }}; - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/index.twig b/resources/twig/index.twig index e5d3ae5a96..120ffcd30e 100644 --- a/resources/twig/index.twig +++ b/resources/twig/index.twig @@ -220,8 +220,11 @@ {% endblock %} {% block scripts %} - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% else %} + + {% endif %} {% endblock %} diff --git a/resources/twig/piggy-banks/show.twig b/resources/twig/piggy-banks/show.twig index fdae48b235..50f3cad115 100644 --- a/resources/twig/piggy-banks/show.twig +++ b/resources/twig/piggy-banks/show.twig @@ -93,8 +93,9 @@ - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} {% endblock %} diff --git a/resources/twig/reports/month.twig b/resources/twig/reports/month.twig index bbe6cb0988..a74b1fd62d 100644 --- a/resources/twig/reports/month.twig +++ b/resources/twig/reports/month.twig @@ -68,9 +68,10 @@ - - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %} - - + {% if Config.get('firefly.chart') == 'google' %} + + + {% endif %}