vccs 0.1.0 → 0.2.0

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

@@ -1,29 +1,29 @@
-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";
+import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { Rectangle } from "../../shape/Rectangle.mjs";
+import { addArea, removeArea } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } 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 scaleValue(scale, value, position) {
+	const coord = scale(value);
+	if (!isWellBehavedNumber(coord)) return void 0;
+	const bandwidth = scale.bandwidth?.() ?? 0;
+	return position === "start" ? coord : coord + bandwidth;
 }
-function b(e) {
-	let t = e.range();
-	return Math.min(t[0], t[1]);
+function rangeMin(scale) {
+	const r = scale.range();
+	return Math.min(r[0], r[1]);
 }
-function x(e) {
-	let t = e.range();
-	return Math.max(t[0], t[1]);
+function rangeMax(scale) {
+	const r = scale.range();
+	return Math.max(r[0], r[1]);
 }
-var S = /* @__PURE__ */ m({
+var ReferenceArea = /* @__PURE__ */ defineComponent({
 	name: "ReferenceArea",
 	props: {
 		x1: {
@@ -88,59 +88,76 @@ var S = /* @__PURE__ */ m({
 			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
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const dispatch = useAppDispatch();
+		const isPanorama = useIsPanorama();
+		const clipPathId = useClipPathId();
+		const settings = reactive({
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			ifOverflow: props.ifOverflow,
+			x1: props.x1,
+			x2: props.x2,
+			y1: props.y1,
+			y2: props.y2
 		});
-		g(() => {
-			S(l(T));
-		}), _(() => {
-			S(u(T));
+		onMounted(() => {
+			dispatch(addArea(settings));
 		});
-		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)
+		onUnmounted(() => {
+			dispatch(removeArea(settings));
+		});
+		const xAxisScale = useAppSelector((state) => selectAxisScale(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxisScale = useAppSelector((state) => selectAxisScale(state, "yAxis", props.yAxisId, isPanorama));
+		const rect = computed(() => {
+			const xScale = xAxisScale.value;
+			const yScale = yAxisScale.value;
+			if (!xScale || !yScale) return null;
+			const hasX1 = isNumOrStr(props.x1);
+			const hasX2 = isNumOrStr(props.x2);
+			const hasY1 = isNumOrStr(props.y1);
+			const hasY2 = isNumOrStr(props.y2);
+			if (!hasX1 && !hasX2 && !hasY1 && !hasY2) return null;
+			const px1 = hasX1 ? scaleValue(xScale, props.x1, "start") : rangeMin(xScale);
+			const px2 = hasX2 ? scaleValue(xScale, props.x2, "end") : rangeMax(xScale);
+			const py1 = hasY1 ? scaleValue(yScale, props.y1, "start") : rangeMin(yScale);
+			const py2 = hasY2 ? scaleValue(yScale, props.y2, "end") : rangeMax(yScale);
+			if (px1 == null || px2 == null || py1 == null || py2 == null) return null;
+			return {
+				x: Math.min(px1, px2),
+				y: Math.min(py1, py2),
+				width: Math.abs(px2 - px1),
+				height: Math.abs(py2 - py1)
 			};
 		});
 		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)] });
+			const r = rect.value;
+			if (!r) return null;
+			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
+			const svgAttrs = {
+				...attrs,
+				"stroke": props.stroke,
+				"stroke-width": props.strokeWidth,
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity
+			};
+			const labelValue = props.label;
+			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
+			return createVNode(Layer, { "class": ["v-charts-reference-area", props.className] }, { default: () => [createVNode(Rectangle, mergeProps(svgAttrs, {
+				"clip-path": clipPath,
+				"x": r.x,
+				"y": r.y,
+				"width": r.width,
+				"height": r.height,
+				"radius": props.radius,
+				"class": "v-charts-reference-area-rect"
+			}), null), labelValue != null && labelValue !== false && createVNode(Label, mergeProps({
+				"viewBox": r,
+				"value": typeof labelValue === "string" || typeof labelValue === "number" ? labelValue : void 0
+			}, labelProps), null)] });
 		};
 	}
 });
 //#endregion
-export { S as ReferenceArea };
+export { ReferenceArea };

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

@@ -1,23 +1,26 @@
-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";
+import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale, selectXAxisSettings, selectYAxisSettings } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useViewBox } from "../../context/chartLayoutContext.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { addLine, removeLine } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } 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 scaleCoord(scale, value) {
+	const coord = scale(value);
+	if (!isWellBehavedNumber(coord)) return;
+	return coord + (scale.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;
+function isInRange(scale, coord) {
+	const r = scale.range();
+	const min = Math.min(r[0], r[1]);
+	const max = Math.max(r[0], r[1]);
+	return coord >= min && coord <= max;
 }
-var C = /* @__PURE__ */ g({
+var ReferenceLine = /* @__PURE__ */ defineComponent({
 	name: "ReferenceLine",
 	props: {
 		x: {
@@ -66,78 +69,97 @@ var C = /* @__PURE__ */ g({
 			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
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const dispatch = useAppDispatch();
+		const isPanorama = useIsPanorama();
+		const clipPathId = useClipPathId();
+		const viewBox = useViewBox();
+		const settings = reactive({
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			ifOverflow: props.ifOverflow,
+			x: props.x,
+			y: props.y
 		});
-		v(() => {
-			w(d(O));
-		}), y(() => {
-			w(f(O));
+		onMounted(() => {
+			dispatch(addLine(settings));
 		});
-		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
+		onUnmounted(() => {
+			dispatch(removeLine(settings));
+		});
+		const xAxisSettings = useAppSelector((state) => selectXAxisSettings(state, props.xAxisId));
+		const yAxisSettings = useAppSelector((state) => selectYAxisSettings(state, props.yAxisId));
+		const xAxisScale = useAppSelector((state) => selectAxisScale(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxisScale = useAppSelector((state) => selectAxisScale(state, "yAxis", props.yAxisId, isPanorama));
+		const endPoints = computed(() => {
+			const vb = viewBox.value;
+			const xScale = xAxisScale.value;
+			const yScale = yAxisScale.value;
+			if (!vb || !xScale || !yScale) return null;
+			if (isNumOrStr(props.y)) {
+				const coord = scaleCoord(yScale, props.y);
+				if (coord == null) return null;
+				if (props.ifOverflow === "discard" && !isInRange(yScale, coord)) return null;
+				const yOrientation = yAxisSettings.value?.orientation;
+				const points = [{
+					x: vb.x + vb.width,
+					y: coord
 				}, {
-					x: t.x,
-					y: e
+					x: vb.x,
+					y: coord
 				}];
-				return n === "left" ? i.reverse() : i;
+				return yOrientation === "left" ? points.reverse() : points;
 			}
-			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
+			if (isNumOrStr(props.x)) {
+				const coord = scaleCoord(xScale, props.x);
+				if (coord == null) return null;
+				if (props.ifOverflow === "discard" && !isInRange(xScale, coord)) return null;
+				const xOrientation = xAxisSettings.value?.orientation;
+				const points = [{
+					x: coord,
+					y: vb.y + vb.height
 				}, {
-					x: e,
-					y: t.y
+					x: coord,
+					y: vb.y
 				}];
-				return r === "top" ? i.reverse() : i;
+				return xOrientation === "top" ? points.reverse() : points;
 			}
 			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)] });
+			const pts = endPoints.value;
+			if (!pts || pts.length < 2) return null;
+			const [p1, p2] = pts;
+			if (!isWellBehavedNumber(p1.x) || !isWellBehavedNumber(p1.y) || !isWellBehavedNumber(p2.x) || !isWellBehavedNumber(p2.y)) return null;
+			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
+			const svgAttrs = {
+				...attrs,
+				stroke: props.stroke,
+				"stroke-width": props.strokeWidth,
+				fill: props.fill
+			};
+			const labelViewBox = {
+				x: Math.min(p1.x, p2.x),
+				y: Math.min(p1.y, p2.y),
+				width: Math.abs(p2.x - p1.x),
+				height: Math.abs(p2.y - p1.y)
+			};
+			const labelValue = props.label;
+			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
+			return createVNode(Layer, { "class": ["v-charts-reference-line", props.className] }, { default: () => [createVNode("line", mergeProps(svgAttrs, {
+				"clip-path": clipPath,
+				"x1": p1.x,
+				"y1": p1.y,
+				"x2": p2.x,
+				"y2": p2.y,
+				"class": "v-charts-reference-line-line"
+			}), null), labelValue != null && labelValue !== false && createVNode(Label, mergeProps({
+				"viewBox": labelViewBox,
+				"value": typeof labelValue === "string" || typeof labelValue === "number" ? labelValue : void 0
+			}, labelProps), null)] });
 		};
 	}
 });
 //#endregion
-export { C as ReferenceLine };
+export { ReferenceLine };