vccs 0.0.1 → 0.1.0

package/dist/es/components/label/utils.mjs

@@ -0,0 +1,233 @@
+import { isNumber as e, isPercent as t } from "../../utils/validate.mjs";
+import { uniqueId as n } from "../../utils/data-utils.mjs";
+import { getPercentValue as r, mathSign as i } from "../../utils/data.mjs";
+import { createVNode as a, mergeProps as o } from "vue";
+//#region src/components/label/utils.tsx
+function s(t) {
+	let { cx: n, cy: r, angle: i, startAngle: a, endAngle: o, r: s, radius: c, innerRadius: l, outerRadius: u, x: d, y: f, top: p, left: m, width: h, height: g, clockWise: _, labelViewBox: v } = t;
+	if (v) return v;
+	if (e(h) && e(g)) {
+		if (e(d) && e(f)) return {
+			x: d,
+			y: f,
+			width: h,
+			height: g
+		};
+		if (e(p) && e(m)) return {
+			x: p,
+			y: m,
+			width: h,
+			height: g
+		};
+	}
+	if (e(d) && e(f)) return {
+		x: d,
+		y: f,
+		width: 0,
+		height: 0
+	};
+	if (e(n) && e(r)) return {
+		cx: n,
+		cy: r,
+		startAngle: a || i || 0,
+		endAngle: o || i || 0,
+		innerRadius: l || 0,
+		outerRadius: u || c || s || 0,
+		clockWise: _
+	};
+	if (t.viewBox) return t.viewBox;
+}
+function c(t) {
+	return "cx" in t && e(t.cx);
+}
+var l = Math.PI / 180;
+function u(e, t, n, r) {
+	return {
+		x: e + Math.cos(-l * r) * n,
+		y: t + Math.sin(-l * r) * n
+	};
+}
+function d(e, t) {
+	return i(t - e) * Math.min(Math.abs(t - e), 360);
+}
+function f(e, t, r, i, s) {
+	let { offset: c = 5, class: l, id: f } = e, { cx: p, cy: m, innerRadius: h, outerRadius: g, startAngle: _, endAngle: v, clockWise: y } = s, b = (h + g) / 2, x = d(_, v), S = x >= 0 ? 1 : -1, C, w;
+	switch (t) {
+		case "insideStart":
+			C = _ + S * c, w = y;
+			break;
+		case "insideEnd":
+			C = v - S * c, w = !y;
+			break;
+		case "end":
+			C = v + S * c, w = y;
+			break;
+		default: throw Error(`Unsupported position ${t}`);
+	}
+	w = x <= 0 ? w : !w;
+	let T = u(p, m, b, C), E = u(p, m, b, C + (w ? 1 : -1) * 359), D = `M${T.x},${T.y} A${b},${b},0,1,${w ? 0 : 1},${E.x},${E.y}`, O = f ?? n("v-charts-radial-line-");
+	return a("text", o(i, {
+		"dominant-baseline": "central",
+		class: ["v-charts-radial-bar-label", l]
+	}), [a("defs", null, [a("path", {
+		id: O,
+		d: D
+	}, null)]), a("textPath", { "xlink:href": `#${O}` }, [r])]);
+}
+function p(e, t) {
+	let { offset: n, position: r } = e, { cx: i, cy: a, innerRadius: o, outerRadius: s, startAngle: c, endAngle: l } = t ?? e.viewBox, d = (c + l) / 2;
+	if (r === "outside") {
+		let { x: e, y: t } = u(i, a, s + n, d);
+		return {
+			x: e,
+			y: t,
+			textAnchor: e >= i ? "start" : "end",
+			verticalAnchor: "middle"
+		};
+	}
+	if (r === "center") return {
+		x: i,
+		y: a,
+		textAnchor: "middle",
+		verticalAnchor: "middle"
+	};
+	if (r === "centerTop") return {
+		x: i,
+		y: a,
+		textAnchor: "middle",
+		verticalAnchor: "start"
+	};
+	if (r === "centerBottom") return {
+		x: i,
+		y: a,
+		textAnchor: "middle",
+		verticalAnchor: "end"
+	};
+	let { x: f, y: p } = u(i, a, (o + s) / 2, d);
+	return {
+		x: f,
+		y: p,
+		textAnchor: "middle",
+		verticalAnchor: "middle"
+	};
+}
+function m(n, i) {
+	let { parentViewBox: a, offset: o, position: s } = n, { x: c, y: l, width: u, height: d } = i, f = d >= 0 ? 1 : -1, p = f * o, m = f > 0 ? "end" : "start", h = f > 0 ? "start" : "end", g = u >= 0 ? 1 : -1, _ = g * o, v = g > 0 ? "end" : "start", y = g > 0 ? "start" : "end";
+	if (s === "top") return {
+		x: c + u / 2,
+		y: l - f * o,
+		textAnchor: "middle",
+		verticalAnchor: m,
+		...a ? {
+			height: Math.max(l - a.y, 0),
+			width: u
+		} : {}
+	};
+	if (s === "bottom") return {
+		x: c + u / 2,
+		y: l + d + p,
+		textAnchor: "middle",
+		verticalAnchor: h,
+		...a ? {
+			height: Math.max(a.y + a.height - (l + d), 0),
+			width: u
+		} : {}
+	};
+	if (s === "left") {
+		let e = {
+			x: c - _,
+			y: l + d / 2,
+			textAnchor: v,
+			verticalAnchor: "middle"
+		};
+		return {
+			...e,
+			...a ? {
+				width: Math.max(e.x - a.x, 0),
+				height: d
+			} : {}
+		};
+	}
+	if (s === "right") {
+		let e = {
+			x: c + u + _,
+			y: l + d / 2,
+			textAnchor: y,
+			verticalAnchor: "middle"
+		};
+		return {
+			...e,
+			...a ? {
+				width: Math.max(a.x + a.width - e.x, 0),
+				height: d
+			} : {}
+		};
+	}
+	let b = a ? {
+		width: u,
+		height: d
+	} : {};
+	return s === "insideLeft" ? {
+		x: c + _,
+		y: l + d / 2,
+		textAnchor: y,
+		verticalAnchor: "middle",
+		...b
+	} : s === "insideRight" ? {
+		x: c + u - _,
+		y: l + d / 2,
+		textAnchor: v,
+		verticalAnchor: "middle",
+		...b
+	} : s === "insideTop" ? {
+		x: c + u / 2,
+		y: l + p,
+		textAnchor: "middle",
+		verticalAnchor: h,
+		...b
+	} : s === "insideBottom" ? {
+		x: c + u / 2,
+		y: l + d - p,
+		textAnchor: "middle",
+		verticalAnchor: m,
+		...b
+	} : s === "insideTopLeft" ? {
+		x: c + _,
+		y: l + p,
+		textAnchor: y,
+		verticalAnchor: h,
+		...b
+	} : s === "insideTopRight" ? {
+		x: c + u - _,
+		y: l + p,
+		textAnchor: v,
+		verticalAnchor: h,
+		...b
+	} : s === "insideBottomLeft" ? {
+		x: c + _,
+		y: l + d - p,
+		textAnchor: y,
+		verticalAnchor: m,
+		...b
+	} : s === "insideBottomRight" ? {
+		x: c + u - _,
+		y: l + d - p,
+		textAnchor: v,
+		verticalAnchor: m,
+		...b
+	} : s && typeof s == "object" && (e(s.x) || t(s.x)) && (e(s.y) || t(s.y)) ? {
+		x: c + r(s.x, u),
+		y: l + r(s.y, d),
+		textAnchor: "end",
+		verticalAnchor: "end",
+		...b
+	} : {
+		x: c + u / 2,
+		y: l + d / 2,
+		textAnchor: "middle",
+		verticalAnchor: "middle",
+		...b
+	};
+}
+//#endregion
+export { m as getAttrsOfCartesianLabel, p as getAttrsOfPolarLabel, c as isPolar, s as parseViewBox, f as renderRadialLabel };

package/dist/es/components/legend/Legend.mjs

@@ -0,0 +1,82 @@
+import { LegendVueProps as e } from "./type.mjs";
+import { useLegend as t } from "./hooks/useLegend.mjs";
+import { useLegendContent as n } from "./hooks/useLegendContent.mjs";
+import r from "../../container/Surface.mjs";
+import { LegendSymbol as i } from "./LegendSymbol.mjs";
+import { Teleport as a, createVNode as o, defineComponent as s, isVNode as c, watchEffect as l } from "vue";
+//#region src/components/legend/Legend.tsx
+function u(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !c(e);
+}
+var d = /* @__PURE__ */ s({
+	name: "Legend",
+	props: e,
+	setup(e, { slots: s }) {
+		let { legendRef: c, processedPayload: d, outerStyle: f, legendPortal: p, syncSettings: m, syncSize: h } = t(e), { getItemStyle: g, getSvgStyle: _, formatValue: v, handleClick: y, handleMouseEnter: b, handleMouseLeave: x } = n(e);
+		l(() => {
+			m(), h();
+		});
+		let S = () => {
+			if (!d.value || d.value.length === 0) return null;
+			let { layout: t = "horizontal", align: n = "center", iconSize: a = 14 } = e;
+			return o("ul", {
+				class: "v-charts-default-legend",
+				style: {
+					padding: 0,
+					margin: 0,
+					textAlign: t === "horizontal" ? n : "left"
+				}
+			}, [d.value.map((n, s) => n.type === "none" ? null : o("li", {
+				key: `legend-item-${s}`,
+				class: "v-charts-legend-item",
+				style: g(t),
+				tabindex: 0,
+				role: "button",
+				"aria-label": `Toggle ${v(n)} series`,
+				onClick: () => y(n, s),
+				onKeydown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), y(n, s));
+				},
+				onMouseenter: () => b(n, s),
+				onMouseleave: () => x(n, s)
+			}, [o(r, {
+				width: a,
+				height: a,
+				viewBox: {
+					x: 0,
+					y: 0,
+					width: 32,
+					height: 32
+				},
+				style: _(),
+				"aria-label": `${v(n)} legend icon`
+			}, { default: () => [o(i, {
+				type: e.iconType ?? n.type,
+				color: n.inactive ? "#a3a3a3" : n.color,
+				size: a,
+				data: n
+			}, null)] }), o("span", {
+				class: "v-charts-legend-item-text",
+				style: { color: n.inactive ? "#a3a3a3" : n.color }
+			}, [v(n)])]))]);
+		}, C = () => {
+			if (!d.value || d.value.length === 0) return null;
+			let t = {
+				...e,
+				payload: d.value
+			};
+			return s.content ? s.content(t) : S();
+		};
+		return () => {
+			if (p.value == null) return null;
+			let e = o("div", {
+				class: "v-charts-legend-wrapper",
+				style: f.value,
+				ref: c
+			}, [C()]);
+			return o("foreignObject", null, [o(a, { to: p.value }, u(e) ? e : { default: () => [e] })]);
+		};
+	}
+});
+//#endregion
+export { d as default };

package/dist/es/components/legend/LegendSymbol.mjs

@@ -0,0 +1,60 @@
+import { Symbols as e } from "../../shape/Symbols.mjs";
+import { createVNode as t, defineComponent as n } from "vue";
+var r = /* @__PURE__ */ n({
+	name: "LegendSymbol",
+	props: {
+		type: String,
+		color: String,
+		size: {
+			type: Number,
+			default: 14
+		},
+		data: { type: Object }
+	},
+	setup(n) {
+		return () => {
+			let { type: r, color: i, data: a } = n;
+			if (r === "none") return null;
+			let o = 32 / 3, s = 32 / 6;
+			switch (r) {
+				case "line": return t("path", {
+					"stroke-width": 4,
+					fill: "none",
+					stroke: i,
+					d: `M0,16h${o}
+            A${s},${s},0,1,1,${2 * o},16
+            H32M${2 * o},16
+            A${s},${s},0,1,1,${o},16`,
+					class: "v-charts-legend-icon"
+				}, null);
+				case "plainline": return t("line", {
+					"stroke-width": 4,
+					fill: "none",
+					stroke: i,
+					"stroke-dasharray": a?.payload?.strokeDasharray,
+					x1: 0,
+					y1: 16,
+					x2: 32,
+					y2: 16,
+					class: "v-charts-legend-icon"
+				}, null);
+				case "rect": return t("path", {
+					stroke: "none",
+					fill: i,
+					d: `M0,${32 / 8}h32v${96 / 4}h-32z`,
+					class: "v-charts-legend-icon"
+				}, null);
+				default: return t(e, {
+					fill: i,
+					cx: 16,
+					cy: 16,
+					size: 32,
+					sizeType: "diameter",
+					type: r
+				}, null);
+			}
+		};
+	}
+});
+//#endregion
+export { r as LegendSymbol };

package/dist/es/components/legend/hooks/useLegend.mjs

@@ -0,0 +1,52 @@
+import { selectLegendPayload as e } from "../../../state/selectors/legendSelectors.mjs";
+import { useAppDispatch as t, useAppSelector as n } from "../../../state/hooks.mjs";
+import { useChartHeight as r, useChartWidth as i, useMargin as a } from "../../../context/chartLayoutContext.mjs";
+import { setLegendSettings as o, setLegendSize as s } from "../../../state/legendSlice.mjs";
+import { useLegendPortal as c } from "../../../chart/LegendPortalContext.mjs";
+import { getUniqPayload as l } from "../../../utils/payload/getUniqPayload.mjs";
+import { defaultUniqBy as u, getDefaultPosition as d, getWidthOrHeight as f } from "../utils.mjs";
+import { computed as p, ref as m } from "vue";
+import { sortBy as h } from "es-toolkit/compat";
+import { useElementBounding as g } from "@vueuse/core";
+//#region src/components/legend/hooks/useLegend.ts
+function _(_) {
+	let v = t(), y = n(e), b = c(), x = a(), S = i(), C = r(), w = m(), { width: T, height: E } = g(w), D = p(() => S.value - (x.value.left || 0) - (x.value.right || 0)), O = p(() => f(_.layout, _.height, _.width, D.value)), k = p(() => ({
+		width: T.value,
+		height: E.value
+	}));
+	return {
+		legendRef: w,
+		boundingBox: k,
+		widthOrHeight: O,
+		processedPayload: p(() => {
+			if (!y.value || y.value.length === 0) return [];
+			let e = l(y.value, _.payloadUniqBy, u);
+			return _.itemSorter && (typeof _.itemSorter == "string" || typeof _.itemSorter == "function") && (e = h(e, _.itemSorter)), Array.from(e);
+		}),
+		outerStyle: p(() => {
+			if (_.portal) return _.wrapperStyle || {};
+			let e = {
+				position: "absolute",
+				width: O.value?.width ? `${O.value.width}px` : _.width ? `${_.width}px` : "auto",
+				height: O.value?.height ? `${O.value.height}px` : _.height ? `${_.height}px` : "auto"
+			}, t = d(_.wrapperStyle, _, x.value, S.value, C.value, k.value);
+			return Object.assign({}, e, t, _.wrapperStyle || {});
+		}),
+		legendPortal: p(() => _.portal ?? b?.value),
+		syncSettings: () => {
+			v(o({
+				layout: _.layout,
+				align: _.align,
+				verticalAlign: _.verticalAlign
+			}));
+		},
+		syncSize: () => {
+			v(s({
+				width: k.value.width,
+				height: k.value.height
+			}));
+		}
+	};
+}
+//#endregion
+export { _ as useLegend };

package/dist/es/components/legend/hooks/useLegendContent.mjs

@@ -0,0 +1,47 @@
+//#region src/components/legend/hooks/useLegendContent.ts
+function e(e) {
+	return {
+		getWrapperStyle: (t = "horizontal", n = "center", r = "bottom") => ({
+			display: "flex",
+			flexDirection: t === "horizontal" ? "row" : "column",
+			justifyContent: n === "left" ? "flex-start" : n === "right" ? "flex-end" : "center",
+			alignItems: r === "top" ? "flex-start" : r === "bottom" ? "flex-end" : "center",
+			flexWrap: "wrap",
+			gap: "8px",
+			...e.wrapperStyle || {}
+		}),
+		getContentStyle: (t = "horizontal") => ({
+			display: "flex",
+			flexDirection: t === "horizontal" ? "row" : "column",
+			gap: t === "horizontal" ? "16px" : "8px",
+			...e.contentStyle || {}
+		}),
+		getItemStyle: (e = "horizontal") => ({
+			display: e === "horizontal" ? "inline-block" : "block",
+			marginRight: "10px"
+		}),
+		getViewBox: () => ({
+			x: 0,
+			y: 0,
+			width: 32,
+			height: 32
+		}),
+		getSvgStyle: () => ({
+			display: "inline-block",
+			verticalAlign: "middle",
+			marginRight: "4px"
+		}),
+		formatValue: (t) => e.formatter ? e.formatter(t.value, t) : t.value,
+		handleClick: (t, n) => {
+			e.onClick?.(t, n);
+		},
+		handleMouseEnter: (t, n) => {
+			e.onMouseEnter?.(t, n);
+		},
+		handleMouseLeave: (t, n) => {
+			e.onMouseLeave?.(t, n);
+		}
+	};
+}
+//#endregion
+export { e as useLegendContent };

package/dist/es/components/legend/type.mjs

@@ -0,0 +1,41 @@
+//#region src/components/legend/type.ts
+var e = {
+	layout: {
+		type: String,
+		default: "horizontal"
+	},
+	align: {
+		type: String,
+		default: "center"
+	},
+	verticalAlign: {
+		type: String,
+		default: "bottom"
+	},
+	width: Number,
+	height: Number,
+	iconSize: {
+		type: Number,
+		default: 14
+	},
+	iconType: String,
+	wrapperStyle: Object,
+	contentStyle: Object,
+	itemStyle: Object,
+	formatter: Function,
+	onClick: Function,
+	onMouseEnter: Function,
+	onMouseLeave: Function,
+	margin: Object,
+	chartWidth: Number,
+	chartHeight: Number,
+	payloadUniqBy: [Boolean, Function],
+	itemSorter: {
+		type: [String, Function],
+		default: "value"
+	},
+	portal: Object,
+	onBBoxUpdate: Function
+};
+//#endregion
+export { e as LegendVueProps };

package/dist/es/components/legend/utils.mjs

@@ -0,0 +1,17 @@
+import { isNumber as e } from "../../utils/validate.mjs";
+//#region src/components/legend/utils.ts
+function t(e, t, n, r, i, a) {
+	let { layout: o, align: s, verticalAlign: c } = t, l = {}, u = {};
+	return (!e || (e.left === void 0 || e.left === null) && (e.right === void 0 || e.right === null)) && (l = s === "center" && o === "vertical" ? { left: `${((r || 0) - a.width) / 2}px` } : s === "right" ? { right: `${n?.right || 0}px` } : { left: `${n?.left || 0}px` }), (!e || (e.top === void 0 || e.top === null) && (e.bottom === void 0 || e.bottom === null)) && (u = c === "middle" ? { top: `${((i || 0) - a.height) / 2}px` } : c === "bottom" ? { bottom: `${n?.bottom || 0}px` } : { top: `${n?.top || 0}px` }), {
+		...l,
+		...u
+	};
+}
+function n(t, n, r, i) {
+	return t === "vertical" && e(n) ? { height: n } : t === "horizontal" ? { width: r || i } : null;
+}
+function r(e) {
+	return e.value;
+}
+//#endregion
+export { r as defaultUniqBy, t as getDefaultPosition, n as getWidthOrHeight };

package/dist/es/components/utils.mjs

@@ -0,0 +1,31 @@
+import { polarToCartesian as e } from "../utils/polar.mjs";
+//#region src/components/utils.ts
+function t(t) {
+	let { cx: n, cy: r, radius: i, startAngle: a, endAngle: o } = t;
+	return {
+		points: [e(n, r, i, a), e(n, r, i, o)],
+		cx: n,
+		cy: r,
+		radius: i,
+		startAngle: a,
+		endAngle: o
+	};
+}
+function n(n, r, i) {
+	let a, o, s, c;
+	if (n === "horizontal") a = r.x, s = a, o = i.top, c = i.top + i.height;
+	else if (n === "vertical") o = r.y, c = o, a = i.left, s = i.left + i.width;
+	else if (r.cx != null && r.cy != null) if (n === "centric") {
+		let { cx: t, cy: n, innerRadius: i, outerRadius: l, angle: u } = r, d = e(t, n, i, u), f = e(t, n, l, u);
+		a = d.x, o = d.y, s = f.x, c = f.y;
+	} else return t(r);
+	return [{
+		x: a,
+		y: o
+	}, {
+		x: s,
+		y: c
+	}];
+}
+//#endregion
+export { n as getCursorPoints };

package/dist/es/container/ClipPath.mjs

@@ -0,0 +1,25 @@
+import { useOffset as e } from "../context/chartLayoutContext.mjs";
+import { createVNode as t, defineComponent as n } from "vue";
+//#region src/container/ClipPath.tsx
+var r = /* @__PURE__ */ n({
+	name: "ClipPath",
+	props: { clipPathId: {
+		type: String,
+		required: !0
+	} },
+	setup(n) {
+		let r = e();
+		return () => {
+			if (!r.value) return null;
+			let { left: e, top: i, height: a, width: o } = r.value;
+			return t("defs", null, [t("clipPath", { id: n.clipPathId }, [t("rect", {
+				x: e,
+				y: i,
+				height: a,
+				width: o
+			}, null)])]);
+		};
+	}
+});
+//#endregion
+export { r as default };

package/dist/es/container/Layer.mjs

@@ -0,0 +1,12 @@
+import { filterProps as e } from "../utils/VueUtils.mjs";
+import { createVNode as t, defineComponent as n, mergeProps as r } from "vue";
+//#region src/container/Layer.tsx
+var i = /* @__PURE__ */ n({
+	name: "VChartsLayer",
+	inheritAttrs: !1,
+	setup(n, { attrs: i, slots: a }) {
+		return () => t("g", r(i, e(i, !0), { class: "v-charts-layer" }), [a.default?.()]);
+	}
+});
+//#endregion
+export { i as Layer };

package/dist/es/container/ResponsiveContainer.mjs

@@ -0,0 +1,5 @@
+import e from "./ResponsiveContainer.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/container/ResponsiveContainer.vue
+var t = e;
+//#endregion
+export { t as default };