kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-09-30 10:33:30 +00:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,18 +31,15 @@ class ChartJsBillChartGenerator implements BillChartGeneratorInterface
public function frontpage(string $paid, string $unpaid): array public function frontpage(string $paid, string $unpaid): array
{ {
$data = [ $data = [
'datasets' => [
[ [
'value' => round($unpaid, 2), 'data' => [round($unpaid, 2), round(bcmul($paid, '-1'), 2)],
'color' => 'rgba(53, 124, 165,0.7)', 'backgroundColor' => ['rgba(53, 124, 165,0.7)', 'rgba(0, 141, 76, 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'),
], ],
'labels' => [strval(trans('firefly.unpaid')), strval(trans('firefly.paid'))],
]; ];
return $data; return $data;

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

@@ -89,7 +89,7 @@ class ChartJsReportChartGenerator implements ReportChartGeneratorInterface
'labels' => [], 'labels' => [],
'datasets' => [ 'datasets' => [
[ [
'label' => trans('firefly.net-worth'), 'label' => trans('firefly.net_worth'),
'data' => [], '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 */ /* globals $, Chart, currencySymbol,mon_decimal_point ,accounting, mon_thousands_sep, frac_digits */
/* /*
@@ -20,7 +28,7 @@ var colourSet = [
[92, 107, 192], [92, 107, 192],
[240, 98, 146], [240, 98, 146],
[0, 121, 107], [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)"); 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: Set default options:
*/ */
var defaultAreaOptions = { var defaultAreaOptions = {
scaleShowGridLines: false, scales: {
pointDotRadius: 2, yAxes: [{
datasetStrokeWidth: 1, display: true,
pointHitDetectionRadius: 5, ticks: {
datasetFill: true, callback: function (tickValue, index, ticks) {
animation: false, "use strict";
scaleFontSize: 10, return accounting.formatMoney(tickValue);
responsive: false,
scaleLabel: " <%= accounting.formatMoney(value) %>", }
tooltipFillColor: "rgba(0,0,0,0.5)", }
multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>" }]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
}; };
var defaultPieOptions = { var defaultPieOptions = {
scaleShowGridLines: false, tooltips: {
pointDotRadius: 2, callbacks: {
datasetStrokeWidth: 1, label: function (tooltipItem, data) {
pointHitDetectionRadius: 5, "use strict";
datasetFill: false, return data.labels[tooltipItem.datasetIndex] + ': ' + accounting.formatMoney(tooltipItem.yLabel);
animation: false, }
scaleFontSize: 10, }
responsive: false, }
tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
}; };
var defaultLineOptions = { var defaultLineOptions = {
scaleShowGridLines: false, // scaleShowGridLines: false,
pointDotRadius: 2, // pointDotRadius: 2,
datasetStrokeWidth: 1, // datasetStrokeWidth: 1,
pointHitDetectionRadius: 5, // pointHitDetectionRadius: 5,
animation: false, // animation: false,
datasetFill: false, // datasetFill: false,
scaleFontSize: 10, // scaleFontSize: 10,
responsive: false, // responsive: false,
scaleLabel: " <%= accounting.formatMoney(value) %>", // scaleLabel: " <%= accounting.formatMoney(value) %>",
tooltipFillColor: "rgba(0,0,0,0.5)", // tooltipFillColor: "rgba(0,0,0,0.5)",
tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>", // tooltipTemplate: "<%if (label){%><%=label%>: <%}%> <%= accounting.formatMoney(value) %>",
multiTooltipTemplate: "<%=datasetLabel%>: <%= 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 = { var defaultColumnOptions = {
scaleShowGridLines: false, scales: {
pointDotRadius: 2, yAxes: [{
barStrokeWidth: 1, ticks: {
pointHitDetectionRadius: 5, callback: function (tickValue, index, ticks) {
datasetFill: false, "use strict";
scaleFontSize: 10, return accounting.formatMoney(tickValue);
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) %>" tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
return data.datasets[tooltipItem.datasetIndex].label + ': ' + accounting.formatMoney(tooltipItem.yLabel);
}
}
}
}; };
var defaultStackedColumnOptions = { var defaultStackedColumnOptions = {
scaleShowGridLines: false, stacked: true,
pointDotRadius: 2, scales: {
barStrokeWidth: 1, xAxes: [{
pointHitDetectionRadius: 5, stacked: true
datasetFill: false, }],
animation: false, yAxes: [{
scaleFontSize: 10, stacked: true,
responsive: false, ticks: {
scaleLabel: "<%= accounting.formatMoney(value) %>", callback: function (tickValue, index, ticks) {
tooltipFillColor: "rgba(0,0,0,0.5)", "use strict";
multiTooltipTemplate: "<%=datasetLabel%>: <%= accounting.formatMoney(value) %>" 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) { function lineChart(URL, container, options) {
"use strict"; "use strict";
$.getJSON(URL).done(function (data) { $.getJSON(URL).done(function (data) {
var ctx = document.getElementById(container).getContext("2d"); var ctx = document.getElementById(container).getContext("2d");
var newData = {}; var newData = {};
newData.datasets = []; newData.datasets = [];
@@ -144,15 +205,15 @@ function lineChart(URL, container, options) {
for (var i = 0; i < data.count; i++) { for (var i = 0; i < data.count; i++) {
newData.labels = data.labels; newData.labels = data.labels;
var dataset = data.datasets[i]; var dataset = data.datasets[i];
dataset.fillColor = fillColors[i]; dataset.backgroundColor = fillColors[i];
dataset.strokeColor = strokePointHighColors[i];
dataset.pointColor = strokePointHighColors[i];
dataset.pointStrokeColor = "#fff";
dataset.pointHighlightFill = "#fff";
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset); newData.datasets.push(dataset);
} }
new Chart(ctx).Line(newData, defaultLineOptions);
new Chart(ctx, {
type: 'line',
data: data,
options: defaultLineOptions
});
}).fail(function () { }).fail(function () {
$('#' + container).addClass('general-chart-error'); $('#' + container).addClass('general-chart-error');
@@ -178,15 +239,15 @@ function areaChart(URL, container, options) {
for (var i = 0; i < data.count; i++) { for (var i = 0; i < data.count; i++) {
newData.labels = data.labels; newData.labels = data.labels;
var dataset = data.datasets[i]; var dataset = data.datasets[i];
dataset.fillColor = fillColors[i]; dataset.backgroundColor = fillColors[i];
dataset.strokeColor = strokePointHighColors[i];
dataset.pointColor = strokePointHighColors[i];
dataset.pointStrokeColor = "#fff";
dataset.pointHighlightFill = "#fff";
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset); newData.datasets.push(dataset);
} }
new Chart(ctx).Line(newData, defaultAreaOptions);
new Chart(ctx, {
type: 'line',
data: newData,
options: defaultAreaOptions
});
}).fail(function () { }).fail(function () {
$('#' + container).addClass('general-chart-error'); $('#' + container).addClass('general-chart-error');
@@ -224,15 +285,15 @@ function columnChart(URL, container, options) {
for (var i = 0; i < data.count; i++) { for (var i = 0; i < data.count; i++) {
newData.labels = data.labels; newData.labels = data.labels;
var dataset = data.datasets[i]; var dataset = data.datasets[i];
dataset.fillColor = fillColors[i]; dataset.backgroundColor = fillColors[i];
dataset.strokeColor = strokePointHighColors[i];
dataset.pointColor = strokePointHighColors[i];
dataset.pointStrokeColor = "#fff";
dataset.pointHighlightFill = "#fff";
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset); 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 () { }).fail(function () {
$('#' + container).addClass('general-chart-error'); $('#' + container).addClass('general-chart-error');
@@ -270,15 +331,15 @@ function stackedColumnChart(URL, container, options) {
for (var i = 0; i < data.count; i++) { for (var i = 0; i < data.count; i++) {
newData.labels = data.labels; newData.labels = data.labels;
var dataset = data.datasets[i]; var dataset = data.datasets[i];
dataset.fillColor = fillColors[i]; dataset.backgroundColor = fillColors[i];
dataset.strokeColor = strokePointHighColors[i];
dataset.pointColor = strokePointHighColors[i];
dataset.pointStrokeColor = "#fff";
dataset.pointHighlightFill = "#fff";
dataset.pointHighlightStroke = strokePointHighColors[i];
newData.datasets.push(dataset); newData.datasets.push(dataset);
} }
new Chart(ctx).StackedBar(newData, defaultStackedColumnOptions); new Chart(ctx, {
type: 'bar',
data: data,
options: defaultStackedColumnOptions
});
}).fail(function () { }).fail(function () {
$('#' + container).addClass('general-chart-error'); $('#' + container).addClass('general-chart-error');
@@ -298,7 +359,11 @@ function pieChart(URL, container, options) {
$.getJSON(URL).done(function (data) { $.getJSON(URL).done(function (data) {
var ctx = document.getElementById(container).getContext("2d"); var ctx = document.getElementById(container).getContext("2d");
new Chart(ctx).Pie(data, defaultPieOptions); new Chart(ctx, {
type: 'pie',
data: data,
options: defaultPieOptions
});
}).fail(function () { }).fail(function () {
$('#' + container).addClass('general-chart-error'); $('#' + 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"> <script type="text/javascript">
var accountID = {{ account.id }}; var accountID = {{ account.id }};
</script> </script>
<script type="text/javascript" src="js/Chart.min.js"></script> <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/charts.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-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/lib/jquery.color-2.1.2.min.js" type="text/javascript"></script>
<script src="js/accounts/show.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"> <script type="text/javascript">
var billID = {{ bill.id }}; var billID = {{ bill.id }};
</script> </script>
<script type="text/javascript" src="js/Chart.min.js"></script> <script type="text/javascript" src="js/lib/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script> <script type="text/javascript" src="js/global/charts.js"></script>
<script type="text/javascript" src="js/bills.js"></script> <script type="text/javascript" src="js/bills.js"></script>
{% endblock %} {% endblock %}

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

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

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

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

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

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

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

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

10
resources/views/index.twig
View File

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

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

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

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

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

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

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

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

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