IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2024-12-29 02:11:12 -06:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade chart library.

Browse Source
This commit is contained in:
James Cole 2016-04-10 10:05:50 +02:00
parent d5d4bb2c4b
commit b74c1c8cf9
15 changed files with 201 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/Generator/Chart/Bill/ChartJsBillChartGenerator.php
View File

@ -31,18 +31,15 @@ class ChartJsBillChartGenerator implements BillChartGeneratorInterface
public function frontpage(string $paid, string $unpaid): array
{
$data = [
[
'value' => round($unpaid, 2),
'color' => 'rgba(53, 124, 165,0.7)',
'highlight' => 'rgba(53, 124, 165,0.9)',
'label' => trans('firefly.unpaid'),
],
[
'value' => round(bcmul($paid, '-1'), 2), // paid is negative, must be positive.
'color' => 'rgba(0, 141, 76, 0.7)',
'highlight' => 'rgba(0, 141, 76, 0.9)',
'label' => trans('firefly.paid'),
'datasets' => [
[
'data' => [round($unpaid, 2), round(bcmul($paid, '-1'), 2)],
'backgroundColor' => ['rgba(53, 124, 165,0.7)', 'rgba(0, 141, 76, 0.7)',],
],
],
'labels' => [strval(trans('firefly.unpaid')), strval(trans('firefly.paid'))],
];
return $data;

2
app/Generator/Chart/Report/ChartJsReportChartGenerator.php
View File

@ -89,7 +89,7 @@ class ChartJsReportChartGenerator implements ReportChartGeneratorInterface
'labels' => [],
'datasets' => [
[
'label' => trans('firefly.net-worth'),
'label' => trans('firefly.net_worth'),
'data' => [],
],
],

239
public/js/global/charts.js
View File

@ -1,3 +1,11 @@
/*
* charts.js
* Copyright (C) 2016 thegrumpydictator@gmail.com
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file for details.
*/
/* globals $, Chart, currencySymbol,mon_decimal_point ,accounting, mon_thousands_sep, frac_digits */
/*
@ -20,7 +28,7 @@ var colourSet = [
[92, 107, 192],
[240, 98, 146],
[0, 121, 107],
[194, 24, 91],
[194, 24, 91]
];
@ -50,82 +58,134 @@ for (var i = 0; i < colourSet.length; i++) {
strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
}
Chart.defaults.global.legend.display = false;
Chart.defaults.global.animation.duration = 0;
/*
Set default options:
*/
var defaultAreaOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
datasetStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: true,
animation: false,
scaleFontSize: 10,
responsive: false,
scaleLabel: " <%= accounting.formatMoney(value) %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
scales: {
yAxes: [{
display: true,
ticks: {
callback: function (tickValue, index, ticks) {
"use strict";
return accounting.formatMoney(tickValue);
}
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
};
var defaultPieOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
datasetStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: false,
animation: false,
scaleFontSize: 10,
responsive: false,
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.labels[tooltipItem.datasetIndex] + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
};
var defaultLineOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
datasetStrokeWidth: 1,
pointHitDetectionRadius: 5,
animation: false,
datasetFill: false,
scaleFontSize: 10,
responsive: false,
scaleLabel: " <%= accounting.formatMoney(value) %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
// scaleShowGridLines: false,
// pointDotRadius: 2,
// datasetStrokeWidth: 1,
// pointHitDetectionRadius: 5,
// animation: false,
// datasetFill: false,
// scaleFontSize: 10,
// responsive: false,
// scaleLabel: " <%= accounting.formatMoney(value) %>",
// tooltipFillColor: "rgba(0,0,0,0.5)",
// tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
// multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
scales: {
yAxes: [{
display: true,
ticks: {
callback: function (tickValue, index, ticks) {
"use strict";
return accounting.formatMoney(tickValue);
}
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
};
var defaultColumnOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
barStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: false,
scaleFontSize: 10,
responsive: false,
animation: false,
scaleLabel: "<%= accounting.formatMoney(value) %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
scales: {
yAxes: [{
ticks: {
callback: function (tickValue, index, ticks) {
"use strict";
return accounting.formatMoney(tickValue);
}
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
};
var defaultStackedColumnOptions = {
scaleShowGridLines: false,
pointDotRadius: 2,
barStrokeWidth: 1,
pointHitDetectionRadius: 5,
datasetFill: false,
animation: false,
scaleFontSize: 10,
responsive: false,
scaleLabel: "<%= accounting.formatMoney(value) %>",
tooltipFillColor: "rgba(0,0,0,0.5)",
multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>"
stacked: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
ticks: {
callback: function (tickValue, index, ticks) {
"use strict";
return accounting.formatMoney(tickValue);
}
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
};
/**
@ -137,6 +197,7 @@ var defaultStackedColumnOptions = {
function lineChart(URL, container, options) {
"use strict";
$.getJSON(URL).done(function (data) {
var ctx = document.getElementById(container).getContext("2d");
var newData = {};
newData.datasets = [];
@ -144,15 +205,15 @@ function lineChart(URL, container, options) {
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];
dataset.backgroundColor = fillColors[i];
newData.datasets.push(dataset);
}
new Chart(ctx).Line(newData, defaultLineOptions);
new Chart(ctx, {
type: 'line',
data: data,
options: defaultLineOptions
});
}).fail(function () {
$('#' + container).addClass('general-chart-error');
@ -178,15 +239,15 @@ function areaChart(URL, container, options) {
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];
dataset.backgroundColor = fillColors[i];
newData.datasets.push(dataset);
}
new Chart(ctx).Line(newData, defaultAreaOptions);
new Chart(ctx, {
type: 'line',
data: newData,
options: defaultAreaOptions
});
}).fail(function () {
$('#' + container).addClass('general-chart-error');
@ -224,15 +285,15 @@ function columnChart(URL, container, options) {
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];
dataset.backgroundColor = fillColors[i];
newData.datasets.push(dataset);
}
new Chart(ctx).Bar(newData, defaultColumnOptions);
//new Chart(ctx).Bar(newData, defaultColumnOptions);
new Chart(ctx, {
type: 'bar',
data: data,
options: defaultColumnOptions
});
}).fail(function () {
$('#' + container).addClass('general-chart-error');
@ -270,15 +331,15 @@ function stackedColumnChart(URL, container, options) {
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];
dataset.backgroundColor = fillColors[i];
newData.datasets.push(dataset);
}
new Chart(ctx).StackedBar(newData, defaultStackedColumnOptions);
new Chart(ctx, {
type: 'bar',
data: data,
options: defaultStackedColumnOptions
});
}).fail(function () {
$('#' + container).addClass('general-chart-error');
@ -298,7 +359,11 @@ function pieChart(URL, container, options) {
$.getJSON(URL).done(function (data) {
var ctx = document.getElementById(container).getContext("2d");
new Chart(ctx).Pie(data, defaultPieOptions);
new Chart(ctx, {
type: 'pie',
data: data,
options: defaultPieOptions
});
}).fail(function () {
$('#' + container).addClass('general-chart-error');

15
public/js/lib/Chart.bundle.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

4
resources/views/accounts/show.twig
View File

@ -52,8 +52,8 @@
<script type="text/javascript">
var accountID = {{ account.id }};
</script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script src="js/lib/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.color-2.1.2.min.js" type="text/javascript"></script>
<script src="js/accounts/show.js" type="text/javascript"></script>

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

@ -110,7 +110,7 @@
<script type="text/javascript">
var billID = {{ bill.id }};
</script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/bills.js"></script>
{% endblock %}

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

@ -103,8 +103,8 @@
</script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/budgets.js"></script>
{% endblock %}

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

@ -35,8 +35,8 @@
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/bootstrap-sortable.js"></script>
<script type="text/javascript" src="js/categories.js"></script>
{% endblock %}

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

@ -75,8 +75,8 @@
<script type="text/javascript">
var categoryID = {{ category.id }};
</script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/categories.js"></script>
{% endblock %}

4
resources/views/categories/show_with_date.twig
View File

@ -43,8 +43,8 @@
var categoryID = {{ category.id }};
var categoryDate = "{{ carbon.format('Y-m-d') }}";
</script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/categories.js"></script>
{% endblock %}

10
resources/views/index.twig
View File

@ -243,17 +243,17 @@
{% block scripts %}
<!-- show tour? -->
<script type="text/javascript">
var showTour;
{% if showTour %}
var showTour = true;
showTour = true;
{% else %}
var showTour = false;
showTour = false;
{% endif %}
</script>
<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>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/index.js"></script>
{% endblock %}
{% block styles %}

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

@ -92,7 +92,7 @@
var piggyBankID = {{ piggyBank.id }};
</script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/piggy-banks/show.js"></script>
{% endblock %}

4
resources/views/reports/default/month.twig
View File

@ -73,8 +73,8 @@
{% block scripts %}
<script type="text/javascript" src="js/bootstrap-sortable.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript">
var year = {{ start.year }};
var month = {{ start.month }};

4
resources/views/reports/default/multi-year.twig
View File

@ -154,8 +154,8 @@
{% block scripts %}
<script type="text/javascript" src="js/bootstrap-sortable.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript">
var year = {{ start.year }};
var month = {{ start.month }};

5
resources/views/reports/default/year.twig
View File

@ -102,9 +102,8 @@
{% endblock %}
{% block scripts %}
<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>
<script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript">
var year = '{{ start.year }}';