diff --git a/bower.json b/bower.json index ff580e8..b0e6e0d 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angular-c3-simple", "description": "Simple C3.js wrapper for AngularJS.", - "main": "dist/angular_c3_simple.min.js", + "main": "dist/angular_c3_simple.js", "keywords": ["angularjs", "c3", "chart"], "homepage": "https://github.com/wasilak/angular-c3-simple", "repository": { diff --git a/dist/angular_c3_simple.js b/dist/angular_c3_simple.js new file mode 100644 index 0000000..8b582a8 --- /dev/null +++ b/dist/angular_c3_simple.js @@ -0,0 +1,63 @@ +// using C3 (be sure to include it before, same with D3, which C3 requires) +;(function(c3) { + 'use strict'; + + // module definition, this has to be included in your app + angular.module('angular-c3-simple', []) + + // service definition, if you want to use itm you have to include it in controller + // this service allows you to access every chart by it's ID and thanks to this, + // you can perform any API call available in C3.js http://c3js.org/examples.html#api + .service('c3SimpleService', function() { + return {}; + }) + + // directive definition, if you want to use itm you have to include it in controller + .directive('c3Simple', ['c3SimpleService', function(c3SimpleService) { + return { + // this directive can be used as an Element or an Attribute + restrict: 'EA', + scope: { + // setting config attribute to isolated scope + // config object is 1:1 configuration C3.js object, for avaiable options see: http://c3js.org/examples.html + config: '=' + }, + template: '
', + replace: true, + controller: function($scope, $element) { + // Wait until id is set before binding chart to this id + $scope.$watch($element, function() { + + if ('' === $element[0].id) { + return; + } + + // binding chart to element with provided ID + $scope.config.bindto = '#' + $element[0].id; + + //Generating the chart on every data change + $scope.$watch('config', function(newConfig, oldConfig) { + + // adding (or overwriting) chart to service c3SimpleService + // we are regenerating chart on each change - this might seem slow and unefficient + // but works pretty well and allows us to have more controll + c3SimpleService[$scope.config.bindto] = c3.generate(newConfig); + + // if there is no size specified, we are assuming, that chart will have width + // of its container (proportional of course) - great for responsive design + if (!newConfig.size) { + c3SimpleService[$scope.config.bindto].resize(); + } + + // only updating data (enables i.e. animations) + $scope.$watch('config.data', function(newData, oldData) { + if ($scope.config.bindto) { + c3SimpleService[$scope.config.bindto].load(newData); + } + }, true); + }, true); + }); + } + }; + }]); +}(c3)); diff --git a/example/index.html b/example/index.html index 7546e0b..1a58dbe 100644 --- a/example/index.html +++ b/example/index.html @@ -30,7 +30,7 @@

transform data2

- + diff --git a/gulpfile.js b/gulpfile.js index 5cffc88..a598d7c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -10,8 +10,9 @@ var stylish = require('jshint-stylish'); var jsFile = './src/angular_c3_simple.js'; var jsFileMin = 'angular_c3_simple.min.js'; -gulp.task('default', function () { +gulp.task('default', ['lint:js'], function () { return gulp.src(jsFile) + .pipe(gulp.dest('./dist')) .pipe(uglify({ mangle: false }))