vue-highcharts - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/vue-highcharts.js

@@ -9,8 +9,10 @@ (function (global, factory) {
 
+var ctors = {
+  highcharts: 'Chart',
+  highstock: 'StockChart',
+  highmaps: 'Map',
+  'highcharts-renderer': 'Renderer'
+};
+
 function create(tagName, Highcharts) {
-  var ctors = {
-    highcharts: 'Chart',
-    highstock: 'StockChart',
-    highmaps: 'Map'
-  };
   var Ctor = Highcharts[ctors[tagName]];
@@ -20,21 +22,29 @@ if (!Ctor) {
   }
+  var isRenderer = tagName === 'highcharts-renderer';
   return {
     name: tagName,
     template: '<div></div>',
-    props: {
-      options: Object
-    },
+    props: isRenderer
+      ? {
+          width: { type: Number, required: true },
+          height: { type: Number, required: true }
+        }
+      : { options: { type: Object, required: true } },
     methods: {
-      render: function(options) {
-        var opts = options || {};
-        opts.chart = opts.chart || {};
-        opts.chart.renderTo = this.$el;
-        this._chart = new Ctor(opts);
+      _renderChart: function() {
+        if (isRenderer) {
+          this.renderer = new Ctor(this.$el, this.width, this.height);
+        } else {
+          var opts = JSON.parse(JSON.stringify(this.options));
+          opts.chart = opts.chart || {};
+          opts.chart.renderTo = this.$el;
+          this.chart = new Ctor(opts);
+        }
       }
     },
     mounted: function() {
-      this.render(this.options);
+      this._renderChart();
     },
     beforeDestroy: function() {
-      this._chart.destroy();
+      !isRenderer && this.chart.destroy();
     }
@@ -47,6 +57,6 @@ };
   Vue.prototype.Highcharts = Highcharts;
-  ['highcharts', 'highstock', 'highmaps'].forEach(function(tagName) {
+  for (var tagName in ctors) {
     var component = create(tagName, Highcharts);
     component && Vue.component(tagName, component);
-  });
+  }
 }
@@ -53,0 +63,0 @@

dist/vue-highcharts.min.js

@@ -1,1 +0,1 @@
-(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?module.exports=e(require("highcharts")):typeof define==="function"&&define.amd?define(["highcharts"],e):t.VueHighcharts=e(t.Highcharts)})(this,function(t){"use strict";t="default"in t?t["default"]:t;function e(t,e){var h={highcharts:"Chart",highstock:"StockChart",highmaps:"Map"};var r=e[h[t]];if(!r){return null}return{name:t,template:"<div></div>",props:{options:Object},methods:{render:function(t){var e=t||{};e.chart=e.chart||{};e.chart.renderTo=this.$el;this._chart=new r(e)}},mounted:function(){this.render(this.options)},beforeDestroy:function(){this._chart.destroy()}}}function h(h,r){var i=r&&r.Highcharts||t;h.prototype.Highcharts=i;["highcharts","highstock","highmaps"].forEach(function(t){var r=e(t,i);r&&h.component(t,r)})}return h});
+(function(e,t){typeof exports==="object"&&typeof module!=="undefined"?module.exports=t(require("highcharts")):typeof define==="function"&&define.amd?define(["highcharts"],t):e.VueHighcharts=t(e.Highcharts)})(this,function(e){"use strict";e="default"in e?e["default"]:e;var t={highcharts:"Chart",highstock:"StockChart",highmaps:"Map","highcharts-renderer":"Renderer"};function r(e,r){var h=r[t[e]];if(!h){return null}var i=e==="highcharts-renderer";return{name:e,template:"<div></div>",props:i?{width:{type:Number,required:true},height:{type:Number,required:true}}:{options:{type:Object,required:true}},methods:{_renderChart:function(){if(i){this.renderer=new h(this.$el,this.width,this.height)}else{var e=JSON.parse(JSON.stringify(this.options));e.chart=e.chart||{};e.chart.renderTo=this.$el;this.chart=new h(e)}}},mounted:function(){this._renderChart()},beforeDestroy:function(){!i&&this.chart.destroy()}}}function h(h,i){var n=i&&i.Highcharts||e;h.prototype.Highcharts=n;for(var o in t){var s=r(o,n);s&&h.component(o,s)}}return h});

package.json

 {
   "name": "vue-highcharts",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Highcharts component for Vue",
@@ -5,0 +5,0 @@ "main": "dist/vue-highcharts.js",

README.md

@@ -25,3 +25,3 @@ # vue-highcharts
 
-If you want to use Highstock, Highmaps or any add-ons, you should pass in the `Highcharts` object [which included the corresponding modules](http://www.highcharts.com/docs/getting-started/install-from-npm).
+If you want to use Highstock, Highmaps or any other add-ons, you should pass in the `Highcharts` object [which included the corresponding modules](http://www.highcharts.com/docs/getting-started/install-from-npm).
 
@@ -49,3 +49,3 @@ ```js
 
-Then you can use the component in your template. And you can access the `Highcharts` object via `vm.Highcharts`.
+Then you can use the components in your template.
 
@@ -56,4 +56,19 @@ ```html
 <highmaps :options="options"></highmaps>
+<highcharts-renderer :width="width" :height="height"></highcharts-renderer>
 ```
 
 The `options` object can be found in [Highcharts API Reference](http://api.highcharts.com/highcharts), [Highstock API Reference](http://api.highcharts.com/highstock) and [Highmaps API Reference](http://api.highcharts.com/highmaps).
+
+`<highcharts-renderer>` [creates an independent renderer](http://api.highcharts.com/highcharts/Renderer).
+
+The `Highcharts` object is available at `vm.Highcharts`. If you want to access the `chart` or `renderer` instance, you can use child component refs:
+
+```html
+<highcharts :options="options" ref="highcharts"></highcharts>
+<highcharts-renderer :width="width" :height="height" ref="highchartsRenderer"></highcharts-renderer>
+```
+
+```js
+const { chart } = vm.$refs.highcharts;
+const { renderer } = vm.$refs.highchartsRenderer;
+```

src/create.js

@@ -0,7 +1,4 @@
+import ctors from './constrators.js';
+
 function create(tagName, Highcharts) {
-  var ctors = {
-    highcharts: 'Chart',
-    highstock: 'StockChart',
-    highmaps: 'Map'
-  };
   var Ctor = Highcharts[ctors[tagName]];
@@ -11,21 +8,29 @@ if (!Ctor) {
   }
+  var isRenderer = tagName === 'highcharts-renderer';
   return {
     name: tagName,
     template: '<div></div>',
-    props: {
-      options: Object
-    },
+    props: isRenderer
+      ? {
+          width: { type: Number, required: true },
+          height: { type: Number, required: true }
+        }
+      : { options: { type: Object, required: true } },
     methods: {
-      render: function(options) {
-        var opts = options || {};
-        opts.chart = opts.chart || {};
-        opts.chart.renderTo = this.$el;
-        this._chart = new Ctor(opts);
+      _renderChart: function() {
+        if (isRenderer) {
+          this.renderer = new Ctor(this.$el, this.width, this.height);
+        } else {
+          var opts = JSON.parse(JSON.stringify(this.options));
+          opts.chart = opts.chart || {};
+          opts.chart.renderTo = this.$el;
+          this.chart = new Ctor(opts);
+        }
       }
     },
     mounted: function() {
-      this.render(this.options);
+      this._renderChart();
     },
     beforeDestroy: function() {
-      this._chart.destroy();
+      !isRenderer && this.chart.destroy();
     }
@@ -32,0 +37,0 @@ };

src/index.js

 import HighchartsOnly from 'highcharts';
+import ctors from './constrators.js';
 import create from './create.js';
@@ -7,8 +8,8 @@
   Vue.prototype.Highcharts = Highcharts;
-  ['highcharts', 'highstock', 'highmaps'].forEach(function(tagName) {
+  for (var tagName in ctors) {
     var component = create(tagName, Highcharts);
     component && Vue.component(tagName, component);
-  });
+  }
 }
 
 export default install;

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

8875

increased by21.88%

Number of package files

8

increased by14.29%

Lines of code

112

increased by21.74%

Number of lines in readme file

72

increased by26.32%

No dependency changes