vccs 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,151 @@
+<h1 align="center">Vue Charts (vccs)</h1>
+
+<p align="center">
+  <strong>Composable charting components for Vue 3</strong>
+</p>
+
+<p align="center">
+  An unofficial Vue.js port of <a href="https://recharts.org">Recharts</a>, bringing React's most popular charting library to the Vue ecosystem.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vccs"><img src="https://img.shields.io/npm/v/vccs.svg" alt="npm version"></a>
+</p>
+
+---
+
+> **Work in Progress**: This library is under active development. APIs may change.
+
+## Install
+
+```bash
+# pnpm
+pnpm add vccs
+
+# npm
+npm install vccs
+
+# yarn
+yarn add vccs
+```
+
+**Peer dependency**: `vue >= 3.0.0`
+
+## Quick Start
+
+```vue
+<script setup>
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'vccs'
+
+const data = [
+  { name: 'Page A', uv: 4000, pv: 2400 },
+  { name: 'Page B', uv: 3000, pv: 1398 },
+  { name: 'Page C', uv: 2000, pv: 9800 },
+  { name: 'Page D', uv: 2780, pv: 3908 },
+  { name: 'Page E', uv: 1890, pv: 4800 },
+  { name: 'Page F', uv: 2390, pv: 3800 },
+]
+</script>
+
+<template>
+  <ResponsiveContainer
+    width="100%"
+    :height="300"
+  >
+    <BarChart :data="data">
+      <CartesianGrid stroke-dasharray="3 3" />
+      <XAxis data-key="name" />
+      <YAxis />
+      <Tooltip />
+      <Bar
+        data-key="pv"
+        fill="#8884d8"
+      />
+      <Bar
+        data-key="uv"
+        fill="#82ca9d"
+      />
+    </BarChart>
+  </ResponsiveContainer>
+</template>
+```
+
+## Chart Types
+
+| Chart | Component | Description |
+|-------|-----------|-------------|
+| Area | `<AreaChart>` + `<Area>` | Filled area charts with stacking & gradients |
+| Bar | `<BarChart>` + `<Bar>` | Vertical/horizontal bar charts |
+| Line | `<LineChart>` + `<Line>` | Line charts with multiple curve types |
+| Scatter | `<ScatterChart>` + `<Scatter>` | X-Y scatter plots |
+| Composed | `<ComposedChart>` | Mix Area, Bar, Line in one chart |
+| Pie | `<PieChart>` + `<Pie>` | Pie and donut charts |
+| Radar | `<RadarChart>` + `<Radar>` | Radar/spider charts |
+| Radial Bar | `<RadialBarChart>` + `<RadialBar>` | Circular bar charts |
+| Funnel | `<FunnelChart>` + `<Funnel>` | Funnel/pipeline charts |
+| Treemap | `<Treemap>` | Not yet supported |
+| Sankey | `<Sankey>` | Not yet supported |
+| Sunburst | `<SunburstChart>` | Not yet supported |
+
+## Components
+
+**Cartesian**: `XAxis`, `YAxis`, `ZAxis`, `CartesianGrid`, `ReferenceLine`, `ReferenceArea`, `ErrorBar`, `Brush`
+
+**Polar**: `PolarGrid`, `PolarAngleAxis`, `PolarRadiusAxis`
+
+**General**: `Tooltip`, `Legend`, `Label`, `LabelList`, `Cell`, `ResponsiveContainer`
+
+**Shapes**: `Rectangle`, `Dot`, `Sector`, `Symbols`
+
+## Features
+
+- **Vue 3 Native** — Composition API + JSX, full TypeScript support
+- **Recharts API** — Same intuitive composable component design
+- **Animated** — Smooth transitions powered by [Motion for Vue](https://motion.dev/docs/vue)
+- **Interactive** — Tooltip, legend, brush, and click/hover events
+- **Responsive** — `<ResponsiveContainer>` adapts to parent width
+- **Customizable** — Named slots for shapes, ticks, tooltip content, legend, and more
+
+## Architecture
+
+- **State**: Redux Toolkit via [@reduxjs/vue-redux](https://github.com/nicepkg/reduxjs-vue-redux) — one store per chart
+- **Math**: D3 scales and shapes via [victory-vendor](https://github.com/FormidableLabs/victory)
+- **Animation**: [Motion for Vue](https://motion.dev/docs/vue)
+
+## Project Structure
+
+```
+packages/vue/src/     # Library source (published as vccs)
+playground/nuxt/      # Nuxt 3 playground for manual testing
+docs/                 # Documentation site (Nuxt 3 + Docus)
+```
+
+## Development
+
+```bash
+pnpm install          # Install dependencies
+pnpm dev              # Watch mode (library)
+pnpm test             # Run tests
+pnpm test:coverage    # Tests with coverage
+pnpm storybook        # Storybook
+pnpm play             # Nuxt playground
+pnpm docs             # Documentation site
+```
+
+## License
+
+[MIT](LICENSE)
+
+## Credits
+
+- **[Recharts](https://recharts.org)** — Original React charting library this project ports from
+- **[Victory Vendor](https://github.com/FormidableLabs/victory)** — D3 math utilities
+- **[Motion for Vue](https://motion.dev/docs/vue)** — Animation engine
+- **[Redux Toolkit](https://redux-toolkit.js.org/)** — State management
+- **[VueUse](https://vueuse.org/)** — Vue composition utilities
+
+---
+
+<p align="center">
+  <em>This is an unofficial port and is not affiliated with the original Recharts team.</em>
+</p>

package/dist/animation/Animate.d.ts

@@ -62,9 +62,9 @@ declare const Animate: import('vue').DefineComponent<import('vue').ExtractPropTy
     };
 }>> & Readonly<{}>, {
     from: number;
-    to: number;
     onUpdate: (latest: any) => void;
     transition: AnimationOptions;
+    to: number;
     onAnimationStart: () => void;
     onAnimationEnd: () => void;
     isActive: boolean;

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

@@ -1,5 +1,5 @@
 import { ChartData } from '../../state/chartDataSlice';
-import { DataKey, TooltipType, VuePropsToType, WithSVGProps } from '../../types';
+import { DataKey, TooltipType, VueClassValue, VuePropsToType, WithSVGProps } from '../../types';
 import { AnimationOptions } from 'motion-v';
 import { BaseValue } from '../../types/area';
 import { AxisId } from '../../types/axis';
@@ -139,7 +139,7 @@ export declare const AreaVueProps: {
         type: PropType<string | number>;
     };
     class: {
-        type: StringConstructor;
+        type: PropType<VueClassValue>;
         default: any;
     };
     type: {
@@ -169,5 +169,5 @@ export interface AreaDotSlotProps {
     strokeWidth?: number;
     fillOpacity?: number;
     clipDot?: boolean;
-    class?: string;
+    class?: VueClassValue;
 }

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

@@ -23,7 +23,7 @@ export type BarRectangleItem = {
 };
 export declare const BarVueProps: {
     class: {
-        type: StringConstructor;
+        type: PropType<import('../../types').VueClassValue>;
         default: any;
     };
     barSize: {
@@ -119,18 +119,6 @@ export declare const BarVueProps: {
         type: PropType<AxisId>;
         default: number;
     };
-    animationBegin: {
-        type: NumberConstructor;
-        default: number;
-    };
-    animationDuration: {
-        type: NumberConstructor;
-        default: number;
-    };
-    animationEasing: {
-        type: StringConstructor;
-        default: string;
-    };
     transition: {
         type: PropType<AnimationOptions>;
         default: {

package/dist/cartesian/brush/components/Slide.d.ts

@@ -5,7 +5,7 @@ export declare const Slide: import('vue').DefineComponent<import('vue').ExtractP
     travellerWidth: NumberConstructor;
     startX: NumberConstructor;
     endX: NumberConstructor;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("mousedown" | "mouseenter" | "mouseleave" | "touchstart")[], "mousedown" | "mouseenter" | "mouseleave" | "touchstart", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("mouseenter" | "mouseleave" | "mousedown" | "touchstart")[], "mouseenter" | "mouseleave" | "mousedown" | "touchstart", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     y: NumberConstructor;
     height: NumberConstructor;
     stroke: StringConstructor;

package/dist/cartesian/brush/components/TravellerLayer.d.ts

@@ -5,7 +5,7 @@ export declare const TravellerLayer: import('vue').DefineComponent<import('vue')
     otherProps: () => BrushProps & {
         y: number;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("focus" | "blur" | "mousedown" | "mouseenter" | "mouseleave" | "touchstart" | "traveller-move-keyboard")[], "focus" | "blur" | "mousedown" | "mouseenter" | "mouseleave" | "touchstart" | "traveller-move-keyboard", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("focus" | "blur" | "mouseenter" | "mouseleave" | "mousedown" | "touchstart" | "traveller-move-keyboard")[], "focus" | "blur" | "mouseenter" | "mouseleave" | "mousedown" | "touchstart" | "traveller-move-keyboard", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     id: StringConstructor;
     travellerX: NumberConstructor;
     otherProps: () => BrushProps & {

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

@@ -56,7 +56,8 @@ export declare const BrushVueProps: {
         type: StringConstructor;
     };
     class: {
-        type: StringConstructor;
+        type: PropType<import('../../types').VueClassValue>;
+        default: any;
     };
     data: {
         type: PropType<any[]>;

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

@@ -1,4 +1,5 @@
 import { CartesianViewBox } from '../type';
+import { VueClassValue } from '../../types/common';
 import { AxisInterval } from '../../types/axis';
 import { RechartsScale } from '../../types/scale';
 import { CartesianTickItem } from '../../types/tick';
@@ -10,7 +11,7 @@ export type Unit = string | number;
 /** The formatter function of tick */
 export type TickFormatter = (value: any, index: number) => string;
 export interface CartesianAxisProps {
-    class?: string;
+    class?: VueClassValue;
     x?: number;
     y?: number;
     width?: number;

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

@@ -1,7 +1,8 @@
+import { AnimationOptions } from 'motion-v';
+import { PropType } from 'vue';
 import { ViewBox } from '../type';
 import { TrapezoidProps } from '../../shape';
-import { Coordinate, DataKey, TooltipType } from '../../types';
-import { AnimationEasing } from '../../types/bar';
+import { Coordinate, DataKey, TooltipType, WithSVGProps } from '../../types';
 import { LegendType } from '../../types/legend';
 export interface FunnelTrapezoidItem extends TrapezoidProps {
     value?: number | string;
@@ -12,15 +13,12 @@ export interface FunnelTrapezoidItem extends TrapezoidProps {
     labelViewBox?: ViewBox;
 }
 export interface FunnelProps {
-    animationBegin?: number;
-    animationDuration?: number;
-    animationEasing?: AnimationEasing;
-    className?: string;
     data?: any[];
     dataKey: DataKey<any>;
     hide?: boolean;
     id?: string;
     isAnimationActive?: boolean;
+    transition?: AnimationOptions;
     lastShapeType?: 'triangle' | 'rectangle';
     legendType?: LegendType;
     nameKey?: DataKey<any>;
@@ -29,6 +27,76 @@ export interface FunnelProps {
     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;
+    };
+    width: {
+        type: PropType<number | string>;
+        default: any;
+    };
+    class: {
+        type: PropType<import('../../types').VueClassValue>;
+        default: any;
+    };
+};
+export type FunnelPropsWithSVG = WithSVGProps<typeof FunnelVueProps>;
 type RealFunnelData = any;
 export type FunnelComposedData = {
     trapezoids: ReadonlyArray<FunnelTrapezoidItem>;

package/dist/cartesian/index.d.ts

@@ -6,6 +6,8 @@ export * from './cartesian-grid';
 export * from './error-bar';
 export * from './line';
 export * from './reference-area';
+export * from './reference-dot';
 export * from './reference-line';
 export * from './scatter';
 export * from './z-axis';
+export * from './funnel';

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

@@ -3,11 +3,8 @@ 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;
+    class?: import('../../types').VueClassValue;
     connectNulls?: boolean;
     data?: any[];
     dataKey: import('../../types').DataKey<any>;
@@ -24,7 +21,7 @@ export declare const Line: import('vue').DefineComponent<{
     stroke?: string;
     strokeWidth?: number;
     tooltipType?: import('../../types').TooltipType;
-    transition?: import('motion-v/es').AnimationOptions;
+    transition?: import('motion-v').AnimationOptions;
     type?: import('../..').CurveType;
     unit?: string | number;
     xAxisId?: import('../../types/axis').AxisId;
@@ -33,11 +30,8 @@ export declare const Line: import('vue').DefineComponent<{
 }, () => 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;
+    class?: import('../../types').VueClassValue;
     connectNulls?: boolean;
     data?: any[];
     dataKey: import('../../types').DataKey<any>;
@@ -54,7 +48,7 @@ export declare const Line: import('vue').DefineComponent<{
     stroke?: string;
     strokeWidth?: number;
     tooltipType?: import('../../types').TooltipType;
-    transition?: import('motion-v/es').AnimationOptions;
+    transition?: import('motion-v').AnimationOptions;
     type?: import('../..').CurveType;
     unit?: string | number;
     xAxisId?: import('../../types/axis').AxisId;
@@ -67,15 +61,15 @@ export declare const Line: import('vue').DefineComponent<{
     height: number;
     yAxisId: import('../../types/axis').AxisId;
     xAxisId: import('../../types/axis').AxisId;
+    class: import('../../types').VueClassValue;
     stroke: string;
+    strokeWidth: number;
+    transition: import('motion-v').AnimationOptions;
     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>;

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

@@ -1,6 +1,5 @@
-import { AnimationDuration, DataKey, LayoutType, TooltipType, VuePropsToType, WithSVGProps } from '../../types';
+import { DataKey, LayoutType, TooltipType, VueClassValue, VuePropsToType, WithSVGProps } from '../../types';
 import { AxisId } from '../../types/axis';
-import { AnimationEasing } from '../../types/bar';
 import { AnimationOptions } from 'motion-v';
 import { LegendType } from '../../types/legend';
 import { CurveFactory } from 'victory-vendor/d3-shape';
@@ -13,11 +12,8 @@ export interface LinePointItem extends Point {
 export interface LineProps {
     activeDot?: any;
     animateNewValues?: boolean;
-    animationBegin?: number;
-    animationDuration?: AnimationDuration;
-    animationEasing?: AnimationEasing;
     animationId?: string;
-    className?: string;
+    class?: VueClassValue;
     connectNulls?: boolean;
     data?: any[];
     dataKey: DataKey<any>;
@@ -46,16 +42,6 @@ export declare const LineVueProps: {
         type: (ObjectConstructor | FunctionConstructor | BooleanConstructor)[];
         default: boolean;
     };
-    animationDuration: {
-        type: NumberConstructor;
-    };
-    animationEasing: {
-        type: StringConstructor;
-    };
-    animationBegin: {
-        type: NumberConstructor;
-        default: number;
-    };
     animationId: {
         type: StringConstructor;
     };
@@ -161,7 +147,8 @@ export declare const LineVueProps: {
         type: (NumberConstructor | StringConstructor)[];
     };
     class: {
-        type: StringConstructor;
+        type: PropType<VueClassValue>;
+        default: any;
     };
     layout: {
         type: PropType<LayoutType>;

package/dist/cartesian/reference-area/ReferenceArea.d.ts

@@ -50,14 +50,14 @@ export declare const ReferenceAreaVueProps: {
         type: PropType<IfOverflow>;
         default: string;
     };
-    className: {
-        type: StringConstructor;
-        default: any;
-    };
     radius: {
         type: PropType<number | [number, number, number, number]>;
         default: number;
     };
+    class: {
+        type: PropType<import('../../types').VueClassValue>;
+        default: any;
+    };
 };
 export declare const ReferenceArea: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     x1: {
@@ -108,14 +108,14 @@ export declare const ReferenceArea: import('vue').DefineComponent<import('vue').
         type: PropType<IfOverflow>;
         default: string;
     };
-    className: {
-        type: StringConstructor;
-        default: any;
-    };
     radius: {
         type: PropType<number | [number, number, number, number]>;
         default: number;
     };
+    class: {
+        type: PropType<import('../../types').VueClassValue>;
+        default: any;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     x1: {
         type: PropType<number | string>;
@@ -165,14 +165,14 @@ export declare const ReferenceArea: import('vue').DefineComponent<import('vue').
         type: PropType<IfOverflow>;
         default: string;
     };
-    className: {
-        type: StringConstructor;
-        default: any;
-    };
     radius: {
         type: PropType<number | [number, number, number, number]>;
         default: number;
     };
+    class: {
+        type: PropType<import('../../types').VueClassValue>;
+        default: any;
+    };
 }>> & Readonly<{}>, {
     fill: string;
     yAxisId: AxisId;
@@ -182,10 +182,10 @@ export declare const ReferenceArea: import('vue').DefineComponent<import('vue').
     x2: string | number;
     y1: string | number;
     y2: string | number;
-    radius: number | [number, number, number, number];
+    class: import('../../types').VueClassValue;
+    fillOpacity: number;
     stroke: string;
-    label: string | number | boolean | Record<string, any>;
-    className: string;
     strokeWidth: string | number;
-    fillOpacity: number;
+    radius: number | [number, number, number, number];
+    label: string | number | boolean | Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;