fixed bugs with updating data, updated api

isabella232 · Jun 5, 2014 · ebad5cd · ebad5cd
1 parent ac9df9b
commit ebad5cd
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 38 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "angular-nvd3",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "An AngularJS directive for NVD3.js reusable charting library (based on D3.js)",
     "main": ["dist/angular-nvd3.js", "dist/angular-nvd3.min.js"],
     "license": "MIT",

diff --git a/dist/angular-nvd3.js b/dist/angular-nvd3.js
@@ -1,5 +1,5 @@
 /**************************************************************************
-* AngularJS-nvD3, v0.0.5; MIT License; 06/04/2014 13:33
+* AngularJS-nvD3, v0.0.6; MIT License; 06/06/2014 04:29
 * http://krispo.github.io/angular-nvd3
 **************************************************************************/
 (function(){
@@ -19,15 +19,20 @@
                     config: '=?'    //global directive configuration, [optional]
                 },
                 link: function(scope, element, attrs){
-                    var chart, svg,
-                        defaultConfig = { extended: false, visible: true, disabled: false };
+                    var chart,
+                        defaultConfig = { extended: false, visible: true, disabled: false, autorefresh: true };
 
                     //basic directive configuration
                     scope._config = angular.extend(defaultConfig, scope.config);
 
                     //directive global api
                     scope.api = {
-                        // Update chart after options have changed
+                        // Fully refresh directive
+                        refresh: function(){
+                            scope.api.updateWithOptions(scope.options);
+                        },
+
+                        // Update chart with new options
                         updateWithOptions: function(options){
                             // Clearing
                             scope.api.clearElement();
@@ -111,11 +116,6 @@
                                 else chart[key](options.chart[key]);
                             });
 
-                            // Select the current element to add <svg> element and to render the chart in
-                            svg = d3.select(element[0]).append('svg')
-                                .attr('height', options.chart.height)
-                                .attr('width', options.chart.width);
-
                             // Update with data
                             scope.api.updateWithData(scope.data);
 
@@ -134,11 +134,18 @@
                             });
                         },
 
-                        // Update chart after data have changed
+                        // Update chart with new data
                         updateWithData: function (data){
-                            if (data && svg) {
+                            if (data) {
                                 scope.options.chart['transitionDuration'] = +scope.options.chart['transitionDuration'] || 250;
-                                svg.datum(data)
+                                // remove whole svg element with old data
+                                d3.select('svg').remove();
+
+                                // Select the current element to add <svg> element and to render the chart in
+                                d3.select(element[0]).append('svg')
+                                    .attr('height', scope.options.chart.height)
+                                    .attr('width', scope.options.chart.width)
+                                    .datum(data)
                                     .transition().duration(scope.options.chart['transitionDuration'])
                                     .call(chart);
                             }
@@ -150,7 +157,6 @@
                             element.find('.subtitle').remove();
                             element.find('.caption').remove();
                             element.empty();
-                            svg = null;
                             chart = null;
                         }
                     };
@@ -180,7 +186,6 @@
                                     if (options[key] === undefined || options[key] === null){
                                         if (scope._config.extended) options[key] = value();
                                     }
-
                                     else chart[key](options[key]);
                                 }
                             });
@@ -195,7 +200,6 @@
                                 if (options[key] === undefined || options[key] === null){
                                     if (scope._config.extended) options[key] = value.on;
                                 }
-
                                 else dispatch.on(key + '._', options[key]);
                             });
                         }
@@ -291,11 +295,11 @@
                     }
 
                     // Watching on options, data, config changing
-                    scope.$watch('options', function(options){ if (!scope._config.disabled) scope.api.updateWithOptions(options); }, true);
-                    scope.$watch('data', function(data){ if (!scope._config.disabled) scope.api.updateWithData(data); }, true);
+                    scope.$watch('options', function(options){ if (!scope._config.disabled && scope._config.autorefresh) scope.api.refresh(); }, true);
+                    scope.$watch('data', function(data){ if (!scope._config.disabled && scope._config.autorefresh) scope.api.refresh(); }, true);
                     scope.$watch('config', function(config){
                         scope._config = angular.extend(defaultConfig, config);
-                        scope.api.updateWithOptions(scope.options);
+                        scope.api.refresh();
                     }, true);
 
                     //subscribe on global events

diff --git a/dist/angular-nvd3.min.js b/dist/angular-nvd3.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "title": "AngularJS-nvD3",
     "name": "angular-nvd3",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "An AngularJS directive for NVD3.js reusable charting library",
     "homepage": "http://krispo.github.io/angular-nvd3",
     "repository": {