vccs 0.1.0 → 0.3.0

package/dist/es/utils/tooltip/translate.mjs

@@ -1,59 +1,73 @@
-import { isNumber as e } from "../validate.mjs";
+import { isNumber } from "../validate.mjs";
 //#region src/utils/tooltip/translate.ts
-var t = "v-charts-tooltip-wrapper", n = { visibility: "hidden" };
-function r({ coordinate: n, translateX: r, translateY: i }) {
-	return [t, {
-		[`${t}-right`]: e(r) && n && e(n.x) && r >= n.x,
-		[`${t}-left`]: e(r) && n && e(n.x) && r < n.x,
-		[`${t}-bottom`]: e(i) && n && e(n.y) && i >= n.y,
-		[`${t}-top`]: e(i) && n && e(n.y) && i < n.y
+var CSS_CLASS_PREFIX = "v-charts-tooltip-wrapper";
+var TOOLTIP_HIDDEN = { visibility: "hidden" };
+function getTooltipCSSClassName({ coordinate, translateX, translateY }) {
+	return [CSS_CLASS_PREFIX, {
+		[`${CSS_CLASS_PREFIX}-right`]: isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX >= coordinate.x,
+		[`${CSS_CLASS_PREFIX}-left`]: isNumber(translateX) && coordinate && isNumber(coordinate.x) && translateX < coordinate.x,
+		[`${CSS_CLASS_PREFIX}-bottom`]: isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY >= coordinate.y,
+		[`${CSS_CLASS_PREFIX}-top`]: isNumber(translateY) && coordinate && isNumber(coordinate.y) && translateY < coordinate.y
 	}];
 }
-function i({ allowEscapeViewBox: t, coordinate: n, key: r, offsetTopLeft: i, position: a, reverseDirection: o, tooltipDimension: s, viewBox: c, viewBoxDimension: l }) {
-	if (a && e(a[r])) return a[r];
-	let u = n[r] - s - (i > 0 ? i : 0), d = n[r] + i;
-	if (t[r]) return o[r] ? u : d;
-	let f = c[r];
-	return f == null ? 0 : o[r] ? u < f ? Math.max(d, f) : Math.max(u, f) : l == null ? 0 : d + s > f + l ? Math.max(u, f) : Math.max(d, f);
+function getTooltipTranslateXY({ allowEscapeViewBox, coordinate, key, offsetTopLeft, position, reverseDirection, tooltipDimension, viewBox, viewBoxDimension }) {
+	if (position && isNumber(position[key])) return position[key];
+	const negative = coordinate[key] - tooltipDimension - (offsetTopLeft > 0 ? offsetTopLeft : 0);
+	const positive = coordinate[key] + offsetTopLeft;
+	if (allowEscapeViewBox[key]) return reverseDirection[key] ? negative : positive;
+	const viewBoxKey = viewBox[key];
+	if (viewBoxKey == null) return 0;
+	if (reverseDirection[key]) {
+		if (negative < viewBoxKey) return Math.max(positive, viewBoxKey);
+		return Math.max(negative, viewBoxKey);
+	}
+	if (viewBoxDimension == null) return 0;
+	if (positive + tooltipDimension > viewBoxKey + viewBoxDimension) return Math.max(negative, viewBoxKey);
+	return Math.max(positive, viewBoxKey);
 }
-function a({ translateX: e, translateY: t, useTranslate3d: n }) {
-	return { transform: n ? `translate3d(${e}px, ${t}px, 0)` : `translate(${e}px, ${t}px)` };
+function getTransformStyle({ translateX, translateY, useTranslate3d }) {
+	return { transform: useTranslate3d ? `translate3d(${translateX}px, ${translateY}px, 0)` : `translate(${translateX}px, ${translateY}px)` };
 }
-function o({ allowEscapeViewBox: e, coordinate: t, offsetTopLeft: o, position: s, reverseDirection: c, tooltipBox: l, useTranslate3d: u, viewBox: d }) {
-	let f, p, m;
-	return l.height > 0 && l.width > 0 && t ? (p = i({
-		allowEscapeViewBox: e,
-		coordinate: t,
-		key: "x",
-		offsetTopLeft: o,
-		position: s,
-		reverseDirection: c,
-		tooltipDimension: l.width,
-		viewBox: d,
-		viewBoxDimension: d.width
-	}), m = i({
-		allowEscapeViewBox: e,
-		coordinate: t,
-		key: "y",
-		offsetTopLeft: o,
-		position: s,
-		reverseDirection: c,
-		tooltipDimension: l.height,
-		viewBox: d,
-		viewBoxDimension: d.height
-	}), f = {}) : f = n, {
-		cssProperties: f,
-		cssClasses: r({
-			translateX: p,
-			translateY: m,
-			coordinate: t
+function getTooltipTranslate({ allowEscapeViewBox, coordinate, offsetTopLeft, position, reverseDirection, tooltipBox, useTranslate3d, viewBox }) {
+	let cssProperties, translateX, translateY;
+	if (tooltipBox.height > 0 && tooltipBox.width > 0 && coordinate) {
+		translateX = getTooltipTranslateXY({
+			allowEscapeViewBox,
+			coordinate,
+			key: "x",
+			offsetTopLeft,
+			position,
+			reverseDirection,
+			tooltipDimension: tooltipBox.width,
+			viewBox,
+			viewBoxDimension: viewBox.width
+		});
+		translateY = getTooltipTranslateXY({
+			allowEscapeViewBox,
+			coordinate,
+			key: "y",
+			offsetTopLeft,
+			position,
+			reverseDirection,
+			tooltipDimension: tooltipBox.height,
+			viewBox,
+			viewBoxDimension: viewBox.height
+		});
+		cssProperties = {};
+	} else cssProperties = TOOLTIP_HIDDEN;
+	return {
+		cssProperties,
+		cssClasses: getTooltipCSSClassName({
+			translateX,
+			translateY,
+			coordinate
 		}),
-		transform: a({
-			translateX: p ?? 0,
-			translateY: m ?? 0,
-			useTranslate3d: u
+		transform: getTransformStyle({
+			translateX: translateX ?? 0,
+			translateY: translateY ?? 0,
+			useTranslate3d
 		})
 	};
 }
 //#endregion
-export { o as getTooltipTranslate };
+export { getTooltipTranslate };

package/dist/es/utils/validate.mjs

@@ -1,31 +1,42 @@
 //#region src/utils/validate.ts
-function e(e) {
-	return typeof e == "number" && e != +e;
-}
-function t(t) {
-	return (typeof t == "number" || t instanceof Number) && !e(t);
-}
-function n({ width: e, height: n }) {
-	return !(!t(e) || e <= 0 || !t(n) || n <= 0);
-}
-function r(e) {
-	return Number.isFinite(e);
-}
-function i(e) {
-	return typeof e == "string" && e.indexOf("%") === e.length - 1;
-}
-function a(e, t) {
-	return e === "horizontal" && t === "xAxis" || e === "vertical" && t === "yAxis" || e === "centric" && t === "angleAxis" || e === "radial" && t === "radiusAxis";
-}
-function o(e, t, n, r, i) {
-	if (e * t < e * r || e * t > e * i) return !1;
-	let a = n();
-	return e * (t - e * a / 2 - r) >= 0 && e * (t + e * a / 2 - i) <= 0;
-}
-var s = typeof window > "u";
-function c(e) {
-	return e == null;
-}
-var l = (e) => t(e) || typeof e == "string";
+function isNan(value) {
+	return typeof value == "number" && value != +value;
+}
+function isNumber(value) {
+	return (typeof value === "number" || value instanceof Number) && !isNan(value);
+}
+/**
+* validate the width and height props of a chart element
+* @param  {object} el A chart element
+* @return {boolean}   true If the props width and height are number, and greater than 0
+*/
+function validateWidthHeight({ width, height }) {
+	if (!isNumber(width) || width <= 0 || !isNumber(height) || height <= 0) return false;
+	return true;
+}
+function isWellBehavedNumber(n) {
+	return Number.isFinite(n);
+}
+function isPercent(value) {
+	return typeof value === "string" && value.indexOf("%") === value.length - 1;
+}
+function isCategoricalAxis(layout, axisType) {
+	return layout === "horizontal" && axisType === "xAxis" || layout === "vertical" && axisType === "yAxis" || layout === "centric" && axisType === "angleAxis" || layout === "radial" && axisType === "radiusAxis";
+}
+function isVisible(sign, tickPosition, getSize, start, end) {
+	if (sign * tickPosition < sign * start || sign * tickPosition > sign * end) return false;
+	const size = getSize();
+	return sign * (tickPosition - sign * size / 2 - start) >= 0 && sign * (tickPosition + sign * size / 2 - end) <= 0;
+}
+var isSsr = typeof window === "undefined";
+/**
+* Checks if the value is null or undefined
+* @param {any} value The value to check
+* @returns {boolean} true if the value is null or undefined
+*/
+function isNullish(value) {
+	return value === null || typeof value === "undefined";
+}
+var isNumOrStr = (value) => isNumber(value) || typeof value === "string";
 //#endregion
-export { a as isCategoricalAxis, e as isNan, c as isNullish, l as isNumOrStr, t as isNumber, i as isPercent, s as isSsr, o as isVisible, r as isWellBehavedNumber, n as validateWidthHeight };
+export { isCategoricalAxis, isNan, isNullish, isNumOrStr, isNumber, isPercent, isSsr, isVisible, isWellBehavedNumber, validateWidthHeight };

package/dist/hooks/publicHooks.d.ts

@@ -0,0 +1,143 @@
+import { ComputedRef } from 'vue';
+import { useChartHeight, useChartWidth, useMargin, useOffset } from '../context/chartLayoutContext';
+import { AxisId } from '../state/cartesianAxisSlice';
+import { Coordinate } from '../types/common';
+export type { InverseScaleFunction } from '../utils/createCategoricalInverse';
+export type ScaleFunction = (value: unknown) => number | undefined;
+export interface CartesianDataPoint {
+    x: number | string;
+    y: number | string;
+}
+export { useChartWidth, useChartHeight, useMargin, useOffset };
+export { useActiveTooltipDataPoints } from '../state/hooks';
+/**
+ * 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
+ */
+export declare function useIsTooltipActive(): Readonly<import('vue').ShallowRef<boolean>>;
+/**
+ * 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
+ */
+export declare function useActiveTooltipCoordinate(): Readonly<import('vue').ShallowRef<Coordinate>>;
+/**
+ * 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
+ */
+export declare function useActiveTooltipLabel(): Readonly<import('vue').ShallowRef<string>>;
+/**
+ * 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
+ */
+export declare function usePlotArea(): ComputedRef<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+/**
+ * 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
+ */
+export declare function useXAxisDomain(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../types/axis').NumberDomain | import('../types').CategoricalDomain>>;
+/**
+ * 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
+ */
+export declare function useYAxisDomain(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../types/axis').NumberDomain | import('../types').CategoricalDomain>>;
+/**
+ * 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
+ */
+export declare function useXAxisTicks(axisId?: AxisId): Readonly<import('vue').ShallowRef<readonly import('../types/common').TickItem[]>>;
+/**
+ * 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
+ */
+export declare function useYAxisTicks(axisId?: AxisId): Readonly<import('vue').ShallowRef<readonly import('../types/common').TickItem[]>>;
+/**
+ * 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
+ */
+export declare function useXAxisScale(axisId?: AxisId): ComputedRef<ScaleFunction | undefined>;
+/**
+ * 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
+ */
+export declare function useYAxisScale(axisId?: AxisId): ComputedRef<ScaleFunction | undefined>;
+/**
+ * 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
+ */
+export declare function useXAxisInverseScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
+/**
+ * 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
+ */
+export declare function useYAxisInverseScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
+/**
+ * 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
+ */
+export declare function useXAxisInverseDataSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
+/**
+ * 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
+ */
+export declare function useYAxisInverseDataSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
+/**
+ * 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
+ */
+export declare function useXAxisInverseTickSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
+/**
+ * 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
+ */
+export declare function useYAxisInverseTickSnapScale(axisId?: AxisId): Readonly<import('vue').ShallowRef<import('../utils/createCategoricalInverse').InverseScaleFunction>>;
+/**
+ * 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
+ */
+export declare function useCartesianScale(dataPoint: CartesianDataPoint, xAxisId?: AxisId, yAxisId?: AxisId): ComputedRef<Coordinate | undefined>;

package/dist/hooks/useIsAnimating.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'vue';
+/**
+ * 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`.
+ */
+export declare function useIsAnimating(isAnimationActive: () => boolean): Ref<boolean>;

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from './container';
 export * from './components';
 export * from './polar';
 export * from './shape';
+export * from './hooks/publicHooks';

package/dist/polar/pie/type.d.ts

@@ -79,8 +79,8 @@ export declare const PieVueProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    className: {
-        type: StringConstructor;
+    class: {
+        type: PropType<import('../../types').VueClassValue>;
         default: any;
     };
 };

package/dist/polar/radar/Radar.d.ts

@@ -142,14 +142,14 @@ export declare const Radar: import('vue').DefineComponent<import('vue').ExtractP
     };
 }>> & Readonly<{}>, {
     fill: string;
-    name: string;
+    fillOpacity: number;
     stroke: string;
-    label: boolean | Record<string, any>;
-    connectNulls: boolean;
     strokeDasharray: string;
     strokeWidth: number;
+    name: string;
+    label: boolean | Record<string, any>;
+    connectNulls: boolean;
     hide: boolean;
-    fillOpacity: number;
     tooltipType: "none";
     legendType: LegendType;
     isAnimationActive: boolean;

package/dist/shape/Curve.d.ts

@@ -33,7 +33,8 @@ export declare const CurveVueProps: {
         type: StringConstructor;
     };
     class: {
-        type: (StringConstructor | ArrayConstructor)[];
+        type: PropType<import('../types').VueClassValue>;
+        default: any;
     };
 };
 export type CurvePropsWithOutSVG = VuePropsToType<typeof CurveVueProps>;

package/dist/shape/Polygon.d.ts

@@ -0,0 +1,9 @@
+import { SVGAttributes } from 'vue';
+export interface PolygonPoint {
+    x: number;
+    y: number;
+}
+export interface PolygonProps {
+    points?: PolygonPoint[];
+}
+export declare function Polygon(props: PolygonProps & SVGAttributes): import("vue/jsx-runtime").JSX.Element;

package/dist/shape/Rectangle.d.ts

@@ -2,10 +2,6 @@ import { PropType } from 'vue';
 import { VuePropsToType, WithSVGProps } from '../types';
 import { RectRadius } from '../types/bar';
 declare const RectangleVueProps: {
-    className: {
-        type: PropType<string>;
-        default: any;
-    };
     x: {
         type: PropType<number>;
         default: number;

package/dist/shape/Sector.d.ts

@@ -37,8 +37,8 @@ declare const SectorVueProps: {
         type: PropType<boolean>;
         default: boolean;
     };
-    className: {
-        type: PropType<string>;
+    class: {
+        type: PropType<import('../types').VueClassValue>;
         default: any;
     };
 };

package/dist/shape/Symbols.d.ts

@@ -1,7 +1,8 @@
+import { VueClassValue } from '../types/common';
 export type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
 type SizeType = 'area' | 'diameter';
 export interface SymbolsProps {
-    className?: string;
+    class?: VueClassValue;
     type?: SymbolType;
     cx?: number;
     cy?: number;

package/dist/shape/Trapezoid.d.ts

@@ -0,0 +1,30 @@
+import { WithSVGProps } from '../types';
+declare const TrapezoidVueProps: {
+    x: {
+        type: NumberConstructor;
+        default: number;
+    };
+    y: {
+        type: NumberConstructor;
+        default: number;
+    };
+    upperWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    lowerWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    class: {
+        type: import('vue').PropType<import('../types').VueClassValue>;
+        default: any;
+    };
+};
+export type TrapezoidComponentProps = WithSVGProps<typeof TrapezoidVueProps>;
+export declare const Trapezoid: import('vue').DefineComponent<TrapezoidComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TrapezoidComponentProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};

package/dist/shape/index.d.ts

@@ -3,6 +3,8 @@ export * from './Cross';
 export { Curve, CurveVueProps, getPath } from './Curve';
 export type { CurveType, CurvePropsWithOutSVG, CurveProps } from './Curve';
 export * from './Dot';
+export * from './Polygon';
 export * from './Rectangle';
 export * from './Symbols';
 export * from './Sector';
+export * from './Trapezoid';

package/dist/shape/types.d.ts

@@ -1,4 +1,5 @@
-import { AnimationEasing } from '../types/bar';
+import { AnimationOptions } from 'motion-v';
+import { VueClassValue } from '../types/common';
 export interface Point {
     readonly x: number;
     readonly y: number;
@@ -6,7 +7,7 @@ export interface Point {
 export type MinPointSize = number | ((value: number, index: number) => number);
 export type NormalizedStackId = string;
 export interface TrapezoidProps {
-    className?: string;
+    class?: VueClassValue;
     x?: number;
     y?: number;
     width?: number;
@@ -14,7 +15,5 @@ export interface TrapezoidProps {
     lowerWidth?: number;
     height?: number;
     isUpdateAnimationActive?: boolean;
-    animationBegin?: number;
-    animationDuration?: number;
-    animationEasing?: AnimationEasing;
+    transition?: AnimationOptions;
 }

package/dist/state/ReportChartProps.d.ts

@@ -18,7 +18,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: any;
     };
     class: {
-        type: StringConstructor;
+        type: PropType<import('../types').VueClassValue>;
         default: any;
     };
     maxBarSize: {
@@ -55,7 +55,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: any;
     };
     class: {
-        type: StringConstructor;
+        type: PropType<import('../types').VueClassValue>;
         default: any;
     };
     maxBarSize: {
@@ -79,7 +79,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     barCategoryGap: string | number;
     barGap: number;
     barSize: string | number;
-    class: string;
+    class: import('../types').VueClassValue;
     maxBarSize: number;
     stackOffset: StackOffsetType;
     syncId: string | number;

package/dist/state/graphicalItemsSlice.d.ts

@@ -23,7 +23,7 @@ export type ErrorBarsSettings = {
     dataKey: DataKey<any>;
 };
 export type CartesianGraphicalItemType = 'area' | 'bar' | 'line' | 'scatter';
-export type PolarGraphicalItemType = 'pie' | 'radar' | 'radialBar';
+export type PolarGraphicalItemType = 'pie' | 'radar' | 'radialBar' | 'funnel';
 export interface GraphicalItemSettings extends MaybeStackedGraphicalItem {
     data: ChartData;
     dataKey: DataKey<any> | undefined;

package/dist/state/rootPropsSlice.d.ts

@@ -1,4 +1,4 @@
-import { StackOffsetType, SyncMethod } from '../types';
+import { StackOffsetType, SyncMethod, VueClassValue } from '../types';
 /**
  * These are chart options that users can choose - which means they can also
  * choose to change them which should trigger a re-render.
@@ -12,7 +12,7 @@ export type UpdatableChartOptions = {
      * Useful for debugging which chart is which when synchronising.
      * The className is also passed to the root element of the chart but that's done in the JSX, not through Redux.
      */
-    class: string | undefined;
+    class: VueClassValue | undefined;
     maxBarSize: number | undefined;
     stackOffset: StackOffsetType;
     /**

package/dist/state/selectors/axisSelectors.d.ts

@@ -10,6 +10,7 @@ import { AxisDomain, AxisType, NumberDomain } from '../../types/axis';
 import { CategoricalDomain, Coordinate, DataKey, LayoutType, Size, StackOffsetType, TickItem } from '../../types';
 import { StackId } from '../../types/tick';
 import { RechartsScale } from '../../types/scale';
+import { InverseScaleFunction } from '../../utils/createCategoricalInverse';
 import { AxisPropsForCartesianGridTicksGeneration } from '../../cartesian/cartesian-grid/type';
 /**
  * angle, radius, X, Y, and Z axes all have domain and range and scale and associated settings
@@ -876,6 +877,9 @@ export declare const selectAxisScale: ((state: {
     argsMemoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
     memoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
 };
+export declare const selectSortedDataPoints: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => ReadonlyArray<unknown> | undefined;
+export declare const selectAxisInverseScale: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => InverseScaleFunction | undefined;
+export declare const selectAxisInverseDataSnapScale: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => InverseScaleFunction | undefined;
 export declare const selectErrorBarsSettings: ((state: {
     brush: import('../brushSlice').BrushSettings;
     cartesianAxis: {
@@ -1702,6 +1706,7 @@ export declare const selectTicksOfAxis: ((state: {
     argsMemoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
     memoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
 };
+export declare const selectAxisInverseTickSnapScale: (state: RechartsRootState, axisType: XorYorZType, axisId: AxisId, isPanorama: boolean) => InverseScaleFunction | undefined;
 export declare function combineGraphicalItemTicks(layout: LayoutType, axis: AxisWithTicksSettings, scale: RechartsScale | undefined, axisRange: AxisRange | undefined, duplicateDomain: ReadonlyArray<unknown> | undefined, categoricalDomain: ReadonlyArray<unknown> | undefined, axisType: XorYType): TickItem[] | null;
 export declare const selectTicksOfGraphicalItem: (state: RechartsRootState, axisType: XorYType, axisId: AxisId, isPanorama: boolean) => TickItem[] | null;
 export type BaseAxisWithScale = BaseCartesianAxis & {

package/dist/types/axis.d.ts

@@ -1,4 +1,4 @@
-import { DataKey } from './common';
+import { DataKey, VueClassValue } from './common';
 import { RechartsScale, ScaleType } from './scale';
 import { TickFormatter, TicksSettings } from './tick';
 export type AxisId = string | number;
@@ -113,7 +113,7 @@ export interface XAxisProps {
     angle?: number;
     minTickGap?: number;
     label?: string | number | any;
-    className?: string;
+    class?: VueClassValue;
 }
 /**
  * NumberDomain is an evaluated {@link AxisDomain}.

package/dist/types/bar.d.ts

@@ -1,4 +1,4 @@
-import { Coordinate } from './common';
+import { Coordinate, VueClassValue } from './common';
 import { CartesianViewBox } from '../cartesian/type';
 export type BarPositionPosition = {
     /**
@@ -16,9 +16,8 @@ export type BarPositionPosition = {
     size: number | undefined | typeof NaN;
 };
 export type RectRadius = [number, number, number, number];
-export type AnimationEasing = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
 interface RectangleProps {
-    className?: string;
+    class?: VueClassValue;
     x?: number;
     y?: number;
     width?: number;
@@ -26,9 +25,6 @@ interface RectangleProps {
     radius?: number | RectRadius;
     isAnimationActive?: boolean;
     isUpdateAnimationActive?: boolean;
-    animationBegin?: number;
-    animationDuration?: number;
-    animationEasing?: AnimationEasing;
 }
 export interface BarRectangleItem extends RectangleProps {
     value?: number | [number, number];