vccs 0.1.0 → 0.2.0

package/dist/es/events/useChartSynchronisation.mjs

@@ -1,47 +1,55 @@
-import { selectEventEmitter as e, selectSyncId as t, selectSyncMethod as n } from "../state/selectors/rootPropsSelectors.mjs";
-import { setSyncInteraction as r } from "../state/tooltipSlice.mjs";
-import { selectTooltipAxisTicks as i } from "../state/selectors/tooltipSelectors.mjs";
-import { useAppDispatch as a, useAppSelector as o } from "../state/hooks.mjs";
-import { useChartLayout as s, useViewBox as c } from "../context/chartLayoutContext.mjs";
-import { createEventEmitter as l } from "../state/optionsSlice.mjs";
-import { setDataStartEndIndexes as u } from "../state/chartDataSlice.mjs";
-import { BRUSH_SYNC_EVENT as d, TOOLTIP_SYNC_EVENT as f, eventCenter as p } from "../utils/events.mjs";
-import { onMounted as m, watch as h } from "vue";
+import { selectEventEmitter, selectSyncId, selectSyncMethod } from "../state/selectors/rootPropsSelectors.mjs";
+import { setSyncInteraction } from "../state/tooltipSlice.mjs";
+import { selectTooltipAxisTicks } from "../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../state/hooks.mjs";
+import { useChartLayout, useViewBox } from "../context/chartLayoutContext.mjs";
+import { createEventEmitter } from "../state/optionsSlice.mjs";
+import { setDataStartEndIndexes } from "../state/chartDataSlice.mjs";
+import { BRUSH_SYNC_EVENT, TOOLTIP_SYNC_EVENT, eventCenter } from "../utils/events.mjs";
+import { onMounted, watch } from "vue";
 //#region src/events/useChartSynchronisation.tsx
-function g() {
-	let l = o(t), u = o(e), d = a(), m = o(n), g = o(i), _ = s(), v = c();
-	h([
-		o((e) => e.rootProps.class),
-		u,
-		l,
-		m,
-		g,
-		_,
-		v
-	], (e, t, n) => {
-		if (l.value == null) return;
-		let i = (e, t, n) => {
-			if (u.value === n || l.value !== e) return;
-			if (m.value === "index") {
-				d(t);
+function useTooltipSyncEventsListener() {
+	const mySyncId = useAppSelector(selectSyncId);
+	const myEventEmitter = useAppSelector(selectEventEmitter);
+	const dispatch = useAppDispatch();
+	const syncMethod = useAppSelector(selectSyncMethod);
+	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
+	const layout = useChartLayout();
+	const viewBox = useViewBox();
+	watch([
+		useAppSelector((state) => state.rootProps.class),
+		myEventEmitter,
+		mySyncId,
+		syncMethod,
+		tooltipTicks,
+		layout,
+		viewBox
+	], (v, o, onCleanup) => {
+		if (mySyncId.value == null) return;
+		const listener = (incomingSyncId, action, emitter) => {
+			if (myEventEmitter.value === emitter) return;
+			if (mySyncId.value !== incomingSyncId) return;
+			if (syncMethod.value === "index") {
+				dispatch(action);
 				return;
 			}
-			if (g.value == null) return;
-			let i;
-			if (typeof m.value == "function") {
-				let e = {
-					activeTooltipIndex: t.payload.index == null ? void 0 : Number(t.payload.index),
-					isTooltipActive: t.payload.active,
-					activeIndex: t.payload.index == null ? void 0 : Number(t.payload.index),
-					activeLabel: t.payload.label,
-					activeDataKey: t.payload.dataKey,
-					activeCoordinate: t.payload.coordinate
-				}, n = m.value(g.value, e);
-				i = g.value[n];
-			} else m.value === "value" && (i = g.value.find((e) => String(e.value) === t.payload.label));
-			if (i == null || t.payload.active === !1) {
-				d(r({
-					active: !1,
+			if (tooltipTicks.value == null) return;
+			let activeTick;
+			if (typeof syncMethod.value === "function") {
+				const syncMethodParam = {
+					activeTooltipIndex: action.payload.index == null ? void 0 : Number(action.payload.index),
+					isTooltipActive: action.payload.active,
+					activeIndex: action.payload.index == null ? void 0 : Number(action.payload.index),
+					activeLabel: action.payload.label,
+					activeDataKey: action.payload.dataKey,
+					activeCoordinate: action.payload.coordinate
+				};
+				const activeTooltipIndex = syncMethod.value(tooltipTicks.value, syncMethodParam);
+				activeTick = tooltipTicks.value[activeTooltipIndex];
+			} else if (syncMethod.value === "value") activeTick = tooltipTicks.value.find((tick) => String(tick.value) === action.payload.label);
+			if (activeTick == null || action.payload.active === false) {
+				dispatch(setSyncInteraction({
+					active: false,
 					coordinate: void 0,
 					dataKey: void 0,
 					index: null,
@@ -49,40 +57,57 @@ function g() {
 				}));
 				return;
 			}
-			let { x: a, y: o } = t.payload.coordinate, s = Math.min(a, v.value?.x + v.value?.width), c = Math.min(o, v.value?.y + v.value?.height), f = {
-				x: _.value === "horizontal" ? i.coordinate : s,
-				y: _.value === "horizontal" ? c : i.coordinate
+			const { x, y } = action.payload.coordinate;
+			const validateChartX = Math.min(x, viewBox.value?.x + viewBox.value?.width);
+			const validateChartY = Math.min(y, viewBox.value?.y + viewBox.value?.height);
+			const activeCoordinate = {
+				x: layout.value === "horizontal" ? activeTick.coordinate : validateChartX,
+				y: layout.value === "horizontal" ? validateChartY : activeTick.coordinate
 			};
-			d(r({
-				active: t.payload.active,
-				coordinate: f,
-				dataKey: t.payload.dataKey,
-				index: String(i.index),
-				label: t.payload.label
+			dispatch(setSyncInteraction({
+				active: action.payload.active,
+				coordinate: activeCoordinate,
+				dataKey: action.payload.dataKey,
+				index: String(activeTick.index),
+				label: action.payload.label
 			}));
 		};
-		p.on(f, i), n(() => {
-			p.off(f, i);
+		eventCenter.on(TOOLTIP_SYNC_EVENT, listener);
+		onCleanup(() => {
+			eventCenter.off(TOOLTIP_SYNC_EVENT, listener);
 		});
 	});
 }
-function _() {
-	let n = o(t), r = o(e), i = a();
-	h([n, r], (e, t, a) => {
-		if (n == null) return;
-		let o = (e, t, a) => {
-			r.value !== a && n.value === e && i(u(t));
+function useBrushSyncEventsListener() {
+	const mySyncId = useAppSelector(selectSyncId);
+	const myEventEmitter = useAppSelector(selectEventEmitter);
+	const dispatch = useAppDispatch();
+	watch([mySyncId, myEventEmitter], (v, o, onCleanup) => {
+		if (mySyncId == null) return;
+		const listener = (incomingSyncId, action, emitter) => {
+			if (myEventEmitter.value === emitter) return;
+			if (mySyncId.value === incomingSyncId) dispatch(setDataStartEndIndexes(action));
 		};
-		p.on(d, o), a(() => {
-			p.off(d, o);
+		eventCenter.on(BRUSH_SYNC_EVENT, listener);
+		onCleanup(() => {
+			eventCenter.off(BRUSH_SYNC_EVENT, listener);
 		});
 	});
 }
-function v() {
-	let e = a();
-	m(() => {
-		e(l());
-	}), g(), _();
+/**
+* Will receive synchronisation events from other charts.
+*
+* Reads syncMethod from state and decides how to synchronise the tooltip based on that.
+*
+* @returns void
+*/
+function useSynchronisedEventsFromOtherCharts() {
+	const dispatch = useAppDispatch();
+	onMounted(() => {
+		dispatch(createEventEmitter());
+	});
+	useTooltipSyncEventsListener();
+	useBrushSyncEventsListener();
 }
 //#endregion
-export { v as useSynchronisedEventsFromOtherCharts };
+export { useSynchronisedEventsFromOtherCharts };

package/dist/es/hooks/useIsAnimating.mjs

@@ -0,0 +1,28 @@
+import { computed, ref, watch } from "vue";
+//#region src/hooks/useIsAnimating.ts
+/**
+* Tracks whether a component is currently animating.
+*
+* When `isAnimationActive` is `false`, always returns `false` regardless of
+* internal state — this ensures `isAnimationActive={false}` immediately
+* disables all animation-gated rendering (e.g. deferred LabelList).
+*
+* When `isAnimationActive` is `true`, starts as `true` and can be set to
+* `false` via the returned ref (typically on animation end).
+*
+* Re-entering `isAnimationActive=true` resets internal state to `true`.
+*/
+function useIsAnimating(isAnimationActive) {
+	const internal = ref(isAnimationActive());
+	watch(isAnimationActive, (active) => {
+		if (active) internal.value = true;
+	});
+	return computed({
+		get: () => isAnimationActive() && internal.value,
+		set: (val) => {
+			internal.value = val;
+		}
+	});
+}
+//#endregion
+export { useIsAnimating };

package/dist/es/hooks/useSetupGraphicalItem.mjs

@@ -1,57 +1,66 @@
-import { useIsPanorama as e } from "../context/PanoramaContextProvider.mjs";
-import { getTooltipNameProp as t } from "../utils/chart.mjs";
-import { SetCartesianGraphicalItem as n } from "../state/SetGraphicalItem.mjs";
-import { SetLegendPayload as r } from "../state/SetLegendPayload.mjs";
-import { SetTooltipEntrySettings as i } from "../state/SetTooltipEntrySettings.mjs";
-import { computed as a, useAttrs as o } from "vue";
+import { useIsPanorama } from "../context/PanoramaContextProvider.mjs";
+import { getTooltipNameProp } from "../utils/chart.mjs";
+import { SetCartesianGraphicalItem } from "../state/SetGraphicalItem.mjs";
+import { SetLegendPayload } from "../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings.mjs";
+import { computed, useAttrs } from "vue";
 //#region src/hooks/useSetupGraphicalItem.ts
-function s(e, t) {
-	return e && e !== "none" ? e : t;
+function getLegendItemColor(stroke, fill) {
+	return stroke && stroke !== "none" ? stroke : fill;
 }
-function c(e, t, n) {
-	return e === "bar" ? n : s(t, n);
+function getItemColor(type, stroke, fill) {
+	if (type === "bar") return fill;
+	return getLegendItemColor(stroke, fill);
 }
-function l(s, l, d) {
-	let f = o(), p = e(), m = a(() => [{
-		inactive: s.hide,
-		dataKey: s.dataKey,
-		type: s.legendType,
-		color: c(l, f.stroke ?? s.stroke, f.fill ?? s.fill),
-		value: t(s.name, s.dataKey),
-		payload: { ...s }
-	}]);
-	n(a(() => ({
-		...s,
-		isPanorama: p,
-		type: l,
-		errorBars: d?.errorBars?.value
-	}))), r(m), d?.skipTooltip || i({
-		fn: u,
-		args: a(() => ({
-			...s,
-			...f,
-			_itemType: l
+function useSetupGraphicalItem(props, type, options) {
+	const attrs = useAttrs();
+	const isPanorama = useIsPanorama();
+	const legendPayload = computed(() => {
+		return [{
+			inactive: props.hide,
+			dataKey: props.dataKey,
+			type: props.legendType,
+			color: getItemColor(type, attrs.stroke ?? props.stroke, attrs.fill ?? props.fill),
+			value: getTooltipNameProp(props.name, props.dataKey),
+			payload: { ...props }
+		}];
+	});
+	SetCartesianGraphicalItem(computed(() => {
+		return {
+			...props,
+			isPanorama,
+			type,
+			errorBars: options?.errorBars?.value
+		};
+	}));
+	SetLegendPayload(legendPayload);
+	if (!options?.skipTooltip) SetTooltipEntrySettings({
+		fn: getTooltipEntrySettings,
+		args: computed(() => ({
+			...props,
+			...attrs,
+			_itemType: type
 		}))
 	});
 }
-function u(e) {
-	let { dataKey: n, data: r, stroke: i, fill: a, name: o, hide: s, unit: l, _itemType: u } = e;
+function getTooltipEntrySettings(props) {
+	const { dataKey, data, stroke, fill, name, hide, unit, _itemType } = props;
 	return {
-		dataDefinedOnItem: r,
+		dataDefinedOnItem: data,
 		positions: void 0,
 		settings: {
-			stroke: i,
-			strokeWidth: e["stroke-width"],
-			fill: a,
-			dataKey: n,
+			stroke,
+			strokeWidth: props["stroke-width"],
+			fill,
+			dataKey,
 			nameKey: void 0,
-			name: t(o, n),
-			hide: s,
-			type: e.tooltipType,
-			color: c(u, i, a),
-			unit: l
+			name: getTooltipNameProp(name, dataKey),
+			hide,
+			type: props.tooltipType,
+			color: getItemColor(_itemType, stroke, fill),
+			unit
 		}
 	};
 }
 //#endregion
-export { l as useSetupGraphicalItem };
+export { useSetupGraphicalItem };

package/dist/es/index.mjs

@@ -1,42 +1,46 @@
-import { Curve as e, CurveVueProps as t, getPath as n } from "./shape/Curve.mjs";
-import { Dot as r } from "./shape/Dot.mjs";
-import { Label as i } from "./components/label/Label.mjs";
-import { LabelList as a } from "./components/label/LabelList.mjs";
-import { Area as o } from "./cartesian/area/Area.mjs";
-import { CartesianAxis as s } from "./cartesian/cartesian-axis/CartesianAxis.mjs";
-import { XAxis as c } from "./cartesian/axis/XAxis.mjs";
-import { YAxis as l } from "./cartesian/axis/YAxis.mjs";
-import { Rectangle as u } from "./shape/Rectangle.mjs";
-import { createErrorBarRegistry as d, provideErrorBarContext as f, provideErrorBarRegistry as p, useErrorBarContext as m, useErrorBarRegistry as h } from "./cartesian/error-bar/ErrorBarContext.mjs";
-import { Cell as g } from "./components/Cell.mjs";
-import { Bar as _ } from "./cartesian/bar/Bar.mjs";
-import { CartesianGrid as v } from "./cartesian/cartesian-grid/CartesianGrid.mjs";
-import { ErrorBar as y, ErrorBarVueProps as b } from "./cartesian/error-bar/ErrorBar.mjs";
-import { LineContextKey as x, provideLineContext as S, useLine as C, useLineContext as w } from "./cartesian/line/hooks/useLine.mjs";
-import { Line as T } from "./cartesian/line/Line.mjs";
-import { ReferenceArea as E } from "./cartesian/reference-area/ReferenceArea.mjs";
-import { ReferenceLine as D } from "./cartesian/reference-line/ReferenceLine.mjs";
-import { Symbols as O } from "./shape/Symbols.mjs";
-import { Scatter as k } from "./cartesian/scatter/Scatter.mjs";
-import { ZAxis as A } from "./cartesian/z-axis/ZAxis.mjs";
-import { AreaChart as j } from "./chart/AreaChart.mjs";
-import { BarChart as M } from "./chart/BarChart.mjs";
-import { ComposedChart as N } from "./chart/ComposedChart.mjs";
-import { LineChart as P } from "./chart/LineChart.mjs";
-import { PieChart as F } from "./chart/PieChart.mjs";
-import { RadarChart as I } from "./chart/RadarChart.mjs";
-import { ScatterChart as L } from "./chart/ScatterChart.mjs";
-import { RadialBarChart as R } from "./chart/RadialBarChart.mjs";
-import z from "./container/ResponsiveContainer.mjs";
-import B from "./components/legend/Legend.mjs";
-import { Cross as V } from "./shape/Cross.mjs";
-import { Sector as H } from "./shape/Sector.mjs";
-import U, { getUniqPayload as W } from "./components/Tooltip.mjs";
-import { PieVueProps as G } from "./polar/pie/type.mjs";
-import { Pie as K } from "./polar/pie/Pie.mjs";
-import { Radar as q } from "./polar/radar/Radar.mjs";
-import { PolarGrid as J } from "./polar/radar/PolarGrid.mjs";
-import { PolarAngleAxis as Y } from "./polar/radar/PolarAngleAxis.mjs";
-import { PolarRadiusAxis as X } from "./polar/radar/PolarRadiusAxis.mjs";
-import { RadialBar as Z } from "./polar/radial-bar/RadialBar.mjs";
-export { o as Area, j as AreaChart, _ as Bar, M as BarChart, s as CartesianAxis, v as CartesianGrid, g as Cell, N as ComposedChart, V as Cross, e as Curve, t as CurveVueProps, r as Dot, y as ErrorBar, b as ErrorBarVueProps, i as Label, a as LabelList, B as Legend, T as Line, P as LineChart, x as LineContextKey, K as Pie, F as PieChart, G as PieVueProps, Y as PolarAngleAxis, J as PolarGrid, X as PolarRadiusAxis, q as Radar, I as RadarChart, Z as RadialBar, R as RadialBarChart, u as Rectangle, E as ReferenceArea, D as ReferenceLine, z as ResponsiveContainer, k as Scatter, L as ScatterChart, H as Sector, O as Symbols, U as Tooltip, c as XAxis, l as YAxis, A as ZAxis, d as createErrorBarRegistry, n as getPath, W as getUniqPayload, f as provideErrorBarContext, p as provideErrorBarRegistry, S as provideLineContext, m as useErrorBarContext, h as useErrorBarRegistry, C as useLine, w as useLineContext };
+import { Curve, CurveVueProps, getPath } from "./shape/Curve.mjs";
+import { Dot } from "./shape/Dot.mjs";
+import { Label } from "./components/label/Label.mjs";
+import { LabelList } from "./components/label/LabelList.mjs";
+import { Area } from "./cartesian/area/Area.mjs";
+import { CartesianAxis } from "./cartesian/cartesian-axis/CartesianAxis.mjs";
+import { XAxis } from "./cartesian/axis/XAxis.mjs";
+import { YAxis } from "./cartesian/axis/YAxis.mjs";
+import { Rectangle } from "./shape/Rectangle.mjs";
+import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry, useErrorBarContext, useErrorBarRegistry } from "./cartesian/error-bar/ErrorBarContext.mjs";
+import { Cell } from "./components/Cell.mjs";
+import { Bar } from "./cartesian/bar/Bar.mjs";
+import { CartesianGrid } from "./cartesian/cartesian-grid/CartesianGrid.mjs";
+import { ErrorBar, ErrorBarVueProps } from "./cartesian/error-bar/ErrorBar.mjs";
+import { LineContextKey, provideLineContext, useLine, useLineContext } from "./cartesian/line/hooks/useLine.mjs";
+import { Line } from "./cartesian/line/Line.mjs";
+import { ReferenceArea } from "./cartesian/reference-area/ReferenceArea.mjs";
+import { ReferenceLine } from "./cartesian/reference-line/ReferenceLine.mjs";
+import { Symbols } from "./shape/Symbols.mjs";
+import { Scatter } from "./cartesian/scatter/Scatter.mjs";
+import { ZAxis } from "./cartesian/z-axis/ZAxis.mjs";
+import { Trapezoid } from "./shape/Trapezoid.mjs";
+import { FunnelVueProps } from "./cartesian/funnel/type.mjs";
+import { Funnel } from "./cartesian/funnel/Funnel.mjs";
+import { AreaChart } from "./chart/AreaChart.mjs";
+import { BarChart } from "./chart/BarChart.mjs";
+import { ComposedChart } from "./chart/ComposedChart.mjs";
+import { LineChart } from "./chart/LineChart.mjs";
+import { PieChart } from "./chart/PieChart.mjs";
+import { RadarChart } from "./chart/RadarChart.mjs";
+import { ScatterChart } from "./chart/ScatterChart.mjs";
+import { RadialBarChart } from "./chart/RadialBarChart.mjs";
+import { FunnelChart } from "./chart/FunnelChart.mjs";
+import ResponsiveContainer_default from "./container/ResponsiveContainer.mjs";
+import Legend_default from "./components/legend/Legend.mjs";
+import { Cross } from "./shape/Cross.mjs";
+import { Sector } from "./shape/Sector.mjs";
+import Tooltip, { getUniqPayload } from "./components/Tooltip.mjs";
+import { PieVueProps } from "./polar/pie/type.mjs";
+import { Pie } from "./polar/pie/Pie.mjs";
+import { Radar } from "./polar/radar/Radar.mjs";
+import { PolarGrid } from "./polar/radar/PolarGrid.mjs";
+import { PolarAngleAxis } from "./polar/radar/PolarAngleAxis.mjs";
+import { PolarRadiusAxis } from "./polar/radar/PolarRadiusAxis.mjs";
+import { RadialBar } from "./polar/radial-bar/RadialBar.mjs";
+export { Area, AreaChart, Bar, BarChart, CartesianAxis, CartesianGrid, Cell, ComposedChart, Cross, Curve, CurveVueProps, Dot, ErrorBar, ErrorBarVueProps, Funnel, FunnelChart, FunnelVueProps, Label, LabelList, Legend_default as Legend, Line, LineChart, LineContextKey, Pie, PieChart, PieVueProps, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceLine, ResponsiveContainer_default as ResponsiveContainer, Scatter, ScatterChart, Sector, Symbols, Tooltip, Trapezoid, XAxis, YAxis, ZAxis, createErrorBarRegistry, getPath, getUniqPayload, provideErrorBarContext, provideErrorBarRegistry, provideLineContext, useErrorBarContext, useErrorBarRegistry, useLine, useLineContext };