vccs 0.4.1 → 0.6.0

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;
@@ -195,9 +205,9 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
     height: number;
     x: number;
     y: number;
+    viewBox: Record<string, any>;
     orientation: string;
     stroke: string;
-    viewBox: Record<string, any>;
     label: any;
     ticks: readonly CartesianTickItem[];
     hide: 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/cartesian/cartesianPositionToCSSTranslate.d.ts

@@ -0,0 +1,15 @@
+import { TextAnchor, TextVerticalAnchor } from './getCartesianPosition';
+/**
+ * CalculatedCartesianPosition returns horizontalAnchor and verticalAnchor
+ * which work directly with an SVG text element
+ * but for use in HTML context we have to translate them into CSS transform(translate)
+ * so this is what this function is doing.
+ *
+ * horizontalPosition is type: 'start' | 'middle' | 'end' | 'inherit'
+ * verticalPosition is type: 'start' | 'middle' | 'end'
+ *
+ * @param horizontalPosition as returned from {@link getCartesianPosition}
+ * @param verticalPosition as returned from {@link getCartesianPosition}
+ * @return CSS transform string
+ */
+export declare function cartesianPositionToCSSTranslate(horizontalPosition: TextAnchor, verticalPosition: TextVerticalAnchor): string;

package/dist/cartesian/getCartesianPosition.d.ts

@@ -0,0 +1,45 @@
+import { CartesianViewBoxRequired, TrapezoidViewBox } from './type';
+export type TextAnchor = 'start' | 'middle' | 'end' | 'inherit';
+export type TextVerticalAnchor = 'start' | 'middle' | 'end';
+export declare function cartesianViewBoxToTrapezoid(box: undefined): undefined;
+export declare function cartesianViewBoxToTrapezoid(box: CartesianViewBoxRequired | TrapezoidViewBox): TrapezoidViewBox;
+/**
+ * @inline
+ */
+export type CartesianPosition = 'top' | 'left' | 'right' | 'bottom' | 'center' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight' | {
+    x: number | string;
+    y: number | string;
+};
+export type GetCartesianPositionOptions = {
+    viewBox: TrapezoidViewBox | CartesianViewBoxRequired;
+    parentViewBox?: CartesianViewBoxRequired;
+    /**
+     * The offset to the specified "position". Direction of the offset depends on the position.
+     */
+    offset?: number;
+    /**
+     * The position of the element relative to the view box.
+     */
+    position?: CartesianPosition;
+    /**
+     * If true, the returned width and height will be clamped to keep the element within the parentViewBox.
+     * This is useful for preventing labels from overflowing the chart area.
+     */
+    clamp?: boolean;
+};
+export type CalculatedCartesianPosition = {
+    x: number;
+    y: number;
+    horizontalAnchor: TextAnchor;
+    verticalAnchor: TextVerticalAnchor;
+    width?: number;
+    height?: number;
+};
+/**
+ * Calculates the position and alignment for a generic element in a Cartesian coordinate system.
+ *
+ * @param options - The options including viewBox, position, and offset.
+ * @returns The calculated x, y, alignment and size.
+ */
+export declare function getCartesianPosition(options: GetCartesianPositionOptions): CalculatedCartesianPosition;
+export declare function isOutsidePosition(position: CartesianPosition | undefined): boolean;

package/dist/cartesian/index.d.ts

@@ -11,3 +11,4 @@ export * from './reference-line';
 export * from './scatter';
 export * from './z-axis';
 export * from './funnel';
+export type { CartesianPosition } from './getCartesianPosition';

package/dist/cartesian/type.d.ts

@@ -18,4 +18,12 @@ export interface CartesianViewBox {
 }
 export type ViewBox = CartesianViewBox | PolarViewBox;
 export type CartesianViewBoxRequired = Required<CartesianViewBox>;
+export interface TrapezoidViewBox {
+    x: number;
+    y: number;
+    upperWidth: number;
+    lowerWidth: number;
+    width: number;
+    height: number;
+}
 export type Sign = 0 | 1 | -1;

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

@@ -1,6 +1,6 @@
 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,6 +45,10 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onTouchStart: {
         type: PropType<CategoricalChartFunc>;
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     style: {
         type: PropType<StyleValue>;
     };
@@ -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,6 +101,10 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onTouchStart: {
         type: PropType<CategoricalChartFunc>;
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     style: {
         type: PropType<StyleValue>;
     };
@@ -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/Surface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue';
+import { StyleValue } from 'vue';
 import { VueClassValue } from '../types';
 interface SurfaceProps {
     width: number;
@@ -10,7 +10,7 @@ interface SurfaceProps {
         height?: number;
     };
     class?: VueClassValue;
-    style?: CSSProperties;
+    style?: StyleValue;
     title?: string;
     desc?: string;
 }

package/dist/chart/generateCategoricalChart.d.ts

@@ -67,6 +67,10 @@ export declare const CategoricalProps: {
     outerRadius: {
         type: (NumberConstructor | StringConstructor)[];
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     reverseStackOrder: {
         type: BooleanConstructor;
         default: boolean;

package/dist/components/Tooltip.d.ts

@@ -268,8 +268,8 @@ export declare const Tooltip: import('vue').DefineComponent<import('vue').Extrac
         readonly default: " : ";
     };
 }>> & Readonly<{}>, {
-    readonly cursor: boolean | object;
     readonly offset: number;
+    readonly cursor: boolean | object;
     readonly style: Record<string, any>;
     readonly isAnimationActive: boolean;
     readonly includeHidden: boolean;

package/dist/components/legend/hooks/useLegend.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'vue';
+import { LayoutType } from '../../../types';
 import { LegendPayload } from '../../DefaultLegendContent';
 import { LegendProps } from '../type';
 export declare function useLegend(props: LegendProps): {
@@ -14,6 +15,8 @@ export declare function useLegend(props: LegendProps): {
     processedPayload: import('vue').ComputedRef<LegendPayload[]>;
     outerStyle: import('vue').ComputedRef<CSSProperties>;
     legendPortal: import('vue').ComputedRef<HTMLElement>;
+    resolvedLayout: import('vue').ComputedRef<LayoutType>;
+    positionViewBox: import('vue').ComputedRef<Required<import('../../../cartesian/type').CartesianViewBox>>;
     syncSettings: () => void;
     syncSize: () => void;
 };

package/dist/components/legend/type.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, PropType, VNode } from 'vue';
 import { LayoutType, Margin } from '../../types';
+import { CartesianPosition } from '../../cartesian/getCartesianPosition';
 import { LegendType } from '../../types/legend';
 import { HorizontalAlignmentType, LegendPayload, VerticalAlignmentType } from '../DefaultLegendContent';
 import { VuePropsToType, WithSVGProps } from '../../types/common';
@@ -8,8 +9,8 @@ export interface LegendSlots {
 }
 export declare const LegendVueProps: {
     readonly layout: {
-        readonly type: PropType<LayoutType>;
-        readonly default: "horizontal";
+        readonly type: PropType<LayoutType | "auto">;
+        readonly default: "auto";
     };
     readonly align: {
         readonly type: PropType<HorizontalAlignmentType>;
@@ -19,6 +20,21 @@ export declare const LegendVueProps: {
         readonly type: PropType<VerticalAlignmentType>;
         readonly default: "bottom";
     };
+    /**
+     * The position of the legend relative to the chart.
+     * If this is defined, it overrides `align` and `verticalAlign`.
+     */
+    readonly position: {
+        readonly type: PropType<CartesianPosition>;
+        readonly default: any;
+    };
+    /**
+     * The offset to the specified `position`. Direction of the offset depends on the position.
+     */
+    readonly offset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly width: NumberConstructor;
     readonly height: NumberConstructor;
     readonly iconSize: {

package/dist/components/legend/utils.d.ts

@@ -1,11 +1,20 @@
 import { CSSProperties } from 'vue';
 import { LayoutType, Margin } from '../../types';
+import { CartesianPosition } from '../../cartesian/getCartesianPosition';
 import { HorizontalAlignmentType, VerticalAlignmentType } from '../DefaultLegendContent';
 type PositionInput = {
     layout?: LayoutType;
     align?: HorizontalAlignmentType;
     verticalAlign?: VerticalAlignmentType;
 };
+export declare function getLayoutForPosition(position: CartesianPosition | undefined): LayoutType;
+export declare function getOutsidePositionOffset(position: CartesianPosition | undefined, offset: number, box: {
+    width: number;
+    height: number;
+}): {
+    top?: number;
+    left?: number;
+};
 export declare function getDefaultPosition(style: CSSProperties | undefined, props: PositionInput, margin: Margin, chartWidth: number, chartHeight: number, box: {
     width: number;
     height: number;

package/dist/container/Surface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, SVGAttributes } from 'vue';
+import { SVGAttributes, StyleValue } from 'vue';
 import { VueClassValue } from '../types';
 interface ViewBox {
     x?: number;
@@ -11,7 +11,7 @@ declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBo
     height: number;
     viewBox?: ViewBox;
     class?: VueClassValue;
-    style?: CSSProperties;
+    style?: StyleValue;
     title?: string;
     desc?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Omit<SVGAttributes, "viewBox"> & {
@@ -19,7 +19,7 @@ declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBo
     height: number;
     viewBox?: ViewBox;
     class?: VueClassValue;
-    style?: CSSProperties;
+    style?: StyleValue;
     title?: string;
     desc?: string;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/es/cartesian/axis/XAxis.mjs

@@ -4,7 +4,7 @@ import { implicitXAxis, selectAxisScale, selectTicksOfAxis, selectXAxisPosition,
 import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
 import { addXAxis, removeXAxis } from "../../state/cartesianAxisSlice.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+import { createVNode, defineComponent, mergeProps, onUnmounted, watchEffect } from "vue";
 //#region src/cartesian/axis/XAxis.tsx
 /**
 * @fileOverview X Axis
@@ -78,7 +78,8 @@ var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { slots: dispatcherSlots }) {
 		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
+		let registeredSettings;
+		watchEffect(() => {
 			const settings = {
 				interval: props.interval ?? "preserveEnd",
 				id: props.xAxisId,
@@ -105,10 +106,15 @@ var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 				tick: props.tick ?? true,
 				tickFormatter: props.tickFormatter
 			};
+			if (registeredSettings && registeredSettings.id !== settings.id) dispatch(removeXAxis(registeredSettings));
 			dispatch(addXAxis(settings));
-			onCleanup(() => {
-				dispatch(removeXAxis(settings));
-			});
+			registeredSettings = settings;
+		});
+		onUnmounted(() => {
+			if (registeredSettings) {
+				dispatch(removeXAxis(registeredSettings));
+				registeredSettings = void 0;
+			}
 		});
 		return () => createVNode(XAxisImpl, props, { default: () => [dispatcherSlots.tick ? { tick: dispatcherSlots.tick } : void 0] });
 	}

package/dist/es/cartesian/axis/YAxis.mjs

@@ -2,9 +2,10 @@ import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
 import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
 import { implicitYAxis, selectAxisScale, selectTicksOfAxis, selectYAxisPosition, selectYAxisSize } from "../../state/selectors/axisSelectors.mjs";
 import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
-import { addYAxis, removeYAxis } from "../../state/cartesianAxisSlice.mjs";
+import { addYAxis, removeYAxis, updateYAxisWidth } from "../../state/cartesianAxisSlice.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+import { getCalculatedYAxisWidth } from "../../utils/YAxisUtils.mjs";
+import { createVNode, defineComponent, isVNode, mergeProps, nextTick, onUnmounted, ref, watch, watchEffect } from "vue";
 //#region src/cartesian/axis/YAxis.tsx
 var YAxisImpl = /* @__PURE__ */ defineComponent({
 	props: { yAxisId: {
@@ -15,11 +16,55 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 	setup(props, { attrs }) {
 		const isPanorama = useIsPanorama();
 		const axisType = "yAxis";
+		const dispatch = useAppDispatch();
 		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.yAxisId, isPanorama));
 		const axisSize = useAppSelector((state) => selectYAxisSize(state, props.yAxisId));
 		const position = useAppSelector((state) => selectYAxisPosition(state, props.yAxisId));
 		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.yAxisId, isPanorama));
 		const viewBox = useAppSelector(selectAxisViewBox);
+		const chartDataLengthEmpty = useAppSelector((state) => !state.chartData.chartData?.length);
+		const cartesianAxisRef = ref(null);
+		const isAutoWidth = () => attrs.width === "auto";
+		const measureAxisWidth = () => {
+			const el = cartesianAxisRef.value?.$el;
+			if (!el) return;
+			const ticks = el.getElementsByClassName("v-charts-cartesian-axis-tick-value");
+			const label = el.getElementsByClassName("v-charts-label")[0];
+			return getCalculatedYAxisWidth({
+				ticks,
+				label,
+				labelGapWithTick: 5,
+				tickSize: typeof attrs.tickSize === "number" ? attrs.tickSize : 6,
+				tickMargin: typeof attrs.tickMargin === "number" ? attrs.tickMargin : 2
+			});
+		};
+		watch(chartDataLengthEmpty, (empty) => {
+			if (empty === false && isAutoWidth()) dispatch(updateYAxisWidth({
+				id: props.yAxisId,
+				width: 60
+			}));
+		});
+		const updateAutoWidth = () => {
+			if (!isAutoWidth() || axisSize.value == null) return;
+			const label = attrs.label;
+			if (typeof label === "function" || isVNode(label)) return;
+			const updatedYAxisWidth = measureAxisWidth();
+			if (updatedYAxisWidth == null) return;
+			if (Math.round(axisSize.value.width) !== Math.round(updatedYAxisWidth)) dispatch(updateYAxisWidth({
+				id: props.yAxisId,
+				width: updatedYAxisWidth
+			}));
+		};
+		watch([
+			axisSize,
+			cartesianTickItems,
+			() => attrs.label
+		], () => {
+			nextTick(updateAutoWidth);
+		}, {
+			flush: "post",
+			immediate: true
+		});
 		return () => {
 			const { ...allOtherProps } = props;
 			if (axisSize.value == null || position.value == null) return null;
@@ -31,7 +76,9 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-yAxis yAxis"]
+				"tickTextProps": isAutoWidth() ? { width: void 0 } : { width: axisSize.value?.width },
+				"class": ["v-charts-yAxis yAxis"],
+				"ref": cartesianAxisRef
 			}), null);
 		};
 	}
@@ -53,7 +100,7 @@ var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 		includeHidden: Boolean,
 		reversed: Boolean,
 		ticks: Array,
-		width: Number,
+		width: [Number, String],
 		orientation: String,
 		mirror: Boolean,
 		hide: Boolean,
@@ -78,7 +125,8 @@ var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	},
 	setup(props) {
 		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
+		let registeredSettings;
+		watchEffect(() => {
 			const settings = {
 				...props,
 				interval: props.interval ?? "preserveEnd",
@@ -89,10 +137,15 @@ var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 				minTickGap: props.minTickGap ?? 5,
 				tick: props.tick ?? true
 			};
+			if (registeredSettings && registeredSettings.id !== settings.id) dispatch(removeYAxis(registeredSettings));
 			dispatch(addYAxis(settings));
-			onCleanup(() => {
-				dispatch(removeYAxis(settings));
-			});
+			registeredSettings = settings;
+		});
+		onUnmounted(() => {
+			if (registeredSettings) {
+				dispatch(removeYAxis(registeredSettings));
+				registeredSettings = void 0;
+			}
 		});
 		return () => createVNode(YAxisImpl, props, null);
 	}
@@ -113,7 +166,7 @@ var YAxis = /* @__PURE__ */ defineComponent({
 			default: implicitYAxis.allowDuplicatedCategory
 		},
 		width: {
-			type: Number,
+			type: [Number, String],
 			default: implicitYAxis.width
 		},
 		hide: {

package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs

@@ -90,6 +90,10 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 		stroke: {
 			type: String,
 			default: "#666"
+		},
+		tickTextProps: {
+			type: Object,
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
@@ -235,7 +239,8 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 					index: i,
 					payload: entry,
 					visibleTicksCount: finalTicks.length,
-					tickFormatter
+					tickFormatter,
+					...props.tickTextProps
 				};
 				return createVNode(Layer, {
 					"class": "v-charts-cartesian-axis-tick",

package/dist/es/cartesian/cartesianPositionToCSSTranslate.mjs

@@ -0,0 +1,28 @@
+//#region src/cartesian/cartesianPositionToCSSTranslate.ts
+/**
+* CalculatedCartesianPosition returns horizontalAnchor and verticalAnchor
+* which work directly with an SVG text element
+* but for use in HTML context we have to translate them into CSS transform(translate)
+* so this is what this function is doing.
+*
+* horizontalPosition is type: 'start' | 'middle' | 'end' | 'inherit'
+* verticalPosition is type: 'start' | 'middle' | 'end'
+*
+* @param horizontalPosition as returned from {@link getCartesianPosition}
+* @param verticalPosition as returned from {@link getCartesianPosition}
+* @return CSS transform string
+*/
+function cartesianPositionToCSSTranslate(horizontalPosition, verticalPosition) {
+	if (horizontalPosition === "start" && verticalPosition === "start") return "";
+	return `translate(${horizontalPosition === "inherit" ? "0" : {
+		start: "0",
+		middle: "-50%",
+		end: "-100%"
+	}[horizontalPosition]}, ${{
+		start: "0",
+		middle: "-50%",
+		end: "-100%"
+	}[verticalPosition] ?? "0"})`;
+}
+//#endregion
+export { cartesianPositionToCSSTranslate };