vccs 0.6.0 → 1.0.0-beta.2

package/dist/types/bar.d.ts

@@ -1,5 +1,7 @@
-import { Coordinate, VueClassValue } from './common';
-import { CartesianViewBox } from '../cartesian/type';
+import { Coordinate, DataKey, VueClassValue } from './common.js';
+import { ChartData } from './chartData.js';
+import { MinPointSize } from './shape.js';
+import { CartesianViewBox } from './viewBox.js';
 export type BarPositionPosition = {
     /**
      * Offset is returned always from zero position.
@@ -18,8 +20,8 @@ export type BarPositionPosition = {
 export type RectRadius = [number, number, number, number];
 interface RectangleProps {
     class?: VueClassValue;
-    x?: number;
-    y?: number;
+    x?: number | null;
+    y?: number | null;
     width?: number;
     height?: number;
     radius?: number | RectRadius;
@@ -29,11 +31,11 @@ interface RectangleProps {
 export interface BarRectangleItem extends RectangleProps {
     value?: number | [number, number];
     /** the original data entry */
-    payload?: any;
+    payload?: unknown;
     /** the coordinate of background rectangle */
     background?: {
-        x?: number;
-        y?: number;
+        x?: number | null;
+        y?: number | null;
         width?: number;
         height?: number;
     };
@@ -44,4 +46,12 @@ export interface BarRectangleItem extends RectangleProps {
     parentViewBox?: CartesianViewBox;
 }
 export type ErrorBarDirection = 'x' | 'y';
+export interface BarSettings {
+    barSize?: string | number;
+    data?: ChartData;
+    dataKey: DataKey<unknown>;
+    maxBarSize?: number;
+    minPointSize: MinPointSize;
+    stackId?: string | number;
+}
 export {};

package/dist/types/base.d.ts

@@ -0,0 +1,46 @@
+import { ChartData } from './chartData.js';
+export type DataKey<T> = string | number | ((obj: T) => unknown);
+export type ChartDataKey = DataKey<ChartData[number]>;
+export interface Coordinate {
+    x: number;
+    y: number;
+}
+/** Where the tooltip points in a Cartesian chart. */
+interface CartesianChartCoordinate extends Coordinate {
+    xAxis?: unknown;
+    yAxis?: unknown;
+    width?: number;
+    height?: number;
+    offset?: ChartOffset;
+}
+/** Where the tooltip points in a polar chart: the active angle and radius inside the polar box. */
+export interface PolarChartCoordinate extends Coordinate {
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    angle: number;
+    radius: number;
+}
+/** Cartesian layouts point at `x`/`y`; polar layouts also carry their box, angle and radius. */
+export type ChartCoordinate = CartesianChartCoordinate | PolarChartCoordinate;
+export declare function isPolarCoordinate(coordinate: ChartCoordinate): coordinate is PolarChartCoordinate;
+export interface TickItem {
+    value?: unknown;
+    coordinate: number;
+    index?: number;
+    offset?: number;
+}
+export interface ChartOffset {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    height: number;
+    width: number;
+    brushBottom: number;
+}
+export type VueClassValue = string | string[] | Record<string, boolean>;
+export {};

package/dist/types/categorical.d.ts

@@ -1,17 +1,15 @@
-import { DataKey, LayoutType, Margin, StackOffsetType, SyncMethod, VueClassValue } from './common';
-import { ExternalMouseEvents } from './event';
-export interface CategoricalChartProps extends Partial<ExternalMouseEvents> {
+import { LayoutType, Margin, StackOffsetType, SyncMethod, VueClassValue } from './common.js';
+export interface CategoricalChartProps {
     accessibilityLayer?: boolean;
     barCategoryGap?: number | string;
     barGap?: number | string;
     barSize?: number | string;
-    children?: any;
+    children?: unknown;
     class?: VueClassValue;
     compact?: boolean;
     cx?: number | string;
     cy?: number | string;
-    data?: any[];
-    dataKey?: DataKey<any>;
+    data?: unknown[];
     desc?: string;
     endAngle?: number;
     height?: number;
@@ -25,7 +23,7 @@ export interface CategoricalChartProps extends Partial<ExternalMouseEvents> {
     role?: string;
     stackOffset?: StackOffsetType;
     startAngle?: number;
-    style?: any;
+    style?: unknown;
     syncId?: number | string;
     syncMethod?: SyncMethod;
     tabIndex?: number;

package/dist/types/chartData.d.ts

@@ -0,0 +1,21 @@
+export type ChartData = unknown[];
+export interface BrushStartEndIndex {
+    startIndex: number;
+    endIndex: number;
+}
+export type AppliedChartData = ReadonlyArray<{
+    value: unknown;
+}>;
+export type ChartDataWindow = {
+    chartData: ChartData | undefined;
+    /**
+     * Using Brush, users can choose where they want to zoom in.
+     * This is zero-based index of the starting data point.
+     */
+    dataStartIndex: number;
+    /**
+     * Using Brush, users can choose where they want to zoom in.
+     * This is zero-based index of the last data point.
+     */
+    dataEndIndex: number;
+};

package/dist/types/chartLayout.d.ts

@@ -0,0 +1,7 @@
+import { LayoutType, Margin } from './index.js';
+export interface ChartFrame {
+    layout: LayoutType;
+    width: number;
+    height: number;
+    margin: Margin;
+}

package/dist/{state/rootPropsSlice.d.ts → types/chartOptions.d.ts}

@@ -1,4 +1,4 @@
-import { StackOffsetType, SyncMethod, VueClassValue } from '../types';
+import { StackOffsetType, SyncMethod, VueClassValue } from './index.js';
 /**
  * These are chart options that users can choose - which means they can also
  * choose to change them which should trigger a re-render.
@@ -10,10 +10,12 @@ export type UpdatableChartOptions = {
     barSize: string | number | undefined;
     /**
      * 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.
+     * The className is also passed to the root element of the chart but that's done in the JSX, not through chart state.
      */
     class: VueClassValue | undefined;
     maxBarSize: number | undefined;
+    /** Reverse the item order inside each stack, so the last stacked item sits at the base. */
+    reverseStackOrder: boolean;
     stackOffset: StackOffsetType;
     /**
      * Charts that share the same syncId will have their Tooltip and Brush synchronised.
@@ -21,6 +23,3 @@ export type UpdatableChartOptions = {
     syncId: number | string | undefined;
     syncMethod: SyncMethod;
 };
-export declare const initialState: UpdatableChartOptions;
-export declare const rootPropsReducer: import('@reduxjs/toolkit').Reducer<UpdatableChartOptions>;
-export declare const updateOptions: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<UpdatableChartOptions, "rootProps/updateOptions">;

package/dist/types/common.d.ts

@@ -1,26 +1,8 @@
-import { TooltipPayload, TooltipPayloadSearcher } from '../state/tooltipSlice';
-import { TooltipEventType, TooltipIndex } from './tooltip';
+import { ChartDataKey, ChartOffset, Coordinate, TickItem, VueClassValue } from './base.js';
+import { TooltipPayload } from './tooltip.js';
 import { PropType, SVGAttributes } from 'vue';
-export type DataKey<T> = string | number | ((obj: T) => any);
-export interface Coordinate {
-    x: number;
-    y: number;
-}
-export interface ChartCoordinate extends Coordinate {
-    xAxis?: any;
-    yAxis?: any;
-    width?: any;
-    height?: any;
-    offset?: ChartOffset;
-    angle?: number;
-    radius?: number;
-    cx?: number;
-    cy?: number;
-    startAngle?: number;
-    endAngle?: number;
-    innerRadius?: number;
-    outerRadius?: number;
-}
+import { SvgTemplateAttributes } from '../utils/attributes.js';
+export type { DataKey, Coordinate, ChartCoordinate, PolarChartCoordinate, ChartOffset, TickItem, VueClassValue } from './base.js';
 export type LayoutType = 'horizontal' | 'vertical' | 'centric' | 'radial';
 export interface Margin {
     top?: number;
@@ -29,28 +11,22 @@ export interface Margin {
     left?: number;
 }
 export type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive';
-export interface TickItem {
-    value?: any;
-    coordinate: number;
-    index?: number;
-    offset?: number;
-}
 export type SyncMethod = 'index' | 'value' | ((ticks: ReadonlyArray<TickItem>, data: MouseHandlerDataParam) => number);
 export type MouseHandlerDataParam = {
     /**
      * Index of the active tick in the current chart. Only works with number-indexed one-dimensional data charts,
      * like Line, Area, Bar, Pie, etc.
      *
-     * Doesn't work with two-dimensional data charts like Treemap, Sankey. But one day it will which is why the TooltipIndex type is here.
+     * Callbacks retain legacy string indexes; hierarchy targets use their payload path.
      */
-    activeTooltipIndex: number | TooltipIndex | undefined;
+    activeTooltipIndex: number | string | null | undefined;
     isTooltipActive: boolean;
     /**
      * Exactly the same as activeTooltipIndex - this was also duplicated in recharts@2 so let's keep both properties for better backwards compatibility.
      */
-    activeIndex: number | TooltipIndex | undefined;
+    activeIndex: number | string | null | undefined;
     activeLabel: string | number | undefined;
-    activeDataKey: DataKey<any> | undefined;
+    activeDataKey: ChartDataKey | undefined;
     activeCoordinate: Coordinate | undefined;
 };
 export interface Padding {
@@ -59,15 +35,6 @@ export interface Padding {
     left?: number;
     right?: number;
 }
-export interface ChartOffset {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    height: number;
-    width: number;
-    brushBottom: number;
-}
 export type ChartOffsetRequired = Required<ChartOffset>;
 export interface Size {
     width: number;
@@ -96,16 +63,9 @@ export interface ScatterPointItem {
     width: number;
     height: number;
     node: ScatterPointNode;
-    payload?: any;
+    payload?: unknown;
     tooltipPayload?: TooltipPayload;
-    tooltipPosition: Coordinate;
-}
-export interface CategoricalChartOptions {
-    chartName: string;
-    defaultTooltipEventType?: TooltipEventType;
-    validateTooltipEventTypes?: ReadonlyArray<TooltipEventType>;
-    defaultProps?: any;
-    tooltipPayloadSearcher: TooltipPayloadSearcher;
+    tooltipPosition: Coordinate | undefined;
 }
 type UnwrapPropType<T> = T extends PropType<infer C> ? C : T;
 type VuePropField<P> = P extends {
@@ -120,16 +80,17 @@ export type VuePropsToType<Props> = {
         required: boolean;
     } ? never : K]?: VuePropField<Props[K]>;
 };
-export type WithSVGProps<T> = VuePropsToType<T> & Omit<SVGAttributes, keyof T>;
+/**
+ * Declared props plus SVG attributes, in both spellings: kebab-case as in `SVGAttributes` and
+ * camelized as strict templates check them (see `SvgTemplateAttributes`).
+ */
+export type WithSVGProps<T> = VuePropsToType<T> & Omit<SVGAttributes, keyof T> & Omit<SvgTemplateAttributes, keyof T>;
 export type AllowInDimension = {
     x?: boolean;
     y?: boolean;
 };
-/** Vue class binding type: string, string[], or { [className]: boolean } */
-export type VueClassValue = string | string[] | Record<string, boolean>;
 /** Shared Vue prop definition for `class` — use in VueProps objects to avoid repetition */
 export declare const classProp: {
     type: PropType<VueClassValue>;
-    default: any;
+    default: undefined;
 };
-export {};

package/dist/types/event.d.ts

@@ -1,16 +1,3 @@
-import { MouseHandlerDataParam } from './common';
-export type CategoricalChartFunc = (nextState: MouseHandlerDataParam, event: Event) => void;
-export interface ExternalMouseEvents {
-    onClick: CategoricalChartFunc;
-    onMouseLeave: CategoricalChartFunc;
-    onMouseEnter: CategoricalChartFunc;
-    onMouseMove: CategoricalChartFunc;
-    onMouseDown: CategoricalChartFunc;
-    onMouseUp: CategoricalChartFunc;
-    onContextMenu: CategoricalChartFunc;
-    onDoubleClick: CategoricalChartFunc;
-    onTouchStart: CategoricalChartFunc;
-    onTouchMove: CategoricalChartFunc;
-    onTouchEnd: CategoricalChartFunc;
-}
+import { MouseHandlerDataParam } from './common.js';
+export type CategoricalChartFunc = (nextState: MouseHandlerDataParam, event: MouseEvent | TouchEvent) => void;
 export declare const EventKeys: string[];

package/dist/types/funnel.d.ts

@@ -0,0 +1,23 @@
+import { Coordinate } from './common.js';
+import { ViewBox } from './viewBox.js';
+import { TrapezoidItem } from './shape.js';
+export interface FunnelTrapezoidItem extends TrapezoidItem {
+    x: number;
+    y: number;
+    upperWidth: number;
+    lowerWidth: number;
+    height: number;
+    value?: number | string;
+    name?: string | number;
+    fill?: string;
+    val?: number | string;
+    payload?: unknown;
+    isActive: boolean;
+    tooltipPosition: Coordinate;
+    parentViewBox?: ViewBox;
+    labelViewBox?: ViewBox;
+}
+export interface FunnelComposedData {
+    trapezoids: readonly FunnelTrapezoidItem[];
+    data: unknown[];
+}

package/dist/types/graphical.d.ts

@@ -0,0 +1,77 @@
+import { ChartDataKey } from './base.js';
+import { ChartData } from './chartData.js';
+import { AxisId } from './axis.js';
+import { ErrorBarDirection } from './bar.js';
+import { MinPointSize, NormalizedStackId } from './shape.js';
+import { StackId } from './tick.js';
+/**
+ * ErrorBars have lot more settings but all the others are scoped to the component itself.
+ * Only some of them required to be shared with the axis model because XAxis and YAxis need to know
+ * if the error bar is contributing to extending the axis domain.
+ */
+export type ErrorBarsSettings = {
+    /**
+     * The direction is only used in Scatter chart, and decided based on ChartLayout in other charts.
+     */
+    direction: ErrorBarDirection;
+    /**
+     * The dataKey decides which property from the data will each individual ErrorBar use.
+     * If it so happens that the ErrorBar data are bigger than the axis domain,
+     * the error bar data will stretch the axis domain.
+     */
+    dataKey: ChartDataKey;
+};
+export type CartesianGraphicalItemType = 'area' | 'bar' | 'line' | 'scatter';
+type PolarGraphicalItemType = 'pie' | 'radar' | 'radialBar' | 'funnel';
+export interface GraphicalItemSettings extends MaybeStackedGraphicalItem {
+    seriesId?: symbol;
+    data: ChartData | undefined;
+    dataKey: ChartDataKey | undefined;
+    /**
+     * Why not just stop pushing the graphical items to state when they are hidden?
+     * Well some components decide to continue showing them anyway.
+     * Legend for example will keep showing a record for hidden graphical items.
+     * Stacks for example will ignore them.
+     */
+    hide: boolean;
+}
+export type CartesianGraphicalItemSettings = GraphicalItemSettings & {
+    type: CartesianGraphicalItemType;
+    /**
+     * Each of the graphical items explicitly says which axis it uses;
+     * this property is optional for users but every graphical item must have a default,
+     * and it is required here.
+     */
+    xAxisId: AxisId;
+    yAxisId: AxisId;
+    zAxisId: AxisId | undefined;
+    /**
+     * ErrorBars are only rendered if they are explicitly set in the chart, otherwise this will be an empty array.
+     * One graphical item can have multiple error bars. This probably only makes sense in Scatter.
+     */
+    errorBars: ReadonlyArray<ErrorBarsSettings> | undefined;
+    stackId: NormalizedStackId | undefined;
+    /**
+     * This property is only used in Bar and RadialBar items
+     */
+    barSize: number | string | undefined;
+    minPointSize?: MinPointSize;
+};
+export type PolarGraphicalItemSettings = GraphicalItemSettings & {
+    type: PolarGraphicalItemType;
+    angleAxisId: AxisId;
+    radiusAxisId: AxisId;
+    /**
+     * Only used by RadialBar items
+     */
+    barSize: number | string | undefined;
+    stackId: StackId | undefined;
+    minPointSize?: number;
+    maxBarSize?: number;
+};
+export interface MaybeStackedGraphicalItem {
+    stackId: StackId | undefined;
+    dataKey: ChartDataKey | undefined;
+    barSize: number | string | undefined;
+}
+export {};

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export * from './common';
-export * from './categorical';
-export * from './event';
-export * from './tooltip';
+export * from './common.js';
+export * from './categorical.js';
+export * from './event.js';
+export * from './tooltip.js';

package/dist/types/legend.d.ts

@@ -1 +1,18 @@
+import { ChartDataKey } from './base.js';
 export type LegendType = 'circle' | 'cross' | 'diamond' | 'line' | 'plainline' | 'rect' | 'square' | 'star' | 'triangle' | 'wye' | 'none';
+export interface LegendPayload {
+    /**
+     * This is the text that will be displayed in the legend in the DOM.
+     */
+    value: string | undefined;
+    type?: LegendType;
+    color?: string;
+    payload?: {
+        strokeDasharray?: number | string;
+        value?: unknown;
+    };
+    inactive?: boolean;
+    dataKey?: ChartDataKey;
+}
+export type HorizontalAlignmentType = 'left' | 'center' | 'right';
+export type VerticalAlignmentType = 'top' | 'middle' | 'bottom';

package/dist/types/line.d.ts

@@ -0,0 +1,6 @@
+export interface LinePointItem {
+    x: number;
+    y: number;
+    readonly value?: number;
+    readonly payload?: unknown;
+}

package/dist/types/polarOptions.d.ts

@@ -0,0 +1,8 @@
+export type PolarChartOptions = {
+    cx: number | string;
+    cy: number | string;
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number | string;
+    outerRadius: number | string;
+};

package/dist/types/radar.d.ts

@@ -1,12 +1,12 @@
-import { DataKey } from '.';
-import { RechartsScale } from './scale';
+import { ChartDataKey } from './base.js';
+import { RechartsScale } from './scale.js';
 export type RadiusAxisForRadar = {
     scale: RechartsScale;
 };
 export type AngleAxisForRadar = {
     scale: RechartsScale;
     type: 'number' | 'category';
-    dataKey: DataKey<any>;
+    dataKey: ChartDataKey | undefined;
     cx: number;
     cy: number;
 };
@@ -18,7 +18,7 @@ export interface RadarPoint {
     angle?: number;
     radius?: number;
     value?: number;
-    payload?: any;
+    payload?: unknown;
     name?: string;
 }
 export type RadarComposedData = {

package/dist/types/radialBar.d.ts

@@ -0,0 +1,15 @@
+import { SectorInput } from '../shape/Sector.js';
+export interface RadialBarDataItem {
+    cx: number;
+    cy: number;
+    innerRadius: number | null | undefined;
+    outerRadius: number | undefined;
+    startAngle: number | null;
+    endAngle: number;
+    index: number;
+    fill?: string;
+    value?: unknown;
+    payload?: unknown;
+    background?: SectorInput;
+    [key: string]: unknown;
+}

package/dist/types/reference.d.ts

@@ -0,0 +1,22 @@
+import { AxisId } from './axis.js';
+import { IfOverflow } from './index.js';
+export type ReferenceElementSettings = {
+    yAxisId: AxisId;
+    xAxisId: AxisId;
+    ifOverflow: IfOverflow;
+};
+export type ReferenceDotSettings = ReferenceElementSettings & {
+    x: unknown;
+    y: unknown;
+    r: number;
+};
+export type ReferenceAreaSettings = ReferenceElementSettings & {
+    x1: unknown;
+    x2: unknown;
+    y1: unknown;
+    y2: unknown;
+};
+export type ReferenceLineSettings = ReferenceElementSettings & {
+    x: unknown;
+    y: unknown;
+};

package/dist/types/scale.d.ts

@@ -6,6 +6,17 @@ export interface RechartsScale {
     domain: (() => ReadonlyArray<unknown>) & ((newDomain: ReadonlyArray<unknown>) => this);
     range: (() => ReadonlyArray<unknown>) & ((newRange: ReadonlyArray<unknown>) => this);
     bandwidth?: () => number;
-    ticks?: (count: number) => any;
-    (args: any): number;
+    ticks?: (count?: number) => number[];
+    (args: unknown): number;
 }
+/** A custom scale is copied before the chart assigns its domain and numeric range. */
+interface CustomAxisScale {
+    (value: never): unknown;
+    copy: () => CustomAxisScale;
+    domain: (() => ReadonlyArray<unknown>) & ((values: Iterable<never>) => CustomAxisScale);
+    range: (() => ReadonlyArray<unknown>) & ((values: Iterable<number>) => CustomAxisScale);
+    bandwidth?: () => number;
+    ticks?: (count?: number) => ReadonlyArray<unknown>;
+}
+export type AxisScale = ScaleType | CustomAxisScale;
+export {};

package/dist/{shape/types.d.ts → types/shape.d.ts}

@@ -1,12 +1,14 @@
-import { AnimationOptions } from 'motion-v';
-import { VueClassValue } from '../types/common';
+import { ValueAnimationTransition } from 'motion-v';
+import { VueClassValue } from './common.js';
 export interface Point {
     readonly x: number;
     readonly y: number;
+    readonly payload?: unknown;
 }
 export type MinPointSize = number | ((value: number, index: number) => number);
 export type NormalizedStackId = string;
-export interface TrapezoidProps {
+/** Geometry of one trapezoid, as computed by Funnel and passed to its `shape` slot. */
+export interface TrapezoidItem {
     class?: VueClassValue;
     x?: number;
     y?: number;
@@ -15,5 +17,5 @@ export interface TrapezoidProps {
     lowerWidth?: number;
     height?: number;
     isUpdateAnimationActive?: boolean;
-    transition?: AnimationOptions;
+    transition?: ValueAnimationTransition<number>;
 }

package/dist/types/tick.d.ts

@@ -1,8 +1,8 @@
-import { CartesianViewBox } from '../cartesian/type';
-import { AxisType, CartesianAxisSettings, XAxisOrientation, YAxisOrientation } from './axis';
-import { TickItem } from './common';
-import { RechartsScale } from './scale';
-import { SVGAttributes, VNode } from 'vue';
+import { SVGAttributes, VNode, VNodeChild } from 'vue';
+import { CartesianViewBox } from './viewBox.js';
+import { AxisType, CartesianAxisSettings, XAxisOrientation, YAxisOrientation } from './axis.js';
+import { TickItem } from './base.js';
+import { RechartsScale } from './scale.js';
 /**
  * Ticks can be any type when the axis is the type of category.
  *
@@ -17,9 +17,9 @@ export type TicksSettings = {
      * Ticks must be numbers when the axis is the type of number
      */
     ticks: ReadonlyArray<AxisTick> | undefined;
-    tick: SVGAttributes | ((props: any) => VNode) | boolean;
+    tick: SVGAttributes | ((props: unknown) => VNode) | boolean;
 };
-export type TickFormatter = (value: any, index: number) => string;
+export type TickFormatter = (value: unknown, index: number) => string;
 export type AxisPropsNeededForTicksGenerator = {
     axisType?: AxisType;
     categoricalDomain?: ReadonlyArray<unknown>;
@@ -53,3 +53,14 @@ export type GetTicksInput = {
     viewBox: CartesianViewBox;
 };
 export type StackId = string | number;
+export interface AxisTickSlotProps {
+    x: number;
+    y: number;
+    index: number;
+    value: unknown;
+    payload: CartesianTickItem;
+    textAnchor: string;
+}
+export interface AxisSlots {
+    tick?: (props: AxisTickSlotProps) => VNodeChild;
+}