vccs 0.0.1 → 0.1.0

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

@@ -0,0 +1,181 @@
+import { useIsPanorama as e } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox as t } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitYAxis as n, selectAxisScale as r, selectTicksOfAxis as i, selectYAxisPosition as a, selectYAxisSize as o } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch as s, useAppSelector as c } from "../../state/hooks.mjs";
+import { addYAxis as l, removeYAxis as u } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis as d } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode as f, defineComponent as p, mergeProps as m, watchEffect as h } from "vue";
+//#region src/cartesian/axis/YAxis.tsx
+var g = /* @__PURE__ */ p({
+	props: { yAxisId: {
+		type: [String, Number],
+		default: 0
+	} },
+	inheritAttrs: !1,
+	setup(n, { attrs: s }) {
+		let l = e(), u = "yAxis", p = c((e) => r(e, u, n.yAxisId, l)), h = c((e) => o(e, n.yAxisId)), g = c((e) => a(e, n.yAxisId)), _ = c((e) => i(e, u, n.yAxisId, l)), v = c(t);
+		return () => {
+			let { ...e } = n;
+			return h.value == null || g.value == null ? null : f(d, m(e, s, {
+				viewBox: v.value,
+				scale: p.value,
+				x: g.value?.x,
+				y: g.value?.y,
+				width: h.value?.width,
+				height: h.value?.height,
+				ticks: _.value,
+				class: ["v-charts-yAxis yAxis", s.class]
+			}), null);
+		};
+	}
+}), _ = /* @__PURE__ */ p({
+	props: {
+		interval: [String, Number],
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		scale: [String, Function],
+		type: String,
+		padding: Object,
+		allowDataOverflow: Boolean,
+		allowDuplicatedCategory: Boolean,
+		allowDecimals: Boolean,
+		tickCount: Number,
+		includeHidden: Boolean,
+		reversed: Boolean,
+		ticks: Array,
+		width: Number,
+		orientation: String,
+		mirror: Boolean,
+		hide: Boolean,
+		unit: String,
+		name: String,
+		angle: Number,
+		minTickGap: Number,
+		tick: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		tickFormatter: Function,
+		domain: Array,
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		}
+	},
+	setup(e) {
+		let t = s();
+		return h((n) => {
+			let r = {
+				...e,
+				interval: e.interval ?? "preserveEnd",
+				id: e.yAxisId,
+				dataKey: e.dataKey,
+				includeHidden: e.includeHidden ?? !1,
+				angle: e.angle ?? 0,
+				minTickGap: e.minTickGap ?? 5,
+				tick: e.tick ?? !0
+			};
+			t(l(r)), n(() => {
+				t(u(r));
+			});
+		}), () => f(g, e, null);
+	}
+}), v = /* @__PURE__ */ p({
+	name: "YAxis",
+	props: {
+		allowDataOverflow: {
+			type: Boolean,
+			default: n.allowDataOverflow
+		},
+		allowDecimals: {
+			type: Boolean,
+			default: n.allowDecimals
+		},
+		allowDuplicatedCategory: {
+			type: Boolean,
+			default: n.allowDuplicatedCategory
+		},
+		width: {
+			type: Number,
+			default: n.width
+		},
+		hide: {
+			type: Boolean,
+			default: !1
+		},
+		mirror: {
+			type: Boolean,
+			default: n.mirror
+		},
+		orientation: {
+			type: String,
+			default: n.orientation
+		},
+		padding: {
+			type: Object,
+			default: n.padding
+		},
+		reversed: {
+			type: Boolean,
+			default: n.reversed
+		},
+		scale: {
+			type: [String, Function],
+			default: n.scale
+		},
+		tickCount: {
+			type: Number,
+			default: n.tickCount
+		},
+		type: {
+			type: String,
+			default: n.type
+		},
+		yAxisId: { type: [String, Number] },
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		tickFormatter: {
+			type: Function,
+			default: void 0
+		},
+		unit: {
+			type: String,
+			default: void 0
+		},
+		interval: { type: [String, Number] },
+		domain: {
+			type: Array,
+			default: void 0
+		},
+		axisLine: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		tickLine: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		tickMargin: Number,
+		minTickGap: {
+			type: Number,
+			default: 5
+		}
+	},
+	setup(e, { attrs: t }) {
+		return () => f(_, m(e, t), null);
+	}
+});
+//#endregion
+export { v as YAxis };

package/dist/es/cartesian/bar/Bar.mjs

@@ -0,0 +1,89 @@
+import { getValueByDataKey as e } from "../../utils/chart.mjs";
+import { useChartLayout as t } from "../../context/chartLayoutContext.mjs";
+import { Layer as n } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData as r } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList as i } from "../../components/label/LabelList.mjs";
+import { useSetupGraphicalItem as a } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef as o } from "../../context/graphicalLayerContext.mjs";
+import { BarVueProps as s } from "./type.mjs";
+import { useNeedsClip as c } from "../useNeedsClip.mjs";
+import { useBar as l } from "./hooks/useBar.mjs";
+import { GraphicalItemClipPath as u } from "../GraphicalItemClipPath.mjs";
+import { BarBackground as d } from "./components/BarBackground.mjs";
+import { BarRectangles as f } from "./components/BarRectangles.mjs";
+import { createErrorBarRegistry as p, provideErrorBarContext as m, provideErrorBarRegistry as h } from "../error-bar/ErrorBarContext.mjs";
+import { Cell as g } from "../../components/Cell.mjs";
+import { Fragment as _, Teleport as v, computed as y, createVNode as b, defineComponent as x, isVNode as S, mergeProps as C } from "vue";
+//#region src/cartesian/bar/Bar.tsx
+function w(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !S(e);
+}
+var T = (t, n) => {
+	let r = Array.isArray(t.value) ? t.value[1] : t.value;
+	return {
+		x: t.x,
+		y: t.y,
+		value: r,
+		errorVal: e(t.payload ?? t, n)
+	};
+}, E = /* @__PURE__ */ x({
+	name: "Bar",
+	props: s,
+	inheritAttrs: !1,
+	slots: Object,
+	setup(e, { attrs: s, slots: x }) {
+		let S = p();
+		h(S), a(e, "bar", { errorBars: S.errorBars });
+		let { shouldRender: E, clipPathId: D, barData: O, isAnimating: k, cellProps: A } = l(e, x.shape, x.activeBar), { needClip: j } = c(e.xAxisId, e.yAxisId), M = t(), N = y(() => {
+			let e = O.value?.[0];
+			return e == null || e.height == null || e.width == null ? 0 : M.value === "vertical" ? e.height / 2 : e.width / 2;
+		});
+		m({
+			data: O,
+			xAxisId: e.xAxisId ?? "xAxis-0",
+			yAxisId: e.yAxisId ?? "yAxis-0",
+			dataPointFormatter: T,
+			errorBarOffset: N
+		}), r(y(() => {
+			if (!(k.value || !O.value)) return O.value.map((t, n) => {
+				let r = A.value?.[n]?.fill ?? t.payload?.fill ?? e.fill;
+				return {
+					x: t.x,
+					y: t.y,
+					width: t.width,
+					height: t.height,
+					value: t.value,
+					payload: t.payload,
+					parentViewBox: t.parentViewBox,
+					...r == null ? {} : { fill: r }
+				};
+			});
+		}));
+		let P = o(null), F = (e) => {
+			let t = [];
+			for (let n of e) n.type === g ? t.push(n.props ?? {}) : n.type === _ && Array.isArray(n.children) && t.push(...F(n.children));
+			return t;
+		}, I = (e) => e.filter((e) => !(e.type === g || e.type === _ && Array.isArray(e.children) && e.children.some((e) => e.type === g)));
+		return () => {
+			if (!E.value) return null;
+			let t = x.default?.() ?? [], r = F(t);
+			A.value = r;
+			let a = r.length > 0 ? I(t) : t, o = b(n, { class: ["v-charts-bar", s.class] }, { default: () => [
+				j.value && b("defs", null, [b(u, {
+					clipPathId: D,
+					xAxisId: e.xAxisId,
+					yAxisId: e.yAxisId
+				}, null)]),
+				b(n, {
+					class: "v-charts-bar-rectangles",
+					"clip-path": j.value ? `url(#clipPath-${D})` : null
+				}, { default: () => [e.background && b(d, null, null), b(f, null, null)] }),
+				!k.value && e.label && b(i, C(typeof e.label == "object" ? e.label : {}, { data: O.value }), null),
+				a
+			] });
+			return P?.value ? b(v, { to: P.value }, w(o) ? o : { default: () => [o] }) : o;
+		};
+	}
+});
+//#endregion
+export { E as Bar };

package/dist/es/cartesian/bar/components/BarBackground.mjs

@@ -0,0 +1,29 @@
+import { Layer as e } from "../../../container/Layer.mjs";
+import { useBarContext as t } from "../hooks/useBar.mjs";
+import { Rectangle as n } from "../../../shape/Rectangle.mjs";
+import { Fragment as r, createVNode as i, defineComponent as a } from "vue";
+//#region src/cartesian/bar/components/BarBackground.tsx
+var o = /* @__PURE__ */ a({
+	name: "BarBackground",
+	inheritAttrs: !1,
+	setup(a, { attrs: o }) {
+		let { props: s, data: c } = t();
+		return () => {
+			let t = c.value, a = s.background;
+			return !a || !t ? null : i(r, null, [t.map((t, r) => {
+				let { value: o, background: s, tooltipPosition: c, ...l } = t;
+				if (!s) return null;
+				let u = typeof a == "object" ? a : {}, d = {
+					option: a,
+					...l,
+					fill: "#eee",
+					...s,
+					...u
+				};
+				return i(e, { key: `background-bar-${r}` }, { default: () => [i(n, d, null)] });
+			})]);
+		};
+	}
+});
+//#endregion
+export { o as BarBackground };

package/dist/es/cartesian/bar/components/BarRectangles.mjs

@@ -0,0 +1,106 @@
+import { mouseLeaveItem as e, setActiveClickItemIndex as t, setActiveMouseOverItemIndex as n } from "../../../state/tooltipSlice.mjs";
+import { selectActiveTooltipDataKey as r, selectActiveTooltipIndex as i } from "../../../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch as a, useAppSelector as o } from "../../../state/hooks.mjs";
+import { filterProps as s } from "../../../utils/VueUtils.mjs";
+import { Layer as c } from "../../../container/Layer.mjs";
+import { Animate as l } from "../../../animation/Animate.mjs";
+import { useBarContext as u } from "../hooks/useBar.mjs";
+import { Rectangle as d } from "../../../shape/Rectangle.mjs";
+import { Fragment as f, createVNode as p, defineComponent as m, isVNode as h } from "vue";
+//#region src/cartesian/bar/components/BarRectangles.tsx
+function g(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !h(e);
+}
+var _ = /* @__PURE__ */ m({
+	name: "BarRectangles",
+	inheritAttrs: !1,
+	setup(m) {
+		let h = a(), _ = o(i), v = o(r), y = null, b = 0, { props: x, data: S, layout: C, isAnimating: w, shapeSlot: T, activeBarSlot: E, cellProps: D } = u(), { dataKey: O, isAnimationActive: k, onAnimationStart: A, onAnimationEnd: j, activeBar: M, activeIndex: N } = x, P = (e, t) => (r) => {
+			h(n({
+				activeDataKey: O,
+				activeIndex: String(t),
+				activeCoordinate: {
+					x: e.tooltipPosition.x,
+					y: e.tooltipPosition.y
+				}
+			}));
+		}, F = (t, n) => (t) => {
+			h(e());
+		}, I = (e, n) => (r) => {
+			h(t({
+				activeDataKey: O,
+				activeIndex: String(n),
+				activeCoordinate: {
+					x: e.tooltipPosition.x,
+					y: e.tooltipPosition.y
+				}
+			}));
+		}, L = s(x, !1), R = (e, t) => (n) => e + (t - e) * n, z = (e) => e ? p(f, null, [e.map((e, t) => {
+			let n, r = M !== !1 || N != null || !!E, i = N == null ? r && String(t) === _.value && (v.value == null || O === v.value) : r && t === N, a = i && typeof M == "object" ? M : {}, o = e.payload?.fill, s = D.value?.[t], l = {
+				...L,
+				...o ? { fill: o } : {},
+				...e,
+				...s ?? {},
+				...i ? a : {},
+				isActive: i,
+				index: t,
+				dataKey: O
+			};
+			return p(c, {
+				key: `rectangle-${e?.x}-${e?.y}-${e?.value}-${t}`,
+				class: "v-charts-bar-rectangle",
+				onMouseenter: P(e, t),
+				onMouseleave: F(e, t),
+				onClick: I(e, t)
+			}, g(n = i && E ? E(l) : T ? T(l) : p(d, l, null)) ? n : { default: () => [n] });
+		})]) : null;
+		return () => {
+			let e = S.value;
+			if (!e) return null;
+			if (k && y !== e) {
+				let t = y;
+				return b++, w.value = !0, p(l, {
+					key: b,
+					transition: x.transition,
+					isActive: k,
+					onAnimationStart: A,
+					onAnimationEnd: () => {
+						w.value = !1, j?.();
+					}
+				}, { default: (n) => {
+					let r = n === 1 ? e : e.map((e, r) => {
+						let i = t?.[r];
+						if (i && i.stackedBarStart === e.stackedBarStart) {
+							let t = R(i.x || 0, e.x || 0), r = R(i.y || 0, e.y || 0), a = R(i.width, e.width), o = R(i.height, e.height);
+							return {
+								...e,
+								x: t(n),
+								y: r(n),
+								width: a(n),
+								height: o(n)
+							};
+						}
+						if (C.value === "horizontal") {
+							let t = R(0, e.height)(n), r = R(e.stackedBarStart, e.y)(n);
+							return {
+								...e,
+								y: r,
+								height: t
+							};
+						}
+						let a = R(0, e.width)(n), o = R(e.stackedBarStart, e.x)(n);
+						return {
+							...e,
+							width: a,
+							x: o
+						};
+					});
+					return n > 0 && (y = r), p("g", null, [z(r)]);
+				} });
+			}
+			return w.value = !1, y = e, p("g", null, [z(e)]);
+		};
+	}
+});
+//#endregion
+export { _ as BarRectangles };

package/dist/es/cartesian/bar/hooks/useBar.mjs

@@ -0,0 +1,41 @@
+import { uniqueId as e } from "../../../utils/data-utils.mjs";
+import { useIsPanorama as t } from "../../../context/PanoramaContextProvider.mjs";
+import { getNormalizedStackId as n } from "../../../utils/chart.mjs";
+import { useAppSelector as r } from "../../../state/hooks.mjs";
+import { useChartLayout as i } from "../../../context/chartLayoutContext.mjs";
+import { useNeedsClip as a } from "../../useNeedsClip.mjs";
+import { selectBarRectangles as o } from "../../../state/selectors/barSelectors.mjs";
+import { computed as s, ref as c, shallowRef as l, useAttrs as u } from "vue";
+import { createContext as d } from "motion-v";
+//#region src/cartesian/bar/hooks/useBar.ts
+var [f, p] = d("BarContext");
+function m(d, f, m) {
+	let h = t(), g = u(), _ = i(), { needClip: v } = a(d.xAxisId, d.yAxisId), y = s(() => ({
+		barSize: d.barSize,
+		data: d.data,
+		dataKey: d.dataKey,
+		maxBarSize: d.maxBarSize,
+		minPointSize: d.minPointSize,
+		stackId: n(d.stackId)
+	})), b = r((e) => o(e, d.xAxisId, d.yAxisId, h, y.value)), x = s(() => (_.value === "vertical" || _.value === "horizontal") && !d.hide), S = e("v-charts-bar-"), C = c(!1), w = l([]);
+	return p({
+		clipPathId: S,
+		layout: _,
+		props: d,
+		attrs: g,
+		data: b,
+		isAnimating: C,
+		shapeSlot: f,
+		activeBarSlot: m,
+		cellProps: w
+	}), {
+		shouldRender: x,
+		needClip: v,
+		clipPathId: S,
+		barData: b,
+		isAnimating: C,
+		cellProps: w
+	};
+}
+//#endregion
+export { m as useBar, f as useBarContext };

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

@@ -0,0 +1,131 @@
+//#region src/cartesian/bar/type.ts
+var e = {
+	class: {
+		type: String,
+		default: void 0
+	},
+	barSize: { type: [String, Number] },
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: !0
+	},
+	fill: {
+		type: String,
+		default: void 0
+	},
+	stroke: {
+		type: String,
+		default: void 0
+	},
+	strokeWidth: {
+		type: Number,
+		default: 0
+	},
+	unit: {
+		type: [String, Number],
+		default: void 0
+	},
+	name: { type: [String, Number] },
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	legendType: {
+		type: String,
+		default: "rect"
+	},
+	minPointSize: {
+		type: [Number, Function],
+		default: 0
+	},
+	maxBarSize: { type: Number },
+	hide: {
+		type: Boolean,
+		default: !1
+	},
+	background: {
+		type: [Boolean, Object],
+		default: !1
+	},
+	radius: {
+		type: [Number, Array],
+		default: void 0
+	},
+	onAnimationStart: {
+		type: Function,
+		default: void 0
+	},
+	onAnimationEnd: {
+		type: Function,
+		default: void 0
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: !0
+	},
+	activeBar: {
+		type: [
+			Object,
+			Boolean,
+			Function
+		],
+		default: !1
+	},
+	activeIndex: {
+		type: Number,
+		default: void 0
+	},
+	id: {
+		type: String,
+		default: void 0
+	},
+	stackId: {
+		type: [String, Number],
+		default: void 0
+	},
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	animationBegin: {
+		type: Number,
+		default: 0
+	},
+	animationDuration: {
+		type: Number,
+		default: 1500
+	},
+	animationEasing: {
+		type: String,
+		default: "ease"
+	},
+	transition: {
+		type: Object,
+		default: {
+			duration: .4,
+			ease: "easeOut"
+		}
+	},
+	needClip: {
+		type: Boolean,
+		default: !1
+	},
+	label: {
+		type: [Boolean, Object],
+		default: !1
+	}
+};
+//#endregion
+export { e as BarVueProps };

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

@@ -0,0 +1,84 @@
+import { isNullish as e, isNumber as t } from "../../utils/validate.mjs";
+import { mathSign as n } from "../../utils/data.mjs";
+import { getBaseValueOfBar as r, getCateCoordinateOfBar as i, getValueByDataKey as a, truncateByDomain as o } from "../../utils/chart.mjs";
+import { toRaw as s } from "vue";
+import { isNaN as c } from "es-toolkit/compat";
+import { invariant as l } from "es-toolkit";
+//#region src/cartesian/bar/utils.ts
+function u(n, r = 0) {
+	return (i, a) => {
+		if (t(n)) return n;
+		let o = t(i) || e(i);
+		return o ? n(i, a) : (l(o, `minPointSize callback function received a value with type of ${typeof i}. Currently only numbers or null/undefined are supported.`), r);
+	};
+}
+var d = 0;
+function f({ layout: e, barSettings: { dataKey: t, minPointSize: l }, pos: f, bandSize: p, xAxis: m, yAxis: h, xAxisTicks: g, yAxisTicks: _, stackedData: v, displayedData: y, offset: b }) {
+	let x = {
+		x: b.left,
+		y: b.top,
+		width: b.width,
+		height: b.height
+	}, S = e === "horizontal" ? h : m, C = v ? S.scale.domain() : null, w = r({ numericAxis: S }), T = S.scale(w);
+	return y.map((r, y) => {
+		let S = s(r), E, D, O, k, A, j;
+		v ? E = o(v[y], C) : (E = a(S, t), Array.isArray(E) || (E = [w, E]));
+		let M = u(l, d)(E[1], y);
+		if (e === "horizontal") {
+			let [e, t] = [h.scale(E[0]), h.scale(E[1])];
+			D = i({
+				axis: m,
+				ticks: g,
+				bandSize: p,
+				offset: f.offset,
+				entry: S,
+				index: y
+			}), O = t ?? e ?? void 0, k = f.size;
+			let r = e - t;
+			if (A = c(r) ? 0 : r, j = {
+				x: D,
+				y: b.top,
+				width: k,
+				height: b.height
+			}, Math.abs(M) > 0 && Math.abs(A) < Math.abs(M)) {
+				let e = n(A || M) * (Math.abs(M) - Math.abs(A));
+				O -= e, A += e;
+			}
+		} else {
+			let [e, t] = [m.scale(E[0]), m.scale(E[1])];
+			if (D = e, O = i({
+				axis: h,
+				ticks: _,
+				bandSize: p,
+				offset: f.offset,
+				entry: S,
+				index: y
+			}), k = t - e, A = f.size, j = {
+				x: b.left,
+				y: O,
+				width: b.width,
+				height: A
+			}, Math.abs(M) > 0 && Math.abs(k) < Math.abs(M)) {
+				let e = n(k || M) * (Math.abs(M) - Math.abs(k));
+				k += e;
+			}
+		}
+		return {
+			x: D,
+			y: O,
+			width: k,
+			height: A,
+			stackedBarStart: T ?? 0,
+			value: v ? E : E[1],
+			payload: S,
+			background: j,
+			tooltipPosition: {
+				x: D + k / 2,
+				y: O + A / 2
+			},
+			parentViewBox: x
+		};
+	});
+}
+//#endregion
+export { f as computeBarRectangles };