vccs 0.3.0 → 0.4.1

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

@@ -1,4 +1,13 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: SVGTextElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     x: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
@@ -146,4 +155,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     breakAll: boolean;
     maxLines: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGTextElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tooltip.d.ts

@@ -1,8 +1,9 @@
 import { PropType, SlotsType } from 'vue';
 import { TooltipIndex, TooltipPayload, TooltipPayloadEntry } from '../state/tooltipSlice';
 import { AxisId } from '../state/cartesianAxisSlice';
-import { ChartCoordinate, Coordinate } from '../types';
+import { ChartCoordinate, Coordinate, LayoutType } from '../types';
 import { TooltipTrigger } from '../types/tooltip';
+import { Point } from '../shape';
 export type ContentType = any | ((props: TooltipContentProps) => any);
 export type TooltipContentProps = {
     label?: string | number;
@@ -16,6 +17,49 @@ type AllowInDimension = {
     x: boolean;
     y: boolean;
 };
+type CursorSlotCommon = {
+    class: string | string[];
+    style: {
+        pointerEvents: 'none';
+    };
+    /** Chart area offset — same fields spread by Recharts: left, top, width, height */
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    payload: TooltipPayload;
+    /** Active tooltip index — named payloadIndex to match Recharts */
+    payloadIndex: string | undefined;
+    [key: string]: any;
+};
+export type CrossCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    fill: string;
+    x: number;
+    y: number;
+};
+export type RectangleCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    fill: string;
+    x: number;
+    y: number;
+};
+export type SectorCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    fill: string;
+    cx: number;
+    cy: number;
+    startAngle: number;
+    endAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+};
+export type CurveCursorSlotProps = CursorSlotCommon & {
+    stroke: string;
+    layout: LayoutType;
+    points: ReadonlyArray<Point>;
+};
+export type CursorSlotProps = CrossCursorSlotProps | RectangleCursorSlotProps | SectorCursorSlotProps | CurveCursorSlotProps;
 type UniqueFunc<T> = (entry: T) => unknown;
 export type UniqueOption<T> = boolean | UniqueFunc<T>;
 export declare function getUniqPayload<T>(payload: ReadonlyArray<T>, option: UniqueOption<T>, defaultUniqBy: UniqueFunc<T>): ReadonlyArray<T>;
@@ -244,7 +288,7 @@ export declare const Tooltip: import('vue').DefineComponent<import('vue').Extrac
     readonly filterNull: boolean;
 }, SlotsType<{
     content?: (props: TooltipContentProps) => any;
-    cursor?: (props: Record<string, any>) => any;
+    cursor?: (props: CursorSlotProps) => any;
     default?: () => any;
 }>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default Tooltip;

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

@@ -37,7 +37,7 @@ var XAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-xAxis xAxis", attrs.class]
+				"class": ["v-charts-xAxis xAxis"]
 			}), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
 		};
 	}
@@ -178,7 +178,7 @@ var XAxis = /* @__PURE__ */ defineComponent({
 		},
 		domain: { type: Array },
 		axisLine: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: true
 		},
 		ticks: { type: Array },

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

@@ -31,7 +31,7 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-yAxis yAxis", attrs.class]
+				"class": ["v-charts-yAxis yAxis"]
 			}), null);
 		};
 	}

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

@@ -92,8 +92,7 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 			default: "#666"
 		}
 	},
-	inheritAttrs: false,
-	setup(props, { attrs, slots }) {
+	setup(props, { slots }) {
 		const state = reactive({
 			fontSize: "",
 			letterSpacing: ""
@@ -269,7 +268,7 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 			if (hide) return null;
 			if (width != null && width <= 0 || height != null && height <= 0) return null;
 			return createVNode(Layer, {
-				"class": ["v-charts-cartesian-axis", attrs.class],
+				"class": ["v-charts-cartesian-axis"],
 				"ref": (ref) => {
 					const elm = ref?.$el;
 					if (elm) {

package/dist/es/cartesian/cartesian-grid/const.mjs

@@ -266,11 +266,17 @@ var SVGElementPropKeys = [
 	"stroke",
 	"stroke-dasharray",
 	"strokeDashoffset",
+	"stroke-dashoffset",
 	"strokeLinecap",
+	"stroke-linecap",
 	"strokeLinejoin",
+	"stroke-linejoin",
 	"strokeMiterlimit",
+	"stroke-miterlimit",
 	"strokeOpacity",
+	"stroke-opacity",
 	"strokeWidth",
+	"stroke-width",
 	"surfaceScale",
 	"systemLanguage",
 	"tableValues",

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

@@ -31,7 +31,11 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		onTouchEnd: { type: Function },
 		onTouchMove: { type: Function },
 		onTouchStart: { type: Function },
-		style: { type: Object },
+		style: { type: [
+			String,
+			Object,
+			Array
+		] },
 		width: {
 			type: Number,
 			required: true
@@ -132,13 +136,12 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		};
 		return () => createVNode("div", {
 			"class": ["v-charts-wrapper", props.class],
-			"style": {
+			"style": [{
 				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,

package/dist/es/chart/Sankey.mjs

@@ -0,0 +1,332 @@
+import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, setActiveClickItemIndex, setActiveMouseOverItemIndex } from "../state/tooltipSlice.mjs";
+import { useAppDispatch } from "../state/hooks.mjs";
+import { Layer } from "../container/Layer.mjs";
+import { Animate } from "../animation/Animate.mjs";
+import { createRechartsStore } from "../state/store.mjs";
+import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import Surface from "../container/Surface.mjs";
+import { computeSankeyLayout, linkPathGenerator } from "./sankeyUtils.mjs";
+import { Fragment, computed, createVNode, defineComponent, watchEffect } from "vue";
+import { provideStore } from "@reduxjs/vue-redux";
+import { get } from "lodash-es";
+//#region src/chart/Sankey.tsx
+var sankeyPayloadSearcher = (data, activeIndex) => {
+	if (!data || activeIndex == null) return void 0;
+	return get(data, activeIndex);
+};
+var sankeyOptions = {
+	chartName: "Sankey",
+	defaultTooltipEventType: "item",
+	validateTooltipEventTypes: ["item"],
+	tooltipPayloadSearcher: sankeyPayloadSearcher,
+	eventEmitter: void 0
+};
+var SankeyVueProps = {
+	data: {
+		type: Object,
+		required: true
+	},
+	width: {
+		type: Number,
+		required: true
+	},
+	height: {
+		type: Number,
+		required: true
+	},
+	nameKey: {
+		type: String,
+		default: "name"
+	},
+	dataKey: {
+		type: String,
+		default: "value"
+	},
+	nodePadding: {
+		type: Number,
+		default: 10
+	},
+	nodeWidth: {
+		type: Number,
+		default: 10
+	},
+	iterations: {
+		type: Number,
+		default: 32
+	},
+	margin: {
+		type: Object,
+		default: () => ({
+			top: 5,
+			right: 5,
+			bottom: 5,
+			left: 5
+		})
+	},
+	nodeFill: {
+		type: String,
+		default: "#0088fe"
+	},
+	nodeStroke: {
+		type: String,
+		default: "#fff"
+	},
+	linkFill: {
+		type: String,
+		default: "#0088fe"
+	},
+	linkStroke: {
+		type: String,
+		default: "none"
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: .8,
+			ease: "easeOut"
+		})
+	},
+	onClick: {
+		type: Function,
+		default: void 0
+	},
+	onMouseEnter: {
+		type: Function,
+		default: void 0
+	},
+	onMouseLeave: {
+		type: Function,
+		default: void 0
+	}
+};
+var SankeyInner = /* @__PURE__ */ defineComponent({
+	name: "SankeyInner",
+	props: SankeyVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const layout = computed(() => {
+			const m = props.margin;
+			return computeSankeyLayout({
+				data: props.data,
+				width: props.width,
+				height: props.height,
+				nodePadding: props.nodePadding,
+				nodeWidth: props.nodeWidth,
+				iterations: props.iterations,
+				margin: {
+					top: m.top ?? 5,
+					right: m.right ?? 5,
+					bottom: m.bottom ?? 5,
+					left: m.left ?? 5
+				}
+			});
+		});
+		const payloadTree = computed(() => {
+			return {
+				nodes: layout.value.nodes.map((n, i) => ({
+					tooltipIndex: `nodes[${i}]`,
+					name: n[props.nameKey] ?? n.name,
+					value: n.value,
+					x0: n.x0,
+					x1: n.x1,
+					y0: n.y0,
+					y1: n.y1
+				})),
+				links: layout.value.links.map((l, i) => {
+					const src = l.source;
+					const tgt = l.target;
+					return {
+						tooltipIndex: `links[${i}]`,
+						name: `${src[props.nameKey] ?? src.name} - ${tgt[props.nameKey] ?? tgt.name}`,
+						value: l.value
+					};
+				})
+			};
+		});
+		watchEffect((onCleanup) => {
+			const settings = {
+				dataDefinedOnItem: payloadTree.value,
+				positions: void 0,
+				settings: {
+					stroke: props.nodeStroke,
+					strokeWidth: void 0,
+					fill: props.nodeFill,
+					dataKey: props.dataKey,
+					nameKey: props.nameKey,
+					name: void 0,
+					hide: false,
+					type: void 0,
+					color: props.nodeFill,
+					unit: ""
+				}
+			};
+			dispatch(addTooltipEntrySettings(settings));
+			onCleanup(() => {
+				dispatch(removeTooltipEntrySettings(settings));
+			});
+		});
+		function handleNodeMouseEnter(node, index, e) {
+			const coord = {
+				x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
+				y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+			};
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: `nodes[${index}]`,
+				activeDataKey: props.dataKey,
+				activeCoordinate: coord
+			}));
+			props.onMouseEnter?.(node, "node", e);
+		}
+		function handleLinkMouseEnter(link, index, e) {
+			const sx = link.source.x1 ?? 0;
+			const tx = link.target.x0 ?? 0;
+			const sy = link.y0 ?? 0;
+			const ty = link.y1 ?? 0;
+			const coord = {
+				x: (sx + tx) / 2,
+				y: (sy + ty) / 2
+			};
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: `links[${index}]`,
+				activeDataKey: props.dataKey,
+				activeCoordinate: coord
+			}));
+			props.onMouseEnter?.(link, "link", e);
+		}
+		function handleMouseLeave(item, type, e) {
+			dispatch(mouseLeaveItem());
+			props.onMouseLeave?.(item, type, e);
+		}
+		function handleNodeClick(node, index, e) {
+			const coord = {
+				x: ((node.x0 ?? 0) + (node.x1 ?? 0)) / 2,
+				y: ((node.y0 ?? 0) + (node.y1 ?? 0)) / 2
+			};
+			dispatch(setActiveClickItemIndex({
+				activeIndex: `nodes[${index}]`,
+				activeDataKey: props.dataKey,
+				activeCoordinate: coord
+			}));
+			props.onClick?.(node, "node", e);
+		}
+		function handleLinkClick(link, index, e) {
+			const coord = {
+				x: ((link.source.x1 ?? 0) + (link.target.x0 ?? 0)) / 2,
+				y: ((link.y0 ?? 0) + (link.y1 ?? 0)) / 2
+			};
+			dispatch(setActiveClickItemIndex({
+				activeIndex: `links[${index}]`,
+				activeDataKey: props.dataKey,
+				activeCoordinate: coord
+			}));
+			props.onClick?.(link, "link", e);
+		}
+		function renderNode(node, index, opacity) {
+			const x = node.x0 ?? 0;
+			const y = node.y0 ?? 0;
+			const width = (node.x1 ?? 0) - x;
+			const height = (node.y1 ?? 0) - y;
+			if (slots.node) {
+				const slotProps = {
+					payload: node,
+					index,
+					x,
+					y,
+					width,
+					height,
+					fill: props.nodeFill
+				};
+				return createVNode("g", {
+					"key": `node-${index}`,
+					"class": "v-charts-sankey-node",
+					"style": { opacity },
+					"onClick": (e) => handleNodeClick(node, index, e),
+					"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
+					"onMouseleave": (e) => handleMouseLeave(node, "node", e)
+				}, [slots.node(slotProps)]);
+			}
+			return createVNode("g", {
+				"key": `node-${index}`,
+				"class": "v-charts-sankey-node",
+				"style": { opacity },
+				"onClick": (e) => handleNodeClick(node, index, e),
+				"onMouseenter": (e) => handleNodeMouseEnter(node, index, e),
+				"onMouseleave": (e) => handleMouseLeave(node, "node", e)
+			}, [createVNode("rect", {
+				"x": x,
+				"y": y,
+				"width": width,
+				"height": height,
+				"fill": props.nodeFill,
+				"stroke": props.nodeStroke
+			}, null)]);
+		}
+		function renderLink(link, index, opacity) {
+			const d = linkPathGenerator(link) ?? "";
+			const linkWidth = link.width ?? 0;
+			if (slots.link) {
+				const slotProps = {
+					payload: link,
+					index,
+					d,
+					linkWidth,
+					fill: props.linkFill
+				};
+				return createVNode("g", {
+					"key": `link-${index}`,
+					"style": { opacity },
+					"onClick": (e) => handleLinkClick(link, index, e),
+					"onMouseenter": (e) => handleLinkMouseEnter(link, index, e),
+					"onMouseleave": (e) => handleMouseLeave(link, "link", e)
+				}, [slots.link(slotProps)]);
+			}
+			return createVNode("path", {
+				"key": `link-${index}`,
+				"class": "v-charts-sankey-link",
+				"d": d,
+				"fill": "none",
+				"stroke": props.linkStroke === "none" ? props.linkFill : props.linkStroke,
+				"stroke-width": linkWidth,
+				"stroke-opacity": .2,
+				"style": { opacity },
+				"onClick": (e) => handleLinkClick(link, index, e),
+				"onMouseenter": (e) => handleLinkMouseEnter(link, index, e),
+				"onMouseleave": (e) => handleMouseLeave(link, "link", e)
+			}, null);
+		}
+		return () => createVNode(Surface, {
+			"width": props.width,
+			"height": props.height
+		}, { default: () => [createVNode(Layer, { "class": "v-charts-sankey" }, { default: () => [createVNode(Animate, {
+			"isActive": props.isAnimationActive,
+			"from": 0,
+			"to": 1,
+			"transition": props.transition
+		}, { default: (progress) => createVNode(Fragment, null, [createVNode("g", { "class": "v-charts-sankey-links" }, [layout.value.links.map((link, i) => renderLink(link, i, progress))]), createVNode("g", { "class": "v-charts-sankey-nodes" }, [layout.value.nodes.map((node, i) => renderNode(node, i, progress))])]) })] })] });
+	}
+});
+var Sankey = /* @__PURE__ */ defineComponent({
+	name: "Sankey",
+	props: SankeyVueProps,
+	slots: Object,
+	setup(props, { slots }) {
+		provideStore({ store: createRechartsStore({ options: sankeyOptions }, "Sankey") });
+		return () => {
+			if (!props.data || !props.data.nodes || props.data.nodes.length === 0) return null;
+			return createVNode(RechartsWrapper, {
+				"width": props.width,
+				"height": props.height
+			}, { default: () => [createVNode(SankeyInner, props, {
+				node: slots.node,
+				link: slots.link
+			}), slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { Sankey, SankeyVueProps, sankeyPayloadSearcher };