From 08b6643edafdaa0bc50ca68d03fd664025d24cbf Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sat, 1 Jul 2017 14:50:17 +0200 Subject: [PATCH] Use c3.js instead of chart.js. --- package.json | 1 + src/main.less | 6 + src/operations/balance-chart.component.js | 202 ++++++++++------------ src/operations/balance-chart.tmpl.html | 10 -- 4 files changed, 98 insertions(+), 121 deletions(-) delete mode 100644 src/operations/balance-chart.tmpl.html diff --git a/package.json b/package.json index cdb6474..cd248bc 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/main.less b/src/main.less index 84e7231..ee541c4 100644 --- a/src/main.less +++ b/src/main.less @@ -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; +} diff --git a/src/operations/balance-chart.component.js b/src/operations/balance-chart.component.js index e60782b..e522903 100644 --- a/src/operations/balance-chart.component.js +++ b/src/operations/balance-chart.component.js @@ -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: '
', 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; diff --git a/src/operations/balance-chart.tmpl.html b/src/operations/balance-chart.tmpl.html deleted file mode 100644 index 13aa9ee..0000000 --- a/src/operations/balance-chart.tmpl.html +++ /dev/null @@ -1,10 +0,0 @@ -
- - -