vue-highcharts - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/vue-highcharts.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('highcharts')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'highcharts'], factory) :
-  (global = global || self, factory(global.VueHighcharts = {}, global.Highcharts));
-}(this, function (exports, HighchartsOnly) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueHighcharts = {}, global.Vue));
+}(this, (function (exports, vue) { 'use strict';
 
-  HighchartsOnly = HighchartsOnly && HighchartsOnly.hasOwnProperty('default') ? HighchartsOnly['default'] : HighchartsOnly;
-
   var ctors = {
@@ -13,87 +11,62 @@ Highcharts: 'chart',
     Highmaps: 'mapChart',
-    HighchartsGantt: 'ganttChart',
+    HighchartsGantt: 'ganttChart'
   };
 
-  // eslint-disable-next-line consistent-return
-  function clone(obj) {
-    var copy;
-    if (obj === null || typeof obj !== 'object') {
-      return obj;
-    }
-    if (obj instanceof Array) {
-      copy = [];
-      for (var i = obj.length - 1; i >= 0; i--) {
-        copy[i] = clone(obj[i]);
-      }
-      return copy;
-    }
-    /* istanbul ignore else */
-    if (obj instanceof Object) {
-      copy = {};
-      for (var key in obj) {
-        copy[key] = clone(obj[key]);
-      }
-      return copy;
-    }
+  function render() {
+    return vue.h('div', {
+      ref: 'highchartsRef'
+    });
   }
 
-  function render(createElement) {
-    return createElement('div');
-  }
+  function createHighcharts(name, Highcharts) {
+    var ctor = Highcharts[ctors[name]];
 
-  function create(name, Highcharts) {
-    var ctor = Highcharts[ctors[name]];
     if (!ctor) {
-      return Highcharts.win
-        ? null
-        // When running in server, Highcharts will not be instanced,
-        // so there're no constructors in Highcharts,
-        // to avoid unmated content during SSR, it returns minimum component.
-        : { render: render };
+      return Highcharts.win ? null // When running in server, Highcharts will not be instanced,
+      // so there're no constructors in Highcharts,
+      // to avoid unmated content during SSR, it returns minimum component.
+      : {
+        render: render
+      };
     }
+
     return {
       name: name,
-      props: {
-        options: { type: Object, required: true }
-      },
-      watch: {
-        options: {
-          handler: function () {
-            this.$_h_render();
-          },
-          deep: true
-        }
-      },
-      mounted: function () {
-        this.$_h_render();
-      },
-      beforeDestroy: function () {
-        this.chart.destroy();
-      },
-      methods: {
-        $_h_render: function () {
-          this.chart = ctor(this.$el, clone(this.options));
-        }
-      },
-      render: render
+      props: ['options'],
+      render: render,
+      setup: function setup(props) {
+        var highchartsRef = vue.ref(null);
+        var chart = vue.ref(null);
+        vue.onMounted(function () {
+          vue.watchEffect(function () {
+            chart.value = ctor(highchartsRef.value, props.options);
+          });
+        });
+        vue.onBeforeUnmount(function () {
+          if (highchartsRef.value) {
+            chart.value.destroy();
+          }
+        });
+        return {
+          highchartsRef: highchartsRef,
+          chart: chart
+        };
+      }
     };
   }
+  function install(app, options) {
+    Object.keys(ctors).forEach(function (name) {
+      var component = createHighcharts(name, options.Highcharts);
 
-  function install(Vue, options) {
-    var Highcharts = (options && options.Highcharts) || HighchartsOnly;
-    for (var name in ctors) {
-      var component = create(name, Highcharts);
-      component && Vue.component(name, component);
-    }
+      if (component) {
+        app.component(name, component);
+      }
+    });
   }
 
-  if (typeof window !== 'undefined' && window.Vue && window.Highcharts) {
-    install(window.Vue, window.Highcharts);
-  }
-
+  exports.createHighcharts = createHighcharts;
   exports.default = install;
-  exports.genComponent = create;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-}));
+})));

dist/vue-highcharts.min.js

@@ -1,1 +0,1 @@
-(function(t,e){typeof exports==="object"&&typeof module!=="undefined"?e(exports,require("highcharts")):typeof define==="function"&&define.amd?define(["exports","highcharts"],e):(t=t||self,e(t.VueHighcharts={},t.Highcharts))})(this,function(t,o){"use strict";o=o&&o.hasOwnProperty("default")?o["default"]:o;var h={Highcharts:"chart",Highstock:"stockChart",Highmaps:"mapChart",HighchartsGantt:"ganttChart"};function i(t){var e;if(t===null||typeof t!=="object"){return t}if(t instanceof Array){e=[];for(var n=t.length-1;n>=0;n--){e[n]=i(t[n])}return e}if(t instanceof Object){e={};for(var r in t){e[r]=i(t[r])}return e}}function r(t){return t("div")}function a(t,e){var n=e[h[t]];if(!n){return e.win?null:{render:r}}return{name:t,props:{options:{type:Object,required:true}},watch:{options:{handler:function(){this.$_h_render()},deep:true}},mounted:function(){this.$_h_render()},beforeDestroy:function(){this.chart.destroy()},methods:{$_h_render:function(){this.chart=n(this.$el,i(this.options))}},render:r}}function e(t,e){var n=e&&e.Highcharts||o;for(var r in h){var i=a(r,n);i&&t.component(r,i)}}if(typeof window!=="undefined"&&window.Vue&&window.Highcharts){e(window.Vue,window.Highcharts)}t.default=e;t.genComponent=a;Object.defineProperty(t,"__esModule",{value:true})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueHighcharts={},e.Vue)}(this,(function(e,t){"use strict";var n={Highcharts:"chart",Highstock:"stockChart",Highmaps:"mapChart",HighchartsGantt:"ganttChart"};function r(){return t.h("div",{ref:"highchartsRef"})}function o(e,o){var u=o[n[e]];return u?{name:e,props:["options"],render:r,setup:function(e){var n=t.ref(null),r=t.ref(null);return t.onMounted((function(){t.watchEffect((function(){r.value=u(n.value,e.options)}))})),t.onBeforeUnmount((function(){n.value&&r.value.destroy()})),{highchartsRef:n,chart:r}}}:o.win?null:{render:r}}e.createHighcharts=o,e.default=function(e,t){Object.keys(n).forEach((function(n){var r=o(n,t.Highcharts);r&&e.component(n,r)}))},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "vue-highcharts",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Highcharts component for Vue",
   "main": "dist/vue-highcharts.js",
-  "module": "src/index.js",
+  "module": "index.js",
+  "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "index.js"
   ],
   "scripts": {
-    "lint": "eslint src test",
-    "unit": "karma start",
+    "lint": "eslint index.js test",
+    "unit": "jest --collect-coverage",
     "test": "npm run lint && npm run unit",
-    "bundle": "rollup src/index.js -f umd -n VueHighcharts -g highcharts:Highcharts -o dist/vue-highcharts.js",
-    "minify": "uglifyjs dist/vue-highcharts.js -m -o dist/vue-highcharts.min.js",
-    "build": "npm run bundle && npm run minify",
-    "dev": "npm run bundle -- -w",
+    "dev": "rollup -c -w",
+    "build": "rollup -c",
     "preversion": "npm test",
@@ -42,22 +41,17 @@ "version": "npm run build && git add -A dist",
     "highcharts": ">=4.2.0",
-    "vue": ">=2.0.0"
+    "vue": ">=3"
   },
   "devDependencies": {
-    "chai": "^4.2.0",
-    "eslint": "^5.12.1",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "highcharts": "^7.0.2",
-    "karma": "^4.0.0",
-    "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.2",
-    "karma-mocha": "^1.3.0",
-    "karma-rollup-preprocessor": "^6.1.2",
-    "mocha": "^5.2.0",
-    "rollup": "^0.68.2",
-    "rollup-plugin-istanbul": "^2.0.1",
-    "uglify-js": "^3.4.9",
-    "vue": "^2.5.22"
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@rollup/plugin-babel": "^5.2.1",
+    "eslint": "^7.9.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "highcharts": "^8.2.0",
+    "jest": "^26.4.2",
+    "rollup": "^2.27.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "vue": "^3.0.0"
   }
 }

README.md

 # vue-highcharts
 
-[![Build status](https://img.shields.io/travis/weizhenye/vue-highcharts.svg)](https://travis-ci.org/weizhenye/vue-highcharts)
-[![Coverage](https://img.shields.io/codecov/c/github/weizhenye/vue-highcharts.svg)](https://codecov.io/gh/weizhenye/vue-highcharts)
-[![Dependencies](https://img.shields.io/david/weizhenye/vue-highcharts.svg)](https://david-dm.org/weizhenye/vue-highcharts)
-[![NPM version](https://img.shields.io/npm/v/vue-highcharts.svg)](https://www.npmjs.com/package/vue-highcharts)
-[![License](https://img.shields.io/npm/l/vue-highcharts.svg)](https://github.com/weizhenye/vue-highcharts/blob/master/LICENSE)
-[![File size](https://badge-size.herokuapp.com/weizhenye/vue-highcharts/master/dist/vue-highcharts.min.js?compression=gzip&color=blue&label=min%2Bgzip)](https://unpkg.com/vue-highcharts/dist/vue-highcharts.min.js)
-[![Download](https://img.shields.io/npm/dm/vue-highcharts.svg)](https://www.npmjs.com/package/vue-highcharts)
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/vue-highcharts/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-highcharts)
+[![GitHub Action](https://github.com/weizhenye/vue-highcharts/workflows/CI/badge.svg)](https://github.com/weizhenye/vue-highcharts/actions)
+[![Coverage](https://badgen.net/codecov/c/github/weizhenye/vue-highcharts?icon=codecov)](https://codecov.io/gh/weizhenye/vue-highcharts)
+[![NPM version](https://badgen.net/npm/v/vue-highcharts?icon=npm)](https://www.npmjs.com/package/vue-highcharts)
+[![License](https://badgen.net/npm/license/vue-highcharts?icon=https://api.iconify.design/octicon:law.svg?color=white)](https://github.com/weizhenye/vue-highcharts/blob/master/LICENSE)
+[![File size](https://badgen.net/bundlephobia/minzip/vue-highcharts?icon=https://api.iconify.design/ant-design:file-zip-outline.svg?color=white)](https://bundlephobia.com/result?p=vue-highcharts)
+[![Download](https://badgen.net/npm/dm/vue-highcharts?icon=npm)](https://www.npmjs.com/package/vue-highcharts)
+[![jsDelivr](https://badgen.net/jsdelivr/hits/npm/vue-highcharts?icon=https://api.iconify.design/simple-icons:jsdelivr.svg?color=white)](https://www.jsdelivr.com/package/npm/vue-highcharts)
 
@@ -16,3 +15,3 @@ Highcharts component for Vue.
 
-* Vue >= 2.0.0
+* Vue >= 3.0.0
 * Highcharts >= 4.2.0
@@ -26,22 +25,44 @@
 
-If you use Vue v1, you should `npm i -S vue-highcharts@0.0`.
+For **Vue 2**, please run `npm i -S vue-highcharts@0.1`, and checkout document [here](https://github.com/weizhenye/vue-highcharts/tree/v0.1.0).
 
 ## Usage
 
-You can simply import it and use it.
+### Registering globally
 
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
+import Highcharts from 'highcharts';
 import VueHighcharts from 'vue-highcharts';
 
-Vue.use(VueHighcharts);
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(VueHighcharts, { Highcharts });
+// now <Highcharts /> is available in components
 ```
 
-If you want to use Highstock, Highmaps, Gantt or any other [add-ons](https://github.com/highcharts/highcharts-dist/tree/master/modules), you should load them as modules.
+<details>
+<summary>Direct <code>&lt;script&gt;</code> include</summary>
 
+```html
+<script src="/path/to/vue/dist/vue.global.prod.js"></script>
+<script src="/path/to/highcharts/highcharts.js"></script>
+<script src="/path/to/vue-highcharts/dist/vue-highcharts.js"></script>
+<script>
+const { createApp } = window.Vue;
+const app = createApp();
+app.use(window.VueHighcharts['default'], { Highcharts: window.Highcharts });
+</script>
+```
+</details>
+
+### Highstock, Highmaps and any other add-ons
+
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
+import Highcharts from 'highcharts';
 import VueHighcharts from 'vue-highcharts';
-import Highcharts from 'highcharts';
 
+import App from './App.vue';
+
 // load these modules as your need
@@ -63,12 +84,21 @@ import loadStock from 'highcharts/modules/stock.js';
 
-Vue.use(VueHighcharts, { Highcharts });
-// now you can use Highstock, Highmaps, Gantt, drilldown and solid gauge.
+const app = createApp(App);
+app.use(VueHighcharts, { Highcharts });
+// now <Highcharts />, <Highstock />, <Highmaps />, <HighchartsGantt /> is available in components
+// drilldown and solid gauge are work with <Highcharts />
 ```
 
-If you don't want to install vue-highcharts global, you can:
+### Registering in components
 
-```js
+```vue
+<template>
+  <Highcharts />
+  <Highmaps />
+</template>
+
+<script>
 import Highcharts from 'highcharts';
+import { createHighcharts } from 'vue-highcharts';
+
 import loadMap from 'highcharts/modules/map.js';
-import { genComponent } from 'vue-highcharts';
 
@@ -78,50 +108,59 @@ loadMap(Highcharts);
 export default {
-  name: 'MyComponent',
-  component: {
-    Highcharts: genComponent('Highcharts', Highcharts),
-    Highmaps: genComponent('Highmaps', Highcharts),
-    // Highstock: genComponent('Highstock', Highcharts),
-    // HighchartsGantt: genComponent('HighchartsGantt', Highcharts),
+  components: {
+    Highcharts: createHighcharts('Highcharts', Highcharts),
+    Highmaps: createHighcharts('Highmaps', Highcharts),
+    // Highstock: createHighcharts('Highstock', Highcharts),
+    // HighchartsGantt: createHighcharts('HighchartsGantt', Highcharts),
   },
 };
+</script>
 ```
 
-```js
-/**
- * @param {String} name   Available values: 'Highcharts', 'Highstock', 'Highmaps', 'HighchartsGantt'
- * @param {Object} Highcharts   The `Highcharts` object
- * @returns {VueComponent|null}
- */
-function genComponent(name, Highcharts) {}
+Typing:
+
+```ts
+type ChartName = 'Highcharts' | 'Highstock' | 'Highmaps' | 'HighchartsGantt';
+function createHighcharts(name: ChartName, Highcharts: Highcharts): VueComponent | null
 ```
 
-Then you can use these components in the template.
+### Configuration options and the chart instance
 
-```html
+```vue
 <template>
-  <div>
-    <Highcharts :options="options" />
-    <Highstock :options="options" />
-    <Highmaps :options="options" />
-    <HighchartsGantt :options="options" />
-  </div>
+  <Highcharts ref="highchartsRef" :options="chartOptions" />
+  <Highstock :options="stockOptions" />
+  <Highmaps :options="mapsOptions" />
+  <HighchartsGantt :options="ganttOptions" />
 </template>
-```
 
-The `options` object can be found in [Highcharts API Reference](https://api.highcharts.com/highcharts). Note you should never pass in `chart.renderTo` for watching it may cause stack overflow.
+<script>
+import { ref, onMounted } from 'vue';
 
-If you want to access the `chart` instance, you can use child component refs:
-
-```html
-<Highcharts ref="highcharts" :options="options" />
+export default {
+  setup() {
+    const highchartsRef = ref(null);
+    onMounted(() => {
+      // access the `chart` instance with template refs
+      const { chart } = highchartsRef.value;
+    });
+    return {
+      highchartsRef,
+      chartOptions: {},
+      stockOptions: {},
+      mapsOptions: {},
+      ganttOptions: {},
+    };
+  },
+};
+</script>
 ```
 
-```js
-const { chart } = vm.$refs.highcharts;
-```
+The `options` object can be found in [Highcharts API Reference](https://api.highcharts.com/highcharts/).
 
+The `chart` instance can be accessed with template refs.
+
 ## Demo
 
-* [Access `chart` instance via refs](https://codepen.io/weizhenye/pen/rrKgbP)
-* [Use Highmaps](https://codepen.io/weizhenye/pen/VKdJpW)
-* [Synchronized charts](https://codepen.io/weizhenye/pen/NYPZMK)
+* [Access `chart` instance via template refs](https://codepen.io/weizhenye/pen/yLeobOP)
+* [Synchronized charts](https://codepen.io/weizhenye/pen/PoZKmjG)
+* [Use Highmaps](https://codepen.io/weizhenye/pen/QWyMxaq)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

11

decreased by-31.25%

Number of lines in readme file

163

increased by31.45%

Worsened metrics

Total package byte prevSize

11749

decreased by-9.65%

Number of package files

6

decreased by-33.33%

Lines of code

116

decreased by-32.56%

No dependency changes