vccs 0.4.0 → 0.5.0

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

@@ -1,5 +1,5 @@
 import { DataKey, LayoutType, Margin, StackOffsetType, SyncMethod, VuePropsToType, WithSVGProps } from '../types';
-import { PropType } from 'vue';
+import { PropType, StyleValue } from 'vue';
 import { TooltipEventType } from '../types/tooltip';
 import { ChartData } from '../state/chartDataSlice';
 export declare const CategoricalProps: {
@@ -67,6 +67,10 @@ export declare const CategoricalProps: {
     outerRadius: {
         type: (NumberConstructor | StringConstructor)[];
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     reverseStackOrder: {
         type: BooleanConstructor;
         default: boolean;
@@ -82,7 +86,7 @@ export declare const CategoricalProps: {
         type: NumberConstructor;
     };
     style: {
-        type: ObjectConstructor;
+        type: PropType<StyleValue>;
     };
     syncId: {
         type: (NumberConstructor | StringConstructor)[];

package/dist/chart/index.d.ts

@@ -8,3 +8,5 @@ export * from './ScatterChart';
 export * from './RadialBarChart';
 export * from './FunnelChart';
 export * from './Treemap';
+export * from './Sankey';
+export * from './SunburstChart';

package/dist/chart/sankeyUtils.d.ts

@@ -0,0 +1,36 @@
+import { SankeyLink, SankeyNode } from 'd3-sankey';
+export interface SankeyInputNode {
+    name?: string;
+    [key: string]: any;
+}
+export interface SankeyInputLink {
+    source: number | string;
+    target: number | string;
+    value: number;
+    [key: string]: any;
+}
+export type SankeyLayoutNode = SankeyNode<SankeyInputNode, SankeyInputLink>;
+export type SankeyLayoutLink = SankeyLink<SankeyInputNode, SankeyInputLink>;
+export interface ComputeSankeyLayoutArgs {
+    data: {
+        nodes: SankeyInputNode[];
+        links: SankeyInputLink[];
+    };
+    width: number;
+    height: number;
+    nodePadding: number;
+    nodeWidth: number;
+    iterations: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+export interface ComputeSankeyLayoutResult {
+    nodes: SankeyLayoutNode[];
+    links: SankeyLayoutLink[];
+}
+export declare function computeSankeyLayout(args: ComputeSankeyLayoutArgs): ComputeSankeyLayoutResult;
+export declare const linkPathGenerator: (link: SankeyLayoutLink) => string | null;

package/dist/chart/sunburstUtils.d.ts

@@ -0,0 +1,34 @@
+export interface SunburstData {
+    [key: string]: any;
+    name: string;
+    value?: number;
+    fill?: string;
+    children?: SunburstData[];
+}
+export interface SunburstLayoutNode {
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    depth: number;
+    name: string;
+    value: number;
+    fill?: string;
+    payload: SunburstData;
+    tooltipIndex: string;
+}
+export interface SunburstLayoutOptions {
+    data: SunburstData;
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+    dataKey: string;
+    ringPadding?: number;
+    padding?: number;
+}
+export declare function computeSunburstLayout(options: SunburstLayoutOptions): SunburstLayoutNode[];

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/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, 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,
@@ -113,7 +160,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/utils/get-ticks.mjs

@@ -1,4 +1,5 @@
-import { isNumber, isSsr, isVisible } from "../../utils/validate.mjs";
+import { isNumber, isVisible } from "../../utils/validate.mjs";
+import { Global } from "../../utils/Global.mjs";
 import { mathSign } from "../../utils/data.mjs";
 import { getStringSize } from "../../utils/attrs.mjs";
 import { getAngledTickWidth, getNumberIntervalTicks, getTickBoundaries } from "../../utils/tick.mjs";
@@ -87,7 +88,7 @@ function getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, preserv
 function getTicks(props, fontSize, letterSpacing) {
 	const { tick, ticks, viewBox, minTickGap, orientation, interval, tickFormatter, unit, angle } = props;
 	if (!ticks || !ticks.length || !tick) return [];
-	if (isNumber(interval) || isSsr) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
+	if (isNumber(interval) || Global.isSsr) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
 	let candidates = [];
 	const sizeKey = orientation === "top" || orientation === "bottom" ? "width" : "height";
 	const unitSize = unit && sizeKey === "width" ? getStringSize(unit, {

package/dist/es/chart/{RechartsWrapper.mjs → ChartsWrapper.mjs}

@@ -10,10 +10,11 @@ import { useSynchronisedEventsFromOtherCharts } from "../events/useChartSynchron
 import { useReportScale } from "../state/utils/useReportScale.mjs";
 import { providePortalRaw } from "./TooltipPortalContext.mjs";
 import { provideLegendPortalRaw } from "./LegendPortalContext.mjs";
-import { createVNode, defineComponent, ref } from "vue";
-//#region src/chart/RechartsWrapper.tsx
-var RechartsWrapper = /* @__PURE__ */ defineComponent({
-	name: "RechartsWrapper",
+import { createVNode, defineComponent, onMounted, ref } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/chart/ChartsWrapper.tsx
+var ChartsWrapper = /* @__PURE__ */ defineComponent({
+	name: "ChartsWrapper",
 	props: {
 		class: classProp,
 		height: {
@@ -28,10 +29,19 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		onMouseLeave: { type: Function },
 		onMouseMove: { type: Function },
 		onMouseUp: { type: Function },
+		onResize: { type: Function },
 		onTouchEnd: { type: Function },
 		onTouchMove: { type: Function },
 		onTouchStart: { type: Function },
-		style: { type: Object },
+		responsive: {
+			type: Boolean,
+			default: false
+		},
+		style: { type: [
+			String,
+			Object,
+			Array
+		] },
 		width: {
 			type: Number,
 			required: true
@@ -45,11 +55,24 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		const legendPortal = ref(null);
 		providePortalRaw(tooltipPortal);
 		provideLegendPortalRaw(legendPortal);
+		const wrapperEl = ref(null);
 		const innerRef = (node) => {
 			scaleRef.value = node;
 			tooltipPortal.value = node;
 			legendPortal.value = node;
+			wrapperEl.value = node;
 		};
+		if (props.responsive) {
+			useResizeObserver(wrapperEl, (entries) => {
+				const { width, height } = entries[0].contentRect;
+				props.onResize?.(width, height);
+			});
+			onMounted(() => {
+				if (!wrapperEl.value) return;
+				const { width, height } = wrapperEl.value.getBoundingClientRect();
+				props.onResize?.(width, height);
+			});
+		}
 		const myOnClick = (e) => {
 			const chartPointer = getChartPointer(e);
 			if (chartPointer) dispatch(mouseClickAction(chartPointer));
@@ -132,13 +155,17 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		};
 		return () => createVNode("div", {
 			"class": ["v-charts-wrapper", props.class],
-			"style": {
+			"style": [props.responsive ? {
+				position: "relative",
+				cursor: "default",
+				width: "100%",
+				height: "100%"
+			} : {
 				position: "relative",
 				cursor: "default",
 				width: `${props.width}px`,
-				height: `${props.height}px`,
-				...props.style
-			},
+				height: `${props.height}px`
+			}, props.style],
 			"role": "application",
 			"onClick": myOnClick,
 			"onContextmenu": myOnContextMenu,
@@ -158,4 +185,4 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { RechartsWrapper };
+export { ChartsWrapper };