@oiij/v-charts/dist/index.js

A Vue Composable for VCharts

import { VChart, registerAllMarks, registerAnimate, registerAreaChart, registerBarChart, registerBrush, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianTimeAxis, registerContinuousLegend, registerCustomMark, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerLineChart, registerMarkArea, registerMarkLine, registerMarkPoint, registerPieChart, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerScrollBar, registerTitle, registerTooltip } from "@visactor/vchart";
import { createEventHook, useDebounceFn, useElementSize } from "@vueuse/core";
import { onUnmounted, ref, shallowRef, toValue, watch, watchEffect } from "vue";

//#region src/index.ts
const registerBase = [
	registerDiscreteLegend,
	registerContinuousLegend,
	registerCustomMark,
	registerAllMarks,
	registerTitle,
	registerTooltip,
	registerDomTooltipHandler
];
const registerPolar = [
	registerPolarLinearAxis,
	registerPolarBandAxis,
	registerPolarCrossHair,
	registerBrush,
	registerDataZoom,
	...registerBase
];
const registerCartesian = [
	registerCartesianLinearAxis,
	registerCartesianBandAxis,
	registerCartesianTimeAxis,
	registerCartesianLogAxis,
	registerCartesianCrossHair,
	registerBrush,
	registerDataZoom,
	registerMarkArea,
	registerMarkLine,
	registerMarkPoint,
	registerScrollBar,
	...registerBase
];
const baseChat = [
	registerLineChart,
	registerAreaChart,
	registerBarChart,
	registerPieChart
];
VChart.useRegisters([
	...registerCartesian,
	...baseChat,
	registerAnimate
]);
function register(comps) {
	VChart.useRegisters(comps);
}
function useVCharts(options, darkMode, initOptions) {
	const domRef = ref();
	const vChart = shallowRef(null);
	const optionsRef = ref(toValue(options));
	watchEffect(() => {
		optionsRef.value = toValue(options);
	});
	const { width, height } = useElementSize(domRef);
	const onRenderEvent = createEventHook();
	const onUpdateEvent = createEventHook();
	const onResizeEvent = createEventHook();
	const onDisposeEvent = createEventHook();
	function setOption(spec) {
		if (vChart.value) {
			vChart.value.updateSpec(spec);
			onUpdateEvent.trigger(spec);
		}
	}
	function render() {
		if (domRef.value) {
			if (vChart.value) {
				resize();
				return;
			}
			const theme = darkMode?.value ? "dark" : "light";
			if (optionsRef.value) {
				vChart.value = new VChart(optionsRef.value, {
					dom: domRef.value,
					theme,
					...initOptions
				});
				vChart.value.renderSync();
				onRenderEvent.trigger(vChart.value);
			}
		}
	}
	const renderDebounce = useDebounceFn(render, 100);
	function resize() {
		vChart.value?.resizeSync(width.value, height.value);
		onResizeEvent.trigger({
			width: width.value,
			height: height.value
		});
	}
	const resizeDebounce = useDebounceFn(resize, 100);
	function destroy() {
		vChart.value?.release();
		vChart.value = null;
		onDisposeEvent.trigger();
	}
	watch([width, height], ([width$1, height$1]) => {
		if (width$1 > 0 && height$1 > 0) if (vChart.value) resizeDebounce();
		else renderDebounce();
	});
	watch(optionsRef, (v) => {
		if (v) if (vChart.value) setOption(v);
		else render();
	});
	watchEffect(() => {
		destroy();
		render();
	});
	onUnmounted(() => {
		destroy();
	});
	return {
		domRef,
		vChart,
		options: optionsRef,
		onRender: onRenderEvent.on,
		onUpdate: onUpdateEvent.on,
		onResize: onResizeEvent.on,
		onDispose: onDisposeEvent.on
	};
}

//#endregion
export { baseChat, register, registerBase, registerCartesian, registerPolar, useVCharts };