alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use c3.js instead of chart.js.

Browse Source
This commit is contained in:
Alexis Lahouze 2017-07-01 14:50:17 +02:00
parent ca64dcd4e2
commit 08b6643eda
4 changed files with 98 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -47,6 +47,7 @@
"bootbox": "^4.4.0",
"bootstrap": "^3.3.7",
"bootstrap-additions": "^0.3.1",
"c3": "^0.4.13",
"chartjs-plugin-annotation": "^0.5.5",
"font-awesome": "^4.7.0",
"highcharts-ng": "^1.1",

6
src/main.less
View File

@ -2,6 +2,8 @@
@import '~angular-ui-notification/src/angular-ui-notification';
@import (inline) '~c3/c3.css';
@import (inline) '~bootstrap-additions/dist/bootstrap-additions.css';
.italic {
@ -11,3 +13,7 @@
.stroke {
text-decoration: line-through;
}
.c3-ygrid-line.zeroline line {
stroke: orange;
}

202
src/operations/balance-chart.component.js
View File

@ -18,131 +18,121 @@
/* jshint node: true */
'use strict';
var moment = require('moment');
var moment = require('moment'),
c3 = require('c3');
var angular = require('angular');
var balanceChartTmpl = require('./balance-chart.tmpl.html');
var ngResource = require('angular-resource');
var ngResource = require('angular-resource'),
ngChartJs = require('angular-chart.js'),
chartJs = require('chart.js'),
chartJsAnnotation = require('chartjs-plugin-annotation');
chartJs.plugins.register([
'annotation'
]);
var balanceChartModule = angular.module('balanceChartModule', [
ngResource,
ngChartJs
ngResource
])
.component('balanceChart', {
templateUrl: balanceChartTmpl,
template: '<div></div>',
bindings: {
minDate: '<',
maxDate: '<'
},
controller: function($routeParams, $log, Balances) {
controller: function($routeParams, Balances, $element, $log) {
var vm = this;
vm.options = {
scales: {
yAxes: [{
id: 'y-axis-left',
type: 'linear',
display: true,
position: 'left'
}, {
id: 'y-axis-right',
type: 'linear',
display: true,
position: 'right',
stacked: false
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
},
stacked: true,
ticks: {
autoSkippadding: 10
}
}]
},
annotation: {
annotations: [{
type: 'line',
scaleID: 'y-axis-left',
value: -200,
borderColor: '#FF0000',
borderWidth: 4
}]
}
};
vm.colors = [
'#4e74ff', '#ff6363', '#268c26'
];
vm.datasetOverride = [{
label: "Balance",
borderWidth: 3,
type: 'line',
yAxisID: 'y-axis-left'
}, {
label: "Expenses",
borderWidth: 3,
barThickness: 3,
type: 'bar',
yAxisID: 'y-axis-right'
}, {
label: "Revenues",
type: 'bar',
yAxisID: 'y-axis-right'
}];
vm.data = {
data: [[], [], []],
labels: []
};
vm.loadData = function() {
$log.log(vm.minDate, vm.maxDate);
vm.data = Balances.query({
Balances.query({
id: $routeParams.accountId,
begin: vm.minDate.format('YYYY-MM-DD'),
end: vm.maxDate.format('YYYY-MM-DD')
}).$promise.then(function(results) {
var labels = [],
balances = [],
expenses = [],
revenues = [];
//begin: vm.minDate.format('YYYY-MM-DD'),
//end: vm.maxDate.format('YYYY-MM-DD')
}, function(results) {
var headers = [['x', 'balances', 'expenses', 'revenues']];
angular.forEach(results, function(result) {
labels.push(result.operation_date);
balances.push(result.balance);
expenses.push(result.expenses);
revenues.push(result.revenues);
var rows = results.map(function(result) {
return [
result.operation_date,
result.balance,
result.revenues,
result.expenses
];
});
vm.data = {
data: [
balances,
expenses,
revenues
],
labels: labels
};
return vm.data;
vm.chart.load({
rows: headers.concat(rows)
});
});
};
vm.$onInit = function() {
$log.log($element);
vm.chart = c3.generate({
//bindto: $element[0],
bindto: $element[0].children[0],
size: {
height: 500,
// witdh: 800,
},
data: {
x: 'x',
rows: [],
axes: {
expenses: 'y2',
revenues: 'y2'
},
type: 'bar',
types: {
balances: 'area'
},
groups: [
['expenses', 'revenues']
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d',
rotate: 50,
}
},
y: {
label: {
text: 'Amount',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Amount',
position: 'outer-middle'
}
}
},
grid: {
x: {
show: true,
},
y: {
show: true,
lines: [
{ value: 0, axis: 'y2' },
{ value: 0, axis: 'y', class: 'zeroline'}
]
}
},
tooltip: {
format: {
value: function(value, ratio, id, index) {
return value + '€';
}
}
},
subchart: {
show: true
}
});
vm.loadData();
};
@ -156,16 +146,6 @@ var balanceChartModule = angular.module('balanceChartModule', [
id: '@id'
}
);
})
.config(function (ChartJsProvider) {
ChartJsProvider.setOptions({
colors : [
'#803690', '#00ADF9', '#DCDCDC',
'#46BFBD', '#FDB45C', '#949FB1', '#4D5360'
],
responsive: true
});
});
module.exports = balanceChartModule;

10
src/operations/balance-chart.tmpl.html
View File

@ -1,10 +0,0 @@
<div>
<canvas id="balances-chart" class="chart-bar"
height='80'
chart-data="$ctrl.data.data"
chart-labels="$ctrl.data.labels"
chart-colors="$ctrl.colors"
chart-options="$ctrl.options"
chart-dataset-override="$ctrl.datasetOverride">
</canvas>
</div>