highcharts-ng - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/highcharts-ng.js

 /**
  * highcharts-ng
- * @version v1.1.0 - 2017-03-27
+ * @version v1.2.0 - 2017-12-02
  * @link https://github.com/pablojim/highcharts-ng
@@ -20,3 +20,5 @@ * @author Barry Fitzgerald <>
     Highcharts = window.Highcharts;
-  } else if (module && module.exports === 'highcharts-ng') {
+  } else if (typeof module !== 'undefined' && typeof exports !== 'undefined' &&
+    module.exports === exports && module.exports === 'highcharts-ng'
+  ) {
         Highcharts = require('highcharts');
@@ -28,7 +30,8 @@ }
     .component('highchart', {
-        bindings: {
-            config: '<',
-            changeDetection: '<'
-          },
-          controller: HighChartNGController
+      bindings: {
+        config: '<',
+        changeDetection: '<',
+        disableChangeDetection: '<'
+      },
+      controller: HighChartNGController
     });
@@ -39,3 +42,6 @@
   function HighChartNGController($element, $timeout) {
+    var initialized = false;
     var seriesId = 0;
+    var yAxisId = 0;
+    var xAxisId = 0;
     var ctrl = this;
@@ -45,36 +51,76 @@ var prevConfig = {};
     var detector = ctrl.changeDetection || angular.equals;
-    this.$onInit = function() {
-      ctrl.config.getChartObj = function(){
-        return ctrl.chart;
-      };
-      prevConfig = angular.merge({}, ctrl.config);
-      mergedConfig = getMergedOptions($element, ctrl.config, seriesId);
-      ctrl.chart = new Highcharts[getChartType(mergedConfig)](mergedConfig);
 
-      // Fix resizing bug
-      // https://github.com/pablojim/highcharts-ng/issues/550
-      var originalWidth = $element[0].clientWidth;
-      var originalHeight = $element[0].clientHeight;
-      $timeout(function() {
-        if ($element[0].clientWidth !== originalWidth || $element[0].clientHeight !== originalHeight) {
-          ctrl.chart.reflow();
+    this.$onInit = function () {
+      initChart();
+      initialized = true;
+    };
+
+    this.$onChanges = function(changesObject) {
+      if (changesObject.config && changesObject.config.currentValue !== undefined) {
+        if (!initialized) {
+          return;
         }
-      }, 0, false);
+        initChart();
+      }
     };
 
-    this.$doCheck = function() {
-      if(!detector(ctrl.config, prevConfig)) {
+    this.removeItems = function (newItems, chartItems, id, toIgnore) {
+      if (newItems && Array.isArray(newItems)) {
+        var ids = ensureIds(newItems, id);
+        for (var i = chartItems.length - 1; i >= 0; i -= 1) {
+          var a = chartItems[i];
+          if ((toIgnore.indexOf(a.options.id) < 0) && (ids.indexOf(a.options.id) < 0)) {
+            //if we don't set redraw to true, it can create
+            //glitches in the chart's rendering where the series
+            //doesn't completely re-render
+            a.remove(true);
+          }
+        }
+      }
+
+    };
+
+    this.removeUnlinkedObjects = function (mergedConfig) {
+      /*
+       Removes unlinked objects, items that have been removed in the config,
+       but not yet removed from the HighChart object
+       */
+      //First check to see if there are any axes that need to be removed
+      //If a series is linked to the axis, it will be removed by HighCharts
+      this.removeItems(mergedConfig.yAxis, ctrl.chart.yAxis, yAxisId, 'navigator-y-axis');
+      this.removeItems(mergedConfig.xAxis, ctrl.chart.xAxis, xAxisId, 'navigator-x-axis');
+      this.removeItems(mergedConfig.series, ctrl.chart.series, seriesId, 'highcharts-navigator-series');
+      //TODO do we need to handle removing series from the config that highcharts has removed as part
+      //of removing axes?
+    };
+
+    this.addAnyNewAxes = function (configAxes, chart, isX) {
+      if (configAxes && Array.isArray(configAxes)) {
+          angular.forEach(configAxes, function (s) {
+            if (!chart.get(s.id)) {
+              chart.addAxis(s, isX);
+            }
+          });
+        }
+    };
+
+    this.$doCheck = function () {
+      if (ctrl.disableChangeDetection === true) {
+        return;
+      }
+      if (!detector(ctrl.config, prevConfig)) {
         prevConfig = angular.merge({}, ctrl.config);
         mergedConfig = getMergedOptions($element, ctrl.config, seriesId);
-        var ids = ensureIds(mergedConfig.series, seriesId);
+
+        //Remove any unlinked objects before adding
+        this.removeUnlinkedObjects(mergedConfig);
+
+        //Allows dynamic adding Axes
+        this.addAnyNewAxes(mergedConfig.yAxis, ctrl.chart, false);
+        this.addAnyNewAxes(mergedConfig.xAxis, ctrl.chart, true);
+
+        //Allows dynamic adding of series
         if (mergedConfig.series) {
-          //Remove any missing series
-          for (var i = ctrl.chart.series.length - 1; i >= 0; i--) {
-            var s = ctrl.chart.series[i];
-            if (s.options.id !== 'highcharts-navigator-series' && ids.indexOf(s.options.id) < 0) {
-              s.remove(false);
-            }
-          }
           // Add any new series
-          angular.forEach(ctrl.config.series, function(s) {
+          angular.forEach(ctrl.config.series, function (s) {
             if (!ctrl.chart.get(s.id)) {
@@ -85,2 +131,3 @@ ctrl.chart.addSeries(s);
         }
+
         ctrl.chart.update(mergedConfig, true);
@@ -90,17 +137,37 @@ }
 
-    this.$onDestroy = function() {
-        if (ctrl.chart) {
-          try{
-            ctrl.chart.destroy();
-          }catch(ex){
-            // fail silently as highcharts will throw exception if element doesn't exist
-          }
+    this.$onDestroy = function () {
+      if (ctrl.chart) {
+        try {
+          ctrl.chart.destroy();
+        } catch (ex) {
+          // fail silently as highcharts will throw exception if element doesn't exist
+        }
 
-          $timeout(function(){
-            $element.remove();
-          }, 0);
+        $timeout(function () {
+          $element.remove();
+        }, 0);
+      }
+    };
+
+    function initChart() {
+      prevConfig = angular.merge({}, ctrl.config);
+      mergedConfig = getMergedOptions($element, ctrl.config, seriesId);
+      ctrl.chart = new Highcharts[getChartType(mergedConfig)](mergedConfig);
+      ctrl.config.getChartObj = function () {
+        return ctrl.chart;
+      };
+
+      // Fix resizing bug
+      // https://github.com/pablojim/highcharts-ng/issues/550
+      var originalWidth = $element[0].clientWidth;
+      var originalHeight = $element[0].clientHeight;
+      $timeout(function () {
+        if ($element[0].clientWidth !== originalWidth || $element[0].clientHeight !== originalHeight) {
+          ctrl.chart.reflow();
         }
-      };
+      }, 0, false);
     }
+  }
 
+
   function getMergedOptions(element, config, seriesId) {
@@ -123,3 +190,3 @@ var mergedOptions = {};
       //check all series and axis ids are set
-      if(config.series) {
+      if (config.series) {
         ensureIds(config.series, seriesId);
@@ -140,3 +207,3 @@ }
     'stock': 'StockChart',
-    'map':   'Map',
+    'map': 'Map',
     'chart': 'Chart'
@@ -150,13 +217,20 @@ };
 
-  function ensureIds(series, seriesId) {
+  function ensureIds(chartCollection, collectionId) {
+    /*
+     Ensures each item in the iteratble chartCollection has an id,
+     and if not auto-generates one incrementing collectionId
+     */
     var ids = [];
-    angular.forEach(series, function(s) {
+    angular.forEach(chartCollection, function (s) {
       if (!angular.isDefined(s.id)) {
-        s.id = 'series-' + seriesId++;
+        collectionId += 1;
+        s.id = 'cc-' + collectionId;
       }
       ids.push(s.id);
     });
+
     return ids;
   }
 
+
 }());

dist/highcharts-ng.min.js

 /**
  * highcharts-ng
- * @version v1.1.0 - 2017-03-27
+ * @version v1.2.0 - 2017-12-02
  * @link https://github.com/pablojim/highcharts-ng
@@ -8,2 +8,2 @@ * @author Barry Fitzgerald <>
  */
-"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="highcharts-ng"),function(){"use strict";function a(a,f){var g=0,h=this,i={},j={},k=h.changeDetection||angular.equals;this.$onInit=function(){h.config.getChartObj=function(){return h.chart},i=angular.merge({},h.config),j=b(a,h.config,g),h.chart=new(e[c(j)])(j);var d=a[0].clientWidth,k=a[0].clientHeight;f(function(){a[0].clientWidth===d&&a[0].clientHeight===k||h.chart.reflow()},0,!1)},this.$doCheck=function(){if(!k(h.config,i)){i=angular.merge({},h.config),j=b(a,h.config,g);var c=d(j.series,g);if(j.series){for(var e=h.chart.series.length-1;e>=0;e--){var f=h.chart.series[e];"highcharts-navigator-series"!==f.options.id&&c.indexOf(f.options.id)<0&&f.remove(!1)}angular.forEach(h.config.series,function(a){h.chart.get(a.id)||h.chart.addSeries(a)})}h.chart.update(j,!0)}},this.$onDestroy=function(){if(h.chart){try{h.chart.destroy()}catch(b){}f(function(){a.remove()},0)}}}function b(a,b,c){var e={},f={chart:{events:{}},title:{},subtitle:{},series:[],credits:{},plotOptions:{},navigator:{}};return b?(b.series&&d(b.series,c),e=angular.merge(f,b)):e=f,e.chart.renderTo=a[0],e}function c(a){return void 0===a||void 0===a.chartType?"Chart":f[(""+a.chartType).toLowerCase()]}function d(a,b){var c=[];return angular.forEach(a,function(a){angular.isDefined(a.id)||(a.id="series-"+b++),c.push(a.id)}),c}var e=null;window&&window.Highcharts?e=window.Highcharts:module&&"highcharts-ng"===module.exports&&(e=require("highcharts")),angular.module("highcharts-ng",[]).component("highchart",{bindings:{config:"<",changeDetection:"<"},controller:a}),a.$inject=["$element","$timeout"];var f={stock:"StockChart",map:"Map",chart:"Chart"}}();
+"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="highcharts-ng"),function(){"use strict";function a(a,f){function g(){m=angular.merge({},l.config),n=b(a,l.config,i),l.chart=new(e[c(n)])(n),l.config.getChartObj=function(){return l.chart};var d=a[0].clientWidth,g=a[0].clientHeight;f(function(){a[0].clientWidth===d&&a[0].clientHeight===g||l.chart.reflow()},0,!1)}var h=!1,i=0,j=0,k=0,l=this,m={},n={},o=l.changeDetection||angular.equals;this.$onInit=function(){g(),h=!0},this.$onChanges=function(a){if(a.config&&void 0!==a.config.currentValue){if(!h)return;g()}},this.removeItems=function(a,b,c,e){if(a&&Array.isArray(a))for(var f=d(a,c),g=b.length-1;g>=0;g-=1){var h=b[g];e.indexOf(h.options.id)<0&&f.indexOf(h.options.id)<0&&h.remove(!0)}},this.removeUnlinkedObjects=function(a){this.removeItems(a.yAxis,l.chart.yAxis,j,"navigator-y-axis"),this.removeItems(a.xAxis,l.chart.xAxis,k,"navigator-x-axis"),this.removeItems(a.series,l.chart.series,i,"highcharts-navigator-series")},this.addAnyNewAxes=function(a,b,c){a&&Array.isArray(a)&&angular.forEach(a,function(a){b.get(a.id)||b.addAxis(a,c)})},this.$doCheck=function(){l.disableChangeDetection!==!0&&(o(l.config,m)||(m=angular.merge({},l.config),n=b(a,l.config,i),this.removeUnlinkedObjects(n),this.addAnyNewAxes(n.yAxis,l.chart,!1),this.addAnyNewAxes(n.xAxis,l.chart,!0),n.series&&angular.forEach(l.config.series,function(a){l.chart.get(a.id)||l.chart.addSeries(a)}),l.chart.update(n,!0)))},this.$onDestroy=function(){if(l.chart){try{l.chart.destroy()}catch(b){}f(function(){a.remove()},0)}}}function b(a,b,c){var e={},f={chart:{events:{}},title:{},subtitle:{},series:[],credits:{},plotOptions:{},navigator:{}};return b?(b.series&&d(b.series,c),e=angular.merge(f,b)):e=f,e.chart.renderTo=a[0],e}function c(a){return void 0===a||void 0===a.chartType?"Chart":f[(""+a.chartType).toLowerCase()]}function d(a,b){var c=[];return angular.forEach(a,function(a){angular.isDefined(a.id)||(b+=1,a.id="cc-"+b),c.push(a.id)}),c}var e=null;window&&window.Highcharts?e=window.Highcharts:"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&"highcharts-ng"===module.exports&&(e=require("highcharts")),angular.module("highcharts-ng",[]).component("highchart",{bindings:{config:"<",changeDetection:"<",disableChangeDetection:"<"},controller:a}),a.$inject=["$element","$timeout"];var f={stock:"StockChart",map:"Map",chart:"Chart"}}();

ISSUE_TEMPLATE.md

@@ -7,2 +7,3 @@ <!--- Provide a general summary of the issue in the Title above -->
 ## Expected Behaviour
+<!--- Have you made a jsfiddle? -->
 <!--- If you're describing a bug, tell us what should happen -->
@@ -21,1 +22,3 @@ <!--- If you're suggesting a change/improvement, tell us how it should work -->
 * Link to your project:
+
+<!--- Once more - Have you made a jsfiddle? Without it your issue is unlikely to be fixed. -->

package.json

 {
   "name": "highcharts-ng",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "highcharts-ng",
@@ -51,4 +51,3 @@ "keywords": [
   "dependencies": {
-    "highcharts": "^5.0.9"
   }
 }

README.md

@@ -9,4 +9,4 @@ highcharts-ng
 
-Examples:
----------
+Examples
+--------
 
@@ -21,7 +21,17 @@ See example in ./example/charts/general-example.html (https://rawgit.com/pablojim/highcharts-ng/master/example/charts/general-example.html)
 - Resizing to screen size: http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/jsfiddles/resizing/
+- Disabled change detection http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/jsfiddles/disabled_change_detection/
+- Recreating chart http://jsfiddle.net/gh/get/jquery/3.1.1/pablojim/highcharts-ng/tree/master/jsfiddles/recreating/
 
+License
+-------
+This library is available under the MIT license. However it and is a wrapper for Highcharts. Highcharts itself has an own license. So make sure to follow their license as well (https://github.com/highcharts/highcharts/blob/master/license.txt)
+
+Note: You need to include the Highcharts library your self. It is not included in this repository.
+
 Current Version
 ---------------
-**Note Needs Highcharts/Highstock >= 5.0.0**
-**Only supports AngularJS >= 1.5.8
+**Needs Highcharts/Highstock >= 5.0.0**
+
+**Only supports AngularJS >= 1.5.8**
+
 **Configuration Format is not compatible with highcharts-ng 0.x.0**
@@ -44,3 +54,13 @@
 
+Add highcharts as project dependency with npm
+```bash
+npm install highcharts
+```
 
+or with bower:
+
+```bash
+bower install highcharts --save
+```
+
 Add references to Highcharts/Highstocks:
@@ -76,3 +96,3 @@
 
-The `chartConfig` object should be the same as a normal highcharts configuration. Any options that work in highcharts should work here also.
+The `chartConfig` object should be the same as a normal highcharts configuration. Any options that work in highcharts should work here also. To use highstock charts, you just need to add `chartType: 'stock'` to your `chartConfig`.
 
@@ -85,2 +105,6 @@ It is **Highly Recommended** to give all Series and Axes a distinct ID.
 
+Sometimes it could make sense to create an entire new Highcharts Chart instead of updating the previous one. For this to happen, you need to pass an entire new chart configuration object to the component instead of updating the previous configuration object. (See example section above)
+
+If you know the chart data is not going to change, you can disabled the changeDetection to improve performance. This can be done with the attribute ```disable-change-detection="true"```. However this really only affects charts with huge data sets. (See example section above)
+
 Features:
@@ -135,2 +159,10 @@ ---------
 
+Version 1.2.0
+-------------
+Remove explicit dependency on Highcharts due to licensing concerns and also allows user to choose between Highcharts and Highstocks.
+
+- added support for $onChanges, added new binding to disable change detection https://github.com/pablojim/highcharts-ng/pull/622
+
+Thanks to @ngehlert and others for their contributions.
+
 Version 1.1.0
@@ -142,6 +174,4 @@ -------------
 - Added module loader support https://github.com/pablojim/highcharts-ng/commit/508df111886c4be8b26e82cb6d3e2303f17efed8
+Thanks to @houssemba and others for the contributions.
 
-
-
-
 Version 1.0.1
@@ -148,0 +178,0 @@ -------------

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

104618

increased by15%

Dependency count

0

decreased by-100%

Number of package files

44

increased by25.71%

Lines of code

1444

increased by19.34%

Number of lines in readme file

258

increased by13.16%

Dependency changes

• - Removedhighcharts@^5.0.9

• - Removedhighcharts@5.0.15(transitive)