vue-apexcharts - npm Package Compare versions

Comparing version 1.5.2 to 1.5.3

dist/vue-apexcharts.d.ts

@@ -10,3 +10,3 @@ import Vue, { Component, ComponentOptions } from 'vue';
   options?: ApexOptions;
-  type?: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'rangeBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'radar';
+  type?: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'rangeBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'radar' | 'polarArea';
   series: any;
@@ -25,6 +25,6 @@ width?: string | number;
   resetSeries(): void;
+  zoomX(min: number, max: number): void;
   toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): any;
   appendData(newData: any): Promise<void>;
   appendSeries(newSeries: any, animate?: boolean): Promise<void>;
-  addText(options: any, pushToMemory?: boolean, context?: any): void;
   addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
@@ -31,0 +31,0 @@ addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;

dist/vue-apexcharts.js

@@ -54,6 +54,6 @@ (function (global, factory) {
       width: {
-        default: '100%'
+        default: "100%"
       },
       height: {
-        default: 'auto'
+        default: "auto"
       }
@@ -75,3 +75,3 @@ },
 
-      this.$watch('options', function (options) {
+      this.$watch("options", function (options) {
         if (!_this.chart && options) {
@@ -83,3 +83,3 @@ _this.init();
       });
-      this.$watch('series', function (series) {
+      this.$watch("series", function (series) {
         if (!_this.chart && series) {
@@ -91,3 +91,3 @@ _this.init();
       });
-      var watched = ['type', 'width', 'height'];
+      var watched = ["type", "width", "height"];
       watched.forEach(function (prop) {
@@ -107,3 +107,3 @@ _this.$watch(prop, function () {
     render: function render(createElement) {
-      return createElement('div');
+      return createElement("div");
     },
@@ -116,3 +116,3 @@ methods: {
           chart: {
-            type: this.type || this.options.chart.type || 'line',
+            type: this.type || this.options.chart.type || "line",
             height: this.height,
@@ -132,3 +132,3 @@ width: this.width,
       isObject: function isObject(item) {
-        return item && _typeof(item) === 'object' && !Array.isArray(item) && item != null;
+        return item && _typeof(item) === "object" && !Array.isArray(item) && item != null;
       },
@@ -138,3 +138,3 @@ extend: function extend(target, source) {
 
-        if (typeof Object.assign !== 'function') {
+        if (typeof Object.assign !== "function") {
           (function () {
@@ -144,3 +144,3 @@ Object.assign = function (target) {
               if (target === undefined || target === null) {
-                throw new TypeError('Cannot convert undefined or null to object');
+                throw new TypeError("Cannot convert undefined or null to object");
               }
@@ -213,2 +213,5 @@
       },
+      zoomX: function zoomX(min, max) {
+        this.chart.zoomX(min, max);
+      },
       toggleDataPointSelection: function toggleDataPointSelection(seriesIndex, dataPointIndex) {
@@ -223,2 +226,8 @@ this.chart.toggleDataPointSelection(seriesIndex, dataPointIndex);
       },
+      addImage: function addImage(options) {
+        this.chart.addImage(options);
+      },
+      addShape: function addShape(options) {
+        this.chart.addShape(options);
+      },
       dataURI: function dataURI() {
@@ -225,0 +234,0 @@ return this.chart.dataURI();

package.json

 {
   "name": "vue-apexcharts",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Vue.js wrapper for ApexCharts",
@@ -5,0 +5,0 @@ "main": "dist/vue-apexcharts.js",

README.md

@@ -15,3 +15,3 @@ <p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p>
 
-<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
+<p align="center"><a href="https://apexcharts.com/vue-chart-demos/"><img src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
 
@@ -18,0 +18,0 @@

src/ApexCharts.component.js

@@ -1,2 +0,2 @@
-import ApexCharts from 'apexcharts'
+import ApexCharts from "apexcharts";
 
@@ -17,56 +17,56 @@ export default {
     width: {
-      default: '100%'
+      default: "100%"
     },
     height: {
-      default: 'auto'
+      default: "auto"
     }
   },
-  data () {
+  data() {
     return {
       chart: null
-    }
+    };
   },
   beforeMount() {
-    window.ApexCharts = ApexCharts
+    window.ApexCharts = ApexCharts;
   },
-  mounted () {
-    this.init()
+  mounted() {
+    this.init();
   },
-  created () {
-    this.$watch('options', options => {
+  created() {
+    this.$watch("options", options => {
       if (!this.chart && options) {
-        this.init()
+        this.init();
       } else {
-        this.chart.updateOptions(this.options)
+        this.chart.updateOptions(this.options);
       }
-    })
+    });
 
-    this.$watch('series', series => {
+    this.$watch("series", series => {
       if (!this.chart && series) {
-        this.init()
+        this.init();
       } else {
-        this.chart.updateSeries(this.series)
+        this.chart.updateSeries(this.series);
       }
-    })
-    let watched = ['type', 'width', 'height']
+    });
+    let watched = ["type", "width", "height"];
     watched.forEach(prop => {
       this.$watch(prop, () => {
-        this.refresh()
-      })
-    })
+        this.refresh();
+      });
+    });
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.destroy()
+    this.destroy();
   },
-  render (createElement) {
-    return createElement('div')
+  render(createElement) {
+    return createElement("div");
   },
   methods: {
-    init () {
+    init() {
       const newOptions = {
         chart: {
-          type: this.type || this.options.chart.type || 'line',
+          type: this.type || this.options.chart.type || "line",
           height: this.height,
@@ -77,5 +77,5 @@ width: this.width,
         series: this.series
-      }
+      };
 
-      Object.keys(this.$listeners).forEach((evt) => {
+      Object.keys(this.$listeners).forEach(evt => {
         newOptions.chart.events[evt] = this.$listeners[evt];
@@ -85,12 +85,12 @@ });
       const config = this.extend(this.options, newOptions);
-      this.chart = new ApexCharts(this.$el, config)
-      return this.chart.render()
+      this.chart = new ApexCharts(this.$el, config);
+      return this.chart.render();
     },
     isObject(item) {
       return (
-        item && typeof item === 'object' && !Array.isArray(item) && item != null
-      )
+        item && typeof item === "object" && !Array.isArray(item) && item != null
+      );
     },
     extend(target, source) {
-      if (typeof Object.assign !== 'function') {
+      if (typeof Object.assign !== "function") {
         (function() {
@@ -100,12 +100,12 @@ Object.assign = function(target) {
             if (target === undefined || target === null) {
-              throw new TypeError('Cannot convert undefined or null to object')
+              throw new TypeError("Cannot convert undefined or null to object");
             }
-  
-            let output = Object(target)
+
+            let output = Object(target);
             for (let index = 1; index < arguments.length; index++) {
-              let source = arguments[index]
+              let source = arguments[index];
               if (source !== undefined && source !== null) {
                 for (let nextKey in source) {
                   if (source.hasOwnProperty(nextKey)) {
-                    output[nextKey] = source[nextKey]
+                    output[nextKey] = source[nextKey];
                   }
@@ -115,10 +115,10 @@ }
             }
-            return output
-          }
-        })()
+            return output;
+          };
+        })();
       }
-  
-      let output = Object.assign({}, target)
+
+      let output = Object.assign({}, target);
       if (this.isObject(target) && this.isObject(source)) {
-        Object.keys(source).forEach((key) => {
+        Object.keys(source).forEach(key => {
           if (this.isObject(source[key])) {
@@ -128,5 +128,5 @@ if (!(key in target)) {
                 [key]: source[key]
-              })
+              });
             } else {
-              output[key] = this.extend(target[key], source[key])
+              output[key] = this.extend(target[key], source[key]);
             }
@@ -136,67 +136,81 @@ } else {
               [key]: source[key]
-            })
+            });
           }
-        })
+        });
       }
-      return output
+      return output;
     },
-    refresh () {
-      this.destroy()
-      return this.init()
+    refresh() {
+      this.destroy();
+      return this.init();
     },
-    destroy () {
-      this.chart.destroy()
+    destroy() {
+      this.chart.destroy();
     },
-    updateSeries (newSeries, animate) {
-      return this.chart.updateSeries(newSeries, animate)
+    updateSeries(newSeries, animate) {
+      return this.chart.updateSeries(newSeries, animate);
     },
-    updateOptions (newOptions, redrawPaths, animate, updateSyncedCharts) {
-      return this.chart.updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts)
+    updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts) {
+      return this.chart.updateOptions(
+        newOptions,
+        redrawPaths,
+        animate,
+        updateSyncedCharts
+      );
     },
-    toggleSeries (seriesName) {
-      return this.chart.toggleSeries(seriesName)
+    toggleSeries(seriesName) {
+      return this.chart.toggleSeries(seriesName);
     },
-    showSeries (seriesName) {
-      this.chart.showSeries(seriesName)
+    showSeries(seriesName) {
+      this.chart.showSeries(seriesName);
     },
-    hideSeries (seriesName) {
-      this.chart.hideSeries(seriesName)
+    hideSeries(seriesName) {
+      this.chart.hideSeries(seriesName);
     },
-    appendSeries (newSeries, animate) {
-      return this.chart.appendSeries(newSeries, animate)
+    appendSeries(newSeries, animate) {
+      return this.chart.appendSeries(newSeries, animate);
     },
-    resetSeries () {
-      this.chart.resetSeries()
+    resetSeries() {
+      this.chart.resetSeries();
     },
+    zoomX(min, max) {
+      this.chart.zoomX(min, max)
+    },
     toggleDataPointSelection(seriesIndex, dataPointIndex) {
-      this.chart.toggleDataPointSelection(seriesIndex, dataPointIndex)
+      this.chart.toggleDataPointSelection(seriesIndex, dataPointIndex);
     },
-    appendData (newData) {
-      return this.chart.appendData(newData)
+    appendData(newData) {
+      return this.chart.appendData(newData);
     },
-    addText (options) {
-      this.chart.addText(options)
+    addText(options) {
+      this.chart.addText(options);
     },
-    dataURI () {
-      return this.chart.dataURI()
+    addImage(options) {
+      this.chart.addImage(options);
     },
+    addShape(options) {
+      this.chart.addShape(options);
+    },
+    dataURI() {
+      return this.chart.dataURI();
+    },
     setLocale(localeName) {
-      return this.chart.setLocale(localeName)
+      return this.chart.setLocale(localeName);
     },
-    addXaxisAnnotation (options, pushToMemory) {
-      this.chart.addXaxisAnnotation(options, pushToMemory)
+    addXaxisAnnotation(options, pushToMemory) {
+      this.chart.addXaxisAnnotation(options, pushToMemory);
     },
-    addYaxisAnnotation (options, pushToMemory) {
-      this.chart.addYaxisAnnotation(options, pushToMemory)
+    addYaxisAnnotation(options, pushToMemory) {
+      this.chart.addYaxisAnnotation(options, pushToMemory);
     },
-    addPointAnnotation (options, pushToMemory) {
-      this.chart.addPointAnnotation(options, pushToMemory)
+    addPointAnnotation(options, pushToMemory) {
+      this.chart.addPointAnnotation(options, pushToMemory);
     },
     removeAnnotation(id, options) {
-      this.chart.removeAnnotation(id, options)
+      this.chart.removeAnnotation(id, options);
     },
-    clearAnnotations () {
-      this.chart.clearAnnotations()
-    },
+    clearAnnotations() {
+      this.chart.clearAnnotations();
+    }
   }
-}
+};

typings/vue-apexcharts.d.ts

@@ -10,3 +10,3 @@ import Vue, { Component, ComponentOptions } from 'vue';
   options?: ApexOptions;
-  type?: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'rangeBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'radar';
+  type?: 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'rangeBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'radar' | 'polarArea';
   series: any;
@@ -25,6 +25,6 @@ width?: string | number;
   resetSeries(): void;
+  zoomX(min: number, max: number): void;
   toggleDataPointSelection(seriesIndex: number, dataPointIndex?: number): any;
   appendData(newData: any): Promise<void>;
   appendSeries(newSeries: any, animate?: boolean): Promise<void>;
-  addText(options: any, pushToMemory?: boolean, context?: any): void;
   addXaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;
@@ -31,0 +31,0 @@ addYaxisAnnotation(options: any, pushToMemory?: boolean, context?: any): void;

No alert changes

Improved metrics

Total package byte prevSize

529480

increased by0.09%

Lines of code

13408

increased by0.17%

No dependency changes