vccs 0.0.1 → 0.1.0

package/dist/es/cartesian/reference-area/ReferenceArea.mjs

@@ -0,0 +1,146 @@
+import { isNumOrStr as e, isWellBehavedNumber as t } from "../../utils/validate.mjs";
+import { useIsPanorama as n } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale as r } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch as i, useAppSelector as a } from "../../state/hooks.mjs";
+import { Layer as o } from "../../container/Layer.mjs";
+import { Label as s } from "../../components/label/Label.mjs";
+import { Rectangle as c } from "../../shape/Rectangle.mjs";
+import { addArea as l, removeArea as u } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId as d } from "../../chart/provideClipPathId.mjs";
+import { computed as f, createVNode as p, defineComponent as m, mergeProps as h, onMounted as g, onUnmounted as _, reactive as v } from "vue";
+//#region src/cartesian/reference-area/ReferenceArea.tsx
+function y(e, n, r) {
+	let i = e(n);
+	if (!t(i)) return;
+	let a = e.bandwidth?.() ?? 0;
+	return r === "start" ? i : i + a;
+}
+function b(e) {
+	let t = e.range();
+	return Math.min(t[0], t[1]);
+}
+function x(e) {
+	let t = e.range();
+	return Math.max(t[0], t[1]);
+}
+var S = /* @__PURE__ */ m({
+	name: "ReferenceArea",
+	props: {
+		x1: {
+			type: [Number, String],
+			default: void 0
+		},
+		x2: {
+			type: [Number, String],
+			default: void 0
+		},
+		y1: {
+			type: [Number, String],
+			default: void 0
+		},
+		y2: {
+			type: [Number, String],
+			default: void 0
+		},
+		xAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		yAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		stroke: {
+			type: String,
+			default: "none"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 1
+		},
+		fill: {
+			type: String,
+			default: "#ccc"
+		},
+		fillOpacity: {
+			type: Number,
+			default: .5
+		},
+		label: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			default: void 0
+		},
+		ifOverflow: {
+			type: String,
+			default: "discard"
+		},
+		className: {
+			type: String,
+			default: void 0
+		},
+		radius: {
+			type: [Number, Array],
+			default: 0
+		}
+	},
+	inheritAttrs: !1,
+	setup(t, { attrs: m }) {
+		let S = i(), C = n(), w = d(), T = v({
+			xAxisId: t.xAxisId,
+			yAxisId: t.yAxisId,
+			ifOverflow: t.ifOverflow,
+			x1: t.x1,
+			x2: t.x2,
+			y1: t.y1,
+			y2: t.y2
+		});
+		g(() => {
+			S(l(T));
+		}), _(() => {
+			S(u(T));
+		});
+		let E = a((e) => r(e, "xAxis", t.xAxisId, C)), D = a((e) => r(e, "yAxis", t.yAxisId, C)), O = f(() => {
+			let n = E.value, r = D.value;
+			if (!n || !r) return null;
+			let i = e(t.x1), a = e(t.x2), o = e(t.y1), s = e(t.y2);
+			if (!i && !a && !o && !s) return null;
+			let c = i ? y(n, t.x1, "start") : b(n), l = a ? y(n, t.x2, "end") : x(n), u = o ? y(r, t.y1, "start") : b(r), d = s ? y(r, t.y2, "end") : x(r);
+			return c == null || l == null || u == null || d == null ? null : {
+				x: Math.min(c, l),
+				y: Math.min(u, d),
+				width: Math.abs(l - c),
+				height: Math.abs(d - u)
+			};
+		});
+		return () => {
+			let e = O.value;
+			if (!e) return null;
+			let n = t.ifOverflow === "hidden" ? `url(#${w})` : void 0, r = {
+				...m,
+				stroke: t.stroke,
+				"stroke-width": t.strokeWidth,
+				fill: t.fill,
+				"fill-opacity": t.fillOpacity
+			}, i = t.label, a = typeof i == "object" && i ? i : {};
+			return p(o, { class: ["v-charts-reference-area", t.className] }, { default: () => [p(c, h(r, {
+				"clip-path": n,
+				x: e.x,
+				y: e.y,
+				width: e.width,
+				height: e.height,
+				radius: t.radius,
+				class: "v-charts-reference-area-rect"
+			}), null), i != null && i !== !1 && p(s, h({
+				viewBox: e,
+				value: typeof i == "string" || typeof i == "number" ? i : void 0
+			}, a), null)] });
+		};
+	}
+});
+//#endregion
+export { S as ReferenceArea };

package/dist/es/cartesian/reference-line/ReferenceLine.mjs

@@ -0,0 +1,143 @@
+import { isNumOrStr as e, isWellBehavedNumber as t } from "../../utils/validate.mjs";
+import { useIsPanorama as n } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale as r, selectXAxisSettings as i, selectYAxisSettings as a } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch as o, useAppSelector as s } from "../../state/hooks.mjs";
+import { useViewBox as c } from "../../context/chartLayoutContext.mjs";
+import { Layer as l } from "../../container/Layer.mjs";
+import { Label as u } from "../../components/label/Label.mjs";
+import { addLine as d, removeLine as f } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId as p } from "../../chart/provideClipPathId.mjs";
+import { computed as m, createVNode as h, defineComponent as g, mergeProps as _, onMounted as v, onUnmounted as y, reactive as b } from "vue";
+//#region src/cartesian/reference-line/ReferenceLine.tsx
+function x(e, n) {
+	let r = e(n);
+	if (t(r)) return r + (e.bandwidth?.() ?? 0) / 2;
+}
+function S(e, t) {
+	let n = e.range(), r = Math.min(n[0], n[1]), i = Math.max(n[0], n[1]);
+	return t >= r && t <= i;
+}
+var C = /* @__PURE__ */ g({
+	name: "ReferenceLine",
+	props: {
+		x: {
+			type: [Number, String],
+			default: void 0
+		},
+		y: {
+			type: [Number, String],
+			default: void 0
+		},
+		xAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		yAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		stroke: {
+			type: String,
+			default: "#ccc"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 1
+		},
+		fill: {
+			type: String,
+			default: "none"
+		},
+		label: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			default: void 0
+		},
+		ifOverflow: {
+			type: String,
+			default: "discard"
+		},
+		className: {
+			type: String,
+			default: void 0
+		}
+	},
+	inheritAttrs: !1,
+	setup(g, { attrs: C }) {
+		let w = o(), T = n(), E = p(), D = c(), O = b({
+			xAxisId: g.xAxisId,
+			yAxisId: g.yAxisId,
+			ifOverflow: g.ifOverflow,
+			x: g.x,
+			y: g.y
+		});
+		v(() => {
+			w(d(O));
+		}), y(() => {
+			w(f(O));
+		});
+		let k = s((e) => i(e, g.xAxisId)), A = s((e) => a(e, g.yAxisId)), j = s((e) => r(e, "xAxis", g.xAxisId, T)), M = s((e) => r(e, "yAxis", g.yAxisId, T)), N = m(() => {
+			let t = D.value, n = j.value, r = M.value;
+			if (!t || !n || !r) return null;
+			if (e(g.y)) {
+				let e = x(r, g.y);
+				if (e == null || g.ifOverflow === "discard" && !S(r, e)) return null;
+				let n = A.value?.orientation, i = [{
+					x: t.x + t.width,
+					y: e
+				}, {
+					x: t.x,
+					y: e
+				}];
+				return n === "left" ? i.reverse() : i;
+			}
+			if (e(g.x)) {
+				let e = x(n, g.x);
+				if (e == null || g.ifOverflow === "discard" && !S(n, e)) return null;
+				let r = k.value?.orientation, i = [{
+					x: e,
+					y: t.y + t.height
+				}, {
+					x: e,
+					y: t.y
+				}];
+				return r === "top" ? i.reverse() : i;
+			}
+			return null;
+		});
+		return () => {
+			let e = N.value;
+			if (!e || e.length < 2) return null;
+			let [n, r] = e;
+			if (!t(n.x) || !t(n.y) || !t(r.x) || !t(r.y)) return null;
+			let i = g.ifOverflow === "hidden" ? `url(#${E})` : void 0, a = {
+				...C,
+				stroke: g.stroke,
+				"stroke-width": g.strokeWidth,
+				fill: g.fill
+			}, o = {
+				x: Math.min(n.x, r.x),
+				y: Math.min(n.y, r.y),
+				width: Math.abs(r.x - n.x),
+				height: Math.abs(r.y - n.y)
+			}, s = g.label, c = typeof s == "object" && s ? s : {};
+			return h(l, { class: ["v-charts-reference-line", g.className] }, { default: () => [h("line", _(a, {
+				"clip-path": i,
+				x1: n.x,
+				y1: n.y,
+				x2: r.x,
+				y2: r.y,
+				class: "v-charts-reference-line-line"
+			}), null), s != null && s !== !1 && h(u, _({
+				viewBox: o,
+				value: typeof s == "string" || typeof s == "number" ? s : void 0
+			}, c), null)] });
+		};
+	}
+});
+//#endregion
+export { C as ReferenceLine };

package/dist/es/cartesian/scatter/Scatter.mjs

@@ -0,0 +1,252 @@
+import { Curve as e } from "../../shape/Curve.mjs";
+import { getTooltipNameProp as t, getValueByDataKey as n } from "../../utils/chart.mjs";
+import { mouseLeaveChart as r, setActiveMouseOverItemIndex as i, setMouseOverAxisIndex as a } from "../../state/tooltipSlice.mjs";
+import { selectActiveTooltipDataKey as o, selectActiveTooltipIndex as s } from "../../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch as c, useAppSelector as l } from "../../state/hooks.mjs";
+import { Layer as u } from "../../container/Layer.mjs";
+import { LabelList as d } from "../../components/label/LabelList.mjs";
+import { Animate as f } from "../../animation/Animate.mjs";
+import { SetTooltipEntrySettings as p } from "../../state/SetTooltipEntrySettings.mjs";
+import { useSetupGraphicalItem as m } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef as h } from "../../context/graphicalLayerContext.mjs";
+import { createErrorBarRegistry as g, provideErrorBarContext as _, provideErrorBarRegistry as v } from "../error-bar/ErrorBarContext.mjs";
+import { useScatter as y } from "./hooks/useScatter.mjs";
+import { Symbols as b } from "../../shape/Symbols.mjs";
+import { getLinearRegression as x } from "../../utils/getLinearRegression.mjs";
+import { Fragment as S, Teleport as C, computed as w, createVNode as T, defineComponent as E, isVNode as D, mergeProps as O, useAttrs as k } from "vue";
+//#region src/cartesian/scatter/Scatter.tsx
+function A(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !D(e);
+}
+var j = (e, t) => (n) => e + (t - e) * n, M = (e, t, r) => ({
+	x: e.cx,
+	y: e.cy,
+	value: r === "x" ? Number(e.node.x) : Number(e.node.y),
+	errorVal: n(e.payload, t)
+}), N = /* @__PURE__ */ E({
+	name: "Scatter",
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		zAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		data: {
+			type: Array,
+			default: void 0
+		},
+		name: {
+			type: [String, Number],
+			default: void 0
+		},
+		hide: {
+			type: Boolean,
+			default: !1
+		},
+		fill: {
+			type: String,
+			default: void 0
+		},
+		shape: {
+			type: String,
+			default: "circle"
+		},
+		isAnimationActive: {
+			type: Boolean,
+			default: !0
+		},
+		line: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		lineType: {
+			type: String,
+			default: "joint"
+		},
+		lineJointType: {
+			type: [String, Function],
+			default: "linear"
+		},
+		label: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		legendType: {
+			type: String,
+			default: "circle"
+		},
+		tooltipType: {
+			type: String,
+			default: void 0
+		},
+		transition: {
+			type: Object,
+			default: void 0
+		}
+	},
+	inheritAttrs: !1,
+	slots: Object,
+	setup(n, { attrs: E, slots: D }) {
+		let N = g();
+		v(N), m(n, "scatter", {
+			skipTooltip: !0,
+			errorBars: N.errorBars
+		});
+		let { shouldRender: P, points: F } = y(n), I = h(), L = k(), R = c(), z = l(s), B = l(o);
+		p({
+			fn: (e) => ({
+				dataDefinedOnItem: e.points?.map((e) => e.tooltipPayload),
+				positions: void 0,
+				settings: {
+					stroke: e.stroke,
+					strokeWidth: e.strokeWidth,
+					fill: e.fill,
+					dataKey: e.dataKey,
+					nameKey: void 0,
+					name: t(e.name, e.dataKey),
+					hide: e.hide,
+					type: e.tooltipType,
+					color: e.fill,
+					unit: ""
+				}
+			}),
+			args: w(() => ({
+				points: F.value,
+				fill: L.fill ?? n.fill,
+				stroke: L.stroke,
+				strokeWidth: L["stroke-width"],
+				name: n.name,
+				dataKey: n.dataKey,
+				hide: n.hide,
+				tooltipType: n.tooltipType
+			}))
+		}), _({
+			data: F,
+			xAxisId: n.xAxisId,
+			yAxisId: n.yAxisId,
+			dataPointFormatter: M,
+			errorBarOffset: w(() => 0)
+		});
+		let V = null, H = 0, U = (e, t) => {
+			let r = {
+				activeDataKey: n.dataKey,
+				activeIndex: String(t),
+				activeCoordinate: e.tooltipPosition
+			};
+			R(a(r)), R(i(r));
+		}, W = () => {
+			R(r());
+		}, G = (e, t) => {
+			let r = z.value, i = B.value;
+			return e.map((e, a) => {
+				if (e.cx == null || e.cy == null) return null;
+				let o = r === String(a) && i === n.dataKey, s = {
+					...t,
+					...n.fill == null ? {} : { fill: n.fill },
+					cx: e.cx,
+					cy: e.cy,
+					size: o ? (e.size ?? 64) * 1.6 : e.size,
+					type: n.shape,
+					...o ? {
+						stroke: "#fff",
+						"stroke-width": 2
+					} : {}
+				};
+				return T("g", {
+					class: "v-charts-scatter-symbol",
+					onMouseenter: () => U(e, a),
+					onMousemove: (t) => {
+						t.stopPropagation(), U(e, a);
+					},
+					onMouseleave: W
+				}, [b(s)]);
+			});
+		}, K = (t, r) => {
+			if (!n.line) return null;
+			let i;
+			if (n.lineType === "joint") i = t.map((e) => ({
+				x: e.cx ?? 0,
+				y: e.cy ?? 0
+			}));
+			else {
+				let { xmin: e, xmax: n, a: r, b: a } = x(t);
+				i = [{
+					x: e,
+					y: r * e + a
+				}, {
+					x: n,
+					y: r * n + a
+				}];
+			}
+			let a = {
+				fill: "none",
+				stroke: r.stroke ?? n.fill,
+				...typeof n.line == "object" ? n.line : {},
+				points: i
+			};
+			return T(u, {
+				class: "v-charts-scatter-line",
+				style: { pointerEvents: "none" }
+			}, { default: () => [T(e, O(a, { type: n.lineJointType }), null)] });
+		};
+		return () => {
+			if (!P.value) return null;
+			let e = E, t = F.value, r = n.isAnimationActive, i;
+			if (r && V !== t) {
+				let a = V;
+				H++, i = T(f, {
+					key: H,
+					transition: n.transition,
+					isActive: r
+				}, { default: (n) => {
+					let r = n === 1 ? t : t.map((e, t) => {
+						let r = a && a[t];
+						return r ? {
+							...e,
+							cx: e.cx == null ? void 0 : j(r.cx ?? 0, e.cx)(n),
+							cy: e.cy == null ? void 0 : j(r.cy ?? 0, e.cy)(n),
+							size: j(r.size ?? 0, e.size ?? 0)(n)
+						} : {
+							...e,
+							size: j(0, e.size ?? 0)(n)
+						};
+					});
+					return n > 0 && (V = r), T(S, null, [K(r, e), G(r, e)]);
+				} });
+			} else V = t, i = T(S, null, [K(t, e), G(t, e)]);
+			let a = T(u, { class: "v-charts-scatter" }, { default: () => [
+				D.default?.(),
+				i,
+				n.label && (() => {
+					let e = t.map((e) => ({
+						x: e.cx ?? 0,
+						y: e.cy ?? 0,
+						width: 0,
+						height: 0,
+						value: void 0,
+						payload: e.payload
+					}));
+					return T(d, O(typeof n.label == "object" ? n.label : {}, { data: e }), null);
+				})()
+			] });
+			return I?.value ? T(C, { to: I.value }, A(a) ? a : { default: () => [a] }) : a;
+		};
+	}
+});
+//#endregion
+export { N as Scatter };

package/dist/es/cartesian/scatter/hooks/useScatter.mjs

@@ -0,0 +1,19 @@
+import { useIsPanorama as e } from "../../../context/PanoramaContextProvider.mjs";
+import { useAppSelector as t } from "../../../state/hooks.mjs";
+import { selectScatterPoints as n } from "../../../state/selectors/scatterSelectors.mjs";
+import { computed as r } from "vue";
+//#region src/cartesian/scatter/hooks/useScatter.ts
+function i(i) {
+	let a = e(), o = r(() => ({
+		data: i.data,
+		dataKey: i.dataKey,
+		tooltipType: i.tooltipType,
+		name: i.name ?? String(i.dataKey ?? "")
+	})), s = t((e) => n(e, i.xAxisId ?? 0, i.yAxisId ?? 0, i.zAxisId ?? 0, o.value, a));
+	return {
+		shouldRender: r(() => !i.hide && s.value != null && s.value.length > 0),
+		points: s
+	};
+}
+//#endregion
+export { i as useScatter };

package/dist/es/cartesian/useNeedsClip.mjs

@@ -0,0 +1,14 @@
+import { selectXAxisSettings as e, selectYAxisSettings as t } from "../state/selectors/axisSelectors.mjs";
+import { useAppSelector as n } from "../state/hooks.mjs";
+import { computed as r } from "vue";
+//#region src/cartesian/useNeedsClip.ts
+function i(i, a) {
+	let o = n((t) => e(t, i)), s = n((e) => t(e, a)), c = r(() => o.value && o.value.allowDataOverflow), l = r(() => s.value && s.value.allowDataOverflow);
+	return {
+		needClip: r(() => c.value || l.value),
+		needClipX: c,
+		needClipY: l
+	};
+}
+//#endregion
+export { i as useNeedsClip };

package/dist/es/cartesian/utils/get-ticks.mjs

@@ -0,0 +1,83 @@
+import { isNumber as e, isSsr as t, isVisible as n } from "../../utils/validate.mjs";
+import { mathSign as r } from "../../utils/data.mjs";
+import { getStringSize as i } from "../../utils/attrs.mjs";
+import { getAngledTickWidth as a, getNumberIntervalTicks as o, getTickBoundaries as s } from "../../utils/tick.mjs";
+import { getEquidistantTicks as c } from "../../utils/cartesian.mjs";
+//#region src/cartesian/utils/get-ticks.ts
+function l(e, t, r, i, a) {
+	let o = (i || []).slice(), s = o.length, { start: c } = t, { end: l } = t;
+	for (let t = s - 1; t >= 0; t--) {
+		let i = o[t], u, d = () => (u === void 0 && (u = r(i, t)), u);
+		if (t === s - 1) {
+			let n = e * (i.coordinate + e * d() / 2 - l);
+			o[t] = i = {
+				...i,
+				tickCoord: n > 0 ? i.coordinate - n * e : i.coordinate
+			};
+		} else o[t] = i = {
+			...i,
+			tickCoord: i.coordinate
+		};
+		n(e, i.tickCoord, d, c, l) && (l = i.tickCoord - e * (d() / 2 + a), o[t] = {
+			...i,
+			isShow: !0
+		});
+	}
+	return o;
+}
+function u(e, t, r, i, a, o) {
+	let s = (i || []).slice(), c = s.length, { start: l, end: u } = t;
+	if (o) {
+		let t = i[c - 1], o = r(t, c - 1), d = e * (t.coordinate + e * o / 2 - u);
+		s[c - 1] = t = {
+			...t,
+			tickCoord: d > 0 ? t.coordinate - d * e : t.coordinate
+		}, n(e, t.tickCoord, () => o, l, u) && (u = t.tickCoord - e * (o / 2 + a), s[c - 1] = {
+			...t,
+			isShow: !0
+		});
+	}
+	let d = o ? c - 1 : c;
+	for (let t = 0; t < d; t++) {
+		let i = s[t], o, c = () => (o === void 0 && (o = r(i, t)), o);
+		if (t === 0) {
+			let n = e * (i.coordinate - e * c() / 2 - l);
+			s[t] = i = {
+				...i,
+				tickCoord: n < 0 ? i.coordinate - n * e : i.coordinate
+			};
+		} else s[t] = i = {
+			...i,
+			tickCoord: i.coordinate
+		};
+		n(e, i.tickCoord, c, l, u) && (l = i.tickCoord + e * (c() / 2 + a), s[t] = {
+			...i,
+			isShow: !0
+		});
+	}
+	return s;
+}
+function d(n, d, f) {
+	let { tick: p, ticks: m, viewBox: h, minTickGap: g, orientation: _, interval: v, tickFormatter: y, unit: b, angle: x } = n;
+	if (!m || !m.length || !p) return [];
+	if (e(v) || t) return o(m, e(v) ? v : 0) ?? [];
+	let S = [], C = _ === "top" || _ === "bottom" ? "width" : "height", w = b && C === "width" ? i(b, {
+		fontSize: d,
+		letterSpacing: f
+	}) : {
+		width: 0,
+		height: 0
+	}, T = (e, t) => {
+		let n = typeof y == "function" ? y(e.value, t) : e.value;
+		return C === "width" ? a(i(n, {
+			fontSize: d,
+			letterSpacing: f
+		}), w, x) : i(n, {
+			fontSize: d,
+			letterSpacing: f
+		})[C];
+	}, E = m.length >= 2 ? r(m[1].coordinate - m[0].coordinate) : 1, D = s(h, E, C);
+	return v === "equidistantPreserveStart" ? c(E, D, T, m, g) : (S = v === "preserveStart" || v === "preserveStartEnd" ? u(E, D, T, m, g, v === "preserveStartEnd") : l(E, D, T, m, g), S.filter((e) => e.isShow));
+}
+//#endregion
+export { d as getTicks };