kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-09-04 03:43:07 +00:00
Code Issues Projects Releases Wiki Activity

Cleaned up the budget charts.

Browse Source
This commit is contained in:
James Cole
2014-08-23 09:39:04 +02:00
parent 871509d4d3
commit a6b89879c5
11 changed files with 412 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/budgets-default.js Normal file
View File

@@ -0,0 +1,14 @@
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it
// gets included (e.g. say you have require_tree . then the code will appear after all the directories
// but before any files alphabetically greater than 'application.js'
//
// The available directives right now are require, require_directory, and require_tree
//
//= require_tree highcharts
//= require firefly/budgets/default

14
app/assets/javascripts/budgets-limit.js Normal file
View File

@@ -0,0 +1,14 @@
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it
// gets included (e.g. say you have require_tree . then the code will appear after all the directories
// but before any files alphabetically greater than 'application.js'
//
// The available directives right now are require, require_directory, and require_tree
//
//= require_tree highcharts
//= require firefly/budgets/limit

14
app/assets/javascripts/budgets-nolimit.js Normal file
View File

@@ -0,0 +1,14 @@
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it
// gets included (e.g. say you have require_tree . then the code will appear after all the directories
// but before any files alphabetically greater than 'application.js'
//
// The available directives right now are require, require_directory, and require_tree
//
//= require_tree highcharts
//= require firefly/budgets/nolimit

14
app/assets/javascripts/budgets-session.js Normal file
View File

@@ -0,0 +1,14 @@
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it
// gets included (e.g. say you have require_tree . then the code will appear after all the directories
// but before any files alphabetically greater than 'application.js'
//
// The available directives right now are require, require_directory, and require_tree
//
//= require_tree highcharts
//= require firefly/budgets/session

109
app/assets/javascripts/firefly/budgets/default.js Normal file
View File

@@ -0,0 +1,109 @@
$(function () {
if ($('#chart').length == 1) {
var budgetId = $('#instr').data('budget');
var URL = 'chart/budget/' + budgetId + '/default';
// go do something with this URL.
$.getJSON(URL).success(function (data) {
var options = {
chart: {
renderTo: 'chart',
},
series: data.series,
title: {
text: data.chart_title
},
tooltip: {
shared: true,
crosshairs: false,
formatter: function () {
var str = '<span style="font-size:80%;">' + this.points[0].key + '</span><br />';
for (x in this.points) {
var point = this.points[x];
var colour = point.point.pointAttr[''].fill;
if (x == 0) {
str += '<span style="color:' + colour + '">' + point.series.name + '</span>: € ' + Highcharts.numberFormat(point.y, 2) + '<br />';
}
if (x == 1) {
str += '<span style="color:' + colour + '">' + point.series.name + '</span>: ' + Highcharts.numberFormat(point.y, 1) + '%<br />';
}
}
return str;
}
},
yAxis: [
{ // Primary yAxis
title: {
'text': 'Amount (EUR)',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '€ {value}',
style: {
color: Highcharts.getOptions().colors[0]
}
}
},
{ // Secondary yAxis
title: {
'text': 'Percentage',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}%',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}
],
subtitle: {
text: data.subtitle,
useHTML: true
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
}
},
plotOptions: {
line: {
shadow: true
},
series: {
cursor: 'pointer',
negativeColor: '#FF0000',
threshold: 0,
lineWidth: 1,
marker: {
radius: 2
},
}
},
credits: {
enabled: false
}
};
$('#chart').highcharts(options);
});
}
});

103
app/assets/javascripts/firefly/budgets/limit.js Normal file
View File

@@ -0,0 +1,103 @@
$(function () {
if ($('#chart').length == 1) {
var envelopeId = $('#instr').data('envelope');
var URL = 'chart/budget/envelope/' + envelopeId;
// go do something with this URL.
$.getJSON(URL).success(function (data) {
var options = {
chart: {
renderTo: 'chart',
},
series: data.series,
title: {
text: data.chart_title
},
yAxis: [
{ // Primary yAxis
title: {
text: 'Expense (€)',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '€ {value}',
style: {
color: Highcharts.getOptions().colors[0]
}
}
},
{ // Secondary yAxis
title: {
text: 'Left (€)',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '€ {value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}
],
subtitle: {
text: data.subtitle,
useHTML: true
},
tooltip: {
shared: true,
crosshairs: false,
formatter: function () {
var str = '<span style="font-size:80%;">' + Highcharts.dateFormat("%A, %e %B", this.x) + '</span><br />';
for (x in this.points) {
var point = this.points[x];
var colour = point.point.pointAttr[''].fill;
str += '<span style="color:' + colour + '">' + point.series.name + '</span>: € ' + Highcharts.numberFormat(point.y, 2) + '<br />';
}
return str;
}
},
xAxis: {
floor: 0,
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
year: '%b'
},
title: {
text: 'Date'
}
},
plotOptions: {
line: {
shadow: true
},
series: {
cursor: 'pointer',
negativeColor: '#FF0000',
threshold: 0,
lineWidth: 1,
marker: {
radius: 2
},
}
},
credits: {
enabled: false
}
};
$('#chart').highcharts(options);
});
}
});

44
app/assets/javascripts/firefly/budgets.js → app/assets/javascripts/firefly/budgets/nolimit.js
View File

@@ -3,22 +3,21 @@ $(function () {
chartType = $('#instr').data('type');
if(chartType == 'envelope') {
if (chartType == 'envelope') {
var envelopeId = $('#instr').data('envelope');
var URL = 'chart/budget/envelope/' + envelopeId;
}
if(chartType == 'no_envelope') {
if (chartType == 'no_envelope') {
var budgetId = $('#instr').data('budget');
var URL = 'chart/budget/'+budgetId+'/no_envelope';
}
if(chartType == 'session') {
var budgetId = $('#instr').data('budget');
var URL = 'chart/budget/'+budgetId+'/session';
var URL = 'chart/budget/' + budgetId + '/no_envelope';
}
if(chartType == 'default') {
if (chartType == 'session') {
var budgetId = $('#instr').data('budget');
var URL = 'chart/budget/'+budgetId+'/default';
var URL = 'chart/budget/' + budgetId + '/session';
}
if (chartType == 'default') {
var budgetId = $('#instr').data('budget');
var URL = 'chart/budget/' + budgetId + '/default';
}
// go do something with this URL.
@@ -32,25 +31,31 @@ $(function () {
title: {
text: data.chart_title
},
yAxis: [{ // Primary yAxis
yAxis: { // Primary yAxis
title: {
text: 'Amount (€)',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '€ {value}',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
},
subtitle: {
text: data.subtitle,
useHTML: true
},
tooltip: {
crosshairs: false,
formatter: function () {
var str = Highcharts.dateFormat("%A, %e %B", this.x) + ': € ' + Highcharts.numberFormat(this.y, 2);
return str;
}
},
xAxis: {
floor: 0,
@@ -84,7 +89,6 @@ $(function () {
$('#chart').highcharts(options);
});
}

93
app/assets/javascripts/firefly/budgets/session.js Normal file
View File

@@ -0,0 +1,93 @@
$(function () {
if ($('#chart').length == 1) {
var budgetId = $('#instr').data('budget');
var URL = 'chart/budget/' + budgetId + '/session';
// go do something with this URL.
$.getJSON(URL).success(function (data) {
var options = {
chart: {
renderTo: 'chart',
},
series: data.series,
title: {
text: data.chart_title
},
yAxis: [
{ // Primary yAxis
title: {
text: 'Spent (€)',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '€ {value}',
style: {
color: Highcharts.getOptions().colors[0]
}
}
},
{ // Secondary yAxis
title: {
text: 'Left in envelope (€)',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '€ {value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}
],
tooltip: {
valuePrefix: '€ '
},
subtitle: {
text: data.subtitle,
useHTML: true
},
xAxis: {
floor: 0,
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b',
year: '%b'
},
title: {
text: 'Date'
}
},
plotOptions: {
line: {
shadow: true
},
series: {
cursor: 'pointer',
negativeColor: '#FF0000',
threshold: 0,
lineWidth: 1,
marker: {
radius: 2
},
}
},
credits: {
enabled: false
}
};
$('#chart').highcharts(options);
});
}
});

25
app/controllers/ChartController.php
View File

@@ -52,15 +52,16 @@ class ChartController extends BaseController
)->sum('amount');
$pct = round(($spentInRep / $limit->amount) * 100,2);
$expense[] = [$rep->startdate->timestamp * 1000, floatval($spentInRep)];
$left[] = [$rep->startdate->timestamp * 1000, $pct];
$pct = round(($spentInRep / $limit->amount) * 100, 2);
$name = $rep->periodShow();
$expense[] = [$name, floatval($spentInRep)];
$left[] = [$name, $pct];
}
}
$return = [
'chart_title' => 'Overview for budget ' . $budget->name,
'subtitle' => 'Between something something',
'subtitle' => 'All envelopes',
'series' => [
[
'type' => 'column',
@@ -70,12 +71,13 @@ class ChartController extends BaseController
[
'type' => 'line',
'yAxis' => 1,
'name' => 'Spent pct for envelope',
'name' => 'Spent percentage for envelope',
'data' => $left
]
]
];
return Response::json($return);
}
@@ -108,7 +110,8 @@ class ChartController extends BaseController
$return = [
'chart_title' => 'Overview for budget ' . $budget->name,
'subtitle' => 'Between ' . $rep->startdate->format('d M Y') . ' and ' . $rep->startdate->format('d M Y'),
'subtitle' =>
'Between ' . $rep->startdate->format('M jS, Y') . ' and ' . $rep->enddate->format('M jS, Y'),
'series' => [
[
'type' => 'column',
@@ -224,7 +227,7 @@ class ChartController extends BaseController
$start = clone Session::get('start');
$repetitionSeries[] = [
'type' => 'column',
'name' => 'Something something expenses',
'name' => 'Expenses per day',
'data' => $expense
];
@@ -259,8 +262,7 @@ class ChartController extends BaseController
'type' => 'spline',
'id' => 'rep-' . $repetition->id,
'yAxis' => 1,
'name' => 'Serie ' . $repetition->startdate->format('Y-m-d') . ' to ' .
$repetition->enddate->format('Y-m-d') . '.',
'name' => 'Envelope in ' . $repetition->periodShow(),
'data' => []
];
$current = clone $repetition->startdate;
@@ -299,7 +301,10 @@ class ChartController extends BaseController
$return = [
'chart_title' => 'Overview for budget ' . $budget->name,
'subtitle' => 'Between Bla bla bla',
'subtitle' =>
'Between ' . Session::get('start')->format('M jS, Y') . ' and ' . Session::get('end')->format(
'M jS, Y'
),
'series' => $repetitionSeries
];

2
app/lib/Firefly/Storage/Budget/EloquentBudgetRepository.php
View File

@@ -42,7 +42,7 @@ class EloquentBudgetRepository implements BudgetRepositoryInterface
{
$set = \Auth::user()->budgets()->with(
['limits' => function ($q) {
$q->orderBy('limits.startdate', 'ASC');
$q->orderBy('limits.startdate', 'DESC');
}, 'limits.limitrepetitions' => function ($q) {
$q->orderBy('limit_repetitions.startdate', 'ASC');
}]

23
app/views/budgets/show.blade.php
View File

@@ -45,25 +45,15 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="chart" style="height:300px;"></div>
<div id="chart"></div>
@if(isset($filters[0]) && is_object($filters[0]) && get_class($filters[0]) == 'Limit')
<div id="instr" data-type="envelope" data-envelope="{{$repetitions[0]['limitrepetition']->id}}"></div>
@elseif(isset($filters[0]) && $filters[0] == 'no_envelope')
<div id="instr" data-type="no_envelope" data-budget="{{$budget->id}}"></div>
<p class="small text-center">
A chart showing the date-range of all the not-enveloped stuff, and their amount.
</p>
@elseif($useSessionDates == true)
<div id="instr" data-type="session" data-budget="{{$budget->id}}"></div>
<p class="small text-center">
Date range of session, show chart with all expenses in bars
find all limit repetitions, add them as individual lines and make them go down.
same as the first but bigger range (potentially).
</p>
@else
<div id="instr" data-type="default" data-budget="{{$budget->id}}"></div>
<p class="small text-center">(For each visible repetition, a sum of the expense as a bar. A line shows
the percentage spent for each rep.)</p>
@endif
@@ -110,5 +100,14 @@
@stop
@section('scripts')
<?php echo javascript_include_tag('budgets'); ?>
@if(isset($filters[0]) && is_object($filters[0]) && get_class($filters[0]) == 'Limit')
<?php echo javascript_include_tag('budgets-limit'); ?>
@elseif(isset($filters[0]) && $filters[0] == 'no_envelope')
<?php echo javascript_include_tag('budgets-nolimit'); ?>
@elseif($useSessionDates == true)
<?php echo javascript_include_tag('budgets-session'); ?>
@else
<?php echo javascript_include_tag('budgets-default'); ?>
@endif
@stop