feat(instance): give access to the c3js API using the instance attrib…

…ute on the directive
GraFiddle · Mar 15, 2016 · 9ba150d · 9ba150d
1 parent 45f640e
commit 9ba150d
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -55,19 +55,22 @@ angular
       }
     };
 
+    // optional (direct access to c3js API http://c3js.org/reference.html#api)
+    $scope.instance = null;
+
   });
 ```
 
 Then you are ready to use the directive in your view:
 ```html
 <div ng-controller="Controller">
-  <angular-chart options="options"></angular-chart>
+  <angular-chart options="options" instance="instance"></angular-chart>
 </div>
 ```
 
 [learn how to upgrade from v0.2.x](#upgrade-02x-to-030)
 
-## API
+## OPTIONS
 
 The options object can contain four different keys:
 * `data` JSON based data you want to visualize
@@ -178,6 +181,16 @@ Pie-, Donut chart: _(Currently adding a selection in the Array will not add the
 }
 ```
 
+
+## INSTANCE
+
+The `instance` attribute of the directive will be filled with a promise on initialization. 
+The promise will be fulfilled the first time the chart is generated. 
+Every time a new chart instance is created the `instance` of the directive will be updated as well.
+
+You can call all [c3js API calls](http://c3js.org/reference.html#api) such as `flow()`, `resize()`, ... on the chart 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.

diff --git a/angular-chart.js b/angular-chart.js
@@ -16,7 +16,8 @@
     return {
       restrict: 'EA',
       scope: {
-        options: '='
+        options: '=',
+        instance: '=?'
       },
       controller: 'AngularChartController'
     };
@@ -467,15 +468,16 @@
   'use strict';
 
   /* istanbul ignore next */
-  AngularChartService.$inject = ['$timeout', 'AngularChartWatcher', 'AngularChartConverter', 'AngularChartState'];
+  AngularChartService.$inject = ['$timeout', '$q', 'AngularChartWatcher', 'AngularChartConverter', 'AngularChartState'];
   var angular = window.angular ? window.angular : 'undefined' !== typeof require ? require('angular') : undefined;
   /* istanbul ignore next */
   var c3 = window.c3 ? window.c3 : 'undefined' !== typeof require ? require('c3') : undefined;
 
-  function AngularChartService($timeout, AngularChartWatcher, AngularChartConverter, AngularChartState) {
+  function AngularChartService($timeout, $q, AngularChartWatcher, AngularChartConverter, AngularChartState) {
 
     var ChartService = function(baseConfig, scope) {
-      this.chart = null;
+      this.deferredChart = $q.defer();
+      this.chart = this.deferredChart.promise;
       this.baseConfiguration = {};
       this.configuration = {};
       this.scopeReference = null;
@@ -535,8 +537,13 @@
       this.convertOptions();
       this.applyChartOptions();
       this.synchronizeState();
-      this.generateChart();
-      this.stateCallback();
+
+      // call long running generation async
+      var chartService = this;
+      $timeout(function() {
+        chartService.generateChart(chartService);
+        chartService.stateCallback();
+      });
     };
 
     /**
@@ -588,11 +595,15 @@
     /**
      * Render the chart.
      */
-    ChartService.prototype.generateChart = function() {
+    ChartService.prototype.generateChart = function(chartService) {
       // TODO add own onresize listener?
       // TODO regenerate chart only one or two times per second
       // TODO evaluate if it makes sense to destroy the chart first
-      this.chart = c3.generate(this.configuration);
+
+      var chart = c3.generate(chartService.configuration);
+      chartService.deferredChart.resolve(chart);
+      chartService.scopeReference.instance = chart;
+      chartService.chart = chart;
     };
 
     /**
@@ -607,7 +618,9 @@
      * Destroy the chart if one ist present.
      */
     ChartService.prototype.destroyChart = function() {
-      this.chart.destroy();
+      if (this.chart.destroy) {
+        this.chart.destroy();
+      }
     };
 
     ChartService.prototype.merge = angular.merge || deepMerge;
@@ -851,7 +864,7 @@
       unwrapPromise();
       addIdentifier();
       addInlineStyle();
-      chartService = AngularChartService.getInstance(configuration, $scope);
+      getInstance();
       registerDestroyListener();
     }
 
@@ -880,6 +893,11 @@
       angular.element($element).css('display', 'block');
     }
 
+    function getInstance() {
+      chartService = AngularChartService.getInstance(configuration, $scope);
+      $scope.instance = chartService.chart;
+    }
+
     /**
      * Remove all references when directive is destroyed
      */

diff --git a/angular-chart.min.js b/angular-chart.min.js
diff --git a/debug/debug-controller.js b/debug/debug-controller.js
@@ -131,6 +131,10 @@
       console.log('new options', vm.timestampOptions);
     };
 
+    vm.printInstance = function() {
+      console.log('instance', vm.instance);
+    };
+
   }
 
   angular

diff --git a/debug/index.html b/debug/index.html
@@ -26,12 +26,13 @@
   </head>
   <body ng-app="AngularChartDebug" ng-controller="DebugController as debug">
 
-  <angular-chart options="debug.climateOptions"></angular-chart>
+  <angular-chart options="debug.climateOptions" ></angular-chart>
     <button ng-click="debug.updateClimateDimension()">Change Dimension</button>
     Zoom: <input type="number" ng-model="debug.climateOptions.state.range[0]"> <input type="number" ng-model="debug.climateOptions.state.range[1]">
 
 
-    <angular-chart options="debug.timestampOptions"></angular-chart>
+  <angular-chart options="debug.timestampOptions" instance="debug.instance"></angular-chart>
+    <button ng-click="debug.printInstance()">Print Instance</button>
     <button ng-click="debug.updateTimestampDimension()">Change Dimension</button>
     Zoom: {{debug.timestampOptions.state.range}}
 

diff --git a/karma.conf.js b/karma.conf.js
@@ -52,6 +52,7 @@ module.exports = function (config) {
 
     coverageReporter: {
       type: 'lcov', // lcov or lcovonly are required for generating lcov.info files
+      subdir: '.',
       dir: 'coverage/'
     }
 

diff --git a/src/js/controller.js b/src/js/controller.js
@@ -17,7 +17,7 @@
       unwrapPromise();
       addIdentifier();
       addInlineStyle();
-      chartService = AngularChartService.getInstance(configuration, $scope);
+      getInstance();
       registerDestroyListener();
     }
 
@@ -46,6 +46,11 @@
       angular.element($element).css('display', 'block');
     }
 
+    function getInstance() {
+      chartService = AngularChartService.getInstance(configuration, $scope);
+      $scope.instance = chartService.chart;
+    }
+
     /**
      * Remove all references when directive is destroyed
      */

diff --git a/src/js/directive.js b/src/js/directive.js
@@ -16,7 +16,8 @@
     return {
       restrict: 'EA',
       scope: {
-        options: '='
+        options: '=',
+        instance: '=?'
       },
       controller: 'AngularChartController'
     };

diff --git a/src/js/service.js b/src/js/service.js
@@ -7,10 +7,11 @@
   /* istanbul ignore next */
   var c3 = window.c3 ? window.c3 : 'undefined' !== typeof require ? require('c3') : undefined;
 
-  function AngularChartService($timeout, AngularChartWatcher, AngularChartConverter, AngularChartState) {
+  function AngularChartService($timeout, $q, AngularChartWatcher, AngularChartConverter, AngularChartState) {
 
     var ChartService = function(baseConfig, scope) {
-      this.chart = null;
+      this.deferredChart = $q.defer();
+      this.chart = this.deferredChart.promise;
       this.baseConfiguration = {};
       this.configuration = {};
       this.scopeReference = null;
@@ -70,8 +71,13 @@
       this.convertOptions();
       this.applyChartOptions();
       this.synchronizeState();
-      this.generateChart();
-      this.stateCallback();
+
+      // call long running generation async
+      var chartService = this;
+      $timeout(function() {
+        chartService.generateChart(chartService);
+        chartService.stateCallback();
+      });
     };
 
     /**
@@ -123,11 +129,15 @@
     /**
      * Render the chart.
      */
-    ChartService.prototype.generateChart = function() {
+    ChartService.prototype.generateChart = function(chartService) {
       // TODO add own onresize listener?
       // TODO regenerate chart only one or two times per second
       // TODO evaluate if it makes sense to destroy the chart first
-      this.chart = c3.generate(this.configuration);
+
+      var chart = c3.generate(chartService.configuration);
+      chartService.deferredChart.resolve(chart);
+      chartService.scopeReference.instance = chart;
+      chartService.chart = chart;
     };
 
     /**
@@ -142,7 +152,9 @@
      * Destroy the chart if one ist present.
      */
     ChartService.prototype.destroyChart = function() {
-      this.chart.destroy();
+      if (this.chart.destroy) {
+        this.chart.destroy();
+      }
     };
 
     ChartService.prototype.merge = angular.merge || deepMerge;

diff --git a/test/controller_spec.js b/test/controller_spec.js
@@ -59,7 +59,7 @@ describe('Controller: AngularChartController', function() {
   });
 
   // destroy
-  it('should instantiate DirectiveCtrl.', function() {
+  it('should destroy DirectiveCtrl.', function() {
     // setup
     $scope.options = {};
     var controller = setUpController();