vccs 0.1.0 → 0.3.0

package/dist/es/cartesian/cartesian-grid/CartesianGrid.mjs

@@ -1,45 +1,49 @@
-import { isNumber as e } from "../../utils/validate.mjs";
-import { warn as t } from "../../utils/log.mjs";
-import { useIsPanorama as n } from "../../context/PanoramaContextProvider.mjs";
-import { getTicksOfAxis as r } from "../../utils/chart.mjs";
-import { selectAxisPropsNeededForCartesianGridTicksGenerator as i } from "../../state/selectors/axisSelectors.mjs";
-import { useAppSelector as a } from "../../state/hooks.mjs";
-import { useChartHeight as o, useChartWidth as s, useOffset as c } from "../../context/chartLayoutContext.mjs";
-import { CartesianAxisDefaultProps as l } from "./const.mjs";
-import { getTicks as u } from "../utils/get-ticks.mjs";
-import { CartesianAxis as d } from "../cartesian-axis/CartesianAxis.mjs";
-import { resolveDefaultProps as f } from "../../utils/resolveDefaultProps.mjs";
-import { getCoordinatesOfGrid as p } from "../../utils/grid.mjs";
-import m from "./Background.mjs";
-import h from "./HorizontalStripes.mjs";
-import g from "./VerticalStripes.mjs";
-import _ from "./HorizontalGridLines.mjs";
-import v from "./VerticalGridLines.mjs";
-import { createVNode as y, defineComponent as b, mergeProps as x } from "vue";
+import { isNumber } from "../../utils/validate.mjs";
+import { warn } from "../../utils/log.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { getTicksOfAxis } from "../../utils/chart.mjs";
+import { selectAxisPropsNeededForCartesianGridTicksGenerator } from "../../state/selectors/axisSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { useChartHeight, useChartWidth, useOffset } from "../../context/chartLayoutContext.mjs";
+import { CartesianAxisDefaultProps } from "./const.mjs";
+import { getTicks } from "../utils/get-ticks.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { resolveDefaultProps } from "../../utils/resolveDefaultProps.mjs";
+import { getCoordinatesOfGrid } from "../../utils/grid.mjs";
+import Background from "./Background.mjs";
+import HorizontalStripes from "./HorizontalStripes.mjs";
+import VerticalStripes from "./VerticalStripes.mjs";
+import HorizontalGridLines from "./HorizontalGridLines.mjs";
+import VerticalGridLines from "./VerticalGridLines.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/cartesian/cartesian-grid/CartesianGrid.tsx
-var S = ({ yAxis: e, width: t, height: n, offset: i }, a) => p(u({
-	...l,
-	...e,
-	ticks: r(e, !0),
+var defaultHorizontalCoordinatesGenerator = ({ yAxis, width, height, offset }, syncWithTicks) => getCoordinatesOfGrid(getTicks({
+	...CartesianAxisDefaultProps,
+	...yAxis,
+	ticks: getTicksOfAxis(yAxis, true),
 	viewBox: {
 		x: 0,
 		y: 0,
-		width: t,
-		height: n
+		width,
+		height
 	}
-}), i.top, i.top + i.height, a), C = ({ xAxis: e, width: t, height: n, offset: i }, a) => p(u({
-	...d.defaultProps,
-	...e,
-	ticks: r(e, !0),
-	viewBox: {
-		x: 0,
-		y: 0,
-		width: t,
-		height: n
-	}
-}), i.left, i.left + i.width, a), w = {
-	horizontal: !0,
-	vertical: !0,
+}), offset.top, offset.top + offset.height, syncWithTicks);
+var defaultVerticalCoordinatesGenerator = ({ xAxis, width, height, offset }, syncWithTicks) => {
+	return getCoordinatesOfGrid(getTicks({
+		...CartesianAxis.defaultProps,
+		...xAxis,
+		ticks: getTicksOfAxis(xAxis, true),
+		viewBox: {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}
+	}), offset.left, offset.left + offset.width, syncWithTicks);
+};
+var defaultProps = {
+	horizontal: true,
+	vertical: true,
 	horizontalPoints: [],
 	verticalPoints: [],
 	stroke: "#ccc",
@@ -48,9 +52,10 @@ var S = ({ yAxis: e, width: t, height: n, offset: i }, a) => p(u({
 	horizontalFill: [],
 	xAxisId: 0,
 	yAxisId: 0
-}, T = /* @__PURE__ */ b({
+};
+var CartesianGrid = /* @__PURE__ */ defineComponent({
 	name: "CartesianGrid",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		xAxisId: {
 			type: [String, Number],
@@ -70,11 +75,11 @@ var S = ({ yAxis: e, width: t, height: n, offset: i }, a) => p(u({
 		},
 		horizontal: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		vertical: {
 			type: [Boolean, Object],
-			default: !0
+			default: true
 		},
 		horizontalPoints: Array,
 		verticalPoints: Array,
@@ -86,70 +91,84 @@ var S = ({ yAxis: e, width: t, height: n, offset: i }, a) => p(u({
 		verticalCoordinatesGenerator: Function,
 		horizontalCoordinatesGenerator: Function
 	},
-	setup(r, { attrs: l, slots: u }) {
-		let d = s(), p = o(), b = c(), T = n(), E = a((e) => i(e, "xAxis", r.xAxisId, T)), D = a((e) => i(e, "yAxis", r.yAxisId, T));
+	setup(props, { attrs, slots }) {
+		const chartWidth = useChartWidth();
+		const chartHeight = useChartHeight();
+		const offset = useOffset();
+		const isPanorama = useIsPanorama();
+		const xAxis = useAppSelector((state) => selectAxisPropsNeededForCartesianGridTicksGenerator(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxis = useAppSelector((state) => selectAxisPropsNeededForCartesianGridTicksGenerator(state, "yAxis", props.yAxisId, isPanorama));
 		return () => {
-			let n = {
-				...f({
-					...r,
-					...l
-				}, w),
-				x: e(r.x) ? r.x : b.value.left,
-				y: e(r.y) ? r.y : b.value.top,
-				width: e(r.width) ? r.width : b.value.width,
-				height: e(r.height) ? r.height : b.value.height
-			}, { x: i, y: a, width: o, height: s, syncWithTicks: c, horizontalValues: T, verticalValues: O } = n, k = n.verticalCoordinatesGenerator || C, A = n.horizontalCoordinatesGenerator || S, { horizontalPoints: j, verticalPoints: M } = n;
-			if ((!j || !j.length) && typeof A == "function") {
-				let e = T && T.length, n = A({
-					yAxis: D.value ? {
-						...D.value,
-						ticks: e ? T : D.value?.ticks
+			const propsIncludingDefaults = {
+				...resolveDefaultProps({
+					...props,
+					...attrs
+				}, defaultProps),
+				x: isNumber(props.x) ? props.x : offset.value.left,
+				y: isNumber(props.y) ? props.y : offset.value.top,
+				width: isNumber(props.width) ? props.width : offset.value.width,
+				height: isNumber(props.height) ? props.height : offset.value.height
+			};
+			const { x, y, width, height, syncWithTicks, horizontalValues, verticalValues } = propsIncludingDefaults;
+			const verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
+			const horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator;
+			let { horizontalPoints, verticalPoints } = propsIncludingDefaults;
+			if ((!horizontalPoints || !horizontalPoints.length) && typeof horizontalCoordinatesGenerator === "function") {
+				const isHorizontalValues = horizontalValues && horizontalValues.length;
+				const generatorResult = horizontalCoordinatesGenerator({
+					yAxis: yAxis.value ? {
+						...yAxis.value,
+						ticks: isHorizontalValues ? horizontalValues : yAxis.value?.ticks
 					} : void 0,
-					width: d.value,
-					height: p.value,
-					offset: b.value
-				}, e ? !0 : c);
-				t(Array.isArray(n), `horizontalCoordinatesGenerator should return Array but instead it returned [${typeof n}]`), Array.isArray(n) && (j = n);
+					width: chartWidth.value,
+					height: chartHeight.value,
+					offset: offset.value
+				}, isHorizontalValues ? true : syncWithTicks);
+				warn(Array.isArray(generatorResult), `horizontalCoordinatesGenerator should return Array but instead it returned [${typeof generatorResult}]`);
+				if (Array.isArray(generatorResult)) horizontalPoints = generatorResult;
 			}
-			if ((!M || !M.length) && typeof k == "function") {
-				let e = O && O.length, n = k({
-					xAxis: E.value ? {
-						...E.value,
-						ticks: e ? O : E.value?.ticks
+			if ((!verticalPoints || !verticalPoints.length) && typeof verticalCoordinatesGenerator === "function") {
+				const isVerticalValues = verticalValues && verticalValues.length;
+				const generatorResult = verticalCoordinatesGenerator({
+					xAxis: xAxis.value ? {
+						...xAxis.value,
+						ticks: isVerticalValues ? verticalValues : xAxis.value?.ticks
 					} : void 0,
-					width: d.value,
-					height: p.value,
-					offset: b.value
-				}, e ? !0 : c);
-				t(Array.isArray(n), `verticalCoordinatesGenerator should return Array but instead it returned [${typeof n}]`), Array.isArray(n) && (M = n);
+					width: chartWidth.value,
+					height: chartHeight.value,
+					offset: offset.value
+				}, isVerticalValues ? true : syncWithTicks);
+				warn(Array.isArray(generatorResult), `verticalCoordinatesGenerator should return Array but instead it returned [${typeof generatorResult}]`);
+				if (Array.isArray(generatorResult)) verticalPoints = generatorResult;
 			}
-			return !e(o) || o <= 0 || !e(s) || s <= 0 || !e(i) || i !== +i || !e(a) || a !== +a ? null : y("g", { class: "v-charts-cartesian-grid" }, [
-				y(m, {
-					fill: n.fill,
-					fillOpacity: n.fillOpacity,
-					x: n.x,
-					y: n.y,
-					width: n.width,
-					height: n.height,
-					ry: n.ry
+			if (!isNumber(width) || width <= 0 || !isNumber(height) || height <= 0 || !isNumber(x) || x !== +x || !isNumber(y) || y !== +y) return null;
+			return createVNode("g", { "class": "v-charts-cartesian-grid" }, [
+				createVNode(Background, {
+					"fill": propsIncludingDefaults.fill,
+					"fillOpacity": propsIncludingDefaults.fillOpacity,
+					"x": propsIncludingDefaults.x,
+					"y": propsIncludingDefaults.y,
+					"width": propsIncludingDefaults.width,
+					"height": propsIncludingDefaults.height,
+					"ry": propsIncludingDefaults.ry
 				}, null),
-				y(h, x(n, { horizontalPoints: j }), null),
-				y(g, x(n, { verticalPoints: M }), null),
-				y(_, x(n, {
-					offset: b.value,
-					horizontalPoints: j,
-					xAxis: E.value,
-					yAxis: D.value
-				}), { default: () => [u.horizontal ? { horizontal: u.horizontal } : void 0] }),
-				y(v, x(n, {
-					offset: b,
-					verticalPoints: M,
-					xAxis: E,
-					yAxis: D
-				}), { default: () => [u.vertical ? { vertical: u.vertical } : void 0] })
+				createVNode(HorizontalStripes, mergeProps(propsIncludingDefaults, { "horizontalPoints": horizontalPoints }), null),
+				createVNode(VerticalStripes, mergeProps(propsIncludingDefaults, { "verticalPoints": verticalPoints }), null),
+				createVNode(HorizontalGridLines, mergeProps(propsIncludingDefaults, {
+					"offset": offset.value,
+					"horizontalPoints": horizontalPoints,
+					"xAxis": xAxis.value,
+					"yAxis": yAxis.value
+				}), { default: () => [slots.horizontal ? { horizontal: slots.horizontal } : void 0] }),
+				createVNode(VerticalGridLines, mergeProps(propsIncludingDefaults, {
+					"offset": offset,
+					"verticalPoints": verticalPoints,
+					"xAxis": xAxis,
+					"yAxis": yAxis
+				}), { default: () => [slots.vertical ? { vertical: slots.vertical } : void 0] })
 			]);
 		};
 	}
 });
 //#endregion
-export { T as CartesianGrid };
+export { CartesianGrid };

package/dist/es/cartesian/cartesian-grid/HorizontalGridLines.mjs

@@ -1,9 +1,9 @@
-import { renderLineItem as e } from "./utils.mjs";
-import { createVNode as t, defineComponent as n } from "vue";
+import { renderLineItem } from "./utils.mjs";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/HorizontalGridLines.tsx
-var r = /* @__PURE__ */ n({
+var HorizontalGridLines = /* @__PURE__ */ defineComponent({
 	name: "HorizontalGridLines",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		x: Number,
 		width: Number,
@@ -21,29 +21,30 @@ var r = /* @__PURE__ */ n({
 		xAxis: Object,
 		yAxis: Object
 	},
-	setup(n, { attrs: r, slots: i }) {
+	setup(props, { attrs, slots }) {
 		return () => {
-			let { x: a, width: o, horizontal: s = !0, horizontalPoints: c } = n;
-			if (!s || !c || !c.length) return null;
-			let { xAxisId: l, yAxisId: u, ...d } = {
-				...n,
-				...r
+			const { x, width, horizontal = true, horizontalPoints } = props;
+			if (!horizontal || !horizontalPoints || !horizontalPoints.length) return null;
+			const { xAxisId, yAxisId, ...otherLineItemProps } = {
+				...props,
+				...attrs
 			};
-			return t("g", { class: "v-charts-cartesian-grid-horizontal" }, [c.map((t, n) => {
-				let c = {
-					...d,
-					...r,
-					x1: a,
-					y1: t,
-					x2: a + o,
-					y2: t,
-					key: `line-${n}`,
-					index: n
+			const items = horizontalPoints.map((entry, i) => {
+				const lineItemProps = {
+					...otherLineItemProps,
+					...attrs,
+					x1: x,
+					y1: entry,
+					x2: x + width,
+					y2: entry,
+					key: `line-${i}`,
+					index: i
 				};
-				return e(i.horizontal, s, c);
-			})]);
+				return renderLineItem(slots.horizontal, horizontal, lineItemProps);
+			});
+			return createVNode("g", { "class": "v-charts-cartesian-grid-horizontal" }, [items]);
 		};
 	}
 });
 //#endregion
-export { r as default };
+export { HorizontalGridLines as default };

package/dist/es/cartesian/cartesian-grid/HorizontalStripes.mjs

@@ -1,8 +1,8 @@
-import { createVNode as e, defineComponent as t } from "vue";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/HorizontalStripes.tsx
-var n = /* @__PURE__ */ t({
+var HorizontalStripes = /* @__PURE__ */ defineComponent({
 	name: "HorizontalStripes",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		horizontalFill: Array,
 		fillOpacity: Number,
@@ -13,31 +13,31 @@ var n = /* @__PURE__ */ t({
 		horizontalPoints: Array,
 		horizontal: [Boolean, Object]
 	},
-	setup(t) {
+	setup(props) {
 		return () => {
-			let { horizontalFill: n, fillOpacity: r, x: i, y: a, width: o, height: s, horizontalPoints: c, horizontal: l = !0 } = t;
-			if (!l || !n || !n.length) return null;
-			let u = c?.map((e) => Math.round(e + a - a)).sort((e, t) => e - t);
-			a !== u?.[0] && u?.unshift(0);
-			let d = u?.map((t, c) => {
-				let l = u[c + 1] ? u[c + 1] - t : a + s - t;
-				if (l <= 0) return null;
-				let d = c % n.length;
-				return e("rect", {
-					key: `react-${c}`,
-					y: t,
-					x: i,
-					height: l,
-					width: o,
-					stroke: "none",
-					fill: n[d],
-					"fill-opacity": r,
-					class: "v-charts-cartesian-grid-bg"
+			const { horizontalFill, fillOpacity, x, y, width, height, horizontalPoints, horizontal = true } = props;
+			if (!horizontal || !horizontalFill || !horizontalFill.length) return null;
+			const roundedSortedHorizontalPoints = horizontalPoints?.map((e) => Math.round(e + y - y)).sort((a, b) => a - b);
+			if (y !== roundedSortedHorizontalPoints?.[0]) roundedSortedHorizontalPoints?.unshift(0);
+			const items = roundedSortedHorizontalPoints?.map((entry, i) => {
+				const lineHeight = !roundedSortedHorizontalPoints[i + 1] ? y + height - entry : roundedSortedHorizontalPoints[i + 1] - entry;
+				if (lineHeight <= 0) return null;
+				const colorIndex = i % horizontalFill.length;
+				return createVNode("rect", {
+					"key": `react-${i}`,
+					"y": entry,
+					"x": x,
+					"height": lineHeight,
+					"width": width,
+					"stroke": "none",
+					"fill": horizontalFill[colorIndex],
+					"fill-opacity": fillOpacity,
+					"class": "v-charts-cartesian-grid-bg"
 				}, null);
 			});
-			return e("g", { class: "v-charts-cartesian-gridstripes-horizontal" }, [d]);
+			return createVNode("g", { "class": "v-charts-cartesian-gridstripes-horizontal" }, [items]);
 		};
 	}
 });
 //#endregion
-export { n as default };
+export { HorizontalStripes as default };

package/dist/es/cartesian/cartesian-grid/VerticalGridLines.mjs

@@ -1,9 +1,9 @@
-import { renderLineItem as e } from "./utils.mjs";
-import { createVNode as t, defineComponent as n } from "vue";
+import { renderLineItem } from "./utils.mjs";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/VerticalGridLines.tsx
-var r = /* @__PURE__ */ n({
+var VerticalGridLines = /* @__PURE__ */ defineComponent({
 	name: "VerticalGridLines",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		x: Number,
 		y: Number,
@@ -17,28 +17,29 @@ var r = /* @__PURE__ */ n({
 		yAxis: Object,
 		vertical: [Boolean, Object]
 	},
-	setup(n, { attrs: r, slots: i }) {
+	setup(props, { attrs, slots }) {
 		return () => {
-			let { y: a, height: o, vertical: s = !0, verticalPoints: c } = n;
-			if (!s || !c || !c.length) return null;
-			let { xAxisId: l, yAxisId: u, ...d } = {
-				...n,
-				...r
+			const { y, height, vertical = true, verticalPoints } = props;
+			if (!vertical || !verticalPoints || !verticalPoints.length) return null;
+			const { xAxisId, yAxisId, ...otherLineItemProps } = {
+				...props,
+				...attrs
 			};
-			return t("g", { class: "v-charts-cartesian-grid-vertical" }, [c.map((t, n) => {
-				let r = {
-					...d,
-					x1: t,
-					y1: a,
-					x2: t,
-					y2: a + o,
-					key: `line-${n}`,
-					index: n
+			const items = verticalPoints.map((entry, i) => {
+				const lineItemProps = {
+					...otherLineItemProps,
+					x1: entry,
+					y1: y,
+					x2: entry,
+					y2: y + height,
+					key: `line-${i}`,
+					index: i
 				};
-				return e(i.vertical, s, r);
-			})]);
+				return renderLineItem(slots.vertical, vertical, lineItemProps);
+			});
+			return createVNode("g", { "class": "v-charts-cartesian-grid-vertical" }, [items]);
 		};
 	}
 });
 //#endregion
-export { r as default };
+export { VerticalGridLines as default };

package/dist/es/cartesian/cartesian-grid/VerticalStripes.mjs

@@ -1,8 +1,8 @@
-import { createVNode as e, defineComponent as t } from "vue";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/VerticalStripes.tsx
-var n = /* @__PURE__ */ t({
+var VerticalStripes = /* @__PURE__ */ defineComponent({
 	name: "VerticalStripes",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		verticalFill: Array,
 		fillOpacity: Number,
@@ -13,31 +13,31 @@ var n = /* @__PURE__ */ t({
 		verticalPoints: Array,
 		vertical: [Boolean, Object]
 	},
-	setup(t) {
+	setup(props) {
 		return () => {
-			let { verticalFill: n, fillOpacity: r, x: i, y: a, width: o, height: s, verticalPoints: c, vertical: l = !0 } = t;
-			if (!l || !n || !n.length) return null;
-			let u = c?.map((e) => Math.round(e + i - i)).sort((e, t) => e - t);
-			i !== u?.[0] && u?.unshift(0);
-			let d = u?.map((t, c) => {
-				let l = u[c + 1] ? u[c + 1] - t : i + o - t;
-				if (l <= 0) return null;
-				let d = c % n.length;
-				return e("rect", {
-					key: `react-${c}`,
-					x: t,
-					y: a,
-					width: l,
-					height: s,
-					stroke: "none",
-					fill: n[d],
-					"fill-opacity": r,
-					class: "v-charts-cartesian-grid-bg"
+			const { verticalFill, fillOpacity, x, y, width, height, verticalPoints, vertical = true } = props;
+			if (!vertical || !verticalFill || !verticalFill.length) return null;
+			const roundedSortedVerticalPoints = verticalPoints?.map((e) => Math.round(e + x - x)).sort((a, b) => a - b);
+			if (x !== roundedSortedVerticalPoints?.[0]) roundedSortedVerticalPoints?.unshift(0);
+			const items = roundedSortedVerticalPoints?.map((entry, i) => {
+				const lineWidth = !roundedSortedVerticalPoints[i + 1] ? x + width - entry : roundedSortedVerticalPoints[i + 1] - entry;
+				if (lineWidth <= 0) return null;
+				const colorIndex = i % verticalFill.length;
+				return createVNode("rect", {
+					"key": `react-${i}`,
+					"x": entry,
+					"y": y,
+					"width": lineWidth,
+					"height": height,
+					"stroke": "none",
+					"fill": verticalFill[colorIndex],
+					"fill-opacity": fillOpacity,
+					"class": "v-charts-cartesian-grid-bg"
 				}, null);
 			});
-			return e("g", { class: "v-charts-cartesian-gridstripes-vertical" }, [d]);
+			return createVNode("g", { "class": "v-charts-cartesian-gridstripes-vertical" }, [items]);
 		};
 	}
 });
 //#endregion
-export { n as default };
+export { VerticalStripes as default };