vccs 0.6.0 → 1.0.0-beta.2

package/dist/types/tooltip.d.ts

@@ -1,28 +1,22 @@
-import { DataKey, VueClassValue } from './common';
-/**
- * null means no active index
- * string means: whichever index from the chart data it is.
- * Different charts have different requirements on data shapes,
- * and are also responsible for providing a function that will accept this index
- * and return data.
- */
-export type TooltipIndex = string | null;
+import { ChartCoordinate, ChartDataKey, Coordinate, VueClassValue } from './base.js';
+import { VNodeChild } from 'vue';
+import { AxisId } from './axisSettings.js';
 export type TooltipEventType = 'axis' | 'item';
 export type TooltipTrigger = 'hover' | 'click';
 export type TooltipType = 'none';
 export type ValueType = number | string | Array<number | string>;
 export type NameType = number | string;
-export type Formatter<TValue extends ValueType, TName extends NameType> = (value: TValue, name: TName, item: Payload<TValue, TName>, index: number, payload: ReadonlyArray<Payload<TValue, TName>>) => any;
+export type Formatter<TValue extends ValueType, TName extends NameType> = (value: TValue, name: TName, item: Payload<TValue, TName>, index: number, payload: ReadonlyArray<Payload<TValue, TName>>) => VNodeChild;
 export interface Payload<TValue extends ValueType, TName extends NameType> {
     type?: TooltipType;
     color?: string;
     name?: TName;
     value?: TValue;
-    unit?: string;
+    unit?: string | number;
     fill?: string;
-    dataKey?: DataKey<any>;
-    nameKey?: DataKey<any>;
-    payload?: any;
+    dataKey?: ChartDataKey;
+    nameKey?: ChartDataKey;
+    payload?: unknown;
     chartType?: string;
     stroke?: string;
     strokeDasharray?: string | number;
@@ -31,3 +25,176 @@ export interface Payload<TValue extends ValueType, TName extends NameType> {
     hide?: boolean;
     formatter?: Formatter<TValue, TName>;
 }
+/**
+ * One Tooltip can display multiple TooltipPayloadEntries at a time.
+ */
+export type TooltipPayloadEntry = Payload<ValueType, NameType>;
+/**
+ * So what happens is that the tooltip payload is decided based on the available data, and the dataKey.
+ * The dataKey can either be defined on the graphical element (like Line, or Bar)
+ * or on the tooltip itself.
+ *
+ * The data can be defined in the chart element, or in the graphical item.
+ *
+ * So this type is all the settings, other than the data + dataKey complications.
+ */
+export type TooltipEntrySettings = Omit<TooltipPayloadEntry, 'payload' | 'value'> & {
+    nameKey: ChartDataKey | undefined;
+};
+/**
+ * This is what Tooltip renders.
+ */
+export type TooltipPayload = ReadonlyArray<TooltipPayloadEntry>;
+/** Position in the chart's keyboard target order; null clears selection. */
+export type TooltipActiveIndex = number | null;
+/** Hierarchy lookup keys stay separate from numeric selection indexes. */
+export type TooltipPayloadSearcher<T = unknown, R = T> = (data: T, payloadKey: string, nameKey?: ChartDataKey) => R | undefined;
+type TooltipKeyboardItem = {
+    /** Stable identity, independent of the current payload lookup path. */
+    identity?: unknown;
+    index: number;
+    payloadKey?: string;
+    coordinate: Coordinate;
+    onClick?: (event: KeyboardEvent) => void;
+};
+export type TooltipPayloadConfiguration = {
+    model?: {
+        /** Standalone selection owns the root rather than a series. */
+        root?: boolean;
+        index: () => TooltipActiveIndex | undefined;
+        request: (index: TooltipActiveIndex) => void;
+    };
+    keyboardItems?: ReadonlyArray<TooltipKeyboardItem>;
+    /** Pointer-only targets do not enter keyboard order. */
+    pointerItems?: ReadonlyArray<TooltipKeyboardItem>;
+    /**
+     * Value and name per item (numeric index or payload key) when they are not fields of the
+     * payload: hierarchy totals come from layout, and a cell's payload is its domain object.
+     */
+    values?: Readonly<Record<string, ValueType | null>>;
+    names?: Readonly<Record<string, string>>;
+    /** Per-entry swatch colours (Pie sectors, Funnel trapezoids), by item index; see core/color entryColor. */
+    colors?: ReadonlyArray<string | undefined>;
+    settings: TooltipEntrySettings;
+    /** Arrays use the numeric item index; hierarchies use the target payload key. */
+    dataDefinedOnItem: unknown;
+    /**
+     * Opportunity for the graphical item to define its own Tooltip coordinates
+     * instead of relying on the axes.
+     *
+     * If undefined, then Recharts will use mouse interaction coordinates, or the axis coordinates,
+     * with some defaults (like, top/left of the chart).
+     */
+    positions: Readonly<Partial<Record<number, Coordinate>>> | ReadonlyArray<Coordinate | undefined> | undefined;
+};
+export type ActiveTooltipProps = {
+    activeIndex: TooltipActiveIndex;
+    activeCoordinate: ChartCoordinate | undefined;
+};
+/**
+ * So this informs the "tooltip event type". Tooltip event type can be either "axis" or "item"
+ * and it is used for two things:
+ * 1. Sets the active area
+ * 2. Sets the background and cursor highlights
+ *
+ * Some charts only allow to have one type of tooltip event type, some allow both.
+ * Those charts that allow both will have one default, and the "shared" prop will be used to switch between them.
+ * Undefined means "use the chart default".
+ *
+ * Charts that only allow one tooltip event type, will ignore the shared prop.
+ */
+type SharedTooltipSettings = boolean | undefined;
+export type TooltipSettings = {
+    activeIndex?: TooltipActiveIndex;
+    shared: SharedTooltipSettings;
+    trigger: TooltipTrigger;
+    axisId: AxisId;
+    /**
+     * The `active` prop, despite its name, does not mean "always active".
+     * It means "active after user interaction has ended".
+     * By default, the tooltip is only active while the user is hovering over the chart.
+     * With `active=true`, the tooltip will remain visible after mouse leave event.
+     *
+     * If you want to see the "active before user interaction" settings, see `defaultIndex`.
+     *
+     * Undefined means "depends on user interactions".
+     */
+    active: boolean | undefined;
+    /**
+     * If you want to set the tooltip to be active before user interaction, you can set this property.
+     */
+    defaultIndex: TooltipActiveIndex | undefined;
+};
+/**
+ * A generic state for user interaction with the chart.
+ * User interaction can come through multiple channels: mouse events, keyboard events, or hardcoded in props, or synchronised from other charts.
+ *
+ * Each channel is represented as a TooltipInteraction, and the tooltip model decides which one wins.
+ */
+export type TooltipInteraction = {
+    configuration?: TooltipPayloadConfiguration;
+    /**
+     * If user interaction is in progress or not.
+     * Why is this its own property? Why is this not computed from the index?
+     * Certainly if index !== -1 then the tooltip is active, right?
+     * Well not so fast. Recharts allows Tooltips can be set to `active=true`
+     * which means the tooltip remains displayed after the user stops interacting.
+     * - This implies that we cannot set index to <empty value> after interaction ends,
+     *   because the chart must remember the last position just in case the `active` prop on Tooltip is set to true.
+     */
+    active: boolean;
+    /**
+     * This is the current data index that is set for the chart.
+     * This can come from mouse events, keyboard events, or hardcoded in props
+     * in property `defaultIndex` on Tooltip.
+     */
+    index: TooltipActiveIndex;
+    /**
+     * DataKey filter.
+     *
+     * In case of multiple graphical items, this is the dataKey that is set for the item.
+     * Very useful for `Tooltip.shared=false`, where activeIndex can display multiple values,
+     * but we only want to display one of them.
+     *
+     * If we want to interact with all the graphical items, then this is undefined.
+     * This is the case for eventTooltipType === 'axis' for example.
+     */
+    dataKey: ChartDataKey | undefined;
+    /**
+     * The Coordinate where user last interacted with the chart. This needs saved so we can continue to render the tooltip at that point.
+     * This is undefined on several occasions:
+     * - before the user started interacting with the chart,
+     * - when the chart is controlled programmatically through `defaultIndex` prop
+     * - when the chart is controlled using keyboard interactions
+     */
+    coordinate: Coordinate | undefined;
+};
+export type TooltipSyncInteraction = TooltipInteraction & {
+    /**
+     * Tooltip synchronization is a feature that allows multiple charts to share the same interaction state.
+     * This comes with one specialty - the syncMethod. `syncMethod=value` allows the user to synchronise charts
+     * based on the active label (which is rendered as the title of the Tooltip).
+     * To allow that, we need the label to be stored in the sync state.
+     */
+    label: string | undefined;
+};
+/**
+ * A request to select a tooltip target. An axis request selects a category. Any other request
+ * names its series by the registered configuration, because a dataKey is not unique (two
+ * Scatters may have none); `index: null` clears the selection.
+ */
+export type TooltipTargetRequest = {
+    active?: boolean;
+    coordinate?: ChartCoordinate;
+} & ({
+    type: 'axis';
+    index: TooltipActiveIndex;
+} | {
+    type?: TooltipEventType;
+    index: TooltipActiveIndex;
+    configuration: TooltipPayloadConfiguration | undefined;
+} | {
+    type?: TooltipEventType;
+    index: null;
+});
+export {};

package/dist/types/typed.d.ts

@@ -0,0 +1,16 @@
+import { VNode } from 'vue';
+type RowPath<Row, Remaining extends readonly unknown[] = [1, 1, 1, 1]> = Remaining extends readonly [unknown, ...infer Rest] ? {
+    [Key in Extract<keyof Row, string | number>]: Key | (NonNullable<Row[Key]> extends readonly (infer Entry)[] ? `${Key}[${number}]` | `${Key}[${number}].${RowPath<Entry, Rest> & (string | number)}` : NonNullable<Row[Key]> extends object ? `${Key}.${RowPath<NonNullable<Row[Key]>, Rest> & (string | number)}` : never);
+}[Extract<keyof Row, string | number>] : Row extends object ? string | number : never;
+export type RowDataKey<Row> = RowPath<Row> | ((row: Row) => unknown);
+export interface ChartRenderContext<Slots> {
+    slots: Slots;
+    attrs: Record<string, unknown>;
+    emit: (...args: never[]) => void;
+}
+export type ChartVNode<Props, Slots> = VNode & {
+    __ctx?: ChartRenderContext<Slots> & {
+        props: Props;
+    };
+};
+export {};

package/dist/{cartesian/type.d.ts → types/viewBox.d.ts}

@@ -1,5 +1,3 @@
-export type Unit = string | number;
-export type Orientation = 'top' | 'bottom' | 'left' | 'right';
 export interface PolarViewBox {
     cx?: number;
     cy?: number;

package/dist/utils/ReduceCSSCalc.d.ts

@@ -1,2 +1 @@
-export declare function safeEvaluateExpression(expression: string): string;
 export declare function reduceCSSCalc(expression: string): string;

package/dist/utils/VueUtils.d.ts

@@ -1,11 +1,8 @@
-import { FilteredSvgElementType } from '../cartesian/cartesian-grid/const';
+import { FilteredSvgElementType } from './svg.js';
+export declare function filterProps(props: Record<string, unknown> | boolean | unknown, includeEvents: boolean, svgElementType?: FilteredSvgElementType): Record<string, unknown> | null;
 /**
- * Checks if the property is valid to spread onto an SVG element or onto a specific component
- * @param {unknown} property property value currently being compared
- * @param {string} key property key currently being compared
- * @param {boolean} includeEvents if events are included in spreadable props
- * @param {boolean} svgElementType checks against map of SVG element types to attributes
- * @returns {boolean} is prop valid
+ * The attributes of `source` that belong on an SVG element, under their SVG names. Chart data
+ * passed along as props (payload, dataKey, tooltipPosition…) never reaches the DOM.
+ * Vue listeners (onClick, onMouseenter) are kept.
  */
-export declare function isValidSpreadableProp(property: unknown, key: string, includeEvents?: boolean, svgElementType?: FilteredSvgElementType): boolean;
-export declare function filterProps(props: Record<string, any> | boolean | unknown, includeEvents: boolean, svgElementType?: FilteredSvgElementType): Record<string, any>;
+export declare function svgAttrs(source: Record<string, unknown> | null | undefined): Record<string, unknown>;

package/dist/utils/attributes.d.ts

@@ -0,0 +1,56 @@
+import { AriaAttributes, SVGAttributes } from 'vue';
+type CamelCase<Name extends string> = Name extends `${infer Head}-${infer Tail}` ? `${Head}${Capitalize<CamelCase<Tail>>}` : Name;
+type Letter = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
+/**
+ * `data-*` attributes, in the camelized form strict templates check on components. At least one
+ * letter follows `data`: a bare `data` is no data attribute, so undeclared it stays an error.
+ */
+type DataAttributes = {
+    [key: `data${Letter}${string}`]: unknown;
+};
+/**
+ * SVG attributes in the form that strict Vue templates check on a component: Volar camelizes
+ * attribute names except `aria-*`. `class` and `style` are allowed on every component already.
+ */
+export type SvgTemplateAttributes = {
+    [Key in keyof SVGAttributes as Key extends `aria-${string}` | 'class' | 'style' ? never : Key extends string ? CamelCase<Key> : never]?: SVGAttributes[Key];
+} & AriaAttributes & DataAttributes;
+/**
+ * Attributes a template may pass to a component whose root is an HTML element. Only the
+ * accessibility and test hooks: Vue's `HTMLAttributes` also carries augmentations from other
+ * packages (motion-v adds gesture props), which must not leak into our declarations.
+ */
+export type HtmlTemplateAttributes = AriaAttributes & DataAttributes & {
+    id?: string;
+    role?: string;
+};
+type ComponentConstructor = abstract new (...args: never) => {
+    $props: unknown;
+};
+/**
+ * Adds `Attributes` to the template props of component `C`. Declared props keep their own types;
+ * only names the component does not declare are added. An interface, so declarations name it
+ * instead of expanding the component type.
+ */
+interface ForwardedAttributes<C extends ComponentConstructor, Attributes> {
+    new (props?: Record<string, unknown>): InstanceType<C> & {
+        $props: Omit<Attributes, keyof InstanceType<C>['$props']>;
+    };
+    /** Type only: the declared props without the forwarded attributes (see `DeclaredProps`). */
+    readonly '~declaredProps'?: InstanceType<C>['$props'];
+}
+export type WithAttributes<C extends ComponentConstructor, Attributes> = C & ForwardedAttributes<C, Attributes>;
+/** The props a component declares, with its events and v-model updates, but no forwarded attributes. */
+export type DeclaredProps<C extends ComponentConstructor> = C extends {
+    readonly '~declaredProps'?: infer Props;
+} ? unknown extends Props ? InstanceType<C>['$props'] : Props : InstanceType<C>['$props'];
+/**
+ * Marks a component that forwards undeclared attributes (`stroke-dasharray`, `data-*`,
+ * `aria-*`) to its root SVG element, so strict templates (`strictTemplates`) accept them.
+ * Runtime behaviour is unchanged: Vue already forwards these attributes. `@__NO_SIDE_EFFECTS__`
+ * tells bundlers that a call can be dropped, so an unused wrapped component is tree-shaken.
+ */
+export declare function forwardsSvgAttributes<C extends ComponentConstructor>(component: C): WithAttributes<C, SvgTemplateAttributes>;
+/** Like `forwardsSvgAttributes`, for components whose root is an HTML element. */
+export declare function forwardsHtmlAttributes<C extends ComponentConstructor>(component: C): WithAttributes<C, HtmlTemplateAttributes>;
+export {};

package/dist/utils/attrs.d.ts

@@ -1,46 +1,5 @@
-import { Size } from '../types';
+import { Size } from '../types/index.js';
 import { CSSProperties } from 'vue';
-export declare function getStringSize(text: string | number, style?: CSSProperties): Size;
-export type RequiredKeys<T> = {
-    [K in keyof T]-?: object extends Pick<T, K> ? never : K;
-}[keyof T];
-export type OptionalKeys<T> = {
-    [K in keyof T]-?: object extends Pick<T, K> ? K : never;
-}[keyof T];
-export type DisallowExtraKeys<T, D> = {
-    [K in keyof D]: K extends keyof T ? D[K] : never;
-};
-/**
- * This type will take a source type `T` and a default type `D` and will return a new type
- * where all properties that are optional in `T` but required in `D` are made required in the result.
- * Properties that are required in `T` and optional in `D` will remain required.
- * Properties that are optional in both `T` and `D` will remain optional.
- *
- * This is useful for creating a type that represents the resolved props of a component with default props.
- */
-export type RequiresDefaultProps<T, D extends Partial<T>> = Pick<T, RequiredKeys<T>> & Required<Pick<T, Extract<OptionalKeys<T>, RequiredKeys<D>>>> & Pick<T, Exclude<OptionalKeys<T>, keyof D>>;
-/**
- * This function mimics the behavior of the `defaultProps` static property in React.
- * Functional components do not have a defaultProps property, so this function is useful to resolve default props.
- *
- * The common recommendation is to use ES6 destructuring with default values in the function signature,
- * but you need to be careful there and make sure you destructure all the individual properties
- * and not the whole object. See the test file for example.
- *
- * And because destructuring all properties one by one is a faff, and it's easy to miss one property,
- * this function exists.
- *
- * @param realProps - the props object passed to the component by the user
- * @param defaultProps - the default props object defined in the component by Recharts
- * @returns - the props object with all the default props resolved. All `undefined` values are replaced with the default value.
- */
-export declare function resolveDefaultProps<T, D extends Partial<T>>(realProps: T, defaultProps: D & DisallowExtraKeys<T, D>): RequiresDefaultProps<T, D>;
-/**
- * merge props and attrs
- * @param props - props
- * @param attrs - attrs
- * @returns merged props
- */
-export declare function mergePropAttrs<T extends object>(props: T, attrs: any): T & {
-    toObject: () => T;
-};
+/** Test isolation only: measurements stubbed in one test must not leak into the next. */
+export declare function clearStringSizeCache(): void;
+export declare function getStringSize(text: unknown, style?: CSSProperties, canMeasure?: boolean): Size;

package/dist/utils/cartesian.d.ts

@@ -1,19 +1,5 @@
-import { Sign } from '../cartesian/type';
-import { Size } from '../types';
-import { CartesianTickItem } from '../types/tick';
-/**
- * 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.
- */
-export declare function normalizeAngle(angle: number): number;
-/**
- * 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} 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.
- */
-export declare function getAngledRectangleWidth({ width, height }: Size, angle?: number | undefined): number;
+import { Sign } from '../types/viewBox.js';
+import { CartesianTickItem } from '../types/tick.js';
 export declare function getEquidistantTicks(sign: Sign, boundaries: {
     start: number;
     end: number;

package/dist/utils/cell.d.ts

@@ -1,11 +1,16 @@
-import { VNode } from 'vue';
+import { SVGAttributes, ShallowRef, VNode } from 'vue';
 /**
  * Extract Cell VNode props from a VNode tree.
  * Handles Fragment wrapping from v-for.
  */
-export declare function extractCellProps(vnodes: VNode[]): Record<string, any>[];
+export declare function extractCellProps(vnodes: VNode[]): Array<SVGAttributes & Record<string, unknown>>;
 /**
  * Filter out Cell VNodes from a VNode tree, preserving non-Cell siblings.
  * Recursively descends Fragment children to preserve co-located content (e.g. LabelList).
  */
 export declare function filterOutCells(vnodes: VNode[]): VNode[];
+/**
+ * Stores the Cell props read during a render, but only when they changed: a new but equal array
+ * would re-run everything that reads it (legend payloads, geometry) on every render.
+ */
+export declare function assignCells(target: ShallowRef<Array<SVGAttributes & Record<string, unknown>>>, cells: Array<SVGAttributes & Record<string, unknown>>): void;

package/dist/utils/chart.d.ts

@@ -1,99 +1,2 @@
-import { BaseAxisProps } from '../cartesian/axis/type';
-import { PolarViewBoxRequired } from '../cartesian/type';
-import { NormalizedStackId } from '../shape';
-import { BaseAxisWithScale, StackGroup } from '../state/selectors/axisSelectors';
-import { TooltipEntrySettings, TooltipPayloadEntry } from '../state/tooltipSlice';
-import { ChartCoordinate, ChartOffsetRequired, ChartPointer, Coordinate, DataKey, LayoutType, StackOffsetType, TickItem, ValueType } from '../types';
-import { AxisRange, AxisType, NumberDomain } from '../types/axis';
-import { AxisPropsNeededForTicksGenerator, StackId } from '../types/tick';
-import { Series, SeriesPoint } from 'victory-vendor/d3-shape';
-/**
- * Get the ticks of an axis
- * @param  {object}  axis The configuration of an axis
- * @param {boolean} isGrid Whether or not are the ticks in grid
- * @param {boolean} isAll Return the ticks of all the points or not
- * @return {Array}  Ticks
- */
-export declare function getTicksOfAxis(axis: null | AxisPropsNeededForTicksGenerator, isGrid?: boolean, isAll?: boolean): ReadonlyArray<TickItem> | null;
-export declare function getValueByDataKey<T>(obj: T, dataKey: DataKey<T>, defaultValue?: any): any;
-export declare const MIN_VALUE_REG: RegExp;
-export declare const MAX_VALUE_REG: RegExp;
-/**
- * Calculate the size between two category
- * @param  {object} axis  The options of axis
- * @param  {Array}  ticks The ticks of axis
- * @param  {boolean} isBar if items in axis are bars
- * @return {number} Size
- */
-export declare function getBandSizeOfAxis(axis?: BaseAxisWithScale, ticks?: ReadonlyArray<TickItem>, isBar?: boolean): number | undefined;
-/**
- * Both value and domain are tuples of two numbers
- * - but the type stays as array of numbers until we have better support in rest of the app
- * @param value input that will be truncated
- * @param domain boundaries
- * @returns tuple of two numbers
- */
-export declare function truncateByDomain(value: SeriesPoint<Record<number, number>>, domain: ReadonlyArray<number>): [number, number] | SeriesPoint<Record<number, number>>;
-export declare function getNormalizedStackId(publicStackId: StackId | undefined): NormalizedStackId | undefined;
-export declare function getCateCoordinateOfLine<T extends Record<string, unknown>>({ axis, ticks, bandSize, entry, index, dataKey, }: {
-    axis: {
-        dataKey?: DataKey<T>;
-        allowDuplicatedCategory?: boolean;
-        type?: BaseAxisProps['type'];
-        scale: (v: number) => number;
-    };
-    ticks: Array<TickItem>;
-    bandSize: number;
-    entry: T;
-    index: number;
-    dataKey?: DataKey<T>;
-}): number | null;
-export declare function getChartPointer(event: PointerEvent | MouseEvent): ChartPointer | undefined;
-export declare function getTooltipEntry({ tooltipEntrySettings, dataKey, payload, value, name, }: {
-    tooltipEntrySettings: TooltipEntrySettings;
-    dataKey: DataKey<any>;
-    payload: any;
-    value: ValueType;
-    name: string | undefined;
-}): TooltipPayloadEntry;
-export type RangeObj = {
-    x?: number;
-    y?: number;
-    cx?: number;
-    cy?: number;
-    angle?: number;
-    radius?: number;
-};
-export declare function calculateTooltipPos(rangeObj: RangeObj, layout: LayoutType): number | undefined;
-export declare function inRangeOfSector({ x, y }: Coordinate, viewBox: PolarViewBoxRequired): RangeObj | null;
-export declare function inRange(x: number, y: number, layout: LayoutType, polarViewBox: PolarViewBoxRequired | undefined, offset: ChartOffsetRequired): RangeObj | null;
-export declare function calculateActiveTickIndex(coordinate: number, ticks: ReadonlyArray<TickItem>, unsortedTicks: ReadonlyArray<TickItem>, axisType: AxisType | undefined, range: AxisRange | undefined): number;
-export declare function getActiveCoordinate(layout: LayoutType, tooltipTicks: readonly TickItem[], activeIndex: number, rangeObj: RangeObj): ChartCoordinate;
-export declare function getDomainOfStackGroups(stackGroups: Record<StackId, StackGroup> | undefined, startIndex: number, endIndex: number): NumberDomain | undefined;
-export declare function checkDomainOfScale(scale: any): void;
-export declare function getTooltipNameProp(nameFromItem: string | number | undefined | unknown, dataKey: DataKey<any> | undefined): string | undefined;
-export declare function isClipDot(dot: any): boolean;
-type OffsetAccessor = (series: Array<Series<Record<string, unknown>, string>>, order: number[]) => void;
-export declare const offsetSign: OffsetAccessor;
-/**
- * Replaces all negative values with zero when stacking data.
- *
- * If all values in the series are positive then this behaves the same as 'none' stacker.
- *
- * @param {Array} series from d3-shape Stack
- * @return {Array} series with applied offset
- */
-export declare const offsetPositive: OffsetAccessor;
-export declare function getStackedData(data: ReadonlyArray<Record<string, unknown>>, dataKeys: ReadonlyArray<DataKey<any>>, offsetType: StackOffsetType): ReadonlyArray<Series<Record<string, unknown>, DataKey<any>>>;
-export declare function getBaseValueOfBar({ numericAxis }: {
-    numericAxis: BaseAxisWithScale;
-}): number | unknown;
-export declare function getCateCoordinateOfBar({ axis, ticks, offset, bandSize, entry, index, }: {
-    axis: BaseAxisWithScale;
-    ticks: ReadonlyArray<TickItem>;
-    offset: number;
-    bandSize: number;
-    entry: any;
-    index: number;
-}): number | null;
-export {};
+import { DataKey } from '../types/index.js';
+export declare function getValueByDataKey<T>(obj: unknown, dataKey: DataKey<T> | undefined, defaultValue?: unknown): any;

package/dist/utils/const.d.ts

@@ -3,28 +3,5 @@
  * The index is the position of the element in the data array.
  * This can be either a number (for array-based charts) or a string (for the charts that have a matrix-shaped data).
  */
-export declare const DATA_ITEM_INDEX_ATTRIBUTE_NAME = "data-recharts-item-index";
-/**
- * We use this attribute to identify which element is the one that the user is touching.
- * DataKey works here as a kind of identifier for the element. It's not a perfect identifier for ~two~ three reasons:
- *
- * 1. There can be two different elements with the same dataKey; we won't know which is it
- * 2. DataKey can be a function, and that serialized will be a `[Function: anonymous]` string
- * which means we will be able to identify that it was a function but can't tell which one.
- * This will lead to some weird bugs. A proper fix would be to either:
- * a) use a unique identifier for each element (passed from props, or generated)
- * b) figure out how to compare the dataKey or graphical item by object reference
- *
- * a) is a fuss because we don't have the unique identifier in props,
- * and b) is possible most of the time except for touchMove events which work differently from mouseEnter/mouseLeave:
- * - while mouseEnter is fired for the element that the mouse is over,
- * touchMove is fired for the element where user has started touching. As the finger moves,
- * we can identify the element that the user is touching by using the elementFromPoint method,
- * but it keeps calling the handler on the element where touchStart was fired.
- *
- * Okay and now I discovered a third reason: the dataKey can be undefined and that's still fine
- * because if dataKey is undefined then graphical elements assume the dataKey of the axes.
- * Which makes it a convenient way of using recharts to render a chart but horrible identifier.
- */
-export declare const DATA_ITEM_DATAKEY_ATTRIBUTE_NAME = "data-recharts-item-data-key";
+export declare const DATA_ITEM_INDEX_ATTRIBUTE_NAME = "data-v-charts-item-index";
 export declare const DEFAULT_Y_AXIS_WIDTH = 60;

package/dist/utils/createCategoricalInverse.d.ts

@@ -1,9 +1,5 @@
-import { RechartsScale } from '../types/scale';
+import { RechartsScale } from '../types/scale.js';
 export type InverseScaleFunction = (pixelValue: number) => unknown;
-/**
- * Binary search for sorted arrays (ascending or descending).
- */
-export declare function bisect(haystack: ReadonlyArray<number>, needle: number): number;
 /**
  * Creates an inverse scale function for categorical/ordinal scales.
  * Uses bisect to find the closest domain value for a given pixel coordinate.
@@ -13,4 +9,4 @@ export declare function createCategoricalInverse(scale: RechartsScale | undefine
  * Creates an inverse function: uses native `.invert` for numeric scales,
  * falls back to categorical bisect for ordinal/band/point scales.
  */
-export declare function combineInverseScaleFunction(scale: RechartsScale | undefined): InverseScaleFunction | undefined;
+export declare function inverseScaleFunction(scale: RechartsScale | undefined): InverseScaleFunction | undefined;

package/dist/utils/data-utils.d.ts

@@ -1,4 +1,3 @@
-export declare function uniqueId(prefix?: string): string;
 export declare function interpolate(start: unknown, end: number, t: number): number;
 export declare function interpolate(start: unknown, end: null, t: number): null;
 export declare function interpolate(start: unknown, end: number | null, t: number): number | null;

package/dist/utils/data.d.ts

@@ -9,5 +9,4 @@ export declare function hasDuplicate(ary: ReadonlyArray<unknown>): boolean;
  * @return {number} value
  */
 export declare function getPercentValue(percent: number | string, totalValue: number, defaultValue?: number, validate?: boolean): number;
-export declare function findEntryInArray<T>(ary: ReadonlyArray<T>, specifiedKey: number | string | ((entry: T) => unknown), specifiedValue: unknown): T;
-export declare function interpolateNumber(numberA: number | undefined, numberB: number | undefined, t: number): number;
+export declare function findEntryInArray<T>(ary: ReadonlyArray<T>, specifiedKey: number | string | ((entry: T) => unknown), specifiedValue: unknown): T | null | undefined;

package/dist/utils/env.d.ts

@@ -0,0 +1,5 @@
+/**
+ * True without a DOM. Only for defaults outside a component, such as text measurement in
+ * plain functions; inside setup use `isServerRender()` from model/runtime.
+ */
+export declare function isServer(): boolean;

package/dist/utils/events.d.ts

@@ -1,12 +1,19 @@
-import { default as EventEmitter } from 'eventemitter3';
-import { PayloadAction } from '@reduxjs/toolkit';
-import { TooltipSyncState } from '../state/tooltipSlice';
-import { BrushStartEndIndex } from '../state/chartDataSlice';
-declare const eventCenter: EventEmitter<EventTypes>;
-export { eventCenter };
+import { TooltipSyncInteraction } from '../types/tooltip.js';
+import { BrushStartEndIndex } from '../types/chartData.js';
 export declare const TOOLTIP_SYNC_EVENT = "recharts.syncEvent.tooltip";
 export declare const BRUSH_SYNC_EVENT = "recharts.syncEvent.brush";
+export type TooltipSyncMessage = TooltipSyncInteraction & {
+    kind: 'tooltip';
+};
 interface EventTypes {
-    [TOOLTIP_SYNC_EVENT]: (syncId: number | string, data: PayloadAction<TooltipSyncState>, emitter: symbol) => void;
+    [TOOLTIP_SYNC_EVENT]: (syncId: number | string, data: TooltipSyncMessage, emitter: symbol) => void;
     [BRUSH_SYNC_EVENT]: (syncId: number | string, data: BrushStartEndIndex, emitter: symbol) => void;
 }
+export type SyncEventName = keyof EventTypes;
+export type SyncListener<T extends SyncEventName> = (...args: Parameters<EventTypes[T]>) => void;
+export declare const eventCenter: {
+    on<Event extends SyncEventName>(event: Event, listener: SyncListener<NoInfer<Event>>): void;
+    off<Event extends SyncEventName>(event: Event, listener: SyncListener<NoInfer<Event>>): void;
+    emit<Event extends SyncEventName>(event: Event, ...args: Parameters<EventTypes[NoInfer<Event>]>): void;
+};
+export {};

package/dist/utils/grid.d.ts

@@ -1,5 +1,4 @@
-import { AxisPropsForCartesianGridTicksGeneration } from '../cartesian/cartesian-grid/type';
-import { ChartOffset, TickItem } from '../types';
+import { TickItem } from '../types/index.js';
 /**
  * Calculate the Coordinates of grid
  * @param  {Array} ticks           The ticks in axis
@@ -9,29 +8,3 @@ import { ChartOffset, TickItem } from '../types';
  * @return {Array}                 Coordinates
  */
 export declare function getCoordinatesOfGrid(ticks: ReadonlyArray<TickItem>, minValue: number, maxValue: number, syncWithTicks: boolean): number[];
-export type HorizontalCoordinatesGenerator = (props: {
-    yAxis: AxisPropsForCartesianGridTicksGeneration;
-    width: number;
-    height: number;
-    offset: ChartOffset;
-}, syncWithTicks: boolean) => number[];
-export declare const defaultHorizontalCoordinatesGenerator: HorizontalCoordinatesGenerator;
-export type VerticalCoordinatesGenerator = (props: {
-    xAxis: AxisPropsForCartesianGridTicksGeneration;
-    width: number;
-    height: number;
-    offset: ChartOffset;
-}, syncWithTicks: boolean) => number[];
-export declare const defaultVerticalCoordinatesGenerator: VerticalCoordinatesGenerator;
-export declare function calculateHorizontalPoints(yAxis: AxisPropsForCartesianGridTicksGeneration, width: number, height: number, offset: ChartOffset, syncWithTicks: boolean, customPoints?: number[], horizontalValues?: number[] | string[], horizontalCoordinatesGenerator?: (props: {
-    yAxis: AxisPropsForCartesianGridTicksGeneration;
-    width: number;
-    height: number;
-    offset: ChartOffset;
-}, syncWithTicks: boolean) => number[]): number[];
-export declare function calculateVerticalPoints(xAxis: AxisPropsForCartesianGridTicksGeneration, width: number, height: number, offset: ChartOffset, syncWithTicks: boolean, customPoints?: number[], verticalValues?: number[] | string[], verticalCoordinatesGenerator?: (props: {
-    xAxis: AxisPropsForCartesianGridTicksGeneration;
-    width: number;
-    height: number;
-    offset: ChartOffset;
-}, syncWithTicks: boolean) => number[]): number[];