mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
Cleanup for new chart library (foot).
This commit is contained in:
James Cole
parent
d1b97da309
commit
14aacf42b9
@ -6,228 +6,9 @@ $(function () {
|
|||||||
*/
|
*/
|
||||||
$.getJSON('chart/home/account').success(function (data) {
|
$.getJSON('chart/home/account').success(function (data) {
|
||||||
var options = {
|
var options = {
|
||||||
chart: {
|
|
||||||
renderTo: 'chart',
|
|
||||||
type: 'line'
|
|
||||||
},
|
|
||||||
|
|
||||||
series: data.series,
|
|
||||||
title: {
|
|
||||||
text: data.chart_title
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
formatter: function () {
|
|
||||||
return '$' + Highcharts.numberFormat(this.y, 0);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
text: data.subtitle,
|
|
||||||
useHTML: true
|
|
||||||
},
|
|
||||||
|
|
||||||
xAxis: {
|
|
||||||
floor: 0,
|
|
||||||
type: 'datetime',
|
|
||||||
dateTimeLabelFormats: {
|
|
||||||
day: '%e %b',
|
|
||||||
year: '%b'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 'Date'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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 />';
|
|
||||||
}
|
|
||||||
//console.log();
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
line: {
|
|
||||||
shadow: true
|
|
||||||
},
|
|
||||||
series: {
|
|
||||||
cursor: 'pointer',
|
|
||||||
negativeColor: '#FF0000',
|
|
||||||
threshold: 0,
|
|
||||||
lineWidth: 1,
|
|
||||||
marker: {
|
|
||||||
radius: 2
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
events: {
|
|
||||||
click: function (e) {
|
|
||||||
hs.htmlExpand(null, {
|
|
||||||
src: 'chart/home/info/' + this.series.name + '/' + Highcharts.dateFormat("%d/%m/%Y", this.x),
|
|
||||||
pageOrigin: {
|
|
||||||
x: e.pageX,
|
|
||||||
y: e.pageY
|
|
||||||
},
|
|
||||||
objectType: 'ajax',
|
|
||||||
headingText: '<a href="accounts/show/' + this.series.id + '">' + this.series.name + '</a>',
|
|
||||||
width: 250
|
|
||||||
}
|
|
||||||
)
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
credits: {
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
$('#chart').highcharts(options);
|
$.plot("#flot-chart-accounts", data, options);
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get chart data for categories chart:
|
|
||||||
*/
|
|
||||||
$.getJSON('chart/home/categories').success(function (data) {
|
|
||||||
$('#categories').highcharts({
|
|
||||||
chart: {
|
|
||||||
type: 'column'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 'Expenses for each categorie'
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
text: '<a href="categories/index">View more</a>',
|
|
||||||
useHTML: true
|
|
||||||
},
|
|
||||||
credits: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
labels: {
|
|
||||||
rotation: -45,
|
|
||||||
style: {
|
|
||||||
fontSize: '12px',
|
|
||||||
fontFamily: 'Verdana, sans-serif'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
min: 0,
|
|
||||||
title: {
|
|
||||||
text: 'Expense (€)'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
pointFormat: 'Total expense: <strong>€ {point.y:.2f}</strong>',
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
column: {
|
|
||||||
cursor: 'pointer'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'Population',
|
|
||||||
data: data,
|
|
||||||
|
|
||||||
events: {
|
|
||||||
click: function (e) {
|
|
||||||
alert('klik!');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get chart data for budget charts.
|
|
||||||
*/
|
|
||||||
$.getJSON('chart/home/budgets').success(function (data) {
|
|
||||||
$('#budgets').highcharts({
|
|
||||||
chart: {
|
|
||||||
type: 'bar'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: 'Budgets and spending'
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
text: '<a href="#">View more</a>',
|
|
||||||
useHTML: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
categories: data.labels,
|
|
||||||
title: {
|
|
||||||
text: null
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
style: {
|
|
||||||
fontSize: '11px',
|
|
||||||
fontFamily: 'Verdana, sans-serif'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
min: 0,
|
|
||||||
title: {
|
|
||||||
text: 'Amount (€)',
|
|
||||||
align: 'high'
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
overflow: 'justify'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
formatter: function () {
|
|
||||||
return false;
|
|
||||||
return '€ ' + Highcharts.numberFormat(this.y, 2);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
cursor: 'pointer',
|
|
||||||
events: {
|
|
||||||
click: function(e) {
|
|
||||||
alert('klik!!');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: true,
|
|
||||||
formatter: function () {
|
|
||||||
return '€ ' + Highcharts.numberFormat(this.y, 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
enabled:false,
|
|
||||||
layout: 'vertical',
|
|
||||||
align: 'right',
|
|
||||||
verticalAlign: 'top',
|
|
||||||
x: -40,
|
|
||||||
y: 100,
|
|
||||||
floating: true,
|
|
||||||
borderWidth: 1,
|
|
||||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
|
|
||||||
shadow: true
|
|
||||||
},
|
|
||||||
credits: {
|
|
||||||
enabled: false
|
|
||||||
},
|
|
||||||
series: data.series
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
8
app/assets/javascripts/flot/jquery.flot.min.js
vendored
Normal file
8
app/assets/javascripts/flot/jquery.flot.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -10,7 +10,5 @@
|
|||||||
//
|
//
|
||||||
// The available directives right now are require, require_directory, and require_tree
|
// The available directives right now are require, require_directory, and require_tree
|
||||||
//
|
//
|
||||||
//= require highslide/highslide-full.min
|
//= require flot/jquery.flot.min
|
||||||
//= require highslide/highslide.config
|
|
||||||
//= require_tree highcharts
|
|
||||||
//= require firefly/index
|
//= require firefly/index
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
@extends('layouts.default')
|
@extends('layouts.default')
|
||||||
@section('content')
|
@section('content')
|
||||||
@if($count > 0)
|
|
||||||
@include('partials.date_nav')
|
|
||||||
@endif
|
|
||||||
@if($count == 0)
|
@if($count == 0)
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||||
@ -33,8 +30,35 @@
|
|||||||
|
|
||||||
<!-- ACCOUNTS -->
|
<!-- ACCOUNTS -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
<div class="col-lg-8 col-md-12 col-sm-12">
|
||||||
<div id="chart"></div>
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<i class="fa fa-credit-card fa-fw"></i> Your accounts
|
||||||
|
<div class="pull-right">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||||
|
Actions
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu pull-right" role="menu">
|
||||||
|
<li><a href="#">Action</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Another action</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">Something else here</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div id="flot-chart-accounts" style="height:300px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -51,9 +75,15 @@
|
|||||||
|
|
||||||
@include('transactions.journals-small',['transactions' => $data[0],'account' => $data[1]])
|
@include('transactions.journals-small',['transactions' => $data[0],'account' => $data[1]])
|
||||||
<div class="btn-group btn-group-xs">
|
<div class="btn-group btn-group-xs">
|
||||||
<a class="btn btn-default" href="{{route('transactions.create','withdrawal')}}?account_id={{$data[1]->id}}"><span class="glyphicon glyphicon-arrow-left" title="Withdrawal"></span> Add withdrawal</a>
|
<a class="btn btn-default"
|
||||||
<a class="btn btn-default" href="{{route('transactions.create','deposit')}}?account_id={{$data[1]->id}}"><span class="glyphicon glyphicon-arrow-right" title="Deposit"></span> Add deposit</a>
|
href="{{route('transactions.create','withdrawal')}}?account_id={{$data[1]->id}}"><span
|
||||||
<a class="btn btn-default" href="{{route('transactions.create','transfer')}}?account_from_id={{$data[1]->id}}"><span class="glyphicon glyphicon-resize-full" title="Transfer"></span> Add transfer</a>
|
class="glyphicon glyphicon-arrow-left" title="Withdrawal"></span> Add withdrawal</a>
|
||||||
|
<a class="btn btn-default"
|
||||||
|
href="{{route('transactions.create','deposit')}}?account_id={{$data[1]->id}}"><span
|
||||||
|
class="glyphicon glyphicon-arrow-right" title="Deposit"></span> Add deposit</a>
|
||||||
|
<a class="btn btn-default"
|
||||||
|
href="{{route('transactions.create','transfer')}}?account_from_id={{$data[1]->id}}"><span
|
||||||
|
class="glyphicon glyphicon-resize-full" title="Transfer"></span> Add transfer</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user