vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/{state/selectors/pieSelectors.mjs → core/pie.mjs}

@@ -1,47 +1,10 @@
-import { isNumber } from "../../utils/validate.mjs";
-import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
-import { getPercentValue, mathSign } from "../../utils/data.mjs";
-import { selectChartOffset } from "./selectChartOffset.mjs";
-import { getMaxRadius, polarToCartesian } from "../../utils/polar.mjs";
-import { getValueByDataKey } from "../../utils/chart.mjs";
-import { selectUnfilteredPolarItems } from "./polarSelectors.mjs";
-import { createSelector } from "@reduxjs/toolkit";
-//#region src/state/selectors/pieSelectors.ts
-var pickPieSettings = (_state, pieSettings) => pieSettings;
-var EMPTY_CELLS = [];
-function pickCells(_state, _pieSettings) {
-	return EMPTY_CELLS;
-}
-var selectDisplayedData = createSelector([
-	selectChartDataAndAlwaysIgnoreIndexes,
-	pickPieSettings,
-	pickCells
-], ({ chartData }, pieSettings, cells) => {
-	let displayedData;
-	if (pieSettings.data != null && pieSettings.data.length > 0) displayedData = pieSettings.data;
-	else displayedData = chartData;
-	if (!displayedData || !displayedData.length) {}
-	if (displayedData == null) return;
-	return displayedData;
-});
-var selectPieLegend = createSelector([selectDisplayedData, pickPieSettings], (displayedData, pieSettings) => {
-	if (displayedData == null) return;
-	return displayedData.map((entry, i) => {
-		const name = getValueByDataKey(entry, pieSettings.nameKey, pieSettings.name);
-		let color;
-		if (typeof entry === "object" && entry != null && "fill" in entry && typeof entry.fill === "string") color = entry.fill;
-		else color = pieSettings.fill;
-		return {
-			value: name ?? String(pieSettings.dataKey ?? i),
-			color,
-			payload: entry,
-			type: pieSettings.legendType
-		};
-	});
-});
-var selectSynchronisedPieSettings = createSelector([selectUnfilteredPolarItems, pickPieSettings], (graphicalItems, pieSettingsFromProps) => {
-	if (graphicalItems.some((pgis) => pgis.type === "pie" && pieSettingsFromProps.dataKey === pgis.dataKey)) return pieSettingsFromProps;
-});
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { getPercentValue, mathSign } from "../utils/data.mjs";
+import { getValueByDataKey } from "./data.mjs";
+import { getTooltipNameProp } from "./tooltip.mjs";
+import { getMaxRadius, polarToCartesian } from "../utils/polar.mjs";
+import { entryColor } from "./color.mjs";
+//#region src/core/pie.ts
 function parseDeltaAngle(startAngle, endAngle) {
 	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 360);
 }
@@ -63,28 +26,34 @@ function parseCoordinateOfPie(pieSettings, offset, dataPoint) {
 function computePieSectors({ pieSettings, displayedData, offset }) {
 	if (!displayedData || displayedData.length === 0) return;
 	const { cornerRadius, dataKey, nameKey, tooltipType } = pieSettings;
+	if (dataKey == null) return void 0;
 	const startAngle = pieSettings.startAngle ?? 0;
 	const endAngle = pieSettings.endAngle ?? 360;
 	const minAngle = Math.abs(pieSettings.minAngle ?? 0);
 	const deltaAngle = parseDeltaAngle(startAngle, endAngle);
 	const absDeltaAngle = Math.abs(deltaAngle);
 	const paddingAngle = displayedData.length <= 1 ? 0 : pieSettings.paddingAngle ?? 0;
-	const notZeroItemCount = displayedData.filter((entry) => getValueByDataKey(entry, dataKey, 0) !== 0).length;
+	const values = displayedData.map((entry) => {
+		const value = getValueByDataKey(entry, dataKey);
+		return toFiniteNumber(value) ?? 0;
+	});
+	const notZeroItemCount = values.filter((value) => value !== 0).length;
 	const totalPaddingAngle = (absDeltaAngle >= 360 ? notZeroItemCount : notZeroItemCount - 1) * paddingAngle;
 	const realTotalAngle = absDeltaAngle - notZeroItemCount * minAngle - totalPaddingAngle;
-	const sum = displayedData.reduce((result, entry) => {
-		const val = getValueByDataKey(entry, dataKey, 0);
-		return result + (isNumber(val) ? val : 0);
-	}, 0);
+	const sum = values.reduce((result, value) => result + value, 0);
 	if (sum <= 0) return;
 	let prev;
 	return displayedData.map((entry, i) => {
-		const val = getValueByDataKey(entry, dataKey, 0);
+		const val = values[i];
 		const name = getValueByDataKey(entry, nameKey, i);
 		const coordinate = parseCoordinateOfPie(pieSettings, offset, entry);
-		const percent = (isNumber(val) ? val : 0) / sum;
+		const percent = val / sum;
 		const entryWithInfo = { ...entry };
-		const sectorColor = entryWithInfo != null && "fill" in entryWithInfo && typeof entryWithInfo.fill === "string" ? entryWithInfo.fill : pieSettings.fill;
+		const sectorColor = entryColor({
+			row: entry,
+			seriesFill: pieSettings.fill,
+			index: i
+		});
 		let tempStartAngle;
 		if (i) tempStartAngle = prev.endAngle + mathSign(deltaAngle) * paddingAngle * (val !== 0 ? 1 : 0);
 		else tempStartAngle = startAngle;
@@ -115,18 +84,21 @@ function computePieSectors({ pieSettings, displayedData, offset }) {
 		return prev;
 	});
 }
-createSelector([
-	selectDisplayedData,
-	selectSynchronisedPieSettings,
-	pickCells,
-	selectChartOffset
-], (displayedData, pieSettings, _cells, offset) => {
-	if (pieSettings == null || displayedData == null) return;
-	return computePieSectors({
-		offset,
-		pieSettings,
-		displayedData
+function pieLegend(displayedData, settings, cells = []) {
+	return displayedData?.map((entry, index) => {
+		const name = getValueByDataKey(entry, settings.nameKey, settings.name);
+		return {
+			value: String(name ?? getTooltipNameProp(void 0, settings.dataKey) ?? index),
+			color: entryColor({
+				cell: cells[index],
+				row: entry,
+				seriesFill: settings.fill,
+				index
+			}),
+			payload: entry,
+			type: settings.legendType
+		};
 	});
-});
+}
 //#endregion
-export { computePieSectors, selectDisplayedData, selectPieLegend, selectSynchronisedPieSettings };
+export { computePieSectors, pieLegend };

package/dist/es/core/polygon.mjs

@@ -0,0 +1,7 @@
+//#region src/core/polygon.ts
+/** A closed SVG path through the points: `Mx,yLx,y…Z`. */
+function polygonPath(points) {
+	return points.length ? `${points.map((point, i) => `${i === 0 ? "M" : "L"}${point.x},${point.y}`).join("")}Z` : "";
+}
+//#endregion
+export { polygonPath };

package/dist/es/core/radar.mjs

@@ -0,0 +1,58 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { getValueByDataKey } from "./data.mjs";
+import { polarToCartesian } from "../utils/polar.mjs";
+import { polygonPath } from "./polygon.mjs";
+import { last } from "es-toolkit/compat";
+//#region src/core/radar.ts
+function computeRadarPoints({ radiusAxis, angleAxis, displayedData, dataKey, bandSize }) {
+	const { cx, cy } = angleAxis;
+	let isRange = false;
+	const points = [];
+	const angleBandSize = angleAxis.type !== "number" ? bandSize ?? 0 : 0;
+	displayedData.forEach((entry, i) => {
+		const name = getValueByDataKey(entry, angleAxis.dataKey, i);
+		const value = getValueByDataKey(entry, dataKey);
+		const angle = (angleAxis.scale(name) ?? 0) + angleBandSize;
+		const pointValue = toFiniteNumber(Array.isArray(value) ? last(value) : value);
+		const radius = pointValue == null ? 0 : radiusAxis.scale(pointValue) ?? 0;
+		if (Array.isArray(value) && value.length >= 2) isRange = true;
+		points.push({
+			...polarToCartesian(cx, cy, radius, angle),
+			name,
+			value,
+			cx,
+			cy,
+			radius,
+			angle,
+			payload: entry
+		});
+	});
+	const baseLinePoints = [];
+	if (isRange) points.forEach((point) => {
+		if (Array.isArray(point.value)) {
+			const baseValue = toFiniteNumber(point.value[0]);
+			const radius = baseValue == null ? 0 : radiusAxis.scale(baseValue) ?? 0;
+			baseLinePoints.push({
+				...point,
+				radius,
+				...polarToCartesian(cx, cy, radius, point.angle)
+			});
+		} else baseLinePoints.push(point);
+	});
+	return {
+		points,
+		isRange,
+		baseLinePoints
+	};
+}
+function getSinglePolygonPath(points) {
+	if (!points.length) return "";
+	return polygonPath([...points, points[0]]);
+}
+function getRangePath(points, baseLinePoints) {
+	const outerPath = getSinglePolygonPath(points);
+	const inner = getSinglePolygonPath([...baseLinePoints].reverse());
+	return `${outerPath.endsWith("Z") ? outerPath.slice(0, -1) : outerPath}L${inner.slice(1)}`;
+}
+//#endregion
+export { computeRadarPoints, getRangePath, getSinglePolygonPath };

package/dist/es/core/radialBar.mjs

@@ -0,0 +1,92 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { mathSign } from "../utils/data.mjs";
+import { getValueByDataKey } from "./data.mjs";
+import { getCateCoordinateOfBar, truncateByDomain } from "./coordinates.mjs";
+//#region src/core/radialBar.ts
+function computeRadialBarDataItems({ displayedData, stackedData, dataStartIndex, stackedDomain, dataKey, baseValue, layout, radiusAxis, radiusAxisTicks, bandSize, pos, angleAxis, minPointSize, cx, cy, angleAxisTicks, startAngle: rootStartAngle, endAngle: rootEndAngle }) {
+	const size = pos.size;
+	if (size == null) return [];
+	return (displayedData ?? []).flatMap((entry, index) => {
+		let value, innerRadius, outerRadius, startAngle, endAngle, backgroundSector;
+		if (stackedData) value = truncateByDomain(stackedData[dataStartIndex + index], stackedDomain);
+		else {
+			const rawValue = getValueByDataKey(entry, dataKey);
+			value = Array.isArray(rawValue) ? rawValue : [baseValue, rawValue];
+		}
+		const valueAxis = layout === "radial" ? angleAxis : radiusAxis;
+		if (value.some((part) => valueAxis.type === "number" ? toFiniteNumber(part) == null : typeof part === "number" && !Number.isFinite(part))) return [];
+		if (layout === "radial") {
+			startAngle = angleAxis.scale(value[0]) ?? rootStartAngle;
+			endAngle = angleAxis.scale(value[1]) ?? rootEndAngle;
+			innerRadius = getCateCoordinateOfBar({
+				axis: radiusAxis,
+				ticks: radiusAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			if (innerRadius != null) innerRadius = innerRadius - bandSize / 2;
+			if (innerRadius != null && endAngle != null && startAngle != null) {
+				outerRadius = innerRadius + size;
+				const deltaAngle = endAngle - startAngle;
+				if (Math.abs(minPointSize) > 0 && Math.abs(deltaAngle) < Math.abs(minPointSize)) {
+					const delta = mathSign(deltaAngle || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaAngle));
+					endAngle += delta;
+				}
+				backgroundSector = { background: {
+					cx,
+					cy,
+					innerRadius,
+					outerRadius,
+					startAngle: rootStartAngle,
+					endAngle: rootEndAngle
+				} };
+			}
+		} else {
+			innerRadius = radiusAxis.scale(value[0]);
+			outerRadius = radiusAxis.scale(value[1]);
+			startAngle = getCateCoordinateOfBar({
+				axis: angleAxis,
+				ticks: angleAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			if (innerRadius != null && outerRadius != null && startAngle != null) {
+				endAngle = startAngle + size;
+				const deltaRadius = outerRadius - innerRadius;
+				if (Math.abs(minPointSize) > 0 && Math.abs(deltaRadius) < Math.abs(minPointSize)) {
+					const delta = mathSign(deltaRadius || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaRadius));
+					outerRadius += delta;
+				}
+			}
+		}
+		return {
+			...Object(entry),
+			...backgroundSector,
+			payload: entry,
+			value: stackedData ? value : value[1],
+			cx,
+			cy,
+			innerRadius,
+			outerRadius,
+			startAngle,
+			endAngle
+		};
+	});
+}
+function radialBarLegend(data, legendType) {
+	return (data ?? []).map((row) => {
+		const entry = typeof row === "object" && row != null || typeof row === "function" ? row : {};
+		return {
+			type: legendType,
+			value: "name" in entry ? entry.name : void 0,
+			color: "fill" in entry ? entry.fill : void 0,
+			payload: row
+		};
+	});
+}
+//#endregion
+export { computeRadialBarDataItems, radialBarLegend };

package/dist/es/core/rectangle.mjs

@@ -0,0 +1,25 @@
+//#region src/core/rectangle.ts
+/**
+* Normalizes the angle so that 0 <= angle < 180.
+* @param {number} angle Angle in degrees.
+* @return {number} the normalized angle with a value of at least 0 and never greater or equal to 180.
+*/
+function normalizeAngle(angle) {
+	return (angle % 180 + 180) % 180;
+}
+/**
+* Calculates the width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+* @param {object} size Width and height of the text in a horizontal position.
+* @param {number} size.width Horizontal text width.
+* @param {number} size.height Horizontal text height.
+* @param {number} angle Angle in degrees in which the text is displayed.
+* @return {number} The width of the largest horizontal line that fits inside a rectangle that is displayed at an angle.
+*/
+function getAngledRectangleWidth({ width, height }, angle = 0) {
+	const angleRadians = normalizeAngle(angle) * Math.PI / 180;
+	const angleThreshold = Math.atan(height / width);
+	const angledWidth = angleRadians > angleThreshold && angleRadians < Math.PI - angleThreshold ? height / Math.sin(angleRadians) : width / Math.cos(angleRadians);
+	return Math.abs(angledWidth);
+}
+//#endregion
+export { getAngledRectangleWidth };

package/dist/es/core/scatter.mjs

@@ -0,0 +1,86 @@
+import { isNullish, toFiniteNumber } from "../utils/validate.mjs";
+import { getValueByDataKey } from "./data.mjs";
+import { getTooltipNameProp } from "./tooltip.mjs";
+import { implicitZAxis } from "./axis/settings.mjs";
+import { getCateCoordinateOfLine } from "./coordinates.mjs";
+//#region src/core/scatter.ts
+function computeScatterPoints({ displayedData, xAxis, yAxis, zAxis, scatterSettings, xAxisTicks, yAxisTicks }) {
+	const xAxisDataKey = isNullish(xAxis.dataKey) ? scatterSettings.dataKey : xAxis.dataKey;
+	const yAxisDataKey = isNullish(yAxis.dataKey) ? scatterSettings.dataKey : yAxis.dataKey;
+	const zAxisDataKey = zAxis && zAxis.dataKey;
+	const defaultRangeZ = zAxis ? zAxis.range : implicitZAxis.range;
+	const defaultZ = defaultRangeZ && defaultRangeZ[0];
+	const xBandSize = xAxis.scale.bandwidth ? xAxis.scale.bandwidth() : 0;
+	const yBandSize = yAxis.scale.bandwidth ? yAxis.scale.bandwidth() : 0;
+	return displayedData.map((rawEntry, index) => {
+		const entry = rawEntry;
+		const x = getValueByDataKey(entry, xAxisDataKey);
+		const y = getValueByDataKey(entry, yAxisDataKey);
+		const z = !isNullish(zAxisDataKey) && getValueByDataKey(entry, zAxisDataKey) || "-";
+		const tooltipPayload = [{
+			name: isNullish(xAxis.dataKey) ? scatterSettings.name : xAxis.name || getTooltipNameProp(void 0, xAxis.dataKey),
+			unit: xAxis.unit || "",
+			value: x,
+			payload: entry,
+			dataKey: xAxisDataKey,
+			type: scatterSettings.tooltipType
+		}, {
+			name: isNullish(yAxis.dataKey) ? scatterSettings.name : yAxis.name || getTooltipNameProp(void 0, yAxis.dataKey),
+			unit: yAxis.unit || "",
+			value: y,
+			payload: entry,
+			dataKey: yAxisDataKey,
+			type: scatterSettings.tooltipType
+		}];
+		if (z !== "-" && zAxis != null) tooltipPayload.push({
+			name: zAxis.name || getTooltipNameProp(void 0, zAxis.dataKey),
+			unit: zAxis.unit || "",
+			value: z,
+			payload: entry,
+			dataKey: zAxisDataKey,
+			type: scatterSettings.tooltipType
+		});
+		const cx = getCateCoordinateOfLine({
+			axis: xAxis,
+			ticks: xAxisTicks,
+			bandSize: xBandSize,
+			entry,
+			index,
+			dataKey: xAxisDataKey
+		});
+		const cy = getCateCoordinateOfLine({
+			axis: yAxis,
+			ticks: yAxisTicks,
+			bandSize: yBandSize,
+			entry,
+			index,
+			dataKey: yAxisDataKey
+		});
+		const finiteZ = toFiniteNumber(z);
+		const size = finiteZ != null && zAxis != null ? zAxis.scale(finiteZ) : defaultZ;
+		const radius = size == null ? 0 : Math.sqrt(Math.max(size, 0) / Math.PI);
+		return {
+			...Object(entry),
+			cx: cx ?? void 0,
+			cy: cy ?? void 0,
+			x: cx == null ? void 0 : cx - radius,
+			y: cy == null ? void 0 : cy - radius,
+			width: 2 * radius,
+			height: 2 * radius,
+			size,
+			node: {
+				x,
+				y,
+				z
+			},
+			tooltipPayload,
+			tooltipPosition: cx == null || cy == null ? void 0 : {
+				x: cx,
+				y: cy
+			},
+			payload: entry
+		};
+	});
+}
+//#endregion
+export { computeScatterPoints };

package/dist/es/core/tooltip.mjs

@@ -0,0 +1,96 @@
+import { isCategoricalAxis } from "../utils/validate.mjs";
+import { findEntryInArray, mathSign } from "../utils/data.mjs";
+import { getValueByDataKey } from "./data.mjs";
+//#region src/core/tooltip.ts
+function tooltipPayload(tooltipPayloadConfigurations, activeIndex, tooltipAxis, activeLabel, tooltipPayloadSearcher, tooltipEventType, payloadKey) {
+	if (activeIndex == null) return;
+	return tooltipPayloadConfigurations.reduce((agg, { dataDefinedOnItem, settings, values, names, colors }) => {
+		const sliced = dataDefinedOnItem;
+		const finalDataKey = settings?.dataKey ?? tooltipAxis?.dataKey;
+		const finalNameKey = settings?.nameKey;
+		let tooltipPayload;
+		if (tooltipAxis?.dataKey && !tooltipAxis?.allowDuplicatedCategory && Array.isArray(sliced) && activeLabel != null && tooltipEventType === "axis") tooltipPayload = findEntryInArray(sliced, tooltipAxis.dataKey, activeLabel);
+		if (tooltipPayload == null) tooltipPayload = payloadKey === void 0 ? Array.isArray(sliced) ? sliced[activeIndex] : void 0 : tooltipPayloadSearcher?.(sliced, payloadKey, finalNameKey);
+		if (Array.isArray(tooltipPayload)) tooltipPayload.forEach((item) => {
+			const newSettings = {
+				...settings,
+				name: item.name,
+				unit: item.unit
+			};
+			agg.push(getTooltipEntry({
+				tooltipEntrySettings: newSettings,
+				dataKey: item.dataKey,
+				payload: item.payload,
+				value: getValueByDataKey(item.payload, item.dataKey),
+				name: item.name
+			}));
+		});
+		else {
+			const key = payloadKey ?? activeIndex;
+			const color = payloadKey === void 0 ? colors?.[activeIndex] : void 0;
+			agg.push(getTooltipEntry({
+				tooltipEntrySettings: color === void 0 ? settings : {
+					...settings,
+					color,
+					fill: color
+				},
+				dataKey: finalDataKey,
+				payload: tooltipPayload,
+				value: values && key in values ? values[key] ?? void 0 : getValueByDataKey(tooltipPayload, finalDataKey),
+				name: names?.[key] ?? getValueByDataKey(tooltipPayload, finalNameKey) ?? settings?.name
+			}));
+		}
+		return agg;
+	}, []);
+}
+function tooltipTicks(layout, axis, realScaleType, scale, range, duplicateDomain, categoricalDomain, axisType) {
+	if (!axis) return null;
+	const { type } = axis;
+	const isCategorical = isCategoricalAxis(layout, axisType);
+	if (!scale) return null;
+	const offsetForBand = realScaleType === "scaleBand" && scale.bandwidth ? scale.bandwidth() / 2 : 2;
+	let offset = type === "category" && scale.bandwidth ? scale.bandwidth() / offsetForBand : 0;
+	offset = axisType === "angleAxis" && range != null && range?.length >= 2 ? mathSign(range[0] - range[1]) * 2 * offset : offset;
+	if (isCategorical && categoricalDomain) return categoricalDomain.map((entry, index) => ({
+		coordinate: scale(entry) + offset,
+		value: entry,
+		index,
+		offset
+	}));
+	return scale.domain().map((entry, index) => ({
+		coordinate: scale(entry) + offset,
+		value: duplicateDomain ? duplicateDomain[entry] : entry,
+		index,
+		offset
+	}));
+}
+function getTooltipEntry({ tooltipEntrySettings, dataKey, payload, value, name }) {
+	return {
+		...tooltipEntrySettings,
+		dataKey,
+		payload,
+		value,
+		name
+	};
+}
+function tooltipCoordinate(type, layout, tick, size, offset, position, fallback) {
+	if (position) return position;
+	if (type === "item") return fallback;
+	if (!tick) return void 0;
+	if (fallback && (layout === "centric" || layout === "radial")) return fallback;
+	return layout === "horizontal" ? {
+		...fallback,
+		x: tick.coordinate,
+		y: fallback?.y ?? (offset.top + size.height) / 2
+	} : {
+		...fallback,
+		x: fallback?.x ?? (offset.left + size.width) / 2,
+		y: tick.coordinate
+	};
+}
+function getTooltipNameProp(nameFromItem, dataKey) {
+	if (nameFromItem) return String(nameFromItem);
+	if (typeof dataKey === "string") return dataKey;
+}
+//#endregion
+export { getTooltipEntry, getTooltipNameProp, tooltipCoordinate, tooltipPayload, tooltipTicks };

package/dist/es/events/componentEvents.mjs

@@ -0,0 +1,58 @@
+//#region src/events/componentEvents.ts
+var chartPointerEvent = (_state, _event) => true;
+var chartEmits = {
+	click: chartPointerEvent,
+	mouseenter: chartPointerEvent,
+	mousemove: chartPointerEvent,
+	mouseleave: chartPointerEvent,
+	mousedown: chartPointerEvent,
+	mouseup: chartPointerEvent,
+	contextmenu: chartPointerEvent,
+	dblclick: chartPointerEvent,
+	touchstart: chartPointerEvent,
+	touchmove: chartPointerEvent,
+	touchend: chartPointerEvent
+};
+function chartListeners(emit) {
+	return {
+		onClick: (state, event) => emit("click", state, event),
+		onMouseenter: (state, event) => emit("mouseenter", state, event),
+		onMousemove: (state, event) => emit("mousemove", state, event),
+		onMouseleave: (state, event) => emit("mouseleave", state, event),
+		onMousedown: (state, event) => emit("mousedown", state, event),
+		onMouseup: (state, event) => emit("mouseup", state, event),
+		onContextmenu: (state, event) => emit("contextmenu", state, event),
+		onDblclick: (state, event) => emit("dblclick", state, event),
+		onTouchstart: (state, event) => emit("touchstart", state, event),
+		onTouchmove: (state, event) => emit("touchmove", state, event),
+		onTouchend: (state, event) => emit("touchend", state, event)
+	};
+}
+var cellGridEmits = {
+	"update:activeIndex": (_index) => true,
+	"cell-click": (_payload, _index, _event) => true,
+	"cell-mouseenter": (_payload, _index, _event) => true,
+	"cell-mouseleave": (_payload, _index, _event) => true,
+	"animation-start": () => true,
+	"animation-end": () => true
+};
+/**
+* Forwards the cell events of an inner cell grid once. `map` turns the inner payload into the
+* outer one; cells it maps to `undefined` emit nothing.
+*/
+function cellGridListeners(emit, map = (payload) => payload) {
+	const relay = (send) => (payload, index, event) => {
+		const cell = map(payload);
+		if (cell !== void 0) send(cell, index, event);
+	};
+	return {
+		"onUpdate:activeIndex": (index) => emit("update:activeIndex", index),
+		"onCell-click": relay((cell, index, event) => emit("cell-click", cell, index, event)),
+		"onCell-mouseenter": relay((cell, index, event) => emit("cell-mouseenter", cell, index, event)),
+		"onCell-mouseleave": relay((cell, index, event) => emit("cell-mouseleave", cell, index, event)),
+		"onAnimation-start": () => emit("animation-start"),
+		"onAnimation-end": () => emit("animation-end")
+	};
+}
+//#endregion
+export { cellGridEmits, cellGridListeners, chartEmits, chartListeners };

package/dist/es/events/delegateItemEvents.mjs

@@ -0,0 +1,24 @@
+//#region src/events/delegateItemEvents.ts
+function itemEventIndex(event, boundary = false) {
+	const root = event.currentTarget;
+	const target = event.target;
+	if (!(root instanceof Element) || !(target instanceof Element)) return void 0;
+	const item = target.closest("[data-v-charts-item-index]");
+	if (!item || !root.contains(item) || boundary && target !== item) return void 0;
+	const index = Number(item.getAttribute("data-v-charts-item-index"));
+	return Number.isInteger(index) && index >= 0 ? index : void 0;
+}
+function delegateItemEvents(itemAt, events) {
+	function dispatch(name, event) {
+		const index = itemEventIndex(event, name !== "click");
+		const item = index == null ? void 0 : itemAt(index);
+		if (item !== void 0 && index !== void 0) events[name](item, index, event);
+	}
+	return {
+		onClick: (event) => dispatch("click", event),
+		onMouseenterCapture: (event) => dispatch("mouseenter", event),
+		onMouseleaveCapture: (event) => dispatch("mouseleave", event)
+	};
+}
+//#endregion
+export { delegateItemEvents, itemEventIndex };

package/dist/es/events/itemEvents.mjs

@@ -0,0 +1,34 @@
+import { inject, provide } from "vue";
+//#region src/events/itemEvents.ts
+function createItemEvents(extra) {
+	const itemEvent = (_entry, _index, _event) => true;
+	const emits = {
+		...extra,
+		"click": itemEvent,
+		"mouseenter": itemEvent,
+		"mouseleave": itemEvent,
+		"animation-start": () => true,
+		"animation-end": () => true
+	};
+	const key = Symbol("item events");
+	return {
+		emits,
+		provide: (emit) => provide(key, emit),
+		use: () => {
+			const emit = inject(key);
+			if (!emit) throw new Error("Item events require a graphical item owner");
+			return emit;
+		}
+	};
+}
+var modelEvent = { "update:activeIndex": (_index) => true };
+var barEvents = createItemEvents(modelEvent);
+var lineEvents = createItemEvents({});
+var areaEvents = createItemEvents({});
+var scatterEvents = createItemEvents({});
+var pieEvents = createItemEvents(modelEvent);
+var radarEvents = createItemEvents({});
+var radialBarEvents = createItemEvents({});
+var funnelEvents = createItemEvents({});
+//#endregion
+export { areaEvents, barEvents, funnelEvents, lineEvents, pieEvents, radarEvents, radialBarEvents, scatterEvents };