vccs 0.0.1 → 0.1.0

package/dist/es/polar/radar/Radar.mjs

@@ -0,0 +1,248 @@
+import { interpolate as e } from "../../utils/data-utils.mjs";
+import { useIsPanorama as t } from "../../context/PanoramaContextProvider.mjs";
+import { useAppSelector as n } from "../../state/hooks.mjs";
+import { Layer as r } from "../../container/Layer.mjs";
+import { Dot as i } from "../../shape/Dot.mjs";
+import { provideCartesianLabelListData as a } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList as o } from "../../components/label/LabelList.mjs";
+import { Animate as s } from "../../animation/Animate.mjs";
+import { SetPolarGraphicalItem as c } from "../../state/SetGraphicalItem.mjs";
+import { SetLegendPayload as l } from "../../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings as u } from "../../state/SetTooltipEntrySettings.mjs";
+import { useGraphicalLayerRef as d } from "../../context/graphicalLayerContext.mjs";
+import { ActivePoints as f } from "../../cartesian/line/ActivePoints.mjs";
+import { selectRadarPoints as p } from "../../state/selectors/radarSelectors.mjs";
+import { Fragment as m, Teleport as h, computed as g, createVNode as _, defineComponent as v, isVNode as y, mergeProps as b, ref as x } from "vue";
+//#region src/polar/radar/Radar.tsx
+function S(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !y(e);
+}
+function C(e, t) {
+	return e && e !== "none" ? e : t;
+}
+function w(e) {
+	return e.length ? `${[...e, e[0]].map((e, t) => `${t === 0 ? "M" : "L"}${e.x},${e.y}`).join("")}Z` : "";
+}
+function T(e, t) {
+	let n = w(e), r = w([...t].reverse());
+	return `${n.endsWith("Z") ? n.slice(0, -1) : n}L${r.slice(1)}`;
+}
+function E(t, n, r, i, a) {
+	let o = t && t[Math.floor(a * n)];
+	return o ? {
+		...i,
+		x: e(o.x, i.x, r),
+		y: e(o.y, i.y, r)
+	} : {
+		...i,
+		x: e(i.cx ?? 0, i.x, r),
+		y: e(i.cy ?? 0, i.y, r)
+	};
+}
+var D = /* @__PURE__ */ v({
+	name: "Radar",
+	inheritAttrs: !1,
+	props: {
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: !0
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		angleAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		radiusAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		fill: {
+			type: String,
+			default: "#808080"
+		},
+		stroke: {
+			type: String,
+			default: void 0
+		},
+		fillOpacity: {
+			type: Number,
+			default: .6
+		},
+		strokeWidth: {
+			type: Number,
+			default: void 0
+		},
+		strokeDasharray: {
+			type: String,
+			default: void 0
+		},
+		dot: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		hide: {
+			type: Boolean,
+			default: !1
+		},
+		legendType: {
+			type: String,
+			default: "rect"
+		},
+		tooltipType: {
+			type: String,
+			default: void 0
+		},
+		connectNulls: {
+			type: Boolean,
+			default: !1
+		},
+		label: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		isAnimationActive: {
+			type: Boolean,
+			default: !0
+		},
+		activeDot: {
+			type: [Object, Boolean],
+			default: !0
+		}
+	},
+	setup(e) {
+		let v = t();
+		c(g(() => ({
+			type: "radar",
+			data: void 0,
+			dataKey: e.dataKey,
+			hide: e.hide,
+			angleAxisId: e.angleAxisId,
+			radiusAxisId: e.radiusAxisId
+		}))), l(g(() => [{
+			dataKey: e.dataKey,
+			type: e.legendType,
+			color: C(e.stroke, e.fill),
+			value: e.name ?? String(e.dataKey ?? ""),
+			payload: { ...e },
+			inactive: e.hide
+		}])), u({
+			fn: (e) => e,
+			args: g(() => ({
+				dataDefinedOnItem: void 0,
+				positions: void 0,
+				settings: {
+					dataKey: e.dataKey,
+					nameKey: void 0,
+					name: e.name ?? String(e.dataKey ?? ""),
+					hide: e.hide,
+					type: e.tooltipType,
+					color: C(e.stroke, e.fill),
+					fill: e.fill,
+					stroke: e.stroke,
+					unit: ""
+				}
+			}))
+		});
+		let y = n((t) => p(t, e.radiusAxisId, e.angleAxisId, v, e.dataKey)), D = d(), O = x(e.isAnimationActive);
+		a(g(() => {
+			if (e.isAnimationActive && O.value) return;
+			let t = y.value;
+			if (t) return t.points.map((e) => ({
+				x: e.x,
+				y: e.y,
+				width: 0,
+				height: 0,
+				value: e.value ?? "",
+				payload: e.payload
+			}));
+		}));
+		let k = null, A = null, j = 0, M, N = (t, n, a) => {
+			let o = e.stroke ?? e.fill, s = o && o !== "none", c;
+			c = a && n.length > 0 ? T(t, n) : w(t);
+			let l = c.endsWith("Z");
+			return _(r, { class: "v-charts-radar" }, { default: () => [_("g", { class: "v-charts-radar-polygon" }, [a && n.length > 0 ? _("g", null, [
+				_("path", {
+					d: c,
+					fill: l ? e.fill : "none",
+					"fill-opacity": e.fillOpacity,
+					stroke: "none",
+					"stroke-dasharray": e.strokeDasharray
+				}, null),
+				s && _("path", {
+					d: w(t),
+					fill: "none",
+					stroke: o,
+					"stroke-width": e.strokeWidth,
+					"stroke-dasharray": e.strokeDasharray
+				}, null),
+				s && _("path", {
+					d: w(n),
+					fill: "none",
+					stroke: o,
+					"stroke-width": e.strokeWidth,
+					"stroke-dasharray": e.strokeDasharray
+				}, null)
+			]) : _("path", {
+				d: c,
+				fill: l ? e.fill : "none",
+				"fill-opacity": e.fillOpacity,
+				stroke: o,
+				"stroke-width": e.strokeWidth,
+				"stroke-dasharray": e.strokeDasharray
+			}, null)]), e.dot && _("g", { class: "v-charts-radar-dots" }, [t.map((t, n) => {
+				let r = typeof e.dot == "object" ? e.dot : {};
+				return _(i, b({
+					key: `dot-${n}`,
+					cx: t.x,
+					cy: t.y,
+					r: 3,
+					fill: e.fill,
+					stroke: o
+				}, r), null);
+			})])] });
+		};
+		return () => {
+			if (e.hide) return null;
+			let t = y.value;
+			if (t == null || t.points.length === 0) return null;
+			let { points: n, baseLinePoints: r, isRange: i } = t, a = _(f, {
+				points: n,
+				mainColor: C(e.stroke, e.fill) ?? e.fill,
+				itemDataKey: e.dataKey,
+				activeDot: e.activeDot
+			}, null), c = D?.value ? _(h, { to: D.value }, S(a) ? a : { default: () => [a] }) : a, l = !O.value && e.label ? _(o, typeof e.label == "object" ? e.label : {}, null) : null;
+			if (!e.isAnimationActive) return k = n, A = r, _(m, null, [
+				N(n, r, i),
+				l,
+				c
+			]);
+			let u = k, d = A, p = u ? u.length / n.length : 1, g = d ? d.length / r.length : 1;
+			return t !== M && (j++, M = t), _(m, null, [
+				_(s, {
+					key: j,
+					isActive: !0,
+					onAnimationStart: () => {
+						O.value = !0;
+					},
+					onAnimationEnd: () => {
+						O.value = !1;
+					}
+				}, { default: (e) => {
+					let t = e === 1 ? n : n.map((t, n) => E(u, p, e, t, n)), a = e === 1 ? r : r.map((t, n) => E(d, g, e, t, n));
+					return e > 0 && (k = t, A = a), N(t, a, i);
+				} }),
+				l,
+				c
+			]);
+		};
+	}
+});
+//#endregion
+export { D as Radar };

package/dist/es/polar/radial-bar/RadialBar.mjs

@@ -0,0 +1,176 @@
+import { interpolate as e } from "../../utils/data-utils.mjs";
+import { mouseLeaveItem as t, setActiveMouseOverItemIndex as n } from "../../state/tooltipSlice.mjs";
+import { useAppDispatch as r, useAppSelector as i } from "../../state/hooks.mjs";
+import { Layer as a } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData as o } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList as s } from "../../components/label/LabelList.mjs";
+import { Animate as c } from "../../animation/Animate.mjs";
+import { SetPolarGraphicalItem as l } from "../../state/SetGraphicalItem.mjs";
+import { SetLegendPayload as u } from "../../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings as d } from "../../state/SetTooltipEntrySettings.mjs";
+import { Sector as f } from "../../shape/Sector.mjs";
+import { selectRadialBarLegendPayload as p, selectRadialBarSectors as m } from "../../state/selectors/radialBarSelectors.mjs";
+import { RadialBarVueProps as h } from "./type.mjs";
+import { Fragment as g, computed as _, createVNode as v, defineComponent as y, mergeProps as b, ref as x } from "vue";
+//#region src/polar/radial-bar/RadialBar.tsx
+function S(e, t) {
+	return t;
+}
+var C = /* @__PURE__ */ y({
+	name: "RadialBar",
+	props: h,
+	inheritAttrs: !1,
+	setup(h, { slots: y }) {
+		let C = r(), w = _(() => ({
+			dataKey: h.dataKey,
+			minPointSize: h.minPointSize,
+			stackId: h.stackId,
+			maxBarSize: h.maxBarSize,
+			barSize: h.barSize
+		}));
+		l(_(() => ({
+			type: "radialBar",
+			data: void 0,
+			dataKey: h.dataKey,
+			hide: h.hide,
+			angleAxisId: h.angleAxisId,
+			radiusAxisId: h.radiusAxisId,
+			barSize: h.barSize,
+			stackId: h.stackId,
+			minPointSize: h.minPointSize,
+			maxBarSize: h.maxBarSize
+		})));
+		let T = i((e) => p(e, h.legendType));
+		u(_(() => T.value ?? []));
+		let E = i((e) => m(e, h.radiusAxisId, h.angleAxisId, w.value));
+		d({
+			fn: (e) => e,
+			args: _(() => ({
+				dataDefinedOnItem: void 0,
+				positions: void 0,
+				settings: {
+					dataKey: h.dataKey,
+					nameKey: void 0,
+					name: h.name ?? String(h.dataKey ?? ""),
+					hide: h.hide,
+					type: h.tooltipType,
+					color: S(h.stroke, h.fill),
+					fill: h.fill,
+					stroke: h.stroke,
+					unit: ""
+				}
+			}))
+		});
+		let D = x(h.isAnimationActive);
+		o(_(() => {
+			if (h.isAnimationActive && D.value) return;
+			let e = E.value;
+			if (!e) return;
+			let t = h.fill;
+			return e.map((e) => ({
+				value: e.value ?? "",
+				payload: e.payload,
+				parentViewBox: void 0,
+				fill: e.fill ?? t,
+				cx: e.cx,
+				cy: e.cy,
+				innerRadius: e.innerRadius,
+				outerRadius: e.outerRadius,
+				startAngle: e.startAngle,
+				endAngle: e.endAngle,
+				clockWise: !1
+			}));
+		}));
+		let O = null, k = 0, A, j = (e) => {
+			let r = h.fill, i = h.stroke, o = !!h.background, s = typeof h.background == "object" ? h.background : {};
+			return v(a, { class: "v-charts-radial-bar" }, { default: () => [o && e.map((e, t) => {
+				if (!e.background) return null;
+				let n = e.background;
+				return v(f, b({
+					key: `bg-${t}`,
+					cx: n.cx,
+					cy: n.cy,
+					innerRadius: n.innerRadius,
+					outerRadius: n.outerRadius,
+					startAngle: n.startAngle,
+					endAngle: n.endAngle,
+					cornerRadius: h.cornerRadius,
+					forceCornerRadius: h.forceCornerRadius,
+					cornerIsExternal: h.cornerIsExternal,
+					fill: "#eee",
+					"fill-opacity": .5
+				}, s), null);
+			}), e.map((e, a) => {
+				if (e.innerRadius == null || e.outerRadius == null || e.startAngle == null || e.endAngle == null) return null;
+				let o = e.fill ?? r, s = () => {
+					C(n({
+						activeIndex: String(a),
+						activeDataKey: h.dataKey
+					}));
+				}, c = () => {
+					C(t());
+				};
+				return v(f, {
+					key: `sector-${a}`,
+					cx: e.cx,
+					cy: e.cy,
+					innerRadius: e.innerRadius,
+					outerRadius: e.outerRadius,
+					startAngle: e.startAngle,
+					endAngle: e.endAngle,
+					cornerRadius: h.cornerRadius,
+					forceCornerRadius: h.forceCornerRadius,
+					cornerIsExternal: h.cornerIsExternal,
+					fill: o,
+					"fill-opacity": h.fillOpacity,
+					stroke: i ?? o,
+					"stroke-width": h.strokeWidth,
+					"stroke-dasharray": h.strokeDasharray,
+					onMouseenter: s,
+					onMouseleave: c
+				}, null);
+			})] });
+		};
+		return () => {
+			if (h.hide) return null;
+			let t = E.value;
+			if (t == null || t.length === 0) return null;
+			let n = t, r = !D.value && h.label ? v(s, typeof h.label == "object" ? h.label : {}, null) : null, i = D.value ? null : y.default?.();
+			if (!h.isAnimationActive) return O = n, v(g, null, [
+				j(n),
+				r,
+				i
+			]);
+			let a = O;
+			return t !== A && (k++, A = t), v(g, null, [
+				v(c, {
+					key: k,
+					isActive: !0,
+					onAnimationStart: () => {
+						D.value = !0;
+					},
+					onAnimationEnd: () => {
+						D.value = !1;
+					}
+				}, { default: (t) => {
+					let r = t === 1 ? n : n.map((n, r) => {
+						let i = a && a[r];
+						return i ? {
+							...n,
+							startAngle: i.startAngle != null && n.startAngle != null ? e(i.startAngle, n.startAngle, t) : n.startAngle,
+							endAngle: e(i.endAngle ?? 0, n.endAngle, t)
+						} : {
+							...n,
+							endAngle: e(n.startAngle ?? 0, n.endAngle, t)
+						};
+					});
+					return t > 0 && (O = r), j(r);
+				} }),
+				r,
+				i
+			]);
+		};
+	}
+});
+//#endregion
+export { C as RadialBar };

package/dist/es/polar/radial-bar/type.mjs

@@ -0,0 +1,97 @@
+//#region src/polar/radial-bar/type.ts
+var e = {
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: !0
+	},
+	name: {
+		type: String,
+		default: void 0
+	},
+	angleAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	radiusAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	fill: {
+		type: String,
+		default: void 0
+	},
+	stroke: {
+		type: String,
+		default: void 0
+	},
+	fillOpacity: {
+		type: Number,
+		default: void 0
+	},
+	strokeWidth: {
+		type: Number,
+		default: void 0
+	},
+	strokeDasharray: {
+		type: String,
+		default: void 0
+	},
+	hide: {
+		type: Boolean,
+		default: !1
+	},
+	legendType: {
+		type: String,
+		default: "rect"
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	background: {
+		type: [Boolean, Object],
+		default: !1
+	},
+	label: {
+		type: [Boolean, Object],
+		default: !1
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: !0
+	},
+	minPointSize: {
+		type: Number,
+		default: 0
+	},
+	maxBarSize: {
+		type: Number,
+		default: void 0
+	},
+	barSize: {
+		type: [Number, String],
+		default: void 0
+	},
+	stackId: {
+		type: [String, Number],
+		default: void 0
+	},
+	cornerRadius: {
+		type: [Number, String],
+		default: 0
+	},
+	forceCornerRadius: {
+		type: Boolean,
+		default: !1
+	},
+	cornerIsExternal: {
+		type: Boolean,
+		default: !1
+	}
+};
+//#endregion
+export { e as RadialBarVueProps };

package/dist/es/shape/Cross.mjs

@@ -0,0 +1,15 @@
+import { isNumber as e } from "../utils/validate.mjs";
+import { createVNode as t, mergeProps as n } from "vue";
+//#region src/shape/Cross.tsx
+function r(e, t, n, r, i, a) {
+	return `M${e},${i}v${r}M${a},${t}h${n}`;
+}
+function i(i) {
+	let { x: a = 0, y: o = 0, top: s = 0, left: c = 0, width: l = 0, height: u = 0, ...d } = i;
+	return !e(a) || !e(o) || !e(l) || !e(u) || !e(s) || !e(c) ? null : t("path", n(d, {
+		class: "v-charts-cross",
+		d: r(a, o, l, u, s, c)
+	}), null);
+}
+//#endregion
+export { i as Cross };

package/dist/es/shape/Curve.mjs

@@ -0,0 +1,60 @@
+import { isNumber as e } from "../utils/validate.mjs";
+import { computed as t, createVNode as n, defineComponent as r, mergeProps as i } from "vue";
+import { area as a, curveBasis as o, curveBasisClosed as s, curveBasisOpen as c, curveBumpX as l, curveBumpY as u, curveLinear as d, curveLinearClosed as f, curveMonotoneX as p, curveMonotoneY as m, curveNatural as h, curveStep as g, curveStepAfter as _, curveStepBefore as v, line as y } from "victory-vendor/d3-shape";
+import { upperFirst as b } from "es-toolkit/compat";
+//#region src/shape/Curve.tsx
+var x = {
+	curveBasisClosed: s,
+	curveBasisOpen: c,
+	curveBasis: o,
+	curveBumpX: l,
+	curveBumpY: u,
+	curveLinearClosed: f,
+	curveLinear: d,
+	curveMonotoneX: p,
+	curveMonotoneY: m,
+	curveNatural: h,
+	curveStep: g,
+	curveStepAfter: _,
+	curveStepBefore: v
+}, S = (e) => e.x === +e.x && e.y === +e.y, C = (e) => e.x, w = (e) => e.y;
+function T(e, t) {
+	if (typeof e == "function") return e;
+	let n = `curve${b(e)}`;
+	return (n === "curveMonotone" || n === "curveBump") && t ? x[`${n}${t === "vertical" ? "Y" : "X"}`] : x[n] || d;
+}
+function E({ type: t = "linear", points: n = [], baseLine: r, layout: i, connectNulls: o = !1 }) {
+	let s = T(t, i), c = o ? n.filter((e) => S(e)) : n, l;
+	if (Array.isArray(r)) {
+		let e = o ? r.filter((e) => S(e)) : r, t = c.map((t, n) => ({
+			...t,
+			base: e[n]
+		}));
+		return l = i === "vertical" ? a().y(w).x1(C).x0((e) => e.base.x) : a().x(C).y1(w).y0((e) => e.base.y), l.defined(S).curve(s), l(t);
+	}
+	return l = i === "vertical" && e(r) ? a().y(w).x1(C).x0(r) : e(r) ? a().x(C).y1(w).y0(r) : y().x(C).y(w), l.defined(S).curve(s), l(c);
+}
+var D = {
+	type: { type: [String, Function] },
+	layout: { type: String },
+	baseLine: { type: [Number, Array] },
+	points: { type: Array },
+	connectNulls: { type: Boolean },
+	path: { type: String },
+	class: { type: [String, Array] }
+}, O = /* @__PURE__ */ r({
+	name: "Curve",
+	props: D,
+	inheritAttrs: !1,
+	setup(e, { attrs: r }) {
+		let a = t(() => {
+			if (!((!e.points || !e.points.length) && !e.path)) return e.points && e.points.length ? E(e) : e.path;
+		});
+		return () => a.value === null && !e.path ? null : n("path", i(r, {
+			class: ["v-charts-curve", e.class],
+			d: a.value
+		}), null);
+	}
+});
+//#endregion
+export { O as Curve, D as CurveVueProps, E as getPath };

package/dist/es/shape/Dot.mjs

@@ -0,0 +1,23 @@
+import { createVNode as e, defineComponent as t } from "vue";
+var n = /* @__PURE__ */ t({
+	name: "Dot",
+	props: {
+		cx: { type: [Number, String] },
+		cy: { type: [Number, String] },
+		r: { type: [Number, String] },
+		clipDot: { type: Boolean }
+	},
+	setup(t) {
+		return () => {
+			let { cx: n, cy: r, r: i } = t;
+			return n === +n && r === +r && i === +i ? e("circle", {
+				class: ["v-charts-dot", t.class],
+				cx: n,
+				cy: r,
+				r: i
+			}, null) : null;
+		};
+	}
+});
+//#endregion
+export { n as Dot };

package/dist/es/shape/Rectangle.mjs

@@ -0,0 +1,68 @@
+import { createVNode as e, defineComponent as t, mergeProps as n } from "vue";
+//#region src/shape/Rectangle.tsx
+var r = {
+	className: {
+		type: String,
+		default: void 0
+	},
+	x: {
+		type: Number,
+		default: 0
+	},
+	y: {
+		type: Number,
+		default: 0
+	},
+	width: {
+		type: Number,
+		default: 0
+	},
+	height: {
+		type: Number,
+		default: 0
+	},
+	radius: {
+		type: [Number, Array],
+		default: void 0
+	}
+};
+function i(e, t, n, r, i) {
+	let a = Math.min(Math.abs(n) / 2, Math.abs(r) / 2), o = r >= 0 ? 1 : -1, s = n >= 0 ? 1 : -1, c = r >= 0 && n >= 0 || r < 0 && n < 0 ? 1 : 0;
+	if (a > 0 && Array.isArray(i)) {
+		let l = [
+			0,
+			0,
+			0,
+			0
+		];
+		for (let e = 0; e < 4; e++) {
+			let t = i[e] ?? 0;
+			l[e] = t > a ? a : t;
+		}
+		let u = `M${e},${t + o * l[0]}`;
+		return l[0] > 0 && (u += `A ${l[0]},${l[0]},0,0,${c},${e + s * l[0]},${t}`), u += `L ${e + n - s * l[1]},${t}`, l[1] > 0 && (u += `A ${l[1]},${l[1]},0,0,${c},${e + n},${t + o * l[1]}`), u += `L ${e + n},${t + r - o * l[2]}`, l[2] > 0 && (u += `A ${l[2]},${l[2]},0,0,${c},${e + n - s * l[2]},${t + r}`), u += `L ${e + s * l[3]},${t + r}`, l[3] > 0 && (u += `A ${l[3]},${l[3]},0,0,${c},${e},${t + r - o * l[3]}`), u += "Z", u;
+	}
+	if (a > 0 && typeof i == "number" && i > 0) {
+		let l = Math.min(a, i);
+		return `M ${e},${t + o * l}A ${l},${l},0,0,${c},${e + s * l},${t}L ${e + n - s * l},${t}A ${l},${l},0,0,${c},${e + n},${t + o * l}L ${e + n},${t + r - o * l}A ${l},${l},0,0,${c},${e + n - s * l},${t + r}L ${e + s * l},${t + r}A ${l},${l},0,0,${c},${e},${t + r - o * l} Z`;
+	}
+	return `M ${e},${t} h ${n} v ${r} h ${-n} Z`;
+}
+var a = /* @__PURE__ */ t({
+	name: "Rectangle",
+	props: r,
+	setup(t, { attrs: r }) {
+		return () => {
+			let { x: a, y: o, width: s, height: c, radius: l } = t;
+			return a !== +a || o !== +o || s !== +s || c !== +c || s === 0 || c === 0 ? null : e("path", n(r, {
+				x: a,
+				y: o,
+				width: s,
+				height: c,
+				d: i(a, o, s, c, l)
+			}), null);
+		};
+	}
+});
+//#endregion
+export { a as Rectangle };