vccs 0.0.1 → 0.2.0

package/dist/cartesian/cartesian-grid/type.d.ts

@@ -0,0 +1,145 @@
+import { CartesianAxisProps } from '../cartesian-axis/CartesianAxis';
+import { ViewBox } from '../type';
+import { ChartOffset, DataKey } from '../../types';
+import { AxisDomain, AxisDomainType, AxisId, AxisInterval, XAxisOrientation, YAxisOrientation } from '../../types/axis';
+import { RechartsScale, ScaleType } from '../../types/scale';
+import { AxisPropsNeededForTicksGenerator, GetTicksInput } from '../../types/tick';
+import { SVGAttributes, VNode } from 'vue';
+export type AxisPropsForCartesianGridTicksGeneration = AxisPropsNeededForTicksGenerator & Omit<GetTicksInput, 'ticks' | 'viewBox'>;
+export type HorizontalCoordinatesGenerator = (props: {
+    yAxis: AxisPropsForCartesianGridTicksGeneration;
+    width: number;
+    height: number;
+    offset: ChartOffset;
+}, syncWithTicks: boolean) => number[];
+export type VerticalCoordinatesGenerator = (props: {
+    xAxis: AxisPropsForCartesianGridTicksGeneration;
+    width: number;
+    height: number;
+    offset: ChartOffset;
+}, syncWithTicks: boolean) => number[];
+interface InternalCartesianGridProps {
+    width?: number;
+    height?: number;
+    horizontalCoordinatesGenerator?: HorizontalCoordinatesGenerator;
+    verticalCoordinatesGenerator?: VerticalCoordinatesGenerator;
+}
+type LineItemProps = CartesianGridProps & {
+    offset: ChartOffset;
+    xAxis: null | AxisPropsForCartesianGridTicksGeneration;
+    yAxis: null | AxisPropsForCartesianGridTicksGeneration;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    key: string;
+    index: number;
+};
+export type GridLineTypeFunctionProps = Omit<LineItemProps, 'key'> & {
+    key: LineItemProps['key'] | undefined;
+    offset: ChartOffset;
+};
+type GridLineType = SVGAttributes | VNode | ((props: GridLineTypeFunctionProps) => VNode) | boolean;
+export interface CartesianGridProps extends InternalCartesianGridProps {
+    ticks?: CartesianAxisProps['ticks'];
+    orientation?: XAxisOrientation | YAxisOrientation;
+    viewBox?: ViewBox;
+    ry?: SVGAttributes['ry'];
+    stroke?: SVGAttributes['stroke'];
+    fill?: SVGAttributes['fill'];
+    fillOpacity?: SVGAttributes['fill-opacity'];
+    /**
+     * The x-coordinate of grid.
+     * If left undefined, it will be computed from the chart's offset and margins.
+     */
+    x?: number;
+    /**
+     * The y-coordinate of grid.
+     * If left undefined, it will be computed from the chart's offset and margins.
+     */
+    y?: number;
+    horizontal?: GridLineType;
+    vertical?: GridLineType;
+    /**
+     * Array of coordinates in pixels where to draw horizontal grid lines.
+     * Has priority over syncWithTicks and horizontalValues.
+     */
+    horizontalPoints?: number[];
+    /**
+     * Array of coordinates in pixels where to draw vertical grid lines.
+     * Has priority over syncWithTicks and horizontalValues.
+     */
+    verticalPoints?: number[];
+    /**
+     * Defines background color of stripes.
+     *
+     * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
+     * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
+     *
+     * In case there are more stripes than colors, the colors will start from beginning.
+     * So for example: verticalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
+     *
+     * If this is undefined, or an empty array, then there is no background fill.
+     * Note: Grid lines will be rendered above these background stripes.
+     */
+    verticalFill?: string[];
+    /**
+     * Defines background color of stripes.
+     *
+     * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
+     * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
+     *
+     * In case there are more stripes than colors, the colors will start from beginning.
+     * So for example: horizontalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
+     *
+     * If this is undefined, or an empty array, then there is no background fill.
+     * Note: Grid lines will be rendered above these background stripes.
+     */
+    horizontalFill?: string[];
+    /**
+     * If true, only the lines that correspond to the axes ticks values will be drawn.
+     * If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks.
+     * horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.
+     */
+    syncWithTicks?: boolean;
+    /**
+     * Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type.
+     * Has priority over syncWithTicks but not over horizontalValues.
+     */
+    horizontalValues?: number[] | string[];
+    /**
+     * Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type.
+     * Has priority over syncWithTicks but not over verticalValues.
+     */
+    verticalValues?: number[] | string[];
+    xAxisId?: AxisId;
+    yAxisId?: AxisId;
+    axisLine?: boolean | SVGAttributes;
+    tickLine?: boolean | SVGAttributes;
+    mirror?: boolean;
+    minTickGap?: number;
+    tickSize?: number;
+    tickMargin?: number;
+    interval?: AxisInterval;
+}
+export declare const defaultProps: Partial<CartesianGridProps>;
+export type BaseCartesianAxis = {
+    id: AxisId;
+    scale: ScaleType | RechartsScale | undefined;
+    type: AxisDomainType;
+    /**
+     * The axis functionality is severely restricted without a dataKey
+     * - but there is still something left, and the prop is optional
+     * so this can also be undefined even in real charts.
+     * There are no defaults.
+     */
+    dataKey: DataKey<any> | undefined;
+    unit: string | undefined;
+    name: string | undefined;
+    allowDuplicatedCategory: boolean;
+    allowDataOverflow: boolean;
+    reversed: boolean;
+    includeHidden: boolean;
+    domain: AxisDomain | undefined;
+};
+export {};

package/dist/cartesian/cartesian-grid/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Render a grid line item.
+ * Priority: slot > default <line> with optional SVG attr overrides from `option`.
+ */
+export declare function renderLineItem(slot: ((...args: any[]) => any) | undefined, option: boolean | object, props: any): any;

package/dist/cartesian/error-bar/ErrorBar.d.ts

@@ -0,0 +1,68 @@
+import { PropType } from 'vue';
+import { ErrorBarDirection } from '../../types/bar';
+export declare const ErrorBarVueProps: {
+    dataKey: {
+        type: PropType<string | number | ((obj: any) => any)>;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<ErrorBarDirection>;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    strokeWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+};
+export declare const ErrorBar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dataKey: {
+        type: PropType<string | number | ((obj: any) => any)>;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<ErrorBarDirection>;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    strokeWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dataKey: {
+        type: PropType<string | number | ((obj: any) => any)>;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: PropType<ErrorBarDirection>;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    strokeWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    width: number;
+    stroke: string;
+    strokeWidth: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/error-bar/ErrorBarContext.d.ts

@@ -0,0 +1,27 @@
+import { Ref, ShallowRef } from 'vue';
+import { ErrorBarDirection } from '../../types/bar';
+import { DataKey } from '../../types';
+import { AxisId } from '../../state/cartesianAxisSlice';
+import { ErrorBarsSettings } from '../../state/graphicalItemsSlice';
+export interface ErrorBarDataItem {
+    x: number | undefined;
+    y: number | undefined;
+    value: number;
+    errorVal?: number[] | number;
+}
+export type ErrorBarDataPointFormatter<T> = (entry: T, dataKey: DataKey<any>, direction: ErrorBarDirection) => ErrorBarDataItem;
+export interface ErrorBarContextType {
+    data: Readonly<ShallowRef<readonly any[]>>;
+    xAxisId: AxisId;
+    yAxisId: AxisId;
+    dataPointFormatter: ErrorBarDataPointFormatter<any>;
+    errorBarOffset: Ref<number>;
+}
+export declare const useErrorBarContext: <T extends ErrorBarContextType = ErrorBarContextType>(fallback?: T) => T extends null ? ErrorBarContextType : ErrorBarContextType, provideErrorBarContext: (contextValue: ErrorBarContextType) => ErrorBarContextType;
+export interface ErrorBarRegistryType {
+    errorBars: ShallowRef<ReadonlyArray<ErrorBarsSettings>>;
+    register: (settings: ErrorBarsSettings) => void;
+    unregister: (settings: ErrorBarsSettings) => void;
+}
+export declare const useErrorBarRegistry: <T extends ErrorBarRegistryType = ErrorBarRegistryType>(fallback?: T) => T extends null ? ErrorBarRegistryType : ErrorBarRegistryType, provideErrorBarRegistry: (contextValue: ErrorBarRegistryType) => ErrorBarRegistryType;
+export declare function createErrorBarRegistry(): ErrorBarRegistryType;

package/dist/cartesian/error-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ErrorBar';
+export * from './ErrorBarContext';

package/dist/cartesian/funnel/Funnel.d.ts

@@ -0,0 +1,2 @@
+import { FunnelPropsWithSVG } from './type';
+export declare const Funnel: import('vue').DefineComponent<FunnelPropsWithSVG, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FunnelPropsWithSVG> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/cartesian/funnel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Funnel';
+export * from './type';

package/dist/cartesian/funnel/type.d.ts

@@ -0,0 +1,106 @@
+import { AnimationOptions } from 'motion-v';
+import { PropType } from 'vue';
+import { ViewBox } from '../type';
+import { TrapezoidProps } from '../../shape';
+import { Coordinate, DataKey, TooltipType, WithSVGProps } from '../../types';
+import { LegendType } from '../../types/legend';
+export interface FunnelTrapezoidItem extends TrapezoidProps {
+    value?: number | string;
+    payload?: any;
+    isActive: boolean;
+    tooltipPosition: Coordinate;
+    parentViewBox?: ViewBox;
+    labelViewBox?: ViewBox;
+}
+export interface FunnelProps {
+    className?: string;
+    data?: any[];
+    dataKey: DataKey<any>;
+    hide?: boolean;
+    id?: string;
+    isAnimationActive?: boolean;
+    transition?: AnimationOptions;
+    lastShapeType?: 'triangle' | 'rectangle';
+    legendType?: LegendType;
+    nameKey?: DataKey<any>;
+    onAnimationEnd?: () => void;
+    onAnimationStart?: () => void;
+    reversed?: boolean;
+    tooltipType?: TooltipType;
+}
+export declare const FunnelVueProps: {
+    data: {
+        type: PropType<Array<Record<string, unknown>>>;
+        default: any;
+    };
+    dataKey: {
+        type: PropType<DataKey<any>>;
+        required: true;
+    };
+    nameKey: {
+        type: PropType<DataKey<any>>;
+        default: string;
+    };
+    lastShapeType: {
+        type: PropType<"triangle" | "rectangle">;
+        default: string;
+    };
+    reversed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    legendType: {
+        type: PropType<LegendType>;
+        default: string;
+    };
+    tooltipType: {
+        type: PropType<TooltipType>;
+        default: any;
+    };
+    hide: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: string;
+        };
+    };
+    onAnimationStart: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    onAnimationEnd: {
+        type: PropType<() => void>;
+        default: any;
+    };
+    className: {
+        type: StringConstructor;
+        default: any;
+    };
+    width: {
+        type: PropType<number | string>;
+        default: any;
+    };
+};
+export type FunnelPropsWithSVG = WithSVGProps<typeof FunnelVueProps>;
+type RealFunnelData = any;
+export type FunnelComposedData = {
+    trapezoids: ReadonlyArray<FunnelTrapezoidItem>;
+    data: RealFunnelData[];
+};
+export {};

package/dist/cartesian/funnel/utils.d.ts

@@ -0,0 +1,12 @@
+import { ChartOffset, TooltipType } from '../../types';
+import { FunnelComposedData, FunnelProps } from './type';
+export declare function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType, lastShapeType, reversed, offset, customWidth, }: {
+    dataKey: FunnelProps['dataKey'];
+    nameKey: FunnelProps['nameKey'];
+    offset: ChartOffset;
+    displayedData: any[];
+    tooltipType?: TooltipType;
+    lastShapeType?: FunnelProps['lastShapeType'];
+    reversed?: boolean;
+    customWidth?: number | string;
+}): FunnelComposedData;

package/dist/cartesian/index.d.ts

@@ -0,0 +1,12 @@
+export * from './area';
+export * from './axis';
+export * from './bar';
+export * from './cartesian-axis';
+export * from './cartesian-grid';
+export * from './error-bar';
+export * from './line';
+export * from './reference-area';
+export * from './reference-line';
+export * from './scatter';
+export * from './z-axis';
+export * from './funnel';

package/dist/cartesian/line/ActivePoints.d.ts

@@ -0,0 +1,77 @@
+import { PropType, SlotsType, VNode } from 'vue';
+import { DataKey, VuePropsToType } from '../../types';
+import { Point } from '../../shape/Curve';
+export interface PointType {
+    readonly x: number;
+    readonly y: number;
+    readonly value?: any;
+    readonly payload?: any;
+}
+declare const ActivePointsVueProps: {
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        required: boolean;
+    };
+    mainColor: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    itemDataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    activeDot: {
+        type: PropType<any>;
+        required: boolean;
+    };
+};
+export type ActivePointsProps = VuePropsToType<typeof ActivePointsVueProps>;
+export type ActivePointSlotProps = ActivePointsProps & {
+    'cx': number;
+    'cy': number;
+    'r': 4;
+    'fill': string;
+    'stroke-width': number;
+    'stroke': string;
+    'payload': any;
+    'value': PointType;
+};
+export type ActivePointsSlots = {
+    activeDot?: (props: ActivePointSlotProps) => VNode;
+};
+export declare const ActivePoints: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    points: {
+        type: PropType<ReadonlyArray<Point>>;
+        required: boolean;
+    };
+    mainColor: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    itemDataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    activeDot: {
+        type: PropType<any>;
+        required: boolean;
+    };
+}>, () => 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>>;
+        required: boolean;
+    };
+    mainColor: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    itemDataKey: {
+        type: PropType<DataKey<any>>;
+        required: boolean;
+    };
+    activeDot: {
+        type: PropType<any>;
+        required: boolean;
+    };
+}>> & Readonly<{}>, {}, SlotsType<ActivePointsSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export {};

package/dist/cartesian/line/Line.d.ts

@@ -0,0 +1,87 @@
+import { SlotsType } from 'vue';
+import { ActivePointsSlots } from './ActivePoints';
+export declare const Line: import('vue').DefineComponent<{
+    activeDot?: any;
+    animateNewValues?: boolean;
+    animationBegin?: number;
+    animationDuration?: import('../../types').AnimationDuration;
+    animationEasing?: import('../../types/bar').AnimationEasing;
+    animationId?: string;
+    className?: string;
+    connectNulls?: boolean;
+    data?: any[];
+    dataKey: import('../../types').DataKey<any>;
+    dot?: any;
+    hide?: boolean;
+    id?: string;
+    isAnimationActive?: boolean;
+    label?: any;
+    legendType?: import('../../types/legend').LegendType;
+    layout?: import('../../types').LayoutType;
+    name?: string | number;
+    onAnimationEnd?: () => void;
+    onAnimationStart?: () => void;
+    stroke?: string;
+    strokeWidth?: number;
+    tooltipType?: import('../../types').TooltipType;
+    transition?: import('motion-v/es').AnimationOptions;
+    type?: import('../..').CurveType;
+    unit?: string | number;
+    xAxisId?: import('../../types/axis').AxisId;
+    yAxisId?: import('../../types/axis').AxisId;
+    needClip?: boolean;
+}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    activeDot?: any;
+    animateNewValues?: boolean;
+    animationBegin?: number;
+    animationDuration?: import('../../types').AnimationDuration;
+    animationEasing?: import('../../types/bar').AnimationEasing;
+    animationId?: string;
+    className?: string;
+    connectNulls?: boolean;
+    data?: any[];
+    dataKey: import('../../types').DataKey<any>;
+    dot?: any;
+    hide?: boolean;
+    id?: string;
+    isAnimationActive?: boolean;
+    label?: any;
+    legendType?: import('../../types/legend').LegendType;
+    layout?: import('../../types').LayoutType;
+    name?: string | number;
+    onAnimationEnd?: () => void;
+    onAnimationStart?: () => void;
+    stroke?: string;
+    strokeWidth?: number;
+    tooltipType?: import('../../types').TooltipType;
+    transition?: import('motion-v/es').AnimationOptions;
+    type?: import('../..').CurveType;
+    unit?: string | number;
+    xAxisId?: import('../../types/axis').AxisId;
+    yAxisId?: import('../../types/axis').AxisId;
+    needClip?: boolean;
+}> & Readonly<{}>, {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+    yAxisId: import('../../types/axis').AxisId;
+    xAxisId: import('../../types/axis').AxisId;
+    stroke: string;
+    data: unknown[];
+    connectNulls: boolean;
+    strokeWidth: number;
+    hide: boolean;
+    transition: import('motion-v/es').AnimationOptions;
+    legendType: import('../../types/legend').LegendType;
+    isAnimationActive: boolean;
+    animationBegin: number;
+    needClip: boolean;
+    activeDot: boolean | Function | Record<string, any>;
+    dot: boolean | Function | Record<string, any>;
+}, SlotsType<ActivePointsSlots & {
+    default?: () => any;
+    shape?: (props: any) => any;
+    dot?: (props: any) => any;
+    label?: (props: any) => any;
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/line/StaticLine.d.ts

@@ -0,0 +1,16 @@
+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 StaticLine: 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>;

package/dist/cartesian/line/hooks/useLine.d.ts

@@ -0,0 +1,28 @@
+import { LinePointItem, LinePropsInternal } from '../type';
+import { ComputedRef, InjectionKey, Ref, SVGAttributes, ShallowRef } from 'vue';
+export interface LineContext {
+    clipPathId: Ref<string>;
+    layout: Readonly<Ref<string>>;
+    points: Ref<ReadonlyArray<LinePointItem> | undefined>;
+    props: LinePropsInternal;
+    attrs: SVGAttributes;
+    lineData: Readonly<ShallowRef<ReadonlyArray<LinePointItem> | undefined>>;
+    isAnimating: Ref<boolean>;
+    needClip: ComputedRef<boolean>;
+    dot: any;
+    clipDot: boolean;
+    dotSize: number;
+    shapeSlot?: (props: any) => any;
+    dotSlot?: (props: any) => any;
+    labelSlot?: (props: any) => any;
+}
+export declare const LineContextKey: InjectionKey<LineContext>;
+export declare function provideLineContext(context: LineContext): void;
+export declare function useLineContext(): LineContext;
+export declare function useLine(props: LinePropsInternal, attrs?: SVGAttributes, shapeSlot?: (props: any) => any, dotSlot?: (props: any) => any, labelSlot?: (props: any) => any): {
+    shouldRender: ComputedRef<boolean>;
+    needClip: ComputedRef<boolean>;
+    lineData: Readonly<ShallowRef<readonly LinePointItem[]>>;
+    points: Ref<readonly LinePointItem[], readonly LinePointItem[]>;
+    clipPathId: ComputedRef<string>;
+};

package/dist/cartesian/line/index.d.ts

@@ -0,0 +1,3 @@
+export type { LineProps, LinePropsWithSVG, LinePropsInternal, LinePointItem } from './type';
+export * from './Line';
+export * from './hooks/useLine';