vccs 0.0.1 → 0.1.0

package/dist/es/cartesian/area/RenderArea.mjs

@@ -0,0 +1,151 @@
+import { isNan as e, isNullish as t, isNumber as n } from "../../utils/validate.mjs";
+import { interpolate as r } from "../../utils/data-utils.mjs";
+import { Curve as i } from "../../shape/Curve.mjs";
+import { isClipDot as a } from "../../utils/chart.mjs";
+import { useOffset as o } from "../../context/chartLayoutContext.mjs";
+import { useAreaContext as s } from "./hooks/useArea.mjs";
+import { Layer as c } from "../../container/Layer.mjs";
+import { Dot as l } from "../../shape/Dot.mjs";
+import { LabelList as u } from "../../components/label/LabelList.mjs";
+import { Fragment as d, createVNode as f, defineComponent as p, mergeProps as m, ref as h, watch as g } from "vue";
+import { animate as _ } from "motion-v";
+//#region src/cartesian/area/RenderArea.tsx
+var v = /* @__PURE__ */ p({
+	name: "Dots",
+	props: { points: {
+		type: Array,
+		default: () => []
+	} },
+	setup(e) {
+		let { clipPathId: t, props: n, attrs: r, dotSlot: i } = s();
+		return () => {
+			let { points: o } = e;
+			if (!b(o, n.dot)) return null;
+			let s = a(n.dot), u = {
+				fill: n.fill,
+				"fill-opacity": n.fillOpacity,
+				"stroke-width": n.strokeWidth,
+				stroke: n.stroke
+			};
+			return f(c, {
+				class: "v-charts-area-dots",
+				"clip-path": n.needClip ? `url(#clipPath-${s ? "" : "dots-"}${t.value})` : void 0
+			}, { default: () => [o?.map((e) => {
+				let t = {
+					...u,
+					...r,
+					r: 3,
+					cx: e.x,
+					cy: e.y,
+					class: "v-charts-area-dot",
+					clipDot: s
+				};
+				return i ? i(t) : f(l, t, null);
+			})] });
+		};
+	}
+}), y = /* @__PURE__ */ p({
+	name: "StaticArea",
+	setup() {
+		let { points: a, clipPathId: l, layout: p, attrs: y, areaData: b, props: x, isAnimating: S, isClipRectAnimating: C } = s(), w = o(), T = h(a.value || []), E = h(b.value?.baseLine || []), D = T.value || [], O = b.value?.baseLine || [], k = !1;
+		return g(a, (i, a, o) => {
+			if (C.value) {
+				T.value = i, E.value = b.value?.baseLine || [];
+				return;
+			}
+			if (i && i.length > 0) {
+				k = !1, S.value = !0;
+				let a = _(0, 1, {
+					...x.transition,
+					onUpdate(a) {
+						if (!k && D.length) {
+							let o = D.length / i.length, s = a === 1 ? i : i.map((e, t) => {
+								let n = Math.floor(t * o);
+								if (D[n]) {
+									let t = D[n];
+									return {
+										...e,
+										x: r(t.x, e.x, a),
+										y: r(t.y, e.y, a)
+									};
+								}
+								return e;
+							}), c;
+							c = n(b.value?.baseLine) ? r(O, b.value?.baseLine, a) : t(b.value?.baseLine) || e(b.value?.baseLine) ? r(O, 0, a) : b?.value.baseLine.map((e, t) => {
+								let n = Math.floor(t * o);
+								if (Array.isArray(O) && O[n]) {
+									let t = O[n];
+									return {
+										...e,
+										x: r(t.x, e.x, a),
+										y: r(t.y, e.y, a)
+									};
+								}
+								return e;
+							}), T.value = s, E.value = c;
+						}
+					},
+					onPlay() {
+						x.onAnimationStart?.();
+					},
+					onComplete() {
+						S.value = !1, x.onAnimationEnd?.();
+					}
+				});
+				o(() => {
+					k = !0, a.stop(), D = T.value, O = E.value;
+				});
+			} else S.value = !1, T.value = i || [], E.value = b.value?.baseLine || [], D = T.value, O = E.value;
+		}, { immediate: !0 }), () => {
+			let e = {
+				...y,
+				fill: x.fill,
+				"fill-opacity": x.fillOpacity,
+				height: w.value.height,
+				width: w.value.width,
+				"stroke-width": x.strokeWidth
+			}, t = b.value?.isRange, n = !S.value && x.label, r = typeof x.label == "object" ? x.label : {};
+			return f(d, null, [
+				T.value && T.value.length > 1 && f(c, { "clip-path": x.needClip ? `url(#clipPath-${l.value})` : void 0 }, { default: () => [
+					f(i, m(e, {
+						points: T.value,
+						connectNulls: x.connectNulls,
+						type: x.type,
+						layout: p.value,
+						baseLine: E.value,
+						stroke: "none",
+						class: "v-charts-area-area"
+					}), null),
+					y.stroke !== "none" && f(i, m(e, {
+						layout: p.value,
+						type: x.type,
+						connectNulls: x.connectNulls,
+						fill: "none",
+						points: T.value,
+						stroke: x.stroke,
+						class: "v-charts-area-curve"
+					}), null),
+					y.stroke !== "none" && t && f(i, m(e, {
+						class: "v-charts-area-curve",
+						layout: p.value,
+						type: x.type,
+						connectNulls: x.connectNulls,
+						fill: "none",
+						points: E.value,
+						stroke: x.stroke
+					}), null)
+				] }),
+				f(v, { points: T.value }, null),
+				n && f(u, m(r, {
+					data: b.value?.points ?? [],
+					dataKey: x.dataKey
+				}), null)
+			]);
+		};
+	}
+});
+function b(e, t) {
+	return e == null || !e.length ? !1 : t ? !0 : e.length === 1;
+}
+//#endregion
+export { y as StaticArea };

package/dist/es/cartesian/area/hooks/useArea.mjs

@@ -0,0 +1,57 @@
+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 { selectArea as o } from "../../../state/selectors/areaSelectors.mjs";
+import { filterProps as s } from "../../../utils/VueUtils.mjs";
+import { computed as c, inject as l, provide as u, ref as d, watch as f } from "vue";
+//#region src/cartesian/area/hooks/useArea.ts
+var p = Symbol("AreaContext");
+function m(e) {
+	u(p, e);
+}
+function h() {
+	let e = l(p);
+	if (!e) throw Error("useAreaContext must be used within Area component");
+	return e;
+}
+function g(l, u = {}, p) {
+	let h = i(), g = a(), _ = e("v-charts-area-"), v = c(() => l.id || _), y = t(), b = d(l.isAnimationActive), x = c(() => (h.value === "horizontal" || h.value === "vertical") && (g.value === "AreaChart" || g.value === "ComposedChart") && !l.hide), S = c(() => ({
+		baseValue: l.baseValue,
+		stackId: l.stackId,
+		connectNulls: l.connectNulls,
+		data: l.data,
+		dataKey: l.dataKey
+	})), C = r((e) => o(e, l.xAxisId, l.yAxisId, y, S.value)), w = d(!0);
+	f(() => l.hide, (e) => {
+		e || (w.value = !0);
+	});
+	let T = c(() => l.isAnimationActive && C.value?.points?.length && w.value), E = l.dot, D = n(E), { r: O = 3, strokeWidth: k = 2 } = s(E, !1) ?? {
+		r: 3,
+		strokeWidth: 2
+	}, A = O * 2 + k, j = {
+		clipPathId: v,
+		layout: h,
+		points: c(() => C.value?.points),
+		props: l,
+		attrs: u,
+		dot: E,
+		clipDot: D,
+		dotSize: A,
+		dotSlot: p,
+		areaData: C,
+		isAnimating: b,
+		isClipRectAnimating: w
+	};
+	return m(j), {
+		shouldRender: x,
+		areaData: C,
+		points: j.points,
+		clipPathId: v,
+		shouldShowAnimation: T
+	};
+}
+//#endregion
+export { g as useArea, h as useAreaContext };

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

@@ -0,0 +1,136 @@
+import { CurveVueProps as e } from "../../shape/Curve.mjs";
+//#region src/cartesian/area/type.ts
+var t = {
+	...e,
+	activeDot: {
+		type: Boolean,
+		default: !0
+	},
+	baseValue: {
+		type: [Number, String],
+		default: void 0
+	},
+	connectNulls: {
+		type: Boolean,
+		default: !1
+	},
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: !0
+	},
+	dot: {
+		type: Boolean,
+		default: !1
+	},
+	fill: {
+		type: String,
+		default: "#3182bd"
+	},
+	fillOpacity: {
+		type: Number,
+		default: .6
+	},
+	strokeWidth: { type: Number },
+	stroke: {
+		type: String,
+		default: "#3182bd"
+	},
+	hide: {
+		type: Boolean,
+		default: !1
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: !0
+	},
+	label: {
+		type: [Boolean, Object],
+		default: void 0
+	},
+	legendType: {
+		type: String,
+		default: "line"
+	},
+	onAnimationEnd: {
+		type: Function,
+		default: void 0
+	},
+	onAnimationStart: {
+		type: Function,
+		default: void 0
+	},
+	transition: {
+		type: Object,
+		default: {
+			duration: .8,
+			ease: "easeOut"
+		}
+	},
+	needClip: {
+		type: Boolean,
+		default: !1
+	},
+	stackId: {
+		type: [String, Number],
+		default: void 0
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	unit: {
+		type: [String, Number],
+		default: void 0
+	},
+	xAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	yAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	activeIndex: {
+		type: Number,
+		default: void 0
+	},
+	activePoint: {
+		type: Object,
+		default: void 0
+	},
+	id: {
+		type: String,
+		default: void 0
+	},
+	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,
+		default: void 0
+	}
+};
+//#endregion
+export { t as AreaVueProps };

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

@@ -0,0 +1,59 @@
+import { isNumber as e } from "../../utils/validate.mjs";
+import { getCateCoordinateOfLine as t, getValueByDataKey as n } from "../../utils/chart.mjs";
+//#region src/cartesian/area/utils.ts
+function r(t, n, r, i, a) {
+	let o = r ?? n;
+	if (e(o)) return o;
+	let s = t === "horizontal" ? a : i, c = s.scale.domain();
+	if (s.type === "number") {
+		let e = Math.max(c[0], c[1]), t = Math.min(c[0], c[1]);
+		return o === "dataMin" ? t : o === "dataMax" || e < 0 ? e : Math.max(Math.min(c[0], c[1]), 0);
+	}
+	return o === "dataMin" ? c[0] : o === "dataMax" ? c[1] : c[0];
+}
+function i({ areaSettings: { connectNulls: e, baseValue: i, dataKey: a }, stackedData: o, layout: s, chartBaseValue: c, xAxis: l, yAxis: u, displayedData: d, dataStartIndex: f, xAxisTicks: p, yAxisTicks: m, bandSize: h }) {
+	let g = o && o.length, _ = r(s, c, i, l, u), v = s === "horizontal", y = !1, b = d.map((r, i) => {
+		let s;
+		g ? s = o[f + i] : (s = n(r, a), Array.isArray(s) ? y = !0 : s = [_, s]);
+		let c = s[1] == null || g && !e && n(r, a) == null;
+		return v ? {
+			x: t({
+				axis: l,
+				ticks: p,
+				bandSize: h,
+				entry: r,
+				index: i
+			}),
+			y: c ? null : u.scale(s[1]),
+			value: s,
+			payload: r
+		} : {
+			x: c ? null : l.scale(s[1]),
+			y: t({
+				axis: u,
+				ticks: m,
+				bandSize: h,
+				entry: r,
+				index: i
+			}),
+			value: s,
+			payload: r
+		};
+	}), x;
+	return x = g || y ? b.map((e) => {
+		let t = Array.isArray(e.value) ? e.value[0] : null;
+		return v ? {
+			x: e.x,
+			y: t != null && e.y != null ? u.scale(t) : null
+		} : {
+			x: t == null ? null : l.scale(t),
+			y: e.y
+		};
+	}) : v ? u.scale(_) : l.scale(_), {
+		points: b,
+		baseLine: x,
+		isRange: y
+	};
+}
+//#endregion
+export { i as computeArea };

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

@@ -0,0 +1,189 @@
+import { useIsPanorama as e } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox as t } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitXAxis as n, selectAxisScale as r, selectTicksOfAxis as i, selectXAxisPosition as a, selectXAxisSize as o } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch as s, useAppSelector as c } from "../../state/hooks.mjs";
+import { addXAxis as l, removeXAxis 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/XAxis.tsx
+var g = /* @__PURE__ */ p({
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		ticks: Array
+	},
+	inheritAttrs: !1,
+	setup(n, { attrs: s, slots: l }) {
+		let u = e(), p = "xAxis", h = c((e) => r(e, p, n.xAxisId, u)), g = c((e) => o(e, n.xAxisId)), _ = c((e) => a(e, n.xAxisId)), v = c((e) => i(e, p, n.xAxisId, u)), y = c(t);
+		return () => {
+			let { ticks: e, ...t } = n;
+			return g.value == null || _.value == null ? null : f(d, m(t, s, {
+				viewBox: y.value,
+				scale: h.value,
+				x: _.value?.x,
+				y: _.value?.y,
+				width: g.value?.width,
+				height: g.value?.height,
+				ticks: v.value,
+				class: ["v-charts-xAxis xAxis", s.class]
+			}), { default: () => [l.tick ? { tick: l.tick } : void 0] });
+		};
+	}
+}), _ = /* @__PURE__ */ p({
+	props: {
+		interval: [String, Number],
+		xAxisId: [String, Number],
+		scale: [String, Function],
+		type: String,
+		padding: Object,
+		allowDataOverflow: Boolean,
+		domain: { type: Array },
+		dataKey: { type: [
+			String,
+			Number,
+			Function
+		] },
+		allowDuplicatedCategory: Boolean,
+		allowDecimals: Boolean,
+		tickCount: Number,
+		includeHidden: Boolean,
+		reversed: Boolean,
+		ticks: Array,
+		height: Number,
+		orientation: String,
+		mirror: Boolean,
+		hide: Boolean,
+		unit: String,
+		name: String,
+		angle: Number,
+		minTickGap: Number,
+		tick: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		tickFormatter: Function
+	},
+	setup(e, { slots: t }) {
+		let n = s();
+		return h((t) => {
+			let r = {
+				interval: e.interval ?? "preserveEnd",
+				id: e.xAxisId,
+				scale: e.scale,
+				type: e.type,
+				padding: e.padding,
+				allowDataOverflow: e.allowDataOverflow,
+				domain: e.domain,
+				dataKey: e.dataKey,
+				allowDuplicatedCategory: e.allowDuplicatedCategory,
+				allowDecimals: e.allowDecimals,
+				tickCount: e.tickCount,
+				includeHidden: e.includeHidden ?? !1,
+				reversed: e.reversed,
+				ticks: e.ticks,
+				height: e.height,
+				orientation: e.orientation,
+				mirror: e.mirror,
+				hide: e.hide,
+				unit: e.unit,
+				name: e.name,
+				angle: e.angle ?? 0,
+				minTickGap: e.minTickGap ?? 5,
+				tick: e.tick ?? !0,
+				tickFormatter: e.tickFormatter
+			};
+			n(l(r)), t(() => {
+				n(u(r));
+			});
+		}), () => f(g, e, { default: () => [t.tick ? { tick: t.tick } : void 0] });
+	}
+}), v = /* @__PURE__ */ p({
+	name: "XAxis",
+	props: {
+		allowDataOverflow: {
+			type: Boolean,
+			default: n.allowDataOverflow
+		},
+		allowDecimals: {
+			type: Boolean,
+			default: n.allowDecimals
+		},
+		allowDuplicatedCategory: {
+			type: Boolean,
+			default: n.allowDuplicatedCategory
+		},
+		height: {
+			type: Number,
+			default: n.height
+		},
+		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
+		},
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		domain: { type: Array },
+		axisLine: {
+			type: Boolean,
+			default: !0
+		},
+		ticks: { type: Array },
+		interval: { type: [String, Number] },
+		unit: { type: String },
+		tickLine: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		tickMargin: Number,
+		minTickGap: {
+			type: Number,
+			default: 5
+		},
+		tickFormatter: Function
+	},
+	setup(e, { attrs: t, slots: n }) {
+		return () => f(_, m(e, t), { default: () => [n.tick ? { tick: n.tick } : void 0] });
+	}
+});
+//#endregion
+export { v as XAxis };