mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
Cleaned up the budget charts.
This commit is contained in:
James Cole
14
app/assets/javascripts/budgets-default.js
Normal file
14
app/assets/javascripts/budgets-default.js
Normal 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
14
app/assets/javascripts/budgets-limit.js
Normal 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
14
app/assets/javascripts/budgets-nolimit.js
Normal 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
14
app/assets/javascripts/budgets-session.js
Normal 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
109
app/assets/javascripts/firefly/budgets/default.js
Normal 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
103
app/assets/javascripts/firefly/budgets/limit.js
Normal 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);
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
@@ -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
93
app/assets/javascripts/firefly/budgets/session.js
Normal 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);
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user