vccs 0.6.0 → 1.0.0-beta.2

package/dist/animation/useKeyedTransition.d.ts

@@ -0,0 +1,86 @@
+import { ShallowRef } from 'vue';
+import { ChartTransition, PhaseTiming, Reveal } from './motion.js';
+type TransitionPhase = 'enter' | 'update' | 'exit';
+export interface DisplayItem<T> {
+    key: PropertyKey;
+    value: T;
+    phase: TransitionPhase;
+    /** Eased progress of this item's phase in [0, 1]; absent once settled. */
+    progress?: number;
+}
+export interface KeyedTransitionOptions<T> {
+    /** Stable identity across data changes (category, name). Never geometry. */
+    key: (item: T, index: number) => PropertyKey;
+    /** The value between two states; `t` is eased progress; user springs may overshoot. */
+    interpolate: (from: T, to: T, t: number) => T;
+    /**
+     * Where an entering item starts, e.g. a bar with zero height on its baseline. `neighbors`
+     * are the closest items on either side that are already on screen, so a new point of a line
+     * can grow out of its neighbour.
+     */
+    enterFrom: (to: T, neighbors: Neighbors<T>) => T;
+    /** Where an exiting item ends, e.g. collapsed onto its baseline or into a remaining neighbour. */
+    exitTo: (from: T, neighbors: Neighbors<T>) => T;
+    isActive: () => boolean;
+    /**
+     * The items form one path (a line or area). Every point then follows the update timing, so
+     * each frame is a blend of two ordered point lists and the path never crosses itself.
+     * Separate shapes (bars) leave faster than they arrive.
+     */
+    connected?: boolean;
+    /** Axes and grids follow the series; they do not count as an animated series themselves. */
+    followsSeries?: boolean;
+    /** A user `transition` prop. When set, every phase follows it instead of the motion tokens. */
+    transition?: () => ChartTransition | undefined;
+    /** Timing of the first appearance instead of the `enter` token, e.g. a line drawing itself. */
+    entrance?: () => PhaseTiming;
+    /**
+     * A resize during the entrance: the item at its new place (`target`) that keeps the
+     * entrance's own progress from `current` (e.g. how far a line is drawn). Without it a resize
+     * ends the entrance at once.
+     */
+    keepEntrance?: (current: T, target: T) => T;
+    /**
+     * Play the entrance after hydration instead of showing the final state at once. The server
+     * renders the entrance's start (e.g. a line not drawn yet, bars on their baseline), so
+     * hydration matches it. On by default for series; axes and grids follow them.
+     */
+    entranceAfterHydration?: boolean;
+    /**
+     * The first appearance, when it differs from a later enter: where each item starts (`from`)
+     * and, for a cascade, its turn (`order`, 0 first to 1 last). Items with an order start one
+     * after another on the cascade timing; later changes are unaffected.
+     */
+    reveal?: () => Reveal<T> | undefined;
+    onStart?: () => void;
+    onEnd?: () => void;
+}
+export interface Neighbors<T> {
+    previous?: T;
+    next?: T;
+    /**
+     * How the closest staying neighbours move in this change (on-screen value → target), so an
+     * entering or leaving item can travel with them, e.g. bars sliding along a shifted window.
+     */
+    previousMove?: Move<T>;
+    nextMove?: Move<T>;
+}
+export interface Move<T> {
+    from: T;
+    to: T;
+}
+/**
+ * Keyed enter/update/exit transitions on one clock.
+ *
+ * - Items match by `key`, so inserting at the front slides the others instead of morphing
+ *   every item into its neighbour, and DOM nodes keyed by `key` stay mounted.
+ * - A change during a transition starts from what is on screen now.
+ * - Exiting items stay in `items` (phase 'exit') until they have left.
+ * - Reduced motion, `isActive() === false`, server render and hydration show the target
+ *   at once without start/end callbacks.
+ */
+export declare function useKeyedTransition<T>(target: () => readonly T[] | undefined, options: KeyedTransitionOptions<T>): {
+    items: ShallowRef<DisplayItem<T>[]>;
+    isAnimating: ShallowRef<boolean>;
+};
+export {};

package/dist/animation/usePointTransition.d.ts

@@ -0,0 +1,40 @@
+import { Point } from '../types/shape.js';
+import { ChartTransition, PhaseTiming } from './motion.js';
+/** A point whose `y` may be `null`: a gap that is drawn as a break, never interpolated. */
+interface MaybeGapPoint {
+    readonly x: number;
+    readonly y: number | null;
+}
+interface PointState<T> {
+    point: T;
+    index: number;
+    baseline?: number | Point;
+    reveal: number;
+}
+/** Top and baseline share identity and a clock, including the initial clip sweep. */
+export declare function usePointTransition<T extends MaybeGapPoint>(target: () => readonly T[] | undefined, options: {
+    key: (point: T, index: number) => PropertyKey;
+    baseline?: () => number | readonly Point[] | undefined;
+    /**
+     * The series is hidden (legend). A series with a baseline (an area) folds onto it, so a
+     * stack closes smoothly over it; one without (a line) sweeps out.
+     */
+    hidden?: () => boolean;
+    /** The value axis a hidden series folds along: 'x' in vertical layouts. */
+    valueAxis?: () => 'x' | 'y';
+    isActive: () => boolean;
+    transition: () => ChartTransition | undefined;
+    /** Timing of the first appearance, e.g. a line drawing itself. */
+    entrance?: () => PhaseTiming;
+    /** Play the first appearance after hydration; the server renders it undrawn. */
+    entranceAfterHydration?: boolean;
+    onStart: () => void;
+    onEnd: () => void;
+}): {
+    items: import('vue').ShallowRef<import('./useKeyedTransition.js').DisplayItem<PointState<T>>[]>;
+    points: import('vue').ComputedRef<T[]>;
+    baseline: import('vue').ComputedRef<number | Point[]>;
+    reveal: import('vue').ComputedRef<number>;
+    isAnimating: import('vue').ShallowRef<boolean>;
+};
+export {};

package/dist/animation/useReducedMotion.d.ts

@@ -0,0 +1,2 @@
+/** The server and the first hydration render cannot know the browser's preference. */
+export declare function useReducedMotion(): import('vue').ComputedRef<import('@vueuse/core').ReducedMotionType>;

package/dist/animation/useTickMotion.d.ts

@@ -0,0 +1,22 @@
+import { RechartsScale } from '../types/scale.js';
+interface TickLike {
+    value?: unknown;
+    coordinate: number;
+    tickCoord?: number;
+}
+export type MovingTick<T> = T & {
+    opacity: number;
+};
+/**
+ * Axis ticks and grid lines follow their values when the scale changes, on the same clock as the
+ * series: a tick that stays slides to its new place, a new tick fades in from where the old scale
+ * would have put its value, and a leaving tick fades out towards its place on the new scale. So
+ * labels never disagree with the bars and lines they describe while those move.
+ *
+ * The first render, server render, hydration and reduced motion show the ticks at once.
+ */
+export declare function useTickMotion<T extends TickLike>(ticks: () => readonly T[], scale: () => RechartsScale | undefined, range: () => readonly [number, number]): {
+    items: import('vue').ShallowRef<import('./useKeyedTransition.js').DisplayItem<MovingTick<T>>[]>;
+    isAnimating: import('vue').ShallowRef<boolean>;
+};
+export {};

package/dist/cartesian/ActivePoints.d.ts

@@ -0,0 +1,71 @@
+import { ChartDataKey } from '../types/base.js';
+import { PropType, SlotsType, VNodeChild } from 'vue';
+import { Point } from '../types/shape.js';
+export interface ActivePointSlotProps {
+    'index': number;
+    'dataKey': ChartDataKey;
+    'cx': number;
+    'cy': number;
+    'r': number;
+    'fill': string | undefined;
+    'stroke-width': number;
+    'stroke': string;
+    'payload': unknown;
+    'value'?: number | number[];
+}
+type ActivePoint = Point & {
+    readonly value?: number | number[];
+};
+export interface ActivePointsSlots {
+    activeDot?: (props: ActivePointSlotProps) => VNodeChild;
+}
+/** The highlighted point of Area, Line and Radar at the active tooltip index. */
+export declare const ActivePoints: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    points: {
+        type: PropType<ReadonlyArray<ActivePoint>>;
+        required: true;
+    };
+    /** The series main colour (see core/color mainColor). */
+    mainColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    itemDataKey: {
+        type: PropType<ChartDataKey>;
+        required: true;
+    };
+    activeDot: {
+        type: PropType<boolean | Record<string, unknown>>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    points: {
+        type: PropType<ReadonlyArray<ActivePoint>>;
+        required: true;
+    };
+    /** The series main colour (see core/color mainColor). */
+    mainColor: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    itemDataKey: {
+        type: PropType<ChartDataKey>;
+        required: true;
+    };
+    activeDot: {
+        type: PropType<boolean | Record<string, unknown>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    isAnimationActive: boolean;
+    mainColor: string;
+}, SlotsType<ActivePointsSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};

package/dist/cartesian/GraphicalItemClipPath.d.ts

@@ -12,7 +12,7 @@ export declare const GraphicalItemClipPath: import('vue').DefineComponent<import
         type: PropType<string>;
         required: true;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     xAxisId: {
         type: PropType<string | number>;
         default: number;
@@ -26,6 +26,31 @@ export declare const GraphicalItemClipPath: import('vue').DefineComponent<import
         required: true;
     };
 }>> & Readonly<{}>, {
-    yAxisId: string | number;
     xAxisId: string | number;
+    yAxisId: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+ * Dots with `clipDot: false` may overflow the plot by their own size; Line and Area clip them
+ * with this rect instead of the series clip (Recharts rule: dot size = 2 * r + strokeWidth).
+ */
+export declare const DotsClipPath: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    clipPathId: {
+        type: StringConstructor;
+        required: true;
+    };
+    dot: {
+        type: PropType<boolean | object>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    clipPathId: {
+        type: StringConstructor;
+        required: true;
+    };
+    dot: {
+        type: PropType<boolean | object>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    dot: boolean | object;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/area/Area.d.ts

@@ -1,17 +1,232 @@
-import { AreaDotSlotProps, AreaPropsWithSVG } from './type';
-import { ActivePointsSlots } from './ActivePoints';
+import { PropType, SlotsType, VNodeChild } from 'vue';
+import { LabelListSlotProps } from '../../components/label/types.js';
+import { AreaDotSlotProps } from './type.js';
+import { ActivePointsSlots } from '../ActivePoints.js';
 export type AreaSlots = ActivePointsSlots & {
-    dot?: (props: AreaDotSlotProps) => any;
+    label?: (props: LabelListSlotProps) => VNodeChild;
+    dot?: (props: AreaDotSlotProps) => VNodeChild;
 };
-declare const _Area: import('vue').DefineComponent<AreaPropsWithSVG, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AreaPropsWithSVG> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-/**
- * Type-safe Area component with slot types preserved in .d.ts output.
- * The `new () => { $slots }` pattern ensures Volar picks up slot types
- * even when consuming from compiled declarations.
- */
-export declare const Area: typeof _Area & {
-    new (): {
-        $slots: AreaSlots;
+export declare const Area: import('../../utils/attributes.js').WithAttributes<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    type: {
+        type: PropType<import('../../index.js').CurveType | import('d3-shape').CurveFactory>;
     };
-};
-export {};
+    activeDot: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: boolean;
+    };
+    baseValue: {
+        type: PropType<import('../../types/area.js').BaseValue>;
+        default: undefined;
+    };
+    connectNulls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<import('../../types/chartData.js').ChartData>;
+        default: undefined;
+    };
+    dataKey: {
+        type: PropType<import('../../types/base.js').ChartDataKey>;
+        required: true;
+    };
+    dot: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: boolean;
+    };
+    fill: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fillOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: undefined;
+    };
+    legendType: {
+        type: PropType<import('../../types/legend.js').LegendType>;
+        default: string;
+    };
+    transition: {
+        type: PropType<import('motion-v').ValueAnimationTransition<number>>;
+        default: undefined;
+    };
+    stackId: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    tooltipType: {
+        type: PropType<import('../../types/index.js').TooltipType>;
+        default: undefined;
+    };
+    unit: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    xAxisId: {
+        type: PropType<import('../../types/axis.js').AxisId>;
+        default: number;
+    };
+    yAxisId: {
+        type: PropType<import('../../types/axis.js').AxisId>;
+        default: number;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    name: {
+        type: PropType<string | number>;
+    };
+    class: {
+        type: PropType<import('../../types/index.js').VueClassValue>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_entry: import('../../index.js').AreaPointItem, _index: number, _event: MouseEvent) => boolean;
+    mouseenter: (_entry: import('../../index.js').AreaPointItem, _index: number, _event: MouseEvent) => boolean;
+    mouseleave: (_entry: import('../../index.js').AreaPointItem, _index: number, _event: MouseEvent) => boolean;
+    'animation-start': () => boolean;
+    'animation-end': () => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: {
+        type: PropType<import('../../index.js').CurveType | import('d3-shape').CurveFactory>;
+    };
+    activeDot: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: boolean;
+    };
+    baseValue: {
+        type: PropType<import('../../types/area.js').BaseValue>;
+        default: undefined;
+    };
+    connectNulls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<import('../../types/chartData.js').ChartData>;
+        default: undefined;
+    };
+    dataKey: {
+        type: PropType<import('../../types/base.js').ChartDataKey>;
+        required: true;
+    };
+    dot: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: boolean;
+    };
+    fill: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    fillOpacity: {
+        type: NumberConstructor;
+        default: number;
+    };
+    strokeWidth: {
+        type: NumberConstructor;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: {
+        type: PropType<boolean | Record<string, unknown>>;
+        default: undefined;
+    };
+    legendType: {
+        type: PropType<import('../../types/legend.js').LegendType>;
+        default: string;
+    };
+    transition: {
+        type: PropType<import('motion-v').ValueAnimationTransition<number>>;
+        default: undefined;
+    };
+    stackId: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    tooltipType: {
+        type: PropType<import('../../types/index.js').TooltipType>;
+        default: undefined;
+    };
+    unit: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    xAxisId: {
+        type: PropType<import('../../types/axis.js').AxisId>;
+        default: number;
+    };
+    yAxisId: {
+        type: PropType<import('../../types/axis.js').AxisId>;
+        default: number;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    name: {
+        type: PropType<string | number>;
+    };
+    class: {
+        type: PropType<import('../../types/index.js').VueClassValue>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClick?: ((_entry: import('../../index.js').AreaPointItem, _index: number, _event: MouseEvent) => any) | undefined;
+    onMouseenter?: ((_entry: import('../../index.js').AreaPointItem, _index: number, _event: MouseEvent) => any) | undefined;
+    onMouseleave?: ((_entry: import('../../index.js').AreaPointItem, _index: number, _event: MouseEvent) => any) | undefined;
+    "onAnimation-start"?: (() => any) | undefined;
+    "onAnimation-end"?: (() => any) | undefined;
+}>, {
+    unit: string | number;
+    id: string;
+    hide: boolean;
+    fill: string;
+    stroke: string;
+    class: import('../../types/index.js').VueClassValue;
+    fillOpacity: number;
+    label: boolean | Record<string, unknown>;
+    xAxisId: import('../../types/axis.js').AxisId;
+    yAxisId: import('../../types/axis.js').AxisId;
+    stackId: string | number;
+    data: import('../../types/chartData.js').ChartData;
+    isAnimationActive: boolean;
+    transition: import('motion-v').ValueAnimationTransition<number>;
+    connectNulls: boolean;
+    baseValue: import('../../types/area.js').BaseValue;
+    tooltipType: "none";
+    activeDot: boolean | Record<string, unknown>;
+    dot: boolean | Record<string, unknown>;
+    legendType: import('../../types/legend.js').LegendType;
+}, SlotsType<AreaSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, import('../../utils/attributes.js').SvgTemplateAttributes>;

package/dist/cartesian/area/RenderArea.d.ts

@@ -1,16 +1 @@
-import { PropType } from 'vue';
-import { Point } from '../../shape/Curve';
-export declare const Dots: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    points: {
-        type: PropType<ReadonlyArray<Point>>;
-        default: () => any[];
-    };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    points: {
-        type: PropType<ReadonlyArray<Point>>;
-        default: () => any[];
-    };
-}>> & Readonly<{}>, {
-    points: readonly Point[];
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const StaticArea: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const StaticArea: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/area/hooks/useArea.d.ts

@@ -1,27 +1,22 @@
-import { AreaDotSlotProps, AreaProps } from '../type';
-import { InjectionKey, Ref, SVGAttributes, ShallowRef } from 'vue';
-import { AreaPointItem, ComputedArea } from '../../../state/selectors/areaSelectors';
+import { ComputedRef, Ref, SVGAttributes, ShallowRef, VNodeChild } from 'vue';
+import { AreaDotSlotProps, ResolvedAreaProps } from '../type.js';
+import { AreaPointItem, ComputedArea } from '../../../core/area.js';
 export interface AreaContext {
     clipPathId: Ref<string>;
     layout: Ref<'horizontal' | 'vertical' | 'centric' | 'radial'>;
     points: Ref<ReadonlyArray<AreaPointItem> | undefined>;
-    props: AreaProps;
+    props: ResolvedAreaProps;
     attrs: SVGAttributes;
-    dot: any;
-    clipDot: boolean;
-    dotSize: number;
-    dotSlot?: (props: AreaDotSlotProps) => any;
+    /** True when an axis has allowDataOverflow, so the series is clipped to the plot. */
+    needClip: ComputedRef<boolean>;
+    dotSlot?: (props: AreaDotSlotProps) => VNodeChild;
     areaData: Readonly<ShallowRef<ComputedArea | undefined>>;
-    isAnimating: Ref<boolean>;
-    isClipRectAnimating: Ref<boolean>;
 }
-export declare const AreaContextKey: InjectionKey<AreaContext>;
-export declare function provideAreaContext(context: AreaContext): void;
 export declare function useAreaContext(): AreaContext;
-export declare function useArea(props: AreaProps, attrs?: SVGAttributes, dotSlot?: (props: AreaDotSlotProps) => any): {
-    shouldRender: import('vue').ComputedRef<boolean>;
-    areaData: Readonly<ShallowRef<ComputedArea>>;
-    points: Ref<readonly AreaPointItem[], readonly AreaPointItem[]>;
-    clipPathId: import('vue').ComputedRef<string>;
-    shouldShowAnimation: import('vue').ComputedRef<boolean>;
+export declare function useArea(props: ResolvedAreaProps, attrs?: SVGAttributes, dotSlot?: (props: AreaDotSlotProps) => VNodeChild): {
+    shouldRender: ComputedRef<boolean>;
+    areaData: ComputedRef<ComputedArea | undefined>;
+    points: Ref<readonly AreaPointItem[] | undefined, readonly AreaPointItem[] | undefined>;
+    clipPathId: ComputedRef<string>;
+    needClip: ComputedRef<boolean>;
 };