vccs 0.4.0 → 0.5.0

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/YAxis.d.ts

@@ -15,8 +15,8 @@ export declare const YAxis: import('vue').DefineComponent<import('vue').ExtractP
         default: boolean;
     };
     width: {
-        type: NumberConstructor;
-        default: number;
+        type: PropType<number | "auto">;
+        default: import('../../types/axis').YAxisWidth;
     };
     hide: {
         type: BooleanConstructor;
@@ -99,8 +99,8 @@ export declare const YAxis: import('vue').DefineComponent<import('vue').ExtractP
         default: boolean;
     };
     width: {
-        type: NumberConstructor;
-        default: number;
+        type: PropType<number | "auto">;
+        default: import('../../types/axis').YAxisWidth;
     };
     hide: {
         type: BooleanConstructor;
@@ -172,7 +172,7 @@ export declare const YAxis: import('vue').DefineComponent<import('vue').ExtractP
 }>> & Readonly<{}>, {
     tickFormatter: Function;
     unit: string;
-    width: number;
+    width: number | "auto";
     scale: string | Function;
     padding: Record<string, any>;
     type: string;

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

@@ -110,6 +110,11 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    /** Additional props to spread to each tick Text element. */
+    tickTextProps: {
+        type: ObjectConstructor;
+        default: any;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     x: {
         type: NumberConstructor;
@@ -188,6 +193,11 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    /** Additional props to spread to each tick Text element. */
+    tickTextProps: {
+        type: ObjectConstructor;
+        default: any;
+    };
 }>> & Readonly<{}>, {
     interval: string | number;
     tick: boolean;
@@ -207,4 +217,5 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
     tickLine: boolean | Record<string, any>;
     tickSize: number;
     tickMargin: number;
+    tickTextProps: Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/{RechartsWrapper.d.ts → ChartsWrapper.d.ts}

@@ -1,6 +1,6 @@
-import { CSSProperties, PropType } from 'vue';
+import { PropType, StyleValue } from 'vue';
 import { CategoricalChartFunc } from '../types';
-export declare const RechartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const ChartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     class: {
         type: PropType<import('../types').VueClassValue>;
         default: any;
@@ -33,6 +33,9 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onMouseUp: {
         type: PropType<CategoricalChartFunc>;
     };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+    };
     onTouchEnd: {
         type: PropType<CategoricalChartFunc>;
     };
@@ -42,8 +45,12 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onTouchStart: {
         type: PropType<CategoricalChartFunc>;
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     style: {
-        type: PropType<CSSProperties>;
+        type: PropType<StyleValue>;
     };
     width: {
         type: NumberConstructor;
@@ -82,6 +89,9 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onMouseUp: {
         type: PropType<CategoricalChartFunc>;
     };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+    };
     onTouchEnd: {
         type: PropType<CategoricalChartFunc>;
     };
@@ -91,8 +101,12 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onTouchStart: {
         type: PropType<CategoricalChartFunc>;
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     style: {
-        type: PropType<CSSProperties>;
+        type: PropType<StyleValue>;
     };
     width: {
         type: NumberConstructor;
@@ -100,4 +114,5 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     };
 }>> & Readonly<{}>, {
     class: import('../types').VueClassValue;
+    responsive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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>;