vccs 0.0.1 → 0.1.0

package/dist/es/cartesian/error-bar/ErrorBar.mjs

@@ -0,0 +1,115 @@
+import { selectAxisWithScale as e } from "../../state/selectors/axisSelectors.mjs";
+import { useAppSelector as t } from "../../state/hooks.mjs";
+import { useChartLayout as n } from "../../context/chartLayoutContext.mjs";
+import { Layer as r } from "../../container/Layer.mjs";
+import { useErrorBarContext as i, useErrorBarRegistry as a } from "./ErrorBarContext.mjs";
+import { createVNode as o, defineComponent as s, isVNode as c, onUnmounted as l } from "vue";
+//#region src/cartesian/error-bar/ErrorBar.tsx
+function u(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !c(e);
+}
+var d = {
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: !0
+	},
+	width: {
+		type: Number,
+		default: 5
+	},
+	direction: { type: String },
+	stroke: {
+		type: String,
+		default: "black"
+	},
+	strokeWidth: {
+		type: [Number, String],
+		default: 1.5
+	}
+}, f = /* @__PURE__ */ s({
+	name: "ErrorBar",
+	props: d,
+	setup(s) {
+		let c = n(), { data: d, dataPointFormatter: f, xAxisId: p, yAxisId: m, errorBarOffset: h } = i(), g = a(null);
+		if (g) {
+			let e = {
+				direction: s.direction ?? (c.value === "horizontal" ? "y" : "x"),
+				dataKey: s.dataKey
+			};
+			g.register(e), l(() => g.unregister(e));
+		}
+		let _ = t((t) => e(t, "xAxis", p, !1)), v = t((t) => e(t, "yAxis", m, !1));
+		return () => {
+			let e = _.value, t = v.value;
+			if (e?.scale == null || t?.scale == null || d.value == null) return null;
+			let n = s.direction ?? (c.value === "horizontal" ? "y" : "x");
+			if (n === "x" && e.type !== "number") return null;
+			let i = h.value, a = d.value.map((a, c) => {
+				let l, { x: d, y: p, value: m, errorVal: h } = f(a, s.dataKey, n);
+				if (!h || d == null || p == null) return null;
+				let g = [], _, v;
+				if (Array.isArray(h)) {
+					let [e, t] = h;
+					if (e == null || t == null) return null;
+					_ = e, v = t;
+				} else _ = v = h;
+				if (n === "x") {
+					let { scale: t } = e, n = p + i, r = n + s.width, a = n - s.width, o = t(m - _), c = t(m + v);
+					o != null && c != null && (g.push({
+						x1: c,
+						y1: r,
+						x2: c,
+						y2: a
+					}), g.push({
+						x1: o,
+						y1: n,
+						x2: c,
+						y2: n
+					}), g.push({
+						x1: o,
+						y1: r,
+						x2: o,
+						y2: a
+					}));
+				} else if (n === "y") {
+					let { scale: e } = t, n = d + i, r = n - s.width, a = n + s.width, o = e(m - _), c = e(m + v);
+					o != null && c != null && (g.push({
+						x1: r,
+						y1: c,
+						x2: a,
+						y2: c
+					}), g.push({
+						x1: n,
+						y1: o,
+						x2: n,
+						y2: c
+					}), g.push({
+						x1: r,
+						y1: o,
+						x2: a,
+						y2: o
+					}));
+				}
+				return o(r, {
+					class: "v-charts-errorBar",
+					key: `bar-${d}-${p}-${m}-${c}`
+				}, u(l = g.map((e, t) => o("line", {
+					key: `errorbar-${c}-${e.x1}-${e.y1}-${e.x2}-${e.y2}-${t}`,
+					x1: e.x1,
+					y1: e.y1,
+					x2: e.x2,
+					y2: e.y2,
+					stroke: s.stroke,
+					"stroke-width": s.strokeWidth
+				}, null))) ? l : { default: () => [l] });
+			});
+			return o(r, { class: "v-charts-errorBars" }, u(a) ? a : { default: () => [a] });
+		};
+	}
+});
+//#endregion
+export { f as ErrorBar, d as ErrorBarVueProps };

package/dist/es/cartesian/error-bar/ErrorBarContext.mjs

@@ -0,0 +1,19 @@
+import { createContext as e } from "../../utils/createContext.mjs";
+import { shallowRef as t } from "vue";
+import { createContext as n } from "motion-v";
+//#region src/cartesian/error-bar/ErrorBarContext.ts
+var [r, i] = n("ErrorBarContext"), [a, o] = e("ErrorBarRegistry");
+function s() {
+	let e = t([]);
+	return {
+		errorBars: e,
+		register(t) {
+			e.value = [...e.value, t];
+		},
+		unregister(t) {
+			e.value = e.value.filter((e) => e !== t);
+		}
+	};
+}
+//#endregion
+export { s as createErrorBarRegistry, i as provideErrorBarContext, o as provideErrorBarRegistry, r as useErrorBarContext, a as useErrorBarRegistry };

package/dist/es/cartesian/line/ActivePoints.mjs

@@ -0,0 +1,75 @@
+import { isNullish as e } from "../../utils/validate.mjs";
+import { selectActiveTooltipIndex as t } from "../../state/selectors/tooltipSelectors.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 { createVNode as a, defineComponent as o, isVNode as s } from "vue";
+//#region src/cartesian/line/ActivePoints.tsx
+function c(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !s(e);
+}
+var l = /* @__PURE__ */ o({
+	name: "ActivePoints",
+	props: {
+		points: {
+			type: Array,
+			required: !0
+		},
+		mainColor: {
+			type: String,
+			required: !0
+		},
+		itemDataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			required: !0
+		},
+		activeDot: {
+			type: [
+				Object,
+				Boolean,
+				Function
+			],
+			required: !0
+		}
+	},
+	slots: Object,
+	setup(r, { slots: i }) {
+		let a = n(t);
+		return () => {
+			let { points: t } = r;
+			if (!t?.length || e(a.value)) return null;
+			let n = t[Number(a.value)];
+			return e(n) ? null : u({
+				point: n,
+				childIndex: Number(a.value),
+				mainColor: r.mainColor,
+				dataKey: r.itemDataKey,
+				activeDot: r.activeDot,
+				slots: i
+			});
+		};
+	}
+});
+function u({ point: e, childIndex: t, mainColor: n, activeDot: o, dataKey: s, slots: l }) {
+	if (o === !1) return null;
+	let u = {
+		index: t,
+		dataKey: s,
+		cx: e.x,
+		cy: e.y,
+		r: 4,
+		fill: n,
+		"stroke-width": 2,
+		stroke: "#fff",
+		payload: e.payload,
+		value: e.value,
+		...typeof o == "object" ? o : {}
+	}, d;
+	return d = l.activeDot ? l.activeDot(u) : a(i, u, null), a(r, { class: "v-charts-active-dot" }, c(d) ? d : { default: () => [d] });
+}
+//#endregion
+export { l as ActivePoints };

package/dist/es/cartesian/line/Line.mjs

@@ -0,0 +1,46 @@
+import { Layer as e } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData as t } from "../../context/cartesianLabelListContext.mjs";
+import { useSetupGraphicalItem as n } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef as r } from "../../context/graphicalLayerContext.mjs";
+import { GraphicalItemClipPath as i } from "../GraphicalItemClipPath.mjs";
+import { LineVueProps as a } from "./type.mjs";
+import { useLine as o } from "./hooks/useLine.mjs";
+import { StaticLine as s } from "./StaticLine.mjs";
+import { ActivePoints as c } from "./ActivePoints.mjs";
+import { Fragment as l, Teleport as u, computed as d, createVNode as f, defineComponent as p, isVNode as m } from "vue";
+//#region src/cartesian/line/Line.tsx
+function h(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !m(e);
+}
+var g = /* @__PURE__ */ p({
+	name: "Line",
+	props: a,
+	inheritAttrs: !1,
+	slots: Object,
+	setup(a, { attrs: p, slots: m }) {
+		n(a, "line");
+		let { shouldRender: g, needClip: _, clipPathId: v, lineData: y, points: b } = o(a, p, m.shape, m.dot, m.label), x = r(null);
+		return t(d(() => y.value)), () => {
+			if (!g.value) return null;
+			let t;
+			m.activeDot && (t = { activeDot: m.activeDot });
+			let n = m.default?.(), r = f(l, null, [f(e, { class: ["v-charts-line", p.class] }, { default: () => [
+				_.value && f("defs", null, [f(i, {
+					clipPathId: v.value,
+					xAxisId: a.xAxisId,
+					yAxisId: a.yAxisId
+				}, null)]),
+				f(s, null, null),
+				n
+			] }), f(c, {
+				points: y.value ?? [],
+				mainColor: p.stroke ?? a.stroke,
+				itemDataKey: a.dataKey,
+				activeDot: a.activeDot
+			}, h(t) ? t : { default: () => [t] })]);
+			return x?.value ? f(u, { to: x.value }, h(r) ? r : { default: () => [r] }) : r;
+		};
+	}
+});
+//#endregion
+export { g as Line };

package/dist/es/cartesian/line/StaticLine.mjs

@@ -0,0 +1,148 @@
+import { interpolate as e } from "../../utils/data-utils.mjs";
+import { Curve as t } from "../../shape/Curve.mjs";
+import { Layer as n } from "../../container/Layer.mjs";
+import { Dot as r } from "../../shape/Dot.mjs";
+import { LabelList as i } from "../../components/label/LabelList.mjs";
+import { useLineContext as a } from "./hooks/useLine.mjs";
+import { Fragment as o, createVNode as s, defineComponent as c, mergeProps as l, onBeforeUnmount as u, ref as d, watch as f } from "vue";
+import { animate as p } from "motion-v";
+//#region src/cartesian/line/StaticLine.tsx
+var m = /* @__PURE__ */ c({
+	name: "LineDots",
+	props: { points: {
+		type: Array,
+		default: () => []
+	} },
+	setup(e) {
+		let { clipPathId: t, clipDot: i, props: o, attrs: c, needClip: u, dotSlot: d } = a();
+		return () => {
+			let { points: a } = e;
+			if (!g(a, o.dot)) return null;
+			let f = typeof o.dot == "object" && o.dot !== null ? o.dot : {}, p = {
+				fill: "#fff",
+				stroke: o.stroke,
+				"stroke-width": o.strokeWidth,
+				...f
+			};
+			return s(n, {
+				class: "v-charts-line-dots",
+				"clip-path": u.value ? `url(#clipPath-${i ? "" : "dots-"}${t.value})` : void 0
+			}, { default: () => [a?.map((e, t) => {
+				let n = e;
+				return d ? d({
+					...p,
+					...c,
+					cx: e.x,
+					cy: e.y,
+					index: t,
+					value: n.value,
+					payload: n.payload
+				}) : s(r, l({ r: 3 }, p, c, {
+					cx: e.x,
+					cy: e.y,
+					class: "v-charts-line-dot",
+					clipDot: i
+				}), null);
+			})] });
+		};
+	}
+}), h = /* @__PURE__ */ c({
+	name: "StaticLine",
+	setup() {
+		let { points: r, clipPathId: c, layout: h, attrs: g, lineData: _, props: v, isAnimating: y, needClip: b, shapeSlot: x, labelSlot: S } = a(), C = d([]), w = d(1), T = !0, E = [], D = [], O = null, k = !1;
+		function A() {
+			O &&= (O.stop(), null);
+		}
+		return u(() => {
+			A();
+		}), f(r, (t) => {
+			if (!(t && D.length === t.length && t.every((e, t) => e.x === D[t].x && e.y === D[t].y))) if (t && t.length > 0) {
+				if (!v.isAnimationActive) {
+					T = !1, A(), k = !1, y.value = !1, C.value = t, E = t, D = t, w.value = 0;
+					return;
+				}
+				T ? (T = !1, k = !0, y.value = !0, C.value = t, D = t, w.value = 1, A(), O = p(1, 0, {
+					...v.transition,
+					onUpdate(e) {
+						k && (w.value = e);
+					},
+					onPlay() {
+						v.onAnimationStart?.();
+					},
+					onComplete() {
+						w.value = 0, y.value = !1, k = !1, O = null, E = C.value, D = E, v.onAnimationEnd?.();
+					}
+				})) : k ? (C.value = t, D = t) : (y.value = !0, w.value = 0, C.value.length && (E = C.value), D = t, A(), O = p(0, 1, {
+					...v.transition,
+					onUpdate(n) {
+						if (E.length) {
+							let r = E.length / t.length;
+							C.value = n === 1 ? t : t.map((t, i) => {
+								let a = Math.floor(i * r);
+								if (E[a]) {
+									let r = E[a];
+									return {
+										...t,
+										x: e(r.x, t.x, n),
+										y: e(r.y, t.y, n)
+									};
+								}
+								return t;
+							});
+						} else C.value = t;
+					},
+					onPlay() {
+						v.onAnimationStart?.();
+					},
+					onComplete() {
+						y.value = !1, E = t, D = t, O = null, v.onAnimationEnd?.();
+					}
+				}));
+			} else A(), k = !1, y.value = !1, C.value = t || [], E = C.value, D = E, w.value = 0;
+		}, { immediate: !0 }), () => {
+			let e = {
+				...g,
+				fill: "none",
+				stroke: v.stroke,
+				"stroke-width": v.strokeWidth
+			}, r = w.value, a = !y.value && (v.label || S), u = typeof v.label == "object" ? v.label : {}, d = null;
+			C.value && C.value.length > 1 && (d = x ? x({
+				...e,
+				points: C.value,
+				connectNulls: v.connectNulls,
+				type: v.type,
+				layout: h.value,
+				class: "v-charts-line-curve"
+			}) : s(t, l(e, g["stroke-dasharray"] == null && r > 0 ? {
+				pathLength: 1,
+				"stroke-dasharray": 1,
+				"stroke-dashoffset": r
+			} : {}, {
+				points: C.value,
+				connectNulls: v.connectNulls,
+				type: v.type,
+				layout: h.value,
+				class: "v-charts-line-curve"
+			}), null));
+			let f = g["stroke-dasharray"] != null, p = (x || f) && r > 0 && d;
+			return s(o, null, [
+				d && s(n, { "clip-path": b.value ? `url(#clipPath-${c.value})` : void 0 }, { default: () => [p ? s("g", null, [s("defs", null, [s("clipPath", { id: `line-anim-${c.value}` }, [s("rect", {
+					x: "0",
+					y: "0",
+					width: `${(1 - r) * 100}%`,
+					height: "100%"
+				}, null)])]), s("g", { "clip-path": `url(#line-anim-${c.value})` }, [d])]) : d] }),
+				s(m, { points: C.value }, null),
+				a && s(i, l(u, {
+					data: _.value ?? [],
+					dataKey: v.dataKey
+				}), S ? { label: S } : void 0)
+			]);
+		};
+	}
+});
+function g(e, t) {
+	return e == null || !e.length ? !1 : t ? !0 : e.length === 1;
+}
+//#endregion
+export { h as StaticLine };

package/dist/es/cartesian/line/hooks/useLine.mjs

@@ -0,0 +1,53 @@
+import { uniqueId as e } from "../../../utils/data-utils.mjs";
+import { useIsPanorama as t } from "../../../context/PanoramaContextProvider.mjs";
+import { isClipDot as n } from "../../../utils/chart.mjs";
+import { useAppSelector as r } from "../../../state/hooks.mjs";
+import { useChartLayout as i } from "../../../context/chartLayoutContext.mjs";
+import { useChartName as a } from "../../../state/selectors/selectors.mjs";
+import { filterProps as o } from "../../../utils/VueUtils.mjs";
+import { useNeedsClip as s } from "../../useNeedsClip.mjs";
+import { selectLinePoints as c } from "../../../state/selectors/lineSelectors.mjs";
+import { computed as l, inject as u, provide as d, ref as f } from "vue";
+//#region src/cartesian/line/hooks/useLine.ts
+var p = Symbol("LineContext");
+function m(e) {
+	d(p, e);
+}
+function h() {
+	let e = u(p);
+	if (!e) throw Error("useLineContext must be used within Line component");
+	return e;
+}
+function g(u, d = {}, p, h, g) {
+	let _ = i(), v = a(), y = e("v-charts-line-"), b = l(() => u.id || y), x = t(), S = f(u.isAnimationActive), { needClip: C } = s(u.xAxisId, u.yAxisId), w = l(() => (_.value === "horizontal" || _.value === "vertical") && (v.value === "LineChart" || v.value === "ComposedChart") && !u.hide), T = l(() => ({
+		data: u.data,
+		dataKey: u.dataKey
+	})), E = r((e) => c(e, u.xAxisId, u.yAxisId, x, T.value)), D = u.dot, O = n(D), { r: k = 3, strokeWidth: A = 2 } = o(D, !1) ?? {
+		r: 3,
+		strokeWidth: 2
+	}, j = k * 2 + A, M = {
+		clipPathId: b,
+		layout: _,
+		points: l(() => E.value),
+		props: u,
+		attrs: d,
+		lineData: E,
+		isAnimating: S,
+		needClip: C,
+		dot: D,
+		clipDot: O,
+		dotSize: j,
+		shapeSlot: p,
+		dotSlot: h,
+		labelSlot: g
+	};
+	return m(M), {
+		shouldRender: w,
+		needClip: C,
+		lineData: E,
+		points: M.points,
+		clipPathId: b
+	};
+}
+//#endregion
+export { p as LineContextKey, m as provideLineContext, g as useLine, h as useLineContext };

package/dist/es/cartesian/line/type.mjs

@@ -0,0 +1,112 @@
+import { CurveVueProps as e } from "../../shape/Curve.mjs";
+//#region src/cartesian/line/type.ts
+var t = {
+	...e,
+	activeDot: {
+		type: [
+			Boolean,
+			Object,
+			Function
+		],
+		default: !0
+	},
+	animationDuration: { type: Number },
+	animationEasing: { type: String },
+	animationBegin: {
+		type: Number,
+		default: 0
+	},
+	animationId: { type: String },
+	isAnimationActive: {
+		type: Boolean,
+		default: !0
+	},
+	connectNulls: {
+		type: Boolean,
+		default: !1
+	},
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: !0
+	},
+	dot: {
+		type: [
+			Boolean,
+			Object,
+			Function
+		],
+		default: !0
+	},
+	hide: {
+		type: Boolean,
+		default: !1
+	},
+	label: { type: [Boolean, Object] },
+	legendType: {
+		type: String,
+		default: "line"
+	},
+	onAnimationEnd: { type: Function },
+	onAnimationStart: { type: Function },
+	stroke: {
+		type: String,
+		default: "#3182bd"
+	},
+	strokeWidth: {
+		type: Number,
+		default: 1
+	},
+	tooltipType: { type: String },
+	transition: {
+		type: Object,
+		default: () => ({
+			duration: .8,
+			ease: "easeOut"
+		})
+	},
+	type: { type: [String, Function] },
+	unit: { type: [String, Number] },
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	needClip: {
+		type: Boolean,
+		default: !1
+	},
+	id: { type: String },
+	activeIndex: { type: Number },
+	activePoint: { type: Object },
+	left: {
+		type: Number,
+		default: 0
+	},
+	top: {
+		type: Number,
+		default: 0
+	},
+	width: {
+		type: Number,
+		default: 0
+	},
+	height: {
+		type: Number,
+		default: 0
+	},
+	name: { type: [String, Number] },
+	class: { type: String }
+};
+//#endregion
+export { t as LineVueProps };

package/dist/es/cartesian/line/utils.mjs

@@ -0,0 +1,33 @@
+import { isNullish as e } from "../../utils/validate.mjs";
+import { getCateCoordinateOfLine as t, getValueByDataKey as n } from "../../utils/chart.mjs";
+//#region src/cartesian/line/utils.ts
+function r({ layout: r, xAxis: i, yAxis: a, xAxisTicks: o, yAxisTicks: s, dataKey: c, bandSize: l, displayedData: u }) {
+	return u.map((u, d) => {
+		let f = n(u, c);
+		return r === "horizontal" ? {
+			x: t({
+				axis: i,
+				ticks: o,
+				bandSize: l,
+				entry: u,
+				index: d
+			}),
+			y: e(f) ? null : a.scale(f),
+			value: f,
+			payload: u
+		} : {
+			x: e(f) ? null : i.scale(f),
+			y: t({
+				axis: a,
+				ticks: s,
+				bandSize: l,
+				entry: u,
+				index: d
+			}),
+			value: f,
+			payload: u
+		};
+	});
+}
+//#endregion
+export { r as computeLinePoints };