feat(event): emit 'angular-chart-rendered' event when the chart is generated

Author: maxklenk

README.md

@@ -191,10 +191,23 @@ Every time a new chart instance is created the `instance` of the directive will
 You can call all [c3js API calls](http://c3js.org/reference.html#api) such as `flow()`, `resize()`, ... on the chart instance.
 
 
+## Events
+
+The `angular-chart-rendered` event is emitted every time a chart is generated or regenerated. It gives access to the `options` the chart is generated with and to the newly created chart instance.
+
+```javascript
+$scope.$on('angular-chart-rendered', function(event, options, instance) {
+  console.log(options, instance);
+});
+```
+
+
 ## custom Style
+
 The whole chart is based on SVG, which allows you to stlye most parts using CSS.
 The documentation of c3.js provides a few [examples](http://c3js.org/examples.html#style) on how to style your chart.
 
+
 ## Upgrade 0.2.x to 0.3.0
 
 * `<angular-chart></angular-chart>` should be used instead of `<angularchart></angularchart>`

angular-chart.js

@@ -601,9 +601,19 @@
       // TODO evaluate if it makes sense to destroy the chart first
 
       var chart = c3.generate(chartService.configuration);
+
       chartService.deferredChart.resolve(chart);
       chartService.scopeReference.instance = chart;
       chartService.chart = chart;
+
+      /*
+       Custom event: 'angular-chart-rendered'
+       - new chart instance generated
+       - { configuration, chart } - data format
+       - configuration - the options used to generate the chart
+       - chart - the newly created chart instance
+       */
+      this.scopeReference.$emit('angular-chart-rendered', chartService.configuration, chartService.chart);
     };
 
     /**

angular-chart.min.js

@@ -2,7 +2,7 @@
 
   'use strict';
 
-  function DebugController($q, $timeout, DebugData) {
+  function DebugController($scope, $q, $timeout, DebugData) {
     var vm = this;
 
     /*
@@ -135,6 +135,11 @@
       console.log('instance', vm.instance);
     };
 
+    // inform about chart rendering
+    $scope.$on('angular-chart-rendered', function(event, conf, instance) {
+      console.log(conf, instance);
+    });
+
   }
 
   angular

debug/debug-controller.js

@@ -135,9 +135,19 @@
       // TODO evaluate if it makes sense to destroy the chart first
 
       var chart = c3.generate(chartService.configuration);
+
       chartService.deferredChart.resolve(chart);
       chartService.scopeReference.instance = chart;
       chartService.chart = chart;
+
+      /*
+       Custom event: 'angular-chart-rendered'
+       - new chart instance generated
+       - { configuration, chart } - data format
+       - configuration - the options used to generate the chart
+       - chart - the newly created chart instance
+       */
+      this.scopeReference.$emit('angular-chart-rendered', chartService.configuration, chartService.chart);
     };
 
     /**

src/js/service.js

@@ -44,6 +44,30 @@ describe('Service: AngularChartService', function () {
     $timeout.flush();
   });
 
+  // init()
+  it('emit event on initialization.', function () {
+    // wait for events
+    var eventEmitted = false;
+    var eventConfiguration = {};
+    var eventChartInstance = {};
+    $scope.$on('angular-chart-rendered', function(conf, instance) {
+      eventEmitted = true;
+      eventConfiguration = conf;
+      eventChartInstance = instance;
+    });
+
+    // setup
+    var configuration = angular.copy(baseConfiguration);
+    AngularChartService.getInstance(configuration, $scope);
+    $scope.$apply();
+    $timeout.flush();
+
+    // check result
+    expect(eventEmitted).toBe(true);
+    expect(eventConfiguration).toBeDefined();
+    expect(eventChartInstance).toBeDefined();
+  });
+
 
   // destroyChart()
   it('destroy a created chart.', function () {