vccs 0.1.0 → 0.2.0

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

@@ -1,10 +1,10 @@
-import { CurveVueProps as e } from "../../shape/Curve.mjs";
+import { CurveVueProps } from "../../shape/Curve.mjs";
 //#region src/cartesian/area/type.ts
-var t = {
-	...e,
+var AreaVueProps = {
+	...CurveVueProps,
 	activeDot: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	baseValue: {
 		type: [Number, String],
@@ -12,7 +12,7 @@ var t = {
 	},
 	connectNulls: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	data: {
 		type: Array,
@@ -24,11 +24,11 @@ var t = {
 			Number,
 			Function
 		],
-		required: !0
+		required: true
 	},
 	dot: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	fill: {
 		type: String,
@@ -45,11 +45,11 @@ var t = {
 	},
 	hide: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	label: {
 		type: [Boolean, Object],
@@ -76,7 +76,7 @@ var t = {
 	},
 	needClip: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	stackId: {
 		type: [String, Number],
@@ -133,4 +133,4 @@ var t = {
 	}
 };
 //#endregion
-export { t as AreaVueProps };
+export { AreaVueProps };

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

@@ -1,59 +1,79 @@
-import { isNumber as e } from "../../utils/validate.mjs";
-import { getCateCoordinateOfLine as t, getValueByDataKey as n } from "../../utils/chart.mjs";
+import { isNumber } from "../../utils/validate.mjs";
+import { getCateCoordinateOfLine, getValueByDataKey } 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);
+function getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis) {
+	const baseValue = itemBaseValue ?? chartBaseValue;
+	if (isNumber(baseValue)) return baseValue;
+	const numericAxis = layout === "horizontal" ? yAxis : xAxis;
+	const domain = numericAxis.scale.domain();
+	if (numericAxis.type === "number") {
+		const domainMax = Math.max(domain[0], domain[1]);
+		const domainMin = Math.min(domain[0], domain[1]);
+		if (baseValue === "dataMin") return domainMin;
+		if (baseValue === "dataMax") return domainMax;
+		return domainMax < 0 ? domainMax : Math.max(Math.min(domain[0], domain[1]), 0);
 	}
-	return o === "dataMin" ? c[0] : o === "dataMax" ? c[1] : c[0];
+	if (baseValue === "dataMin") return domain[0];
+	if (baseValue === "dataMax") return domain[1];
+	return domain[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
+function computeArea({ areaSettings: { connectNulls, baseValue: itemBaseValue, dataKey }, stackedData, layout, chartBaseValue, xAxis, yAxis, displayedData, dataStartIndex, xAxisTicks, yAxisTicks, bandSize }) {
+	const hasStack = stackedData && stackedData.length;
+	const baseValue = getBaseValue(layout, chartBaseValue, itemBaseValue, xAxis, yAxis);
+	const isHorizontalLayout = layout === "horizontal";
+	let isRange = false;
+	const points = displayedData.map((entry, index) => {
+		let value;
+		if (hasStack) value = stackedData[dataStartIndex + index];
+		else {
+			value = getValueByDataKey(entry, dataKey);
+			if (!Array.isArray(value)) value = [baseValue, value];
+			else isRange = true;
+		}
+		const isBreakPoint = value[1] == null || hasStack && !connectNulls && getValueByDataKey(entry, dataKey) == null;
+		if (isHorizontalLayout) return {
+			x: getCateCoordinateOfLine({
+				axis: xAxis,
+				ticks: xAxisTicks,
+				bandSize,
+				entry,
+				index
 			}),
-			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
+			y: isBreakPoint ? null : yAxis.scale(value[1]),
+			value,
+			payload: entry
+		};
+		return {
+			x: isBreakPoint ? null : xAxis.scale(value[1]),
+			y: getCateCoordinateOfLine({
+				axis: yAxis,
+				ticks: yAxisTicks,
+				bandSize,
+				entry,
+				index
 			}),
-			value: s,
-			payload: r
+			value,
+			payload: entry
+		};
+	});
+	let baseLine;
+	if (hasStack || isRange) baseLine = points.map((entry) => {
+		const x = Array.isArray(entry.value) ? entry.value[0] : null;
+		if (isHorizontalLayout) return {
+			x: entry.x,
+			y: x != null && entry.y != null ? yAxis.scale(x) : null
 		};
-	}), 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
+		return {
+			x: x != null ? xAxis.scale(x) : null,
+			y: entry.y
 		};
-	}) : v ? u.scale(_) : l.scale(_), {
-		points: b,
-		baseLine: x,
-		isRange: y
+	});
+	else baseLine = isHorizontalLayout ? yAxis.scale(baseValue) : xAxis.scale(baseValue);
+	return {
+		points,
+		baseLine,
+		isRange
 	};
 }
 //#endregion
-export { i as computeArea };
+export { computeArea };

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

@@ -1,12 +1,15 @@
-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";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitXAxis, selectAxisScale, selectTicksOfAxis, selectXAxisPosition, selectXAxisSize } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { addXAxis, removeXAxis } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
 //#region src/cartesian/axis/XAxis.tsx
-var g = /* @__PURE__ */ p({
+/**
+* @fileOverview X Axis
+*/
+var XAxisImpl = /* @__PURE__ */ defineComponent({
 	props: {
 		xAxisId: {
 			type: [String, Number],
@@ -14,24 +17,32 @@ var g = /* @__PURE__ */ p({
 		},
 		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);
+	inheritAttrs: false,
+	setup(props, { attrs, slots }) {
+		const isPanorama = useIsPanorama();
+		const axisType = "xAxis";
+		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.xAxisId, isPanorama));
+		const axisSize = useAppSelector((state) => selectXAxisSize(state, props.xAxisId));
+		const position = useAppSelector((state) => selectXAxisPosition(state, props.xAxisId));
+		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.xAxisId, isPanorama));
+		const viewBox = useAppSelector(selectAxisViewBox);
 		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] });
+			const { ticks, ...allOtherProps } = props;
+			if (axisSize.value == null || position.value == null) return null;
+			return createVNode(CartesianAxis, mergeProps(allOtherProps, attrs, {
+				"viewBox": viewBox.value,
+				"scale": scale.value,
+				"x": position.value?.x,
+				"y": position.value?.y,
+				"width": axisSize.value?.width,
+				"height": axisSize.value?.height,
+				"ticks": cartesianTickItems.value,
+				"class": ["v-charts-xAxis xAxis", attrs.class]
+			}), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
 		};
 	}
-}), _ = /* @__PURE__ */ p({
+});
+var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	props: {
 		interval: [String, Number],
 		xAxisId: [String, Number],
@@ -61,94 +72,97 @@ var g = /* @__PURE__ */ p({
 		minTickGap: Number,
 		tick: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		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
+	setup(props, { slots: dispatcherSlots }) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				interval: props.interval ?? "preserveEnd",
+				id: props.xAxisId,
+				scale: props.scale,
+				type: props.type,
+				padding: props.padding,
+				allowDataOverflow: props.allowDataOverflow,
+				domain: props.domain,
+				dataKey: props.dataKey,
+				allowDuplicatedCategory: props.allowDuplicatedCategory,
+				allowDecimals: props.allowDecimals,
+				tickCount: props.tickCount,
+				includeHidden: props.includeHidden ?? false,
+				reversed: props.reversed,
+				ticks: props.ticks,
+				height: props.height,
+				orientation: props.orientation,
+				mirror: props.mirror,
+				hide: props.hide,
+				unit: props.unit,
+				name: props.name,
+				angle: props.angle ?? 0,
+				minTickGap: props.minTickGap ?? 5,
+				tick: props.tick ?? true,
+				tickFormatter: props.tickFormatter
 			};
-			n(l(r)), t(() => {
-				n(u(r));
+			dispatch(addXAxis(settings));
+			onCleanup(() => {
+				dispatch(removeXAxis(settings));
 			});
-		}), () => f(g, e, { default: () => [t.tick ? { tick: t.tick } : void 0] });
+		});
+		return () => createVNode(XAxisImpl, props, { default: () => [dispatcherSlots.tick ? { tick: dispatcherSlots.tick } : void 0] });
 	}
-}), v = /* @__PURE__ */ p({
+});
+var XAxis = /* @__PURE__ */ defineComponent({
 	name: "XAxis",
 	props: {
 		allowDataOverflow: {
 			type: Boolean,
-			default: n.allowDataOverflow
+			default: implicitXAxis.allowDataOverflow
 		},
 		allowDecimals: {
 			type: Boolean,
-			default: n.allowDecimals
+			default: implicitXAxis.allowDecimals
 		},
 		allowDuplicatedCategory: {
 			type: Boolean,
-			default: n.allowDuplicatedCategory
+			default: implicitXAxis.allowDuplicatedCategory
 		},
 		height: {
 			type: Number,
-			default: n.height
+			default: implicitXAxis.height
 		},
 		hide: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		mirror: {
 			type: Boolean,
-			default: n.mirror
+			default: implicitXAxis.mirror
 		},
 		orientation: {
 			type: String,
-			default: n.orientation
+			default: implicitXAxis.orientation
 		},
 		padding: {
 			type: Object,
-			default: n.padding
+			default: implicitXAxis.padding
 		},
 		reversed: {
 			type: Boolean,
-			default: n.reversed
+			default: implicitXAxis.reversed
 		},
 		scale: {
 			type: [String, Function],
-			default: n.scale
+			default: implicitXAxis.scale
 		},
 		tickCount: {
 			type: Number,
-			default: n.tickCount
+			default: implicitXAxis.tickCount
 		},
 		type: {
 			type: String,
-			default: n.type
+			default: implicitXAxis.type
 		},
 		xAxisId: {
 			type: [String, Number],
@@ -165,14 +179,14 @@ var g = /* @__PURE__ */ p({
 		domain: { type: Array },
 		axisLine: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		ticks: { type: Array },
 		interval: { type: [String, Number] },
 		unit: { type: String },
 		tickLine: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickMargin: Number,
 		minTickGap: {
@@ -181,9 +195,9 @@ var g = /* @__PURE__ */ p({
 		},
 		tickFormatter: Function
 	},
-	setup(e, { attrs: t, slots: n }) {
-		return () => f(_, m(e, t), { default: () => [n.tick ? { tick: n.tick } : void 0] });
+	setup(props, { attrs, slots }) {
+		return () => createVNode(XAxisSettingsDispatcher, mergeProps(props, attrs), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
 	}
 });
 //#endregion
-export { v as XAxis };
+export { XAxis };

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

@@ -1,34 +1,42 @@
-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";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
+import { implicitYAxis, selectAxisScale, selectTicksOfAxis, selectYAxisPosition, selectYAxisSize } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { addYAxis, removeYAxis } from "../../state/cartesianAxisSlice.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
 //#region src/cartesian/axis/YAxis.tsx
-var g = /* @__PURE__ */ p({
+var YAxisImpl = /* @__PURE__ */ defineComponent({
 	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);
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const isPanorama = useIsPanorama();
+		const axisType = "yAxis";
+		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.yAxisId, isPanorama));
+		const axisSize = useAppSelector((state) => selectYAxisSize(state, props.yAxisId));
+		const position = useAppSelector((state) => selectYAxisPosition(state, props.yAxisId));
+		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.yAxisId, isPanorama));
+		const viewBox = useAppSelector(selectAxisViewBox);
 		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]
+			const { ...allOtherProps } = props;
+			if (axisSize.value == null || position.value == null) return null;
+			return createVNode(CartesianAxis, mergeProps(allOtherProps, attrs, {
+				"viewBox": viewBox.value,
+				"scale": scale.value,
+				"x": position.value?.x,
+				"y": position.value?.y,
+				"width": axisSize.value?.width,
+				"height": axisSize.value?.height,
+				"ticks": cartesianTickItems.value,
+				"class": ["v-charts-yAxis yAxis", attrs.class]
 			}), null);
 		};
 	}
-}), _ = /* @__PURE__ */ p({
+});
+var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 	props: {
 		interval: [String, Number],
 		yAxisId: {
@@ -55,7 +63,7 @@ var g = /* @__PURE__ */ p({
 		minTickGap: Number,
 		tick: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickFormatter: Function,
 		domain: Array,
@@ -68,74 +76,77 @@ var g = /* @__PURE__ */ p({
 			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
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				...props,
+				interval: props.interval ?? "preserveEnd",
+				id: props.yAxisId,
+				dataKey: props.dataKey,
+				includeHidden: props.includeHidden ?? false,
+				angle: props.angle ?? 0,
+				minTickGap: props.minTickGap ?? 5,
+				tick: props.tick ?? true
 			};
-			t(l(r)), n(() => {
-				t(u(r));
+			dispatch(addYAxis(settings));
+			onCleanup(() => {
+				dispatch(removeYAxis(settings));
 			});
-		}), () => f(g, e, null);
+		});
+		return () => createVNode(YAxisImpl, props, null);
 	}
-}), v = /* @__PURE__ */ p({
+});
+var YAxis = /* @__PURE__ */ defineComponent({
 	name: "YAxis",
 	props: {
 		allowDataOverflow: {
 			type: Boolean,
-			default: n.allowDataOverflow
+			default: implicitYAxis.allowDataOverflow
 		},
 		allowDecimals: {
 			type: Boolean,
-			default: n.allowDecimals
+			default: implicitYAxis.allowDecimals
 		},
 		allowDuplicatedCategory: {
 			type: Boolean,
-			default: n.allowDuplicatedCategory
+			default: implicitYAxis.allowDuplicatedCategory
 		},
 		width: {
 			type: Number,
-			default: n.width
+			default: implicitYAxis.width
 		},
 		hide: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		mirror: {
 			type: Boolean,
-			default: n.mirror
+			default: implicitYAxis.mirror
 		},
 		orientation: {
 			type: String,
-			default: n.orientation
+			default: implicitYAxis.orientation
 		},
 		padding: {
 			type: Object,
-			default: n.padding
+			default: implicitYAxis.padding
 		},
 		reversed: {
 			type: Boolean,
-			default: n.reversed
+			default: implicitYAxis.reversed
 		},
 		scale: {
 			type: [String, Function],
-			default: n.scale
+			default: implicitYAxis.scale
 		},
 		tickCount: {
 			type: Number,
-			default: n.tickCount
+			default: implicitYAxis.tickCount
 		},
 		type: {
 			type: String,
-			default: n.type
+			default: implicitYAxis.type
 		},
 		yAxisId: { type: [String, Number] },
 		dataKey: {
@@ -161,11 +172,11 @@ var g = /* @__PURE__ */ p({
 		},
 		axisLine: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickLine: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		tickMargin: Number,
 		minTickGap: {
@@ -173,9 +184,9 @@ var g = /* @__PURE__ */ p({
 			default: 5
 		}
 	},
-	setup(e, { attrs: t }) {
-		return () => f(_, m(e, t), null);
+	setup(props, { attrs }) {
+		return () => createVNode(YAxisSettingsDispatcher, mergeProps(props, attrs), null);
 	}
 });
 //#endregion
-export { v as YAxis };
+export { YAxis };