vccs 0.2.0 → 0.4.0

package/dist/es/hooks/publicHooks.mjs

@@ -0,0 +1,207 @@
+import { selectAxisDomain, selectAxisInverseDataSnapScale, selectAxisInverseScale, selectAxisInverseTickSnapScale, selectAxisScale, selectTicksOfAxis } from "../state/selectors/axisSelectors.mjs";
+import { selectActiveLabel, selectActiveTooltipCoordinate, selectIsTooltipActive } from "../state/selectors/tooltipSelectors.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { useOffset } from "../context/chartLayoutContext.mjs";
+import { computed } from "vue";
+//#region src/hooks/publicHooks.ts
+/**
+* Returns whether the tooltip is currently active (visible).
+*
+* Must be used inside a chart component tree (where the Redux store is provided).
+*
+* @returns A reactive boolean indicating tooltip active state
+*/
+function useIsTooltipActive() {
+	return useAppSelector(selectIsTooltipActive);
+}
+/**
+* Returns the current coordinate of the active tooltip.
+*
+* Must be used inside a chart component tree (where the Redux store is provided).
+*
+* @returns A reactive Coordinate ({ x, y }) or undefined when no tooltip is active
+*/
+function useActiveTooltipCoordinate() {
+	return useAppSelector(selectActiveTooltipCoordinate);
+}
+/**
+* Returns the label of the currently active tooltip (the value from the axis dataKey at the hovered index).
+*
+* Must be used inside a chart component tree (where the Redux store is provided).
+*
+* @returns A reactive string label or undefined when no tooltip is active
+*/
+function useActiveTooltipLabel() {
+	return useAppSelector(selectActiveLabel);
+}
+/**
+* Returns the plot area rectangle { x, y, width, height }.
+* This is the area inside all axes, legend, and brush — where graphical items render.
+*
+* Must be used inside a chart component tree (where the Redux store is provided).
+*
+* @returns A reactive object with x, y, width, height or undefined if offset is not yet available
+*/
+function usePlotArea() {
+	const offset = useOffset();
+	return computed(() => {
+		const o = offset.value;
+		if (o == null) return void 0;
+		return {
+			x: o.left,
+			y: o.top,
+			width: o.width,
+			height: o.height
+		};
+	});
+}
+/**
+* Returns the computed domain of an X axis.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive domain (categorical or numerical) or undefined
+*/
+function useXAxisDomain(axisId = 0) {
+	return useAppSelector((state) => selectAxisDomain(state, "xAxis", axisId, false));
+}
+/**
+* Returns the computed domain of a Y axis.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive domain (categorical or numerical) or undefined
+*/
+function useYAxisDomain(axisId = 0) {
+	return useAppSelector((state) => selectAxisDomain(state, "yAxis", axisId, false));
+}
+/**
+* Returns the computed tick items of an X axis.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive array of TickItem or undefined
+*/
+function useXAxisTicks(axisId = 0) {
+	return useAppSelector((state) => selectTicksOfAxis(state, "xAxis", axisId, false));
+}
+/**
+* Returns the computed tick items of a Y axis.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive array of TickItem or undefined
+*/
+function useYAxisTicks(axisId = 0) {
+	return useAppSelector((state) => selectTicksOfAxis(state, "yAxis", axisId, false));
+}
+/**
+* Returns the scale function for an X axis, mapping data values to pixel coordinates.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive ScaleFunction or undefined if the axis is not yet initialized
+*/
+function useXAxisScale(axisId = 0) {
+	const scale = useAppSelector((state) => selectAxisScale(state, "xAxis", axisId, false));
+	return computed(() => {
+		const s = scale.value;
+		if (s == null) return void 0;
+		return (value) => {
+			const result = s(value);
+			return typeof result === "number" ? result : void 0;
+		};
+	});
+}
+/**
+* Returns the scale function for a Y axis, mapping data values to pixel coordinates.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive ScaleFunction or undefined if the axis is not yet initialized
+*/
+function useYAxisScale(axisId = 0) {
+	const scale = useAppSelector((state) => selectAxisScale(state, "yAxis", axisId, false));
+	return computed(() => {
+		const s = scale.value;
+		if (s == null) return void 0;
+		return (value) => {
+			const result = s(value);
+			return typeof result === "number" ? result : void 0;
+		};
+	});
+}
+/**
+* Returns the inverse scale function for an X axis, mapping pixel coordinates back to data values.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive InverseScaleFunction or undefined
+*/
+function useXAxisInverseScale(axisId = 0) {
+	return useAppSelector((state) => selectAxisInverseScale(state, "xAxis", axisId, false));
+}
+/**
+* Returns the inverse scale function for a Y axis, mapping pixel coordinates back to data values.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive InverseScaleFunction or undefined
+*/
+function useYAxisInverseScale(axisId = 0) {
+	return useAppSelector((state) => selectAxisInverseScale(state, "yAxis", axisId, false));
+}
+/**
+* Returns the inverse scale function for an X axis that snaps to the nearest data point.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive InverseScaleFunction or undefined
+*/
+function useXAxisInverseDataSnapScale(axisId = 0) {
+	return useAppSelector((state) => selectAxisInverseDataSnapScale(state, "xAxis", axisId, false));
+}
+/**
+* Returns the inverse scale function for a Y axis that snaps to the nearest data point.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive InverseScaleFunction or undefined
+*/
+function useYAxisInverseDataSnapScale(axisId = 0) {
+	return useAppSelector((state) => selectAxisInverseDataSnapScale(state, "yAxis", axisId, false));
+}
+/**
+* Returns the inverse scale function for an X axis that snaps to the nearest tick.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive InverseScaleFunction or undefined
+*/
+function useXAxisInverseTickSnapScale(axisId = 0) {
+	return useAppSelector((state) => selectAxisInverseTickSnapScale(state, "xAxis", axisId, false));
+}
+/**
+* Returns the inverse scale function for a Y axis that snaps to the nearest tick.
+*
+* @param axisId - The axis ID (defaults to 0)
+* @returns A reactive InverseScaleFunction or undefined
+*/
+function useYAxisInverseTickSnapScale(axisId = 0) {
+	return useAppSelector((state) => selectAxisInverseTickSnapScale(state, "yAxis", axisId, false));
+}
+/**
+* Convenience hook that maps a data point to pixel coordinates using both X and Y axis scales.
+*
+* @param dataPoint - An object with x and y data values
+* @param xAxisId - The X axis ID (defaults to 0)
+* @param yAxisId - The Y axis ID (defaults to 0)
+* @returns A reactive Coordinate ({ x, y }) or undefined if either scale is unavailable
+*/
+function useCartesianScale(dataPoint, xAxisId = 0, yAxisId = 0) {
+	const xScale = useXAxisScale(xAxisId);
+	const yScale = useYAxisScale(yAxisId);
+	return computed(() => {
+		const xFn = xScale.value;
+		const yFn = yScale.value;
+		if (xFn == null || yFn == null) return void 0;
+		const pixelX = xFn(dataPoint.x);
+		const pixelY = yFn(dataPoint.y);
+		if (pixelX == null || pixelY == null) return void 0;
+		return {
+			x: pixelX,
+			y: pixelY
+		};
+	});
+}
+//#endregion
+export { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useIsTooltipActive, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };

package/dist/es/index.mjs

@@ -1,5 +1,8 @@
 import { Curve, CurveVueProps, getPath } from "./shape/Curve.mjs";
+import { useActiveTooltipDataPoints } from "./state/hooks.mjs";
+import { useChartHeight, useChartWidth, useMargin, useOffset } from "./context/chartLayoutContext.mjs";
 import { Dot } from "./shape/Dot.mjs";
+import Text_default from "./components/Text.mjs";
 import { Label } from "./components/label/Label.mjs";
 import { LabelList } from "./components/label/LabelList.mjs";
 import { Area } from "./cartesian/area/Area.mjs";
@@ -15,6 +18,7 @@ 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 { ReferenceDot } from "./cartesian/reference-dot/ReferenceDot.mjs";
 import { ReferenceLine } from "./cartesian/reference-line/ReferenceLine.mjs";
 import { Symbols } from "./shape/Symbols.mjs";
 import { Scatter } from "./cartesian/scatter/Scatter.mjs";
@@ -31,7 +35,9 @@ 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 { Treemap, TreemapVueProps, treemapPayloadSearcher } from "./chart/Treemap.mjs";
 import ResponsiveContainer_default from "./container/ResponsiveContainer.mjs";
+import { Customized } from "./components/Customized.mjs";
 import Legend_default from "./components/legend/Legend.mjs";
 import { Cross } from "./shape/Cross.mjs";
 import { Sector } from "./shape/Sector.mjs";
@@ -43,4 +49,6 @@ 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 };
+import { Polygon } from "./shape/Polygon.mjs";
+import { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useIsTooltipActive, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks } from "./hooks/publicHooks.mjs";
+export { Area, AreaChart, Bar, BarChart, CartesianAxis, CartesianGrid, Cell, ComposedChart, Cross, Curve, CurveVueProps, Customized, Dot, ErrorBar, ErrorBarVueProps, Funnel, FunnelChart, FunnelVueProps, Label, LabelList, Legend_default as Legend, Line, LineChart, LineContextKey, Pie, PieChart, PieVueProps, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer_default as ResponsiveContainer, Scatter, ScatterChart, Sector, Symbols, Text_default as Text, Tooltip, Trapezoid, Treemap, TreemapVueProps, XAxis, YAxis, ZAxis, createErrorBarRegistry, getPath, getUniqPayload, provideErrorBarContext, provideErrorBarRegistry, provideLineContext, treemapPayloadSearcher, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useErrorBarContext, useErrorBarRegistry, useIsTooltipActive, useLine, useLineContext, useMargin, useOffset, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };

package/dist/es/polar/pie/Pie.mjs

@@ -116,7 +116,7 @@ var Pie = /* @__PURE__ */ defineComponent({
 			const sectorList = sectors.value;
 			if (!sectorList || sectorList.length === 0) return null;
 			const stroke = attrs.stroke ?? props.stroke;
-			return createVNode(Layer, { "class": ["v-charts-pie", props.className] }, { default: () => [createVNode(Animate, {
+			return createVNode(Layer, { "class": ["v-charts-pie", props.class] }, { default: () => [createVNode(Animate, {
 				"isActive": props.isAnimationActive,
 				"from": 0,
 				"to": 1,

package/dist/es/polar/pie/type.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../../types/common.mjs";
 //#region src/polar/pie/type.ts
 var PieVueProps = {
 	data: {
@@ -88,10 +89,7 @@ var PieVueProps = {
 		type: Boolean,
 		default: false
 	},
-	className: {
-		type: String,
-		default: void 0
-	}
+	class: classProp
 };
 //#endregion
 export { PieVueProps };

package/dist/es/shape/Curve.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { isNumber } from "../utils/validate.mjs";
 import { computed, createVNode, defineComponent, mergeProps } from "vue";
 import { area, curveBasis, curveBasisClosed, curveBasisOpen, curveBumpX, curveBumpY, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line } from "victory-vendor/d3-shape";
@@ -62,7 +63,7 @@ var CurveVueProps = {
 	points: { type: Array },
 	connectNulls: { type: Boolean },
 	path: { type: String },
-	class: { type: [String, Array] }
+	class: classProp
 };
 var Curve = /* @__PURE__ */ defineComponent({
 	name: "Curve",

package/dist/es/shape/Polygon.mjs

@@ -0,0 +1,19 @@
+import { isNumber } from "../utils/validate.mjs";
+import { createVNode, mergeProps } from "vue";
+//#region src/shape/Polygon.tsx
+function getPolygonPath(points) {
+	return points.reduce((path, point, i) => {
+		return `${path}${i === 0 ? "M" : "L"}${point.x},${point.y}`;
+	}, "") + "Z";
+}
+function Polygon(props) {
+	const { points = [], ...rest } = props;
+	if (!points || !points.length) return null;
+	if (!points.every((p) => isNumber(p.x) && isNumber(p.y))) return null;
+	return createVNode("path", mergeProps(rest, {
+		"class": "v-charts-polygon",
+		"d": getPolygonPath(points)
+	}), null);
+}
+//#endregion
+export { Polygon };

package/dist/es/shape/Rectangle.mjs

@@ -4,10 +4,6 @@ import { createVNode, defineComponent, mergeProps } from "vue";
 * @fileOverview Rectangle
 */
 var RectangleVueProps = {
-	className: {
-		type: String,
-		default: void 0
-	},
 	x: {
 		type: Number,
 		default: 0

package/dist/es/shape/Sector.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
 import { getPercentValue, mathSign } from "../utils/data.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
@@ -42,10 +43,7 @@ var SectorVueProps = {
 		type: Boolean,
 		default: false
 	},
-	className: {
-		type: String,
-		default: void 0
-	}
+	class: classProp
 };
 function getDeltaAngle(startAngle, endAngle) {
 	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 359.999);
@@ -138,7 +136,7 @@ var Sector = /* @__PURE__ */ defineComponent({
 	props: SectorVueProps,
 	setup(props, { attrs }) {
 		return () => {
-			const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, forceCornerRadius, cornerIsExternal, className } = props;
+			const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, forceCornerRadius, cornerIsExternal } = props;
 			if (outerRadius <= 0 || outerRadius < innerRadius || startAngle === endAngle) return null;
 			const deltaRadius = outerRadius - innerRadius;
 			const cr = getPercentValue(cornerRadius, deltaRadius, 0, true);
@@ -146,7 +144,7 @@ var Sector = /* @__PURE__ */ defineComponent({
 			if (cr > 0 && Math.abs(startAngle - endAngle) < 360) path = getSectorWithCorner(cx, cy, innerRadius, outerRadius, Math.min(cr, deltaRadius / 2), forceCornerRadius, cornerIsExternal, startAngle, endAngle);
 			else path = getSectorPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle);
 			return createVNode("path", mergeProps(attrs, {
-				"class": ["v-charts-sector", className],
+				"class": ["v-charts-sector", props.class],
 				"d": path
 			}), null);
 		};

package/dist/es/shape/Symbols.mjs

@@ -32,7 +32,7 @@ var calculateAreaSize = (size, sizeType, type) => {
 	}
 };
 function Symbols(props) {
-	const { type = "circle", size = 64, sizeType = "area", cx, cy, className, ...rest } = props;
+	const { type = "circle", size = 64, sizeType = "area", cx, cy, class: className, ...rest } = props;
 	let realType = "circle";
 	if (typeof type === "string") realType = type;
 	const getPath = () => {

package/dist/es/shape/Trapezoid.mjs

@@ -1,10 +1,7 @@
+import { classProp } from "../types/common.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Trapezoid.tsx
 var TrapezoidVueProps = {
-	className: {
-		type: String,
-		default: void 0
-	},
 	x: {
 		type: Number,
 		default: 0
@@ -24,7 +21,8 @@ var TrapezoidVueProps = {
 	height: {
 		type: Number,
 		default: 0
-	}
+	},
+	class: classProp
 };
 function getTrapezoidPath(x, y, upperWidth, lowerWidth, height) {
 	const upperLeft = x;
@@ -39,10 +37,10 @@ var Trapezoid = /* @__PURE__ */ defineComponent({
 	props: TrapezoidVueProps,
 	setup(props, { attrs }) {
 		return () => {
-			const { x, y, upperWidth, lowerWidth, height, className } = props;
+			const { x, y, upperWidth, lowerWidth, height } = props;
 			if (x !== +x || y !== +y || upperWidth !== +upperWidth || lowerWidth !== +lowerWidth || height !== +height || height === 0) return null;
 			return createVNode("path", mergeProps(attrs, {
-				"class": ["v-charts-trapezoid", className],
+				"class": ["v-charts-trapezoid", props.class],
 				"d": getTrapezoidPath(x, y, upperWidth, lowerWidth, height)
 			}), null);
 		};

package/dist/es/state/ReportChartProps.mjs

@@ -1,3 +1,4 @@
+import { classProp } from "../types/common.mjs";
 import { useAppDispatch } from "./hooks.mjs";
 import { updateOptions } from "./rootPropsSlice.mjs";
 import { defineComponent, watchEffect } from "vue";
@@ -21,10 +22,7 @@ var ReportChartProps_default = /* @__PURE__ */ defineComponent({
 			type: [String, Number],
 			default: void 0
 		},
-		class: {
-			type: String,
-			default: void 0
-		},
+		class: classProp,
 		maxBarSize: {
 			type: Number,
 			default: void 0

package/dist/es/state/hooks.mjs

@@ -1,6 +1,26 @@
+import { selectActiveTooltipDataPoints } from "./selectors/tooltipSelectors.mjs";
 import { useDispatch, useSelector } from "@reduxjs/vue-redux";
 //#region src/state/hooks.ts
 var useAppDispatch = useDispatch.withTypes();
 var useAppSelector = useSelector.withTypes();
+/**
+* Returns the currently active data points being displayed in the Tooltip.
+* Active means that it is currently visible; this hook will return `undefined` if there is no current interaction.
+*
+* This follows the `<Tooltip />` props, if the Tooltip element is present in the chart.
+* If there is no `<Tooltip />` then this hook will follow the default Tooltip props.
+*
+* Data point is whatever you pass as an input to the chart using the `data={}` prop.
+*
+* This returns an array because a chart can have multiple graphical items in it (multiple Lines for example)
+* and tooltip with `shared={true}` will display all items at the same time.
+*
+* Returns undefined when used outside a chart context.
+*
+* @returns Data points that are currently visible in a Tooltip
+*/
+function useActiveTooltipDataPoints() {
+	return useAppSelector(selectActiveTooltipDataPoints);
+}
 //#endregion
-export { useAppDispatch, useAppSelector };
+export { useActiveTooltipDataPoints, useAppDispatch, useAppSelector };

package/dist/es/state/referenceElementsSlice.mjs

@@ -33,4 +33,4 @@ var referenceElementsSlice = createSlice({
 var { addDot, removeDot, addArea, removeArea, addLine, removeLine } = referenceElementsSlice.actions;
 var referenceElementsReducer = referenceElementsSlice.reducer;
 //#endregion
-export { addArea, addLine, referenceElementsReducer, removeArea, removeLine };
+export { addArea, addDot, addLine, referenceElementsReducer, removeArea, removeDot, removeLine };

package/dist/es/state/selectors/axisSelectors.mjs

@@ -13,6 +13,7 @@ import { pickAxisType } from "./pickAxisType.mjs";
 import { pickAxisId } from "./pickAxisId.mjs";
 import { checkDomainOfScale, getDomainOfStackGroups, getStackedData, getValueByDataKey } from "../../utils/chart.mjs";
 import { isWellFormedNumberDomain, numericalDomainSpecifiedWithoutRequiringData, parseNumericalUserDomain } from "../../utils/isDomainSpecifiedByUser.mjs";
+import { combineInverseScaleFunction, createCategoricalInverse } from "../../utils/createCategoricalInverse.mjs";
 import { getNiceTickValues, getTickValuesFixedDomain } from "../../utils/scale/getNiceTickValues.mjs";
 import { createSelector } from "@reduxjs/toolkit";
 import { range, upperFirst } from "lodash-es";
@@ -601,6 +602,19 @@ var selectAxisScale = createSelector([
 	selectAxisDomainIncludingNiceTicks,
 	selectAxisRangeWithReverse
 ], combineScaleFunction);
+function sortBy$1(a, b) {
+	const aNum = Number(a);
+	const bNum = Number(b);
+	if (Number.isNaN(aNum) && Number.isNaN(bNum)) return 0;
+	if (Number.isNaN(aNum)) return -1;
+	if (Number.isNaN(bNum)) return 1;
+	return aNum - bNum;
+}
+var selectSortedDataPoints = createSelector([selectAllAppliedValues], (appliedData) => {
+	return appliedData?.map((item) => item.value).sort(sortBy$1);
+});
+var selectAxisInverseScale = createSelector([selectAxisScale], combineInverseScaleFunction);
+var selectAxisInverseDataSnapScale = createSelector([selectAxisScale, selectSortedDataPoints], createCategoricalInverse);
 createSelector(selectCartesianItemsSettings, pickAxisType, (items, axisType) => {
 	return items.flatMap((item) => {
 		return item.errorBars ?? [];
@@ -812,6 +826,21 @@ var selectTicksOfAxis = createSelector([
 	selectCategoricalDomain,
 	pickAxisType
 ], combineAxisTicks);
+var selectAxisInverseTickSnapScale = createSelector([selectTicksOfAxis], (ticks) => {
+	if (!ticks || ticks.length === 0) return;
+	return (pixelValue) => {
+		let minDistance = Infinity;
+		let closestTick = ticks[0];
+		for (const tick of ticks) {
+			const distance = Math.abs(tick.coordinate - pixelValue);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestTick = tick;
+			}
+		}
+		return closestTick?.value;
+	};
+});
 function combineGraphicalItemTicks(layout, axis, scale, axisRange, duplicateDomain, categoricalDomain, axisType) {
 	if (axis == null || scale == null || axisRange == null || axisRange[0] === axisRange[1]) return null;
 	const isCategorical = isCategoricalAxis(layout, axisType);
@@ -876,4 +905,4 @@ var selectChartDirection = createSelector([
 	}
 });
 //#endregion
-export { combineAppliedNumericalValuesIncludingErrorValues, combineAppliedValues, combineAreasDomain, combineAxisDomain, combineAxisDomainWithNiceTicks, combineAxisTicks, combineCategoricalDomain, combineDisplayedData, combineDomainOfStackGroups, combineDotsDomain, combineDuplicateDomain, combineGraphicalItemTicks, combineGraphicalItemsData, combineGraphicalItemsSettings, combineLinesDomain, combineNiceTicks, combineNumericalDomain, combineRealScaleType, combineScaleFunction, combineStackGroups, filterGraphicalNotStackedItems, filterReferenceElements, getDomainDefinition, implicitXAxis, implicitYAxis, implicitZAxis, itemAxisPredicate, mergeDomains, selectAxisPropsNeededForCartesianGridTicksGenerator, selectAxisRange, selectAxisScale, selectAxisSettings, selectAxisWithScale, selectBaseAxis, selectCartesianAxisSize, selectChartDirection, selectDomainDefinition, selectDuplicateDomain, selectHasBar, selectRealScaleType, selectReferenceAreas, selectReferenceDots, selectReferenceLines, selectStackGroups, selectTicksOfAxis, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems, selectXAxisPosition, selectXAxisSettings, selectXAxisSize, selectYAxisPosition, selectYAxisSettings, selectYAxisSize, selectZAxisWithScale };
+export { combineAppliedNumericalValuesIncludingErrorValues, combineAppliedValues, combineAreasDomain, combineAxisDomain, combineAxisDomainWithNiceTicks, combineAxisTicks, combineCategoricalDomain, combineDisplayedData, combineDomainOfStackGroups, combineDotsDomain, combineDuplicateDomain, combineGraphicalItemTicks, combineGraphicalItemsData, combineGraphicalItemsSettings, combineLinesDomain, combineNiceTicks, combineNumericalDomain, combineRealScaleType, combineScaleFunction, combineStackGroups, filterGraphicalNotStackedItems, filterReferenceElements, getDomainDefinition, implicitXAxis, implicitYAxis, implicitZAxis, itemAxisPredicate, mergeDomains, selectAxisDomain, selectAxisInverseDataSnapScale, selectAxisInverseScale, selectAxisInverseTickSnapScale, selectAxisPropsNeededForCartesianGridTicksGenerator, selectAxisRange, selectAxisScale, selectAxisSettings, selectAxisWithScale, selectBaseAxis, selectCartesianAxisSize, selectChartDirection, selectDomainDefinition, selectDuplicateDomain, selectHasBar, selectRealScaleType, selectReferenceAreas, selectReferenceDots, selectReferenceLines, selectStackGroups, selectTicksOfAxis, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems, selectXAxisPosition, selectXAxisSettings, selectXAxisSize, selectYAxisPosition, selectYAxisSettings, selectYAxisSize, selectZAxisWithScale };

package/dist/es/state/selectors/tooltipSelectors.mjs

@@ -252,7 +252,7 @@ var selectActiveTooltipCoordinate = createSelector([selectTooltipInteractionStat
 	return tooltipInteractionState.coordinate ?? defaultIndexCoordinate;
 });
 var selectIsTooltipActive = createSelector([selectTooltipInteractionState], (tooltipInteractionState) => tooltipInteractionState.active);
-createSelector([createSelector([
+var selectActiveTooltipDataPoints = createSelector([createSelector([
 	selectTooltipPayloadConfigurations,
 	selectActiveTooltipIndex,
 	selectChartDataWithIndexes,
@@ -266,4 +266,4 @@ createSelector([createSelector([
 	return Array.from(new Set(dataPoints));
 });
 //#endregion
-export { combineTooltipPayload, selectActiveLabel, selectActiveTooltipCoordinate, selectActiveTooltipDataKey, selectActiveTooltipIndex, selectIsTooltipActive, selectTooltipAxis, selectTooltipAxisDomain, selectTooltipAxisRangeWithReverse, selectTooltipAxisScale, selectTooltipAxisTicks, selectTooltipAxisType, selectTooltipDisplayedData };
+export { combineTooltipPayload, selectActiveLabel, selectActiveTooltipCoordinate, selectActiveTooltipDataKey, selectActiveTooltipDataPoints, selectActiveTooltipIndex, selectIsTooltipActive, selectTooltipAxis, selectTooltipAxisDomain, selectTooltipAxisRangeWithReverse, selectTooltipAxisScale, selectTooltipAxisTicks, selectTooltipAxisType, selectTooltipDisplayedData };

package/dist/es/types/common.mjs

@@ -0,0 +1,12 @@
+//#region src/types/common.ts
+/** Shared Vue prop definition for `class` — use in VueProps objects to avoid repetition */
+var classProp = {
+	type: [
+		String,
+		Array,
+		Object
+	],
+	default: void 0
+};
+//#endregion
+export { classProp };

package/dist/es/utils/VueUtils.mjs

@@ -1,5 +1,5 @@
-import { FilteredElementKeyMap, SVGElementPropKeys } from "../cartesian/cartesian-grid/const.mjs";
 import { EventKeys } from "../types/event.mjs";
+import { FilteredElementKeyMap, SVGElementPropKeys } from "../cartesian/cartesian-grid/const.mjs";
 //#region src/utils/VueUtils.ts
 /**
 * Checks if the property is valid to spread onto an SVG element or onto a specific component

package/dist/es/utils/cell.mjs

@@ -0,0 +1,28 @@
+import { Cell } from "../components/Cell.mjs";
+import { Fragment } from "vue";
+//#region src/utils/cell.ts
+/**
+* Extract Cell VNode props from a VNode tree.
+* Handles Fragment wrapping from v-for.
+*/
+function extractCellProps(vnodes) {
+	const result = [];
+	for (const vnode of vnodes) if (vnode.type === Cell) result.push(vnode.props ?? {});
+	else if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...extractCellProps(vnode.children));
+	return result;
+}
+/**
+* Filter out Cell VNodes from a VNode tree, preserving non-Cell siblings.
+* Recursively descends Fragment children to preserve co-located content (e.g. LabelList).
+*/
+function filterOutCells(vnodes) {
+	const result = [];
+	for (const vnode of vnodes) {
+		if (vnode.type === Cell) continue;
+		if (vnode.type === Fragment && Array.isArray(vnode.children)) result.push(...filterOutCells(vnode.children));
+		else result.push(vnode);
+	}
+	return result;
+}
+//#endregion
+export { extractCellProps, filterOutCells };

package/dist/es/utils/createCategoricalInverse.mjs

@@ -0,0 +1,46 @@
+//#region src/utils/createCategoricalInverse.ts
+/**
+* Binary search for sorted arrays (ascending or descending).
+*/
+function bisect(haystack, needle) {
+	let lo = 0;
+	let hi = haystack.length;
+	const ascending = haystack[0] < haystack[haystack.length - 1];
+	while (lo < hi) {
+		const mid = Math.floor((lo + hi) / 2);
+		if (ascending ? haystack[mid] < needle : haystack[mid] > needle) lo = mid + 1;
+		else hi = mid;
+	}
+	return lo;
+}
+/**
+* Creates an inverse scale function for categorical/ordinal scales.
+* Uses bisect to find the closest domain value for a given pixel coordinate.
+*/
+function createCategoricalInverse(scale, allDataPointsOnAxis) {
+	if (!scale) return;
+	const domain = allDataPointsOnAxis ?? scale.domain();
+	const pixelPositions = domain.map((d) => scale(d) ?? 0);
+	const range = scale.range();
+	if (domain.length === 0 || range.length < 2) return;
+	return (pixelValue) => {
+		const index = bisect(pixelPositions, pixelValue);
+		if (index <= 0) return domain[0];
+		if (index >= domain.length) return domain[domain.length - 1];
+		const leftPixel = pixelPositions[index - 1] ?? 0;
+		const rightPixel = pixelPositions[index] ?? 0;
+		if (Math.abs(pixelValue - leftPixel) <= Math.abs(pixelValue - rightPixel)) return domain[index - 1];
+		return domain[index];
+	};
+}
+/**
+* Creates an inverse function: uses native `.invert` for numeric scales,
+* falls back to categorical bisect for ordinal/band/point scales.
+*/
+function combineInverseScaleFunction(scale) {
+	if (scale == null) return;
+	if ("invert" in scale && typeof scale.invert === "function") return scale.invert.bind(scale);
+	return createCategoricalInverse(scale, void 0);
+}
+//#endregion
+export { combineInverseScaleFunction, createCategoricalInverse };