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

Optimise some charts [skip ci]

Browse Source
This commit is contained in:
James Cole 2015-06-27 22:11:03 +02:00
parent 94be5244fe
commit 2c2ed26c38
5 changed files with 64 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/Generator/Chart/Budget/ChartJsBudgetChartGenerator.php
View File

@ -80,27 +80,28 @@ class ChartJsBudgetChartGenerator implements BudgetChartGenerator
$left = [];
$spent = [];
$overspent = [];
$amount = [];
$expenses = [];
foreach ($entries as $entry) {
if ($entry[1] != 0 || $entry[2] != 0 || $entry[3] != 0) {
$left[] = round($entry[1], 2);
$spent[] = round($entry[2], 2);
$overspent[] = round($entry[3], 2);
$amount[] = round($entry[4], 2);
$expenses[] = round($entry[5], 2);
//$data['count']++;
}
}
$data['datasets'][] = [
'label' => 'Amount',
'data' => $amount,
'label' => trans('firefly.left'),
'data' => $left,
];
$data['datasets'][] = [
'label' => 'Spent',
'data' => $expenses,
'label' => trans('firefly.spent'),
'data' => $spent,
];
$data['datasets'][] = [
'label' => trans('firefly.overspent'),
'data' => $overspent,
];
$data['count'] = count($data['datasets']);
return $data;
}
@ -140,23 +141,5 @@ class ChartJsBudgetChartGenerator implements BudgetChartGenerator
}
return $data;
$chart = new GChart;
// add columns:
$chart->addColumn(trans('firefly.month'), 'date');
foreach ($budgets as $budget) {
$chart->addColumn($budget->name, 'number');
}
/** @var array $entry */
foreach ($entries as $entry) {
$chart->addRowArray($entry);
}
$chart->generate();
return $chart->getData();
}
}

4
app/Generator/Chart/Category/ChartJsCategoryChartGenerator.php
View File

@ -31,7 +31,7 @@ class ChartJsCategoryChartGenerator implements CategoryChartGenerator
'labels' => [],
'datasets' => [
[
'label' => 'Spent',
'label' => trans('firefly.spent'),
'data' => []
]
],
@ -57,7 +57,7 @@ class ChartJsCategoryChartGenerator implements CategoryChartGenerator
'labels' => [],
'datasets' => [
[
'label' => 'Spent',
'label' => trans('firefly.spent'),
'data' => []
]
],

68
public/js/charts.js
View File

@ -56,11 +56,26 @@ var defaultAreaOptions = {
datasetFill: true,
scaleFontSize: 10,
responsive: true,
scaleLabel: "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>",
scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
};
var defaultPieOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
datasetStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: false,
scaleFontSize: 10,
responsive: true,
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
};
var defaultLineOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
@ -69,13 +84,35 @@ var defaultLineOptions = {
datasetFill: false,
scaleFontSize: 10,
responsive: true,
scaleLabel: "<%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>",
scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>"
};
var defaultColumnOptions = {
multiTooltipTemplate: "<%=datasetLabel%>: <%= '" + currencyCode + " ' + Number(value).toFixed(2).replace('.', ',') %>"
scaleShowGridLines: false,
pointDotRadius: 2,
barStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: false,
scaleFontSize: 10,
responsive: true,
scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%>" + currencySymbol + " <%= value %>",
};
var defaultStackedColumnOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
barStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: false,
scaleFontSize: 10,
responsive: true,
scaleLabel: "<%= '" + currencySymbol + " ' + Number(value).toFixed(2).replace('.', ',') %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
multiTooltipTemplate: currencySymbol + " <%= Number(value).toFixed(2).replace('.', ',') %>"
};
@ -105,7 +142,7 @@ function lineChart(URL, container, options) {
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset);
}
var myAreaChart = new Chart(ctx).Line(newData, options);
new Chart(ctx).Line(newData, options);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
@ -158,6 +195,7 @@ function areaChart(URL, container, options) {
function columnChart(URL, container, options) {
"use strict";
options = options || defaultColumnOptions;
$.getJSON(URL).success(function (data) {
var ctx = document.getElementById(container).getContext("2d");
@ -167,7 +205,6 @@ function columnChart(URL, container, options) {
for (var i = 0; i < data.count; i++) {
newData.labels = data.labels;
var dataset = data.datasets[i];
console.log('Now at index ' + i + ' (count is ' + fillColors.length + ')');
dataset.fillColor = fillColors[i];
dataset.strokeColor = strokePointHighColors[i];
dataset.pointColor = strokePointHighColors[i];
@ -176,7 +213,6 @@ function columnChart(URL, container, options) {
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset);
}
console.log(newData);
new Chart(ctx).Bar(newData, options);
}).fail(function () {
@ -193,21 +229,17 @@ function columnChart(URL, container, options) {
*/
function stackedColumnChart(URL, container, options) {
"use strict";
options = options || defaultStackedColumnOptions;
$.getJSON(URL).success(function (data) {
var ctx = document.getElementById(container).getContext("2d");
var newData = {};
newData.datasets = [];
console.log('----');
console.log('URL: ' + URL);
console.log('Total datasets: ' + data.datasets.length);
console.log('data.count: ' + data.count);
console.log('----');
for (var i = 0; i < data.count; i++) {
newData.labels = data.labels;
var dataset = data.datasets[i];
console.log('Now at index ' + i + ' (count is ' + fillColors.length + ')');
dataset.fillColor = fillColors[i];
dataset.strokeColor = strokePointHighColors[i];
dataset.pointColor = strokePointHighColors[i];
@ -216,13 +248,12 @@ function stackedColumnChart(URL, container, options) {
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset);
}
console.log(newData);
new Chart(ctx).StackedBar(newData, options);
}).fail(function () {
$('#' + container).addClass('google-chart-error');
});
console.log('URL for column chart : ' + URL);
console.log('URL for stacked column chart : ' + URL);
}
/**
@ -245,7 +276,7 @@ function comboChart(URL, container, options) {
function pieChart(URL, container, options) {
"use strict";
options = options || defaultColumnOptions;
options = options || defaultPieOptions;
$.getJSON(URL).success(function (data) {
var ctx = document.getElementById(container).getContext("2d");
@ -256,5 +287,6 @@ function pieChart(URL, container, options) {
});
console.log('no impl for pieChart');
console.log('URL for pie chart : ' + URL);
}

1
resources/twig/index.twig
View File

@ -248,6 +248,7 @@
{% endif %}
{% if Config.get('firefly.chart') == 'chartjs' %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/Chart.StackedBar.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
{% endif %}
<script type="text/javascript" src="js/index.js"></script>

1
resources/twig/layout/default.twig
View File

@ -156,6 +156,7 @@
var nextMonthName = "{{ nextMonthName }}";
var currencyCode = '{{getCurrencyCode() }}';
var currencySymbol = '{{getCurrencySymbol()|raw }}';
$('#daterange').text(titleString);
</script>