IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-02-25 18:45:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Expand some layouts to accept chartJS charts.

Browse Source
This commit is contained in:
James Cole 2015-06-27 16:00:50 +02:00
parent c581080f3f
commit 2194c4e0a9
13 changed files with 217 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
public/js/charts.js
View File

@ -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');

2
public/js/index.js
View File

@ -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');

13
public/js/reports.js
View File

@ -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();

4
resources/twig/accounts/index.twig
View File

@ -55,6 +55,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/bootstrap-sortable.js"></script>
<script type="text/javascript" src="js/accounts.js"></script>
{% endblock %}

9
resources/twig/accounts/show.twig
View File

@ -24,7 +24,12 @@
</div>
</div>
<div class="box-body">
{% if Config.get('firefly.chart') == 'google' %}
<div id="overview-chart"></div>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<canvas id="overview-chart" style="width:100%;height:400px;"></canvas>
{% endif %}
</div>
</div>
</div>
@ -57,6 +62,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/accounts.js" type="text/javascript"></script>

4
resources/twig/bills/show.twig
View File

@ -114,6 +114,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/bills.js"></script>
{% endblock %}

4
resources/twig/budgets/show.twig
View File

@ -111,6 +111,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/budgets.js"></script>
{% endblock %}

4
resources/twig/categories/index.twig
View File

@ -39,6 +39,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/bootstrap-sortable.js"></script>
<script type="text/javascript" src="js/categories.js"></script>
{% endblock %}

4
resources/twig/categories/show.twig
View File

@ -51,6 +51,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/categories.js"></script>
{% endblock %}

18
resources/twig/index.twig
View File

@ -6,6 +6,8 @@
{% block content %}
{% include 'partials/boxes.twig' %}
<div class="row">
@ -20,7 +22,12 @@
</div>
</div>
<div class="box-body">
<div id="accounts-chart"></div>
{% if Config.get('firefly.chart') == 'google' %}
<div id="accounts-chart"></div>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<canvas id="accounts-chart" style="width:100%;height:400px;"></canvas>
{% endif %}
</div>
</div>
@ -34,7 +41,12 @@
</div>
</div>
<div class="box-body">
<div id="budgets-chart"></div>
{% if Config.get('firefly.chart') == 'google' %}
<div id="budgets-chart"></div>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<canvas id="accounts-chart" style="width:100%;height:400px;"></canvas>
{% endif %}
</div>
</div>
<!-- CATEGORIES -->
@ -230,3 +242,5 @@
{% endif %}
<script type="text/javascript" src="js/index.js"></script>
{% endblock %}
{% block styles %}
{% endblock %}

4
resources/twig/piggy-banks/show.twig
View File

@ -97,5 +97,9 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/piggy-banks.js"></script>
{% endblock %}

11
resources/twig/reports/month.twig
View File

@ -13,7 +13,12 @@
<h3 class="box-title">{{ 'accountBalances'|_ }}</h3>
</div>
<div class="box-body">
<div id="account-balances-chart"></div>
{% if Config.get('firefly.chart') == 'google' %}
<div id="account-balances-chart"></div>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<canvas id="account-balances-chart" style="width:100%;height:400px;"></canvas>
{% endif %}
</div>
</div>
</div>
@ -72,6 +77,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript">
var year = {{ start.year }};

4
resources/twig/reports/year.twig
View File

@ -74,6 +74,10 @@
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/gcharts.js"></script>
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript">
var year = '{{start.year}}';