vccs 0.4.1 → 0.6.0

package/dist/es/container/ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs

@@ -1,5 +1,6 @@
 import { isPercent } from "../utils/validate.mjs";
 import { normalizeStyle as normalizeStyle$1 } from "../utils/style.mjs";
+import { useRoundedSize } from "../hooks/useRoundedSize.mjs";
 import { provideSizeContext } from "./useSizeContext.mjs";
 import { Fragment, cloneVNode, computed, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, toRef, useSlots } from "vue";
 import { useThrottleFn } from "@vueuse/core";
@@ -30,7 +31,7 @@ var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 		const props = __props;
 		const slots = useSlots();
 		const debounce = toRef(props, "debounce");
-		const sizes = ref({
+		const { size: sizes, setSize: setContainerSize } = useRoundedSize({
 			width: props.initialDimension.width,
 			height: props.initialDimension.height
 		});
@@ -57,16 +58,6 @@ var ResponsiveContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			calculatedWidth: finalCalculatedWidth,
 			calculatedHeight
 		});
-		function setContainerSize(width, height) {
-			const roundedWidth = Math.round(width);
-			const roundedHeight = Math.round(height);
-			const { width: containerWidth, height: containerHeight } = sizes.value;
-			if (containerWidth === roundedWidth && containerHeight === roundedHeight) return;
-			sizes.value = {
-				width: roundedWidth,
-				height: roundedHeight
-			};
-		}
 		const handleResize = useThrottleFn((entries) => {
 			const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
 			setContainerSize(containerWidth, containerHeight);

package/dist/es/container/Surface.mjs

@@ -21,7 +21,11 @@ var Surface = /* @__PURE__ */ defineComponent({
 		},
 		class: classProp,
 		style: {
-			type: Object,
+			type: [
+				String,
+				Object,
+				Array
+			],
 			default: void 0
 		},
 		title: {

package/dist/es/hooks/useResponsiveSize.mjs

@@ -0,0 +1,27 @@
+import { validateWidthHeight } from "../utils/validate.mjs";
+import { useRoundedSize } from "./useRoundedSize.mjs";
+import { computed } from "vue";
+//#region src/hooks/useResponsiveSize.ts
+/**
+* Owns the chart's size resolution: in responsive mode the size is measured
+* from the wrapper div (via `handleResize`), otherwise it comes from props.
+*
+* Render gating (`return null` when the size is invalid) stays with the
+* caller — the rules differ between the compact and normal branches.
+*/
+function useResponsiveSize(props) {
+	const { size: responsiveSize, setSize: handleResize } = useRoundedSize();
+	const effectiveWidth = computed(() => props.responsive ? responsiveSize.value.width : props.width ?? 0);
+	const effectiveHeight = computed(() => props.responsive ? responsiveSize.value.height : props.height ?? 0);
+	return {
+		effectiveWidth,
+		effectiveHeight,
+		hasValidSize: computed(() => validateWidthHeight({
+			width: effectiveWidth.value,
+			height: effectiveHeight.value
+		})),
+		handleResize
+	};
+}
+//#endregion
+export { useResponsiveSize };

package/dist/es/hooks/useRoundedSize.mjs

@@ -0,0 +1,31 @@
+import { ref } from "vue";
+//#region src/hooks/useRoundedSize.ts
+/**
+* Shared size-state core: a size ref plus a setter that rounds to
+* integers and ignores no-change updates.
+*
+* Adapters: `useResponsiveSize` (chart sizing) and `ResponsiveContainer`.
+* ResponsiveContainer is planned for removal (see ADR-0001); when it goes,
+* this module stays behind as the chart's size-state implementation.
+*/
+function useRoundedSize(initial = {
+	width: 0,
+	height: 0
+}) {
+	const size = ref(initial);
+	function setSize(width, height) {
+		const roundedWidth = Math.round(width);
+		const roundedHeight = Math.round(height);
+		if (size.value.width === roundedWidth && size.value.height === roundedHeight) return;
+		size.value = {
+			width: roundedWidth,
+			height: roundedHeight
+		};
+	}
+	return {
+		size,
+		setSize
+	};
+}
+//#endregion
+export { useRoundedSize };

package/dist/es/shape/Sector.mjs

@@ -1,6 +1,6 @@
 import { classProp } from "../types/common.mjs";
-import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
 import { getPercentValue, mathSign } from "../utils/data.mjs";
+import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
 import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Sector.tsx
 /**

package/dist/es/state/cartesianAxisSlice.mjs

@@ -25,6 +25,17 @@ var cartesianAxisSlice = createSlice({
 		removeYAxis(state, action) {
 			delete state.yAxis[action.payload.id];
 		},
+		updateYAxisWidth(state, action) {
+			const { id, width } = action.payload;
+			const axis = state.yAxis[id];
+			if (axis) {
+				const history = axis.widthHistory || [];
+				if (history.length === 3 && history[0] === history[2] && width === history[1] && width !== axis.width && Math.abs(width - (history[0] ?? 0)) <= 1) return;
+				const newHistory = [...history, width].slice(-3);
+				axis.width = width;
+				axis.widthHistory = newHistory;
+			}
+		},
 		addZAxis(state, action) {
 			state.zAxis[action.payload.id] = castDraft(action.payload);
 		},
@@ -33,7 +44,7 @@ var cartesianAxisSlice = createSlice({
 		}
 	}
 });
-var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis } = cartesianAxisSlice.actions;
+var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis, updateYAxisWidth } = cartesianAxisSlice.actions;
 var cartesianAxisReducer = cartesianAxisSlice.reducer;
 //#endregion
-export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis };
+export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis, updateYAxisWidth };

package/dist/es/state/legendSlice.mjs

@@ -24,6 +24,8 @@ var legendSlice = createSlice({
 			state.settings.align = action.payload.align;
 			state.settings.layout = action.payload.layout;
 			state.settings.verticalAlign = action.payload.verticalAlign;
+			state.settings.position = action.payload.position;
+			state.settings.offset = action.payload.offset;
 		},
 		addLegendPayload(state, action) {
 			state.payload.push(castDraft(action.payload));

package/dist/es/state/selectors/axisSelectors.mjs

@@ -2,11 +2,11 @@ import { isCategoricalAxis, isNan, isNumOrStr, isNumber, isWellBehavedNumber } f
 import { selectChartDataWithIndexes, selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
 import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
 import { selectAllXAxes, selectAllYAxes } from "./selectAllAxes.mjs";
+import { getPercentValue, hasDuplicate, mathSign } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { selectBrushDimensions, selectBrushSettings } from "./brushSelectors.mjs";
 import { selectBarCategoryGap, selectChartName, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
-import { getPercentValue, hasDuplicate, mathSign } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { selectAngleAxis, selectAngleAxisRange, selectRadiusAxis, selectRadiusAxisRange } from "./polarAxisSelectors.mjs";
 import { pickAxisType } from "./pickAxisType.mjs";
@@ -639,7 +639,7 @@ function getXAxisSize(offset, axisSettings) {
 }
 function getYAxisSize(offset, axisSettings) {
 	return {
-		width: axisSettings.width,
+		width: typeof axisSettings.width === "number" ? axisSettings.width : 60,
 		height: offset.height
 	};
 }
@@ -712,7 +712,7 @@ function selectYAxisPosition(state, axisId) {
 }
 var selectYAxisSize = createSelector(selectChartOffset, selectYAxisSettings, (offset, axisSettings) => {
 	return {
-		width: axisSettings.width,
+		width: typeof axisSettings.width === "number" ? axisSettings.width : 60,
 		height: offset.height
 	};
 });

package/dist/es/state/selectors/barSelectors.mjs

@@ -1,8 +1,8 @@
 import { isNullish } from "../../utils/validate.mjs";
 import { selectChartDataWithIndexesIfNotInPanorama } from "./dataSelectors.mjs";
+import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize } from "./rootPropsSelectors.mjs";
-import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { getBandSizeOfAxis } from "../../utils/chart.mjs";
 import { selectAxisWithScale, selectCartesianAxisSize, selectStackGroups, selectTicksOfGraphicalItem, selectUnfilteredCartesianItems } from "./axisSelectors.mjs";

package/dist/es/state/selectors/pieSelectors.mjs

@@ -1,8 +1,8 @@
 import { isNumber } from "../../utils/validate.mjs";
 import { selectChartDataAndAlwaysIgnoreIndexes } from "./dataSelectors.mjs";
+import { getPercentValue, mathSign } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { getMaxRadius, polarToCartesian } from "../../utils/polar.mjs";
-import { getPercentValue, mathSign } from "../../utils/data.mjs";
 import { getValueByDataKey } from "../../utils/chart.mjs";
 import { selectUnfilteredPolarItems } from "./polarSelectors.mjs";
 import { createSelector } from "@reduxjs/toolkit";

package/dist/es/state/selectors/polarAxisSelectors.mjs

@@ -1,8 +1,8 @@
 import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
+import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
 import { getMaxRadius } from "../../utils/polar.mjs";
-import { getPercentValue } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { createSelector } from "@reduxjs/toolkit";
 //#region src/state/selectors/polarAxisSelectors.ts

package/dist/es/state/selectors/radialBarSelectors.mjs

@@ -1,7 +1,7 @@
 import { isCategoricalAxis, isNullish } from "../../utils/validate.mjs";
 import { selectChartDataAndAlwaysIgnoreIndexes, selectChartDataWithIndexes } from "./dataSelectors.mjs";
-import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { mathSign } from "../../utils/data.mjs";
+import { selectBarCategoryGap, selectBarGap, selectRootBarSize, selectRootMaxBarSize, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { selectAngleAxis, selectPolarViewBox, selectRadiusAxis } from "./polarAxisSelectors.mjs";
 import { getBandSizeOfAxis, getBaseValueOfBar, getCateCoordinateOfBar, getValueByDataKey, truncateByDomain } from "../../utils/chart.mjs";

package/dist/es/state/selectors/selectChartOffset.mjs

@@ -18,10 +18,13 @@ var selectChartOffset = createSelector([
 ], (chartWidth, chartHeight, margin, brushHeight, xAxes, yAxes, legendSettings, legendSize) => {
 	const offsetH = yAxes.reduce((result, entry) => {
 		const { orientation } = entry;
-		if (!entry.mirror && !entry.hide) return {
-			...result,
-			[orientation]: result[orientation] + entry.width
-		};
+		if (!entry.mirror && !entry.hide) {
+			const width = typeof entry.width === "number" ? entry.width : 60;
+			return {
+				...result,
+				[orientation]: result[orientation] + width
+			};
+		}
 		return result;
 	}, {
 		left: margin.left || 0,

package/dist/es/state/selectors/selectLegendArea.mjs

@@ -0,0 +1,19 @@
+import { selectChartHeight, selectChartWidth, selectMargin } from "./containerSelectors.mjs";
+import { createSelector } from "@reduxjs/toolkit";
+//#region src/state/selectors/selectLegendArea.ts
+/**
+* The margin-inset chart area. Outside-positioned legends are placed here,
+* beyond any axes.
+*/
+var selectLegendArea = createSelector([
+	selectChartWidth,
+	selectChartHeight,
+	selectMargin
+], (chartWidth, chartHeight, margin) => ({
+	x: margin?.left || 0,
+	y: margin?.top || 0,
+	width: Math.max(chartWidth - (margin?.left || 0) - (margin?.right || 0), 0),
+	height: Math.max(chartHeight - (margin?.top || 0) - (margin?.bottom || 0), 0)
+}));
+//#endregion
+export { selectLegendArea };

package/dist/es/state/selectors/tooltipSelectors.mjs

@@ -1,10 +1,10 @@
 import { isCategoricalAxis } from "../../utils/validate.mjs";
 import { selectChartDataWithIndexes } from "./dataSelectors.mjs";
 import { selectChartHeight, selectChartWidth } from "./containerSelectors.mjs";
+import { findEntryInArray, mathSign } from "../../utils/data.mjs";
 import { selectChartOffset } from "./selectChartOffset.mjs";
 import { selectChartName, selectStackOffsetType } from "./rootPropsSelectors.mjs";
 import { combineAxisRangeWithReverse } from "./combiners/combineAxisRangeWithReverse.mjs";
-import { findEntryInArray, mathSign } from "../../utils/data.mjs";
 import { selectChartLayout } from "./common.mjs";
 import { getTooltipEntry, getValueByDataKey } from "../../utils/chart.mjs";
 import { combineAppliedNumericalValuesIncludingErrorValues, combineAppliedValues, combineAreasDomain, combineAxisDomain, combineAxisDomainWithNiceTicks, combineCategoricalDomain, combineDisplayedData, combineDomainOfStackGroups, combineDotsDomain, combineDuplicateDomain, combineGraphicalItemsData, combineGraphicalItemsSettings, combineLinesDomain, combineNiceTicks, combineNumericalDomain, combineRealScaleType, combineScaleFunction, combineStackGroups, filterGraphicalNotStackedItems, filterReferenceElements, getDomainDefinition, itemAxisPredicate, mergeDomains, selectAxisRange, selectAxisSettings, selectHasBar, selectReferenceAreas, selectReferenceDots, selectReferenceLines } from "./axisSelectors.mjs";

package/dist/es/state/touchEventsMiddleware.mjs

@@ -1,7 +1,7 @@
+import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
 import { getChartPointer } from "../utils/chart.mjs";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType.mjs";
 import { setActiveMouseOverItemIndex, setMouseOverAxisIndex } from "./tooltipSlice.mjs";
-import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
 import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer.mjs";
 import { selectTooltipCoordinate } from "./selectors/touchSelectors.mjs";
 import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";

package/dist/es/utils/YAxisUtils.mjs

@@ -0,0 +1,29 @@
+//#region src/utils/YAxisUtils.ts
+/**
+* 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.
+*/
+function getCalculatedYAxisWidth({ ticks, label, labelGapWithTick = 5, tickSize = 0, tickMargin = 0 }) {
+	let maxTickWidth = 0;
+	if (ticks) {
+		Array.from(ticks).forEach((tickNode) => {
+			if (tickNode) {
+				const bbox = tickNode.getBoundingClientRect();
+				if (bbox.width > maxTickWidth) maxTickWidth = bbox.width;
+			}
+		});
+		const labelWidth = label ? label.getBoundingClientRect().width : 0;
+		const tickWidth = (tickSize ?? 0) + (tickMargin ?? 0);
+		const updatedYAxisWidth = maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+		return Math.round(updatedYAxisWidth);
+	}
+	return 0;
+}
+//#endregion
+export { getCalculatedYAxisWidth };

package/dist/es/utils/chart.mjs

@@ -1,6 +1,6 @@
 import { isNan, isNullish, isNumOrStr, isNumber } from "./validate.mjs";
-import { formatAngleOfSector, getAngleOfPoint, polarToCartesian, reverseFormatAngleOfSector } from "./polar.mjs";
 import { findEntryInArray, mathSign } from "./data.mjs";
+import { formatAngleOfSector, getAngleOfPoint, polarToCartesian, reverseFormatAngleOfSector } from "./polar.mjs";
 import { toRaw } from "vue";
 import { stack, stackOffsetExpand, stackOffsetNone, stackOffsetSilhouette, stackOffsetWiggle, stackOrderNone } from "victory-vendor/d3-shape";
 import { get, isNaN, sortBy } from "lodash-es";

package/dist/es/utils/legend.mjs

@@ -1,9 +1,31 @@
 import { isNumber } from "./validate.mjs";
+import { isOutsidePosition } from "../cartesian/getCartesianPosition.mjs";
 //#region src/utils/legend.ts
 function appendOffsetOfLegend(offset, legendSettings, legendSize) {
 	if (legendSettings && legendSize) {
 		const { width: boxWidth, height: boxHeight } = legendSize;
-		const { align, verticalAlign, layout } = legendSettings;
+		const { align, verticalAlign, layout, position, offset: legendOffset = 0 } = legendSettings;
+		if (position != null) {
+			if (isOutsidePosition(position)) {
+				if (position === "top" && isNumber(offset.top)) return {
+					...offset,
+					top: offset.top + (boxHeight || 0) + legendOffset
+				};
+				if (position === "bottom" && isNumber(offset.bottom)) return {
+					...offset,
+					bottom: offset.bottom + (boxHeight || 0) + legendOffset
+				};
+				if (position === "left" && isNumber(offset.left)) return {
+					...offset,
+					left: offset.left + (boxWidth || 0) + legendOffset
+				};
+				if (position === "right" && isNumber(offset.right)) return {
+					...offset,
+					right: offset.right + (boxWidth || 0) + legendOffset
+				};
+			}
+			return offset;
+		}
 		if ((layout === "vertical" || layout === "horizontal" && verticalAlign === "middle") && align !== "center" && isNumber(offset[align])) return {
 			...offset,
 			[align]: offset[align] + (boxWidth || 0)

package/dist/hooks/useResponsiveSize.d.ts

@@ -0,0 +1,22 @@
+import { ComputedRef } from 'vue';
+import { CategoricalChartPropsWithOutSvg } from '../chart/generateCategoricalChart';
+type ResponsiveSizeProps = Pick<CategoricalChartPropsWithOutSvg, 'responsive' | 'width' | 'height'>;
+interface UseResponsiveSizeResult {
+    /** Final width: measured from the wrapper when `responsive`, otherwise from props. */
+    effectiveWidth: ComputedRef<number>;
+    /** Final height: measured from the wrapper when `responsive`, otherwise from props. */
+    effectiveHeight: ComputedRef<number>;
+    /** Whether the effective size passes validateWidthHeight. Render policy is the caller's decision. */
+    hasValidSize: ComputedRef<boolean>;
+    /** Feeds the wrapper's ResizeObserver callback. Rounds and ignores no-change updates. */
+    handleResize: (width: number, height: number) => void;
+}
+/**
+ * Owns the chart's size resolution: in responsive mode the size is measured
+ * from the wrapper div (via `handleResize`), otherwise it comes from props.
+ *
+ * Render gating (`return null` when the size is invalid) stays with the
+ * caller — the rules differ between the compact and normal branches.
+ */
+export declare function useResponsiveSize(props: ResponsiveSizeProps): UseResponsiveSizeResult;
+export {};

package/dist/hooks/useRoundedSize.d.ts

@@ -0,0 +1,22 @@
+export interface RoundedSize {
+    width: number;
+    height: number;
+}
+/**
+ * Shared size-state core: a size ref plus a setter that rounds to
+ * integers and ignores no-change updates.
+ *
+ * Adapters: `useResponsiveSize` (chart sizing) and `ResponsiveContainer`.
+ * ResponsiveContainer is planned for removal (see ADR-0001); when it goes,
+ * this module stays behind as the chart's size-state implementation.
+ */
+export declare function useRoundedSize(initial?: RoundedSize): {
+    size: import('vue').Ref<{
+        width: number;
+        height: number;
+    }, RoundedSize | {
+        width: number;
+        height: number;
+    }>;
+    setSize: (width: number, height: number) => void;
+};

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

@@ -1,9 +1,12 @@
 import { HorizontalAlignmentType, LegendPayload, VerticalAlignmentType } from '../components/DefaultLegendContent';
+import { CartesianPosition } from '../cartesian/getCartesianPosition';
 import { LayoutType, Size } from '../types';
 export type LegendSettings = {
     layout: LayoutType;
     align: HorizontalAlignmentType;
     verticalAlign: VerticalAlignmentType;
+    position?: CartesianPosition;
+    offset?: number;
 };
 /**
  * The properties inside this state update independently of each other and quite often.

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

@@ -0,0 +1,7 @@
+import { CartesianViewBoxRequired } from '../../cartesian/type';
+import { RechartsRootState } from '../store';
+/**
+ * The margin-inset chart area. Outside-positioned legends are placed here,
+ * beyond any axes.
+ */
+export declare const selectLegendArea: (state: RechartsRootState) => CartesianViewBoxRequired;

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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vccs",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Composable charting components for Vue 3 — an unofficial port of Recharts",
   "author": "rick-hup",
   "license": "MIT",