Socket
Socket
Sign inDemoInstall

vue3-apexcharts

Package Overview
Dependencies
30
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.3.0 to 1.4.0

469

dist/vue3-apexcharts.common.js

@@ -235,282 +235,279 @@ module.exports =

const events = [
"animationEnd",
"beforeMount",
"mounted",
"updated",
"click",
"mouseMove",
"legendClick",
"markerClick",
"selection",
"dataPointSelection",
"dataPointMouseEnter",
"dataPointMouseLeave",
"beforeZoom",
"beforeResetZoom",
"zoomed",
"scrolled",
"scrolled",
"animationEnd",
"beforeMount",
"mounted",
"updated",
"click",
"mouseMove",
"legendClick",
"markerClick",
"selection",
"dataPointSelection",
"dataPointMouseEnter",
"dataPointMouseLeave",
"beforeZoom",
"beforeResetZoom",
"zoomed",
"scrolled",
"scrolled"
];
const vueApexcharts = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({
name: "apexchart",
props: {
options: {
type: Object,
},
type: {
type: String,
},
series: {
type: Array,
required: true,
},
width: {
default: "100%",
},
height: {
default: "auto",
},
},
name: "apexchart",
props: {
options: {
type: Object
},
type: {
type: String
},
series: {
type: Array,
required: true
},
width: {
default: "100%"
},
height: {
default: "auto"
}
},
// events emitted by this component
emits: [...events],
// events emitted by this component
emits: events,
setup(props, { emit }) {
const el = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(null);
const chart = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(null);
setup(props, { emit }) {
const __el = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(null);
const chart = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(null);
const isObject = (item) => {
return (
item && typeof item === "object" && !Array.isArray(item) && item != null
);
};
const isObject = item => {
return item && typeof item === "object" && !Array.isArray(item) && item != null;
};
const extend = (target, source) => {
if (typeof Object.assign !== "function") {
(function() {
Object.assign = function(target) {
// We must check against these specific cases.
if (target === undefined || target === null) {
throw new TypeError("Cannot convert undefined or null to object");
}
const extend = (target, source) => {
if (typeof Object.assign !== "function") {
(function() {
Object.assign = function(target) {
// We must check against these specific cases.
if (target === undefined || target === null) {
throw new TypeError("Cannot convert undefined or null to object");
}
let output = Object(target);
for (let index = 1; index < arguments.length; index++) {
let source = arguments[index];
if (source !== undefined && source !== null) {
for (let nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
})();
}
let output = Object(target);
for (let index = 1; index < arguments.length; index++) {
let source = arguments[index];
if (source !== undefined && source !== null) {
for (let nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
})();
}
let output = Object.assign({}, target);
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach((key) => {
if (isObject(source[key])) {
if (!(key in target)) {
Object.assign(output, {
[key]: source[key],
});
} else {
output[key] = extend(target[key], source[key]);
}
} else {
Object.assign(output, {
[key]: source[key],
});
}
});
}
return output;
};
let output = Object.assign({}, target);
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach(key => {
if (isObject(source[key])) {
if (!(key in target)) {
Object.assign(output, {
[key]: source[key]
});
} else {
output[key] = extend(target[key], source[key]);
}
} else {
Object.assign(output, {
[key]: source[key]
});
}
});
}
return output;
};
const init = async () => {
await Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])();
const init = async () => {
await Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])();
const newOptions = {
chart: {
type: props.type || props.options.chart.type || "line",
height: props.height,
width: props.width,
events: {},
},
series: props.series,
};
const newOptions = {
chart: {
type: props.type || props.options.chart.type || "line",
height: props.height,
width: props.width,
events: {}
},
series: props.series
};
// emit events to the parent component
// to allow for two-way data binding
events.forEach((event) => {
let callback = (...args) => emit(event, ...args); // args => chartContext, options
newOptions.chart.events[event] = callback;
});
// emit events to the parent component
// to allow for two-way data binding
events.forEach(event => {
let callback = (...args) => emit(event, ...args); // args => chartContext, options
newOptions.chart.events[event] = callback;
});
const config = extend(props.options, newOptions);
chart.value = new external_root_ApexCharts_commonjs_apexcharts_commonjs2_apexcharts_default.a(el.value, config);
return chart.value.render();
};
const config = extend(props.options, newOptions);
chart.value = new external_root_ApexCharts_commonjs_apexcharts_commonjs2_apexcharts_default.a(__el.value, config);
return chart.value.render();
};
const refresh = () => {
destroy();
return init();
};
const refresh = () => {
destroy();
return init();
};
const destroy = () => {
chart.value.destroy();
};
const destroy = () => {
chart.value.destroy();
};
const updateSeries = (newSeries, animate) => {
return chart.value.updateSeries(newSeries, animate);
};
const updateSeries = (newSeries, animate) => {
return chart.value.updateSeries(newSeries, animate);
};
const updateOptions = (
newOptions,
redrawPaths,
animate,
updateSyncedCharts
) => {
return chart.value.updateOptions(
newOptions,
redrawPaths,
animate,
updateSyncedCharts
);
};
const updateOptions = (newOptions, redrawPaths, animate, updateSyncedCharts) => {
return chart.value.updateOptions(newOptions, redrawPaths, animate, updateSyncedCharts);
};
const toggleSeries = (seriesName) => {
return chart.value.toggleSeries(seriesName);
};
const toggleSeries = seriesName => {
return chart.value.toggleSeries(seriesName);
};
const showSeries = (seriesName) => {
chart.value.showSeries(seriesName);
};
const showSeries = seriesName => {
chart.value.showSeries(seriesName);
};
const hideSeries = (seriesName) => {
chart.value.hideSeries(seriesName);
};
const hideSeries = seriesName => {
chart.value.hideSeries(seriesName);
};
const appendSeries = (newSeries, animate) => {
return chart.value.appendSeries(newSeries, animate);
};
const appendSeries = (newSeries, animate) => {
return chart.value.appendSeries(newSeries, animate);
};
const resetSeries = () => {
chart.value.resetSeries();
};
const resetSeries = () => {
chart.value.resetSeries();
};
const toggleDataPointSelection = (seriesIndex, dataPointIndex) => {
chart.value.toggleDataPointSelection(seriesIndex, dataPointIndex);
};
const toggleDataPointSelection = (seriesIndex, dataPointIndex) => {
chart.value.toggleDataPointSelection(seriesIndex, dataPointIndex);
};
const appendData = (newData) => {
return chart.value.appendData(newData);
};
const appendData = newData => {
return chart.value.appendData(newData);
};
const addText = (options) => {
chart.value.addText(options);
};
const zoomX = (start, end) => {
return chart.value.zoomX(start, end);
};
const dataURI = () => {
return chart.value.dataURI();
};
const dataURI = () => {
return chart.value.dataURI();
};
const setLocale = (localeName) => {
return chart.value.setLocale(localeName);
};
const setLocale = localeName => {
return chart.value.setLocale(localeName);
};
const addXaxisAnnotation = (options, pushToMemory) => {
chart.value.addXaxisAnnotation(options, pushToMemory);
};
const addXaxisAnnotation = (options, pushToMemory) => {
chart.value.addXaxisAnnotation(options, pushToMemory);
};
const addYaxisAnnotation = (options, pushToMemory) => {
chart.value.addYaxisAnnotation(options, pushToMemory);
};
const addYaxisAnnotation = (options, pushToMemory) => {
chart.value.addYaxisAnnotation(options, pushToMemory);
};
const addPointAnnotation = (options, pushToMemory) => {
chart.value.addPointAnnotation(options, pushToMemory);
};
const addPointAnnotation = (options, pushToMemory) => {
chart.value.addPointAnnotation(options, pushToMemory);
};
const removeAnnotation = (id, options) => {
chart.value.removeAnnotation(id, options);
};
const removeAnnotation = (id, options) => {
chart.value.removeAnnotation(id, options);
};
const clearAnnotations = () => {
chart.value.clearAnnotations();
};
const clearAnnotations = () => {
chart.value.clearAnnotations();
};
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeMount"])(() => {
window.ApexCharts = external_root_ApexCharts_commonjs_apexcharts_commonjs2_apexcharts_default.a;
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeMount"])(() => {
window.ApexCharts = external_root_ApexCharts_commonjs_apexcharts_commonjs2_apexcharts_default.a;
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onMounted"])(() => {
init();
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onMounted"])(() => {
__el.value = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])().proxy.$el;
init();
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeUnmount"])(() => {
if (!chart.value) {
return;
}
destroy();
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeUnmount"])(() => {
if (!chart.value) {
return;
}
destroy();
});
const reactiveProps = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(props);
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(
reactiveProps.options,
() => {
if (!chart.value && props.options) {
init();
} else {
chart.value.updateOptions(props.options);
}
}
);
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(reactiveProps.options, () => {
if (!chart.value && props.options) {
init();
} else {
chart.value.updateOptions(props.options);
}
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(
reactiveProps.series,
() => {
if (!chart.value && props.series) {
init();
} else {
chart.value.updateSeries(props.series);
}
},
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(
reactiveProps.series,
() => {
if (!chart.value && props.series) {
init();
} else {
chart.value.updateSeries(props.series);
}
},
{ deep: true }
);
);
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(
reactiveProps.type,
() => {
refresh();
}
);
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(reactiveProps.type, () => {
refresh();
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(
reactiveProps.width,
() => {
refresh();
}
);
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(reactiveProps.width, () => {
refresh();
});
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(
reactiveProps.height,
() => {
refresh();
}
);
Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(reactiveProps.height, () => {
refresh();
});
return { el, chart };
},
return {
chart,
init,
refresh,
destroy,
updateOptions,
updateSeries,
toggleSeries,
showSeries,
hideSeries,
resetSeries,
zoomX,
toggleDataPointSelection,
appendData,
appendSeries,
addXaxisAnnotation,
addYaxisAnnotation,
addPointAnnotation,
removeAnnotation,
clearAnnotations,
dataURI
};
},
render() {
return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["h"])("div", {
class: "vue-apexcharts",
ref: "el",
});
},
render() {
return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["h"])("div", {
class: "vue-apexcharts",
});
}
});

@@ -517,0 +514,0 @@

6

package.json
{
"name": "vue3-apexcharts",
"version": "1.3.0",
"version": "1.4.0",
"main": "./dist/vue3-apexcharts.common.js",

@@ -47,3 +47,3 @@ "private": false,

"eslint-plugin-vue": "^7.0.0-0",
"apexcharts": "^3.22.1",
"apexcharts": "^3.26.1",
"typescript": "~3.9.3",

@@ -54,2 +54,2 @@ "vue": "^3.0.0",

}
}
}

16

README.md

@@ -50,2 +50,17 @@ <p align="center"><img src="https://apexcharts.com/media/vue-apexcharts.png"></p>

To provide a `$apexcharts` reference inside Vue instance
```ts
import ApexCharts from 'apexcharts';
app.config.globalProperties.$apexcharts = ApexCharts;
// Add this when into a TypeScript codebase
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$apexcharts: typeof ApexCharts;
}
}
```
To create a basic bar chart with minimal configuration, write as follows:

@@ -211,3 +226,2 @@

| <a href="https://apexcharts.com/docs/methods/#appendData">appendData</a> | Allows you to append new data to the series array. |
| <a href="https://apexcharts.com/docs/methods/#addtext">addText</a> | The addText() method can be used to draw text after chart is rendered. |
| <a href="https://apexcharts.com/docs/methods/#addxaxisannotation">addXaxisAnnotation</a> | Draw x-axis annotations after chart is rendered. |

@@ -214,0 +228,0 @@ | <a href="https://apexcharts.com/docs/methods/#addyaxisannotation">addYaxisAnnotation</a> | Draw y-axis annotations after chart is rendered. |

36

src/vue3-apexcharts.js

@@ -6,2 +6,3 @@ /* eslint-disable */

ref,
getCurrentInstance,
onMounted,

@@ -60,6 +61,6 @@ onBeforeUnmount,

// events emitted by this component
emits: [...events],
emits: events,
setup(props, { emit }) {
const el = ref(null);
const __el = ref(null);
const chart = ref(null);

@@ -138,3 +139,3 @@

const config = extend(props.options, newOptions);
chart.value = new ApexCharts(el.value, config);
chart.value = new ApexCharts(__el.value, config);
return chart.value.render();

@@ -188,4 +189,4 @@ };

const addText = options => {
chart.value.addText(options);
const zoomX = (start, end) => {
return chart.value.zoomX(start, end);
};

@@ -226,2 +227,3 @@

onMounted(() => {
__el.value = getCurrentInstance().proxy.$el;
init();

@@ -270,3 +272,24 @@ });

return { el, chart };
return {
chart,
init,
refresh,
destroy,
updateOptions,
updateSeries,
toggleSeries,
showSeries,
hideSeries,
resetSeries,
zoomX,
toggleDataPointSelection,
appendData,
appendSeries,
addXaxisAnnotation,
addYaxisAnnotation,
addPointAnnotation,
removeAnnotation,
clearAnnotations,
dataURI
};
},

@@ -277,3 +300,2 @@

class: "vue-apexcharts",
ref: "el"
});

@@ -280,0 +302,0 @@ }

15

typings/vue-apexcharts.d.ts

@@ -1,6 +0,5 @@

import Vue, { Component, ComponentOptions } from 'vue';
import { PluginObject } from 'vue/types/plugin';
import ApexCharts, { ApexOptions } from 'apexcharts';
import { Component, ComponentOptions, ComponentPublicInstance, Plugin } from 'vue';
interface VueApexChartsComponent extends Vue {
export interface VueApexChartsComponent extends ComponentPublicInstance {
// data

@@ -36,10 +35,4 @@ readonly chart?: ApexCharts;

declare const VueApexCharts: Component & ComponentOptions<Vue> & PluginObject<any>;
declare const VueApexCharts: Component & ComponentOptions<VueApexChartsComponent> & Plugin;
export default VueApexCharts;
declare module 'vue/types/vue' {
interface Vue {
$apexcharts: typeof ApexCharts;
}
}
export default VueApexCharts;
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc