vccs 0.3.0 → 0.4.1

package/README.md

@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="docs/public/logo.svg" alt="vccs logo" width="120" />
+</p>
+
 <h1 align="center">Vue Charts (vccs)</h1>
 
 <p align="center">

package/dist/cartesian/axis/XAxis.d.ts

@@ -63,7 +63,7 @@ export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractP
         type: PropType<AxisDomain>;
     };
     axisLine: {
-        type: BooleanConstructor;
+        type: (ObjectConstructor | BooleanConstructor)[];
         default: boolean;
     };
     ticks: {
@@ -146,7 +146,7 @@ export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractP
         type: PropType<AxisDomain>;
     };
     axisLine: {
-        type: BooleanConstructor;
+        type: (ObjectConstructor | BooleanConstructor)[];
         default: boolean;
     };
     ticks: {
@@ -184,6 +184,6 @@ export declare const XAxis: import('vue').DefineComponent<import('vue').ExtractP
     allowDecimals: boolean;
     mirror: boolean;
     minTickGap: number;
-    axisLine: boolean;
+    axisLine: boolean | Record<string, any>;
     tickLine: boolean | Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts

@@ -3,7 +3,7 @@ import { VueClassValue } from '../../types/common';
 import { AxisInterval } from '../../types/axis';
 import { RechartsScale } from '../../types/scale';
 import { CartesianTickItem } from '../../types/tick';
-import { PropType } from 'vue';
+import { PropType, SVGAttributes } from 'vue';
 /** The orientation of the axis in correspondence to the chart */
 export type Orientation = 'top' | 'bottom' | 'left' | 'right';
 /** A unit to be appended to a value */
@@ -30,7 +30,7 @@ export interface CartesianAxisProps {
     interval?: AxisInterval;
     angle?: number;
     scale: RechartsScale;
-    axisLine?: string;
+    axisLine?: boolean | SVGAttributes;
 }
 export declare const CartesianAxis: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     x: {
@@ -68,7 +68,7 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         default: boolean;
     };
     axisLine: {
-        type: (ObjectConstructor | BooleanConstructor)[];
+        type: PropType<boolean | SVGAttributes>;
         default: () => boolean;
     };
     tickLine: {
@@ -146,7 +146,7 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         default: boolean;
     };
     axisLine: {
-        type: (ObjectConstructor | BooleanConstructor)[];
+        type: PropType<boolean | SVGAttributes>;
         default: () => boolean;
     };
     tickLine: {
@@ -203,7 +203,7 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
     hide: boolean;
     mirror: boolean;
     minTickGap: number;
-    axisLine: boolean | Record<string, any>;
+    axisLine: boolean;
     tickLine: boolean | Record<string, any>;
     tickSize: number;
     tickMargin: number;

package/dist/chart/RechartsWrapper.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, PropType } from 'vue';
+import { PropType, StyleValue } from 'vue';
 import { CategoricalChartFunc } from '../types';
 export declare const RechartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     class: {
@@ -43,7 +43,7 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
         type: PropType<CategoricalChartFunc>;
     };
     style: {
-        type: PropType<CSSProperties>;
+        type: PropType<StyleValue>;
     };
     width: {
         type: NumberConstructor;
@@ -92,7 +92,7 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
         type: PropType<CategoricalChartFunc>;
     };
     style: {
-        type: PropType<CSSProperties>;
+        type: PropType<StyleValue>;
     };
     width: {
         type: NumberConstructor;

package/dist/chart/Sankey.d.ts

@@ -0,0 +1,327 @@
+import { PropType, SlotsType } from 'vue';
+import { AnimationOptions } from 'motion-v';
+import { TooltipPayloadSearcher } from '../state/tooltipSlice';
+import { SankeyInputLink, SankeyInputNode, SankeyLayoutLink, SankeyLayoutNode } from './sankeyUtils';
+export interface SankeyNodeSlotProps {
+    payload: SankeyLayoutNode;
+    index: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: string;
+}
+export interface SankeyLinkSlotProps {
+    payload: SankeyLayoutLink;
+    index: number;
+    d: string;
+    linkWidth: number;
+    fill: string;
+}
+export interface SankeySlots {
+    node?: (props: SankeyNodeSlotProps) => any;
+    link?: (props: SankeyLinkSlotProps) => any;
+    default?: () => any;
+}
+export declare const sankeyPayloadSearcher: TooltipPayloadSearcher;
+export declare const SankeyVueProps: {
+    data: {
+        type: PropType<{
+            nodes: SankeyInputNode[];
+            links: SankeyInputLink[];
+        }>;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodePadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    iterations: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: PropType<{
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        }>;
+        default: () => {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    nodeFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodeStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    linkFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    linkStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+    onClick: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+};
+/**
+ * Sankey diagram — visualizes flows between nodes.
+ *
+ * Supports `<Tooltip>` as a child component for hover info on both nodes and links.
+ */
+declare const _Sankey: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<{
+            nodes: SankeyInputNode[];
+            links: SankeyInputLink[];
+        }>;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodePadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    iterations: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: PropType<{
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        }>;
+        default: () => {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    nodeFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodeStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    linkFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    linkStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+    onClick: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<{
+            nodes: SankeyInputNode[];
+            links: SankeyInputLink[];
+        }>;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodePadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    nodeWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    iterations: {
+        type: NumberConstructor;
+        default: number;
+    };
+    margin: {
+        type: PropType<{
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        }>;
+        default: () => {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    nodeFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    nodeStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    linkFill: {
+        type: StringConstructor;
+        default: string;
+    };
+    linkStroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    isAnimationActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+    onClick: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(item: any, type: "node" | "link", e: MouseEvent) => void>;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    margin: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    dataKey: string;
+    transition: AnimationOptions;
+    onClick: (item: any, type: "node" | "link", e: MouseEvent) => void;
+    nameKey: string;
+    isAnimationActive: boolean;
+    onMouseEnter: (item: any, type: "node" | "link", e: MouseEvent) => void;
+    onMouseLeave: (item: any, type: "node" | "link", e: MouseEvent) => void;
+    nodePadding: number;
+    nodeWidth: number;
+    iterations: number;
+    nodeFill: string;
+    nodeStroke: string;
+    linkFill: string;
+    linkStroke: string;
+}, SlotsType<SankeySlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const Sankey: typeof _Sankey & {
+    new (): {
+        $slots: SankeySlots;
+    };
+};
+export {};

package/dist/chart/SunburstChart.d.ts

@@ -0,0 +1,249 @@
+import { PropType, SlotsType } from 'vue';
+import { TooltipPayloadSearcher } from '../state/tooltipSlice';
+import { SunburstData, SunburstLayoutNode } from './sunburstUtils';
+export type { SunburstData };
+export interface SunburstContentSlotProps extends SunburstLayoutNode {
+    index: number;
+}
+export interface SunburstSlots {
+    content?: (props: SunburstContentSlotProps) => any;
+    default?: () => any;
+}
+export declare const sunburstPayloadSearcher: TooltipPayloadSearcher;
+export declare const SunburstChartVueProps: {
+    data: {
+        type: PropType<SunburstData>;
+        required: true;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    cx: {
+        type: NumberConstructor;
+        default: any;
+    };
+    cy: {
+        type: NumberConstructor;
+        default: any;
+    };
+    innerRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    outerRadius: {
+        type: NumberConstructor;
+        default: any;
+    };
+    startAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ringPadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    onClick: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+};
+export declare const SunburstChart: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<SunburstData>;
+        required: true;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    cx: {
+        type: NumberConstructor;
+        default: any;
+    };
+    cy: {
+        type: NumberConstructor;
+        default: any;
+    };
+    innerRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    outerRadius: {
+        type: NumberConstructor;
+        default: any;
+    };
+    startAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ringPadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    onClick: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<SunburstData>;
+        required: true;
+    };
+    dataKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    nameKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: NumberConstructor;
+        required: true;
+    };
+    height: {
+        type: NumberConstructor;
+        required: true;
+    };
+    cx: {
+        type: NumberConstructor;
+        default: any;
+    };
+    cy: {
+        type: NumberConstructor;
+        default: any;
+    };
+    innerRadius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    outerRadius: {
+        type: NumberConstructor;
+        default: any;
+    };
+    startAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ringPadding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    padding: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: StringConstructor;
+        default: string;
+    };
+    stroke: {
+        type: StringConstructor;
+        default: string;
+    };
+    onClick: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseEnter: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+    onMouseLeave: {
+        type: PropType<(node: SunburstData, e: MouseEvent) => void>;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    fill: string;
+    padding: number;
+    cx: number;
+    cy: number;
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+    dataKey: string;
+    stroke: string;
+    onClick: (node: SunburstData, e: MouseEvent) => void;
+    nameKey: string;
+    onMouseEnter: (node: SunburstData, e: MouseEvent) => void;
+    onMouseLeave: (node: SunburstData, e: MouseEvent) => void;
+    ringPadding: number;
+}, SlotsType<SunburstSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/generateCategoricalChart.d.ts

@@ -1,5 +1,5 @@
 import { DataKey, LayoutType, Margin, StackOffsetType, SyncMethod, VuePropsToType, WithSVGProps } from '../types';
-import { PropType } from 'vue';
+import { PropType, StyleValue } from 'vue';
 import { TooltipEventType } from '../types/tooltip';
 import { ChartData } from '../state/chartDataSlice';
 export declare const CategoricalProps: {
@@ -82,7 +82,7 @@ export declare const CategoricalProps: {
         type: NumberConstructor;
     };
     style: {
-        type: ObjectConstructor;
+        type: PropType<StyleValue>;
     };
     syncId: {
         type: (NumberConstructor | StringConstructor)[];

package/dist/chart/index.d.ts

@@ -8,3 +8,5 @@ export * from './ScatterChart';
 export * from './RadialBarChart';
 export * from './FunnelChart';
 export * from './Treemap';
+export * from './Sankey';
+export * from './SunburstChart';