vccs 0.4.0 → 0.5.0

package/dist/hooks/publicHooks.d.ts

@@ -33,7 +33,7 @@ export declare function useActiveTooltipCoordinate(): Readonly<import('vue').Sha
  *
  * @returns A reactive string label or undefined when no tooltip is active
  */
-export declare function useActiveTooltipLabel(): Readonly<import('vue').ShallowRef<string>>;
+export declare function useActiveTooltipLabel(): Readonly<import('vue').ShallowRef<string | number>>;
 /**
  * Returns the plot area rectangle { x, y, width, height }.
  * This is the area inside all axes, legend, and brush — where graphical items render.

package/dist/index.d.ts

@@ -5,3 +5,5 @@ export * from './components';
 export * from './polar';
 export * from './shape';
 export * from './hooks/publicHooks';
+export { Global } from './utils/Global';
+export type { GlobalConfig, GlobalConfigKeys } from './utils/Global';

package/dist/polar/pie/type.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { AnimationOptions } from 'motion-v';
 import { DataKey, VuePropsToType, WithSVGProps } from '../../types';
 import { LegendType } from '../../types/legend';
 import { TooltipType } from '../../types/tooltip';
@@ -75,6 +76,13 @@ export declare const PieVueProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: string;
+        };
+    };
     label: {
         type: BooleanConstructor;
         default: boolean;

package/dist/polar/radar/Radar.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { AnimationOptions } from 'motion-v';
 import { DataKey } from '../../types';
 import { LegendType } from '../../types/legend';
 import { TooltipType } from '../../types/tooltip';
@@ -67,6 +68,13 @@ export declare const Radar: import('vue').DefineComponent<import('vue').ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: string;
+        };
+    };
     activeDot: {
         type: PropType<object | boolean>;
         default: boolean;
@@ -136,6 +144,13 @@ export declare const Radar: import('vue').DefineComponent<import('vue').ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: string;
+        };
+    };
     activeDot: {
         type: PropType<object | boolean>;
         default: boolean;
@@ -146,6 +161,7 @@ export declare const Radar: import('vue').DefineComponent<import('vue').ExtractP
     stroke: string;
     strokeDasharray: string;
     strokeWidth: number;
+    transition: AnimationOptions;
     name: string;
     label: boolean | Record<string, any>;
     connectNulls: boolean;

package/dist/polar/radial-bar/type.d.ts

@@ -1,4 +1,5 @@
 import { PropType } from 'vue';
+import { AnimationOptions } from 'motion-v';
 import { DataKey, VuePropsToType, WithSVGProps } from '../../types';
 import { LegendType } from '../../types/legend';
 import { TooltipType } from '../../types/tooltip';
@@ -64,6 +65,13 @@ export declare const RadialBarVueProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    transition: {
+        type: PropType<AnimationOptions>;
+        default: () => {
+            duration: number;
+            ease: string;
+        };
+    };
     minPointSize: {
         type: NumberConstructor;
         default: number;

package/dist/state/cartesianAxisSlice.d.ts

@@ -1,7 +1,7 @@
 import { AxisRange } from './selectors/axisSelectors';
 import { SVGAttributes } from 'vue';
 import { RechartsScale, ScaleType } from '../types/scale';
-import { AxisDomain, AxisDomainType, AxisInterval } from '../types/axis';
+import { AxisDomain, AxisDomainType, AxisInterval, YAxisWidth } from '../types/axis';
 import { DataKey } from '../types';
 import { AxisTick, TickFormatter } from '../types/tick';
 export type AxisId = string | number;
@@ -68,8 +68,13 @@ export type XAxisSettings = CartesianAxisSettings & {
 };
 export type YAxisSettings = CartesianAxisSettings & {
     padding: YAxisPadding;
-    width: number;
+    width: YAxisWidth;
     orientation: YAxisOrientation;
+    /**
+     * Internal: recent measured widths, used to detect A→B→A oscillation
+     * when width is measured dynamically (width === 'auto').
+     */
+    widthHistory?: number[];
 };
 /**
  * Z axis is special because it's never displayed. It controls the size of Scatter dots,
@@ -83,6 +88,9 @@ type AxisMapState = {
     yAxis: Record<AxisId, YAxisSettings>;
     zAxis: Record<AxisId, ZAxisSettings>;
 };
-export declare const addXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/addXAxis">, removeXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/removeXAxis">, addYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/addYAxis">, removeYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/removeYAxis">, addZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/addZAxis">, removeZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/removeZAxis">;
+export declare const addXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/addXAxis">, removeXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/removeXAxis">, addYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/addYAxis">, removeYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/removeYAxis">, addZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/addZAxis">, removeZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/removeZAxis">, updateYAxisWidth: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<{
+    id: AxisId;
+    width: number;
+}, "cartesianAxis/updateYAxisWidth">;
 export declare const cartesianAxisReducer: import('@reduxjs/toolkit').Reducer<AxisMapState>;
 export {};

package/dist/state/selectors/combiners/combineActiveLabel.d.ts

@@ -1,3 +1,3 @@
 import { TooltipIndex } from '../../tooltipSlice';
 import { TickItem } from '../../../types';
-export declare function combineActiveLabel(tooltipTicks: ReadonlyArray<TickItem>, activeIndex: TooltipIndex): string | undefined;
+export declare function combineActiveLabel(tooltipTicks: ReadonlyArray<TickItem>, activeIndex: TooltipIndex): string | number | undefined;

package/dist/state/selectors/selectors.d.ts

@@ -175,7 +175,7 @@ export declare function selectTooltipDataKey(state: RechartsRootState, tooltipEv
 export declare const selectTooltipPayloadConfigurations: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => ReadonlyArray<TooltipPayloadConfiguration>;
 export declare const selectCoordinateForDefaultIndex: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => Coordinate | undefined;
 export declare const selectActiveCoordinate: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => Coordinate | undefined;
-export declare const selectActiveLabel: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => string | undefined;
+export declare const selectActiveLabel: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => string | number | undefined;
 export declare const selectTooltipPayload: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => TooltipPayload | undefined;
 export declare const selectIsTooltipActive: (state: RechartsRootState, tooltipEventType: TooltipEventType, trigger: TooltipTrigger, defaultIndex: TooltipIndex | undefined) => {
     isActive: boolean;

package/dist/state/selectors/tooltipSelectors.d.ts

@@ -518,7 +518,7 @@ export declare const selectTooltipAxisTicks: ((state: {
     memoize: typeof import('@reduxjs/toolkit').weakMapMemoize;
 };
 export declare const selectActiveTooltipIndex: (state: RechartsRootState) => TooltipIndex | null;
-export declare const selectActiveLabel: (state: RechartsRootState) => string | undefined;
+export declare const selectActiveLabel: (state: RechartsRootState) => string | number | undefined;
 export declare const selectActiveTooltipDataKey: (state: RechartsRootState) => DataKey<any> | undefined;
 export declare const selectActiveTooltipCoordinate: (state: RechartsRootState) => Coordinate | undefined;
 export declare const selectIsTooltipActive: (state: RechartsRootState) => boolean;

package/dist/types/axis.d.ts

@@ -63,10 +63,20 @@ export type YAxisPadding = {
     bottom?: number;
 } | 'gap' | 'no-gap';
 export type YAxisOrientation = 'left' | 'right';
+/**
+ * Width of the Y axis in pixels.
+ * `auto` will attempt to resize the axis based on its content.
+ */
+export type YAxisWidth = number | 'auto';
 export type YAxisSettings = CartesianAxisSettings & {
     padding: YAxisPadding;
-    width: number;
+    width: YAxisWidth;
     orientation: YAxisOrientation;
+    /**
+     * Internal: recent measured widths, used to detect A→B→A oscillation
+     * when width is measured dynamically (width === 'auto').
+     */
+    widthHistory?: number[];
 };
 export type AxisRange = readonly [number, number];
 /**

package/dist/types/common.d.ts

@@ -49,7 +49,7 @@ export type MouseHandlerDataParam = {
      * 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;
-    activeLabel: string | undefined;
+    activeLabel: string | number | undefined;
     activeDataKey: DataKey<any> | undefined;
     activeCoordinate: Coordinate | undefined;
 };

package/dist/utils/Global.d.ts

@@ -0,0 +1,9 @@
+export type GlobalConfigKeys = 'isSsr';
+export interface GlobalConfig {
+    isSsr?: boolean;
+}
+export declare const Global: {
+    isSsr: boolean;
+    get(key: GlobalConfigKeys): boolean;
+    set(key: GlobalConfigKeys | GlobalConfig, value?: any): void;
+};

package/dist/utils/YAxisUtils.d.ts

@@ -0,0 +1,20 @@
+type IGetBoundingClient = Pick<Element, 'getBoundingClientRect'>;
+/**
+ * Calculates the width of the Y-axis based on the tick labels and the axis label.
+ * @param params - The parameters object.
+ * @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+ * @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+ * @param [params.labelGapWithTick] - The gap between the label and the tick.
+ * @param [params.tickSize] - The length of the tick line.
+ * @param [params.tickMargin] - The margin between the tick line and the tick text.
+ * @returns The calculated width of the Y-axis.
+ */
+export declare function getCalculatedYAxisWidth({ ticks, label, labelGapWithTick, // Default gap between label and tick
+tickSize, tickMargin, }: {
+    ticks: ArrayLike<IGetBoundingClient> | null;
+    label: IGetBoundingClient | null | undefined;
+    labelGapWithTick: number | undefined;
+    tickSize: number | undefined;
+    tickMargin: number | undefined;
+}): number;
+export {};

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './style';
 export * from './validate';
 export * from './data-utils';
+export * from './Global';
 export * from './log';

package/dist/utils/validate.d.ts

@@ -15,7 +15,6 @@ export declare function isWellBehavedNumber(n: unknown): n is number;
 export declare function isPercent(value: string | number): value is `${number}%`;
 export declare function isCategoricalAxis(layout: LayoutType, axisType: AxisType): boolean;
 export declare function isVisible(sign: number, tickPosition: number, getSize: () => number, start: number, end: number): boolean;
-export declare const isSsr: boolean;
 /**
  * Checks if the value is null or undefined
  * @param {any} value The value to check

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vccs",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Composable charting components for Vue 3 — an unofficial port of Recharts",
   "author": "rick-hup",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "@reduxjs/vue-redux": "^1.0.1",
     "@vueuse/core": "^13.1.0",
     "d3-hierarchy": "^3.1.2",
+    "d3-sankey": "^0.12.3",
     "decimal.js-light": "^2.5.1",
     "es-toolkit": "^1.39.3",
     "eventemitter3": "^5.0.1",
@@ -56,6 +57,7 @@
     "victory-vendor": "^37.3.6"
   },
   "devDependencies": {
+    "@types/d3-sankey": "^0.12.5",
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue-jsx": "^5.0.0",
     "@vue/babel-plugin-jsx": "^1.1.1",