vccs 0.1.0 → 0.2.0

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

@@ -1,84 +1,111 @@
-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";
+import { isNullish, isNumber } from "../../utils/validate.mjs";
+import { mathSign } from "../../utils/data.mjs";
+import { getBaseValueOfBar, getCateCoordinateOfBar, getValueByDataKey, truncateByDomain } from "../../utils/chart.mjs";
+import { toRaw } from "vue";
+import { isNaN } from "es-toolkit/compat";
+import { invariant } 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);
+/**
+* Safely gets minPointSize from the minPointSize prop if it is a function
+* @param minPointSize minPointSize as passed to the Bar component
+* @param defaultValue default minPointSize
+* @returns minPointSize
+*/
+function minPointSizeCallback(minPointSize, defaultValue = 0) {
+	return (value, index) => {
+		if (isNumber(minPointSize)) return minPointSize;
+		const isValueNumberOrNil = isNumber(value) || isNullish(value);
+		if (isValueNumberOrNil) return minPointSize(value, index);
+		invariant(isValueNumberOrNil, `minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`);
+		return defaultValue;
 	};
 }
-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;
+var defaultMinPointSize = 0;
+function computeBarRectangles({ layout, barSettings: { dataKey, minPointSize: minPointSizeProp }, pos, bandSize, xAxis, yAxis, xAxisTicks, yAxisTicks, stackedData, displayedData, offset }) {
+	const parentViewBox = {
+		x: offset.left,
+		y: offset.top,
+		width: offset.width,
+		height: offset.height
+	};
+	const numericAxis = layout === "horizontal" ? yAxis : xAxis;
+	const stackedDomain = stackedData ? numericAxis.scale.domain() : null;
+	const baseValue = getBaseValueOfBar({ numericAxis });
+	const stackedBarStart = numericAxis.scale(baseValue);
+	return displayedData.map((rawEntry, index) => {
+		const entry = toRaw(rawEntry);
+		let value, x, y, width, height, background;
+		if (stackedData) value = truncateByDomain(stackedData[index], stackedDomain);
+		else {
+			value = getValueByDataKey(entry, dataKey);
+			if (!Array.isArray(value)) value = [baseValue, value];
+		}
+		const minPointSize = minPointSizeCallback(minPointSizeProp, defaultMinPointSize)(value[1], index);
+		if (layout === "horizontal") {
+			const [baseValueScale, currentValueScale] = [yAxis.scale(value[0]), yAxis.scale(value[1])];
+			x = getCateCoordinateOfBar({
+				axis: xAxis,
+				ticks: xAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			y = currentValueScale ?? baseValueScale ?? void 0;
+			width = pos.size;
+			const computedHeight = baseValueScale - currentValueScale;
+			height = isNaN(computedHeight) ? 0 : computedHeight;
+			background = {
+				x,
+				y: offset.top,
+				width,
+				height: offset.height
+			};
+			if (Math.abs(minPointSize) > 0 && Math.abs(height) < Math.abs(minPointSize)) {
+				const delta = mathSign(height || minPointSize) * (Math.abs(minPointSize) - Math.abs(height));
+				y -= delta;
+				height += delta;
 			}
 		} 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;
+			const [baseValueScale, currentValueScale] = [xAxis.scale(value[0]), xAxis.scale(value[1])];
+			x = baseValueScale;
+			y = getCateCoordinateOfBar({
+				axis: yAxis,
+				ticks: yAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			width = currentValueScale - baseValueScale;
+			height = pos.size;
+			background = {
+				x: offset.left,
+				y,
+				width: offset.width,
+				height
+			};
+			if (Math.abs(minPointSize) > 0 && Math.abs(width) < Math.abs(minPointSize)) {
+				const delta = mathSign(width || minPointSize) * (Math.abs(minPointSize) - Math.abs(width));
+				width += delta;
 			}
 		}
 		return {
-			x: D,
-			y: O,
-			width: k,
-			height: A,
-			stackedBarStart: T ?? 0,
-			value: v ? E : E[1],
-			payload: S,
-			background: j,
+			x,
+			y,
+			width,
+			height,
+			stackedBarStart: stackedBarStart ?? 0,
+			value: stackedData ? value : value[1],
+			payload: entry,
+			background,
 			tooltipPosition: {
-				x: D + k / 2,
-				y: O + A / 2
+				x: x + width / 2,
+				y: y + height / 2
 			},
-			parentViewBox: x
+			parentViewBox
 		};
 	});
 }
 //#endregion
-export { f as computeBarRectangles };
+export { computeBarRectangles };

package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs

@@ -1,13 +1,19 @@
-import { isNumber as e } from "../../utils/validate.mjs";
-import { filterProps as t } from "../../utils/VueUtils.mjs";
-import { Layer as n } from "../../container/Layer.mjs";
-import r from "../../components/Text.mjs";
-import { Label as i } from "../../components/label/Label.mjs";
-import { getTicks as a } from "../utils/get-ticks.mjs";
-import { createVNode as o, defineComponent as s, mergeProps as c, reactive as l } from "vue";
-import { get as u } from "es-toolkit/compat";
+import { isNumber } from "../../utils/validate.mjs";
+import { filterProps } from "../../utils/VueUtils.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import Text_default from "../../components/Text.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { getTicks } from "../utils/get-ticks.mjs";
+import { createVNode, defineComponent, mergeProps, reactive } from "vue";
+import { get } from "es-toolkit/compat";
 //#region src/cartesian/cartesian-axis/CartesianAxis.tsx
-var d = /* @__PURE__ */ s({
+/**
+* @fileOverview Cartesian Axis
+*/
+/** The orientation of the axis in correspondence to the chart */
+/** A unit to be appended to a value */
+/** The formatter function of tick */
+var CartesianAxis = /* @__PURE__ */ defineComponent({
 	name: "CartesianAxis",
 	props: {
 		x: {
@@ -42,19 +48,19 @@ var d = /* @__PURE__ */ s({
 		},
 		tick: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		axisLine: {
 			type: [Boolean, Object],
-			default: () => !0
+			default: () => true
 		},
 		tickLine: {
 			type: [Boolean, Object],
-			default: () => !0
+			default: () => true
 		},
 		mirror: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		tickMargin: {
 			type: Number,
@@ -86,161 +92,205 @@ var d = /* @__PURE__ */ s({
 			default: "#666"
 		}
 	},
-	inheritAttrs: !1,
-	setup(s, { attrs: d, slots: f }) {
-		let p = l({
+	inheritAttrs: false,
+	setup(props, { attrs, slots }) {
+		const state = reactive({
 			fontSize: "",
 			letterSpacing: ""
-		}), m = (t) => {
-			let { x: n, y: r, width: i, height: a, orientation: o, tickSize: c, mirror: l, tickMargin: u } = s, d, f, p, m, h, g, _ = l ? -1 : 1, v = t.tickSize || c, y = e(t.tickCoord) ? t.tickCoord : t.coordinate;
-			switch (o) {
+		});
+		const getTickLineCoord = (data) => {
+			const { x, y, width, height, orientation, tickSize, mirror, tickMargin } = props;
+			let x1, x2, y1, y2, tx, ty;
+			const sign = mirror ? -1 : 1;
+			const finalTickSize = data.tickSize || tickSize;
+			const tickCoord = isNumber(data.tickCoord) ? data.tickCoord : data.coordinate;
+			switch (orientation) {
 				case "top":
-					d = f = t.coordinate, m = r + +!l * a, p = m - _ * v, g = p - _ * u, h = y;
+					x1 = x2 = data.coordinate;
+					y2 = y + +!mirror * height;
+					y1 = y2 - sign * finalTickSize;
+					ty = y1 - sign * tickMargin;
+					tx = tickCoord;
 					break;
 				case "left":
-					p = m = t.coordinate, f = n + +!l * i, d = f - _ * v, h = d - _ * u, g = y;
+					y1 = y2 = data.coordinate;
+					x2 = x + +!mirror * width;
+					x1 = x2 - sign * finalTickSize;
+					tx = x1 - sign * tickMargin;
+					ty = tickCoord;
 					break;
 				case "right":
-					p = m = t.coordinate, f = n + +l * i, d = f + _ * v, h = d + _ * u, g = y;
+					y1 = y2 = data.coordinate;
+					x2 = x + +mirror * width;
+					x1 = x2 + sign * finalTickSize;
+					tx = x1 + sign * tickMargin;
+					ty = tickCoord;
 					break;
 				default:
-					d = f = t.coordinate, m = r + +l * a, p = m + _ * v, g = p + _ * u, h = y;
+					x1 = x2 = data.coordinate;
+					y2 = y + +mirror * height;
+					y1 = y2 + sign * finalTickSize;
+					ty = y1 + sign * tickMargin;
+					tx = tickCoord;
 					break;
 			}
 			return {
 				line: {
-					x1: d,
-					y1: p,
-					x2: f,
-					y2: m
+					x1,
+					y1,
+					x2,
+					y2
 				},
 				tick: {
-					x: h,
-					y: g
+					x: tx,
+					y: ty
 				}
 			};
-		}, h = () => {
-			let { orientation: e, mirror: t } = s, n;
-			switch (e) {
+		};
+		const getTickTextAnchor = () => {
+			const { orientation, mirror } = props;
+			let textAnchor;
+			switch (orientation) {
 				case "left":
-					n = t ? "start" : "end";
+					textAnchor = mirror ? "start" : "end";
 					break;
 				case "right":
-					n = t ? "end" : "start";
+					textAnchor = mirror ? "end" : "start";
 					break;
 				default:
-					n = "middle";
+					textAnchor = "middle";
 					break;
 			}
-			return n;
-		}, g = () => {
-			let { orientation: e, mirror: t } = s;
-			switch (e) {
+			return textAnchor;
+		};
+		const getTickVerticalAnchor = () => {
+			const { orientation, mirror } = props;
+			switch (orientation) {
 				case "left":
 				case "right": return "middle";
-				case "top": return t ? "start" : "end";
-				default: return t ? "end" : "start";
+				case "top": return mirror ? "start" : "end";
+				default: return mirror ? "end" : "start";
 			}
-		}, _ = () => {
-			let { x: e, y: n, width: r, height: i, orientation: a, mirror: l, axisLine: d } = s, f = {
-				...t(s, !1),
-				...t(d, !1),
+		};
+		const renderAxisLine = () => {
+			const { x, y, width, height, orientation, mirror, axisLine } = props;
+			let lineProps = {
+				...filterProps(props, false),
+				...filterProps(axisLine, false),
 				fill: "none",
 				x1: 0,
 				y1: 0,
 				x2: 0,
 				y2: 0
 			};
-			if (a === "top" || a === "bottom") {
-				let t = +(a === "top" && !l || a === "bottom" && l);
-				f = {
-					...f,
-					x1: e,
-					y1: n + t * i,
-					x2: e + r,
-					y2: n + t * i
+			if (orientation === "top" || orientation === "bottom") {
+				const needHeight = +(orientation === "top" && !mirror || orientation === "bottom" && mirror);
+				lineProps = {
+					...lineProps,
+					x1: x,
+					y1: y + needHeight * height,
+					x2: x + width,
+					y2: y + needHeight * height
 				};
 			} else {
-				let t = +(a === "left" && !l || a === "right" && l);
-				f = {
-					...f,
-					x1: e + t * r,
-					y1: n,
-					x2: e + t * r,
-					y2: n + i
+				const needWidth = +(orientation === "left" && !mirror || orientation === "right" && mirror);
+				lineProps = {
+					...lineProps,
+					x1: x + needWidth * width,
+					y1: y,
+					x2: x + needWidth * width,
+					y2: y + height
 				};
 			}
-			return o("line", c(f, { class: ["v-charts-cartesian-axis-line", u(d, "class")] }), null);
+			return createVNode("line", mergeProps(lineProps, { "class": ["v-charts-cartesian-axis-line", get(axisLine, "class")] }), null);
 		};
-		function v(e, t) {
-			return o(r, c(e, {
-				class: ["v-charts-cartesian-axis-tick-value", e.class],
-				value: t
+		function renderTickItem(props, value) {
+			const className = ["v-charts-cartesian-axis-tick-value", props.class];
+			return createVNode(Text_default, mergeProps(props, {
+				"class": className,
+				"value": value
 			}), null);
 		}
-		let y = (e, r, i) => {
-			let { tickLine: s, stroke: l, tick: d, tickFormatter: p, unit: _ } = e, y = a(e, r, i), b = h(), x = g(), S = t(e, !1), C = t(d, !1), w = {
-				...S,
+		const renderTicks = (props, fontSize, letterSpacing) => {
+			const { tickLine, stroke, tick, tickFormatter, unit } = props;
+			const finalTicks = getTicks(props, fontSize, letterSpacing);
+			const textAnchor = getTickTextAnchor();
+			const verticalAnchor = getTickVerticalAnchor();
+			const axisProps = filterProps(props, false);
+			const customTickProps = filterProps(tick, false);
+			const tickLineProps = {
+				...axisProps,
 				fill: "none",
-				...t(s, !1)
-			}, T = y.map((e, t) => {
-				let { line: r, tick: i } = m(e), a = {
-					textAnchor: b,
-					verticalAnchor: x,
-					...S,
+				...filterProps(tickLine, false)
+			};
+			const items = finalTicks.map((entry, i) => {
+				const { line: lineCoord, tick: tickCoord } = getTickLineCoord(entry);
+				const tickProps = {
+					textAnchor,
+					verticalAnchor,
+					...axisProps,
 					stroke: "none",
-					fill: l,
-					...C,
-					...i,
-					index: t,
-					payload: e,
-					visibleTicksCount: y.length,
-					tickFormatter: p
+					fill: stroke,
+					...customTickProps,
+					...tickCoord,
+					index: i,
+					payload: entry,
+					visibleTicksCount: finalTicks.length,
+					tickFormatter
 				};
-				return o(n, {
-					class: "v-charts-cartesian-axis-tick",
-					key: `tick-${e.value}-${e.coordinate}-${e.tickCoord}`
-				}, { default: () => [s && o("line", c(w, r, { class: ["v-charts-cartesian-axis-tick-line", u(s, "class")] }), null), d && (f.tick ? f.tick({
-					...a,
-					value: e.value
-				}) : v(a, `${typeof p == "function" ? p(e.value, t) : e.value}${_ || ""}`))] });
+				return createVNode(Layer, {
+					"class": "v-charts-cartesian-axis-tick",
+					"key": `tick-${entry.value}-${entry.coordinate}-${entry.tickCoord}`
+				}, { default: () => [tickLine && createVNode("line", mergeProps(tickLineProps, lineCoord, { "class": ["v-charts-cartesian-axis-tick-line", get(tickLine, "class")] }), null), tick && (slots.tick ? slots.tick({
+					...tickProps,
+					value: entry.value
+				}) : renderTickItem(tickProps, `${typeof tickFormatter === "function" ? tickFormatter(entry.value, i) : entry.value}${unit || ""}`))] });
 			});
-			return T.length > 0 ? o("g", { class: "v-charts-cartesian-axis-ticks" }, [T]) : null;
-		}, b = () => {
-			let { label: e, x: t, y: n, width: r, height: a } = s;
-			if (!e) return null;
-			let l = {
-				x: t,
-				y: n,
-				width: r,
-				height: a
+			return items.length > 0 ? createVNode("g", { "class": "v-charts-cartesian-axis-ticks" }, [items]) : null;
+		};
+		const renderLabel = () => {
+			const { label, x, y, width, height } = props;
+			if (!label) return null;
+			const axisViewBox = {
+				x,
+				y,
+				width,
+				height
 			};
-			return typeof e == "string" || typeof e == "number" ? o(i, {
-				value: e,
-				viewBox: l
-			}, null) : typeof e == "object" ? o(i, c(e, { viewBox: l }), null) : null;
+			if (typeof label === "string" || typeof label === "number") return createVNode(Label, {
+				"value": label,
+				"viewBox": axisViewBox
+			}, null);
+			if (typeof label === "object") return createVNode(Label, mergeProps(label, { "viewBox": axisViewBox }), null);
+			return null;
 		};
 		return () => {
-			let { axisLine: e, width: t, height: r, hide: i } = s;
-			return i || t != null && t <= 0 || r != null && r <= 0 ? null : o(n, {
-				class: ["v-charts-cartesian-axis", d.class],
-				ref: (e) => {
-					let t = e?.$el;
-					if (t) {
-						let e = t?.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
-						if (e) {
-							let t = window.getComputedStyle(e).fontSize, n = window.getComputedStyle(e).letterSpacing;
-							(t !== p.fontSize || n !== p.letterSpacing) && (p.fontSize = window.getComputedStyle(e).fontSize, p.letterSpacing = window.getComputedStyle(e).letterSpacing);
+			const { axisLine, width, height, hide } = props;
+			if (hide) return null;
+			if (width != null && width <= 0 || height != null && height <= 0) return null;
+			return createVNode(Layer, {
+				"class": ["v-charts-cartesian-axis", attrs.class],
+				"ref": (ref) => {
+					const elm = ref?.$el;
+					if (elm) {
+						const tick = elm?.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
+						if (tick) {
+							const calculatedFontSize = window.getComputedStyle(tick).fontSize;
+							const calculatedLetterSpacing = window.getComputedStyle(tick).letterSpacing;
+							if (calculatedFontSize !== state.fontSize || calculatedLetterSpacing !== state.letterSpacing) {
+								state.fontSize = window.getComputedStyle(tick).fontSize;
+								state.letterSpacing = window.getComputedStyle(tick).letterSpacing;
+							}
 						}
 					}
 				}
 			}, { default: () => [
-				e && _(),
-				y(s, p.fontSize, p.letterSpacing),
-				b()
+				axisLine && renderAxisLine(),
+				renderTicks(props, state.fontSize, state.letterSpacing),
+				renderLabel()
 			] });
 		};
 	}
 });
 //#endregion
-export { d as CartesianAxis };
+export { CartesianAxis };

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

@@ -1,8 +1,8 @@
-import { createVNode as e, defineComponent as t } from "vue";
+import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/Background.tsx
-var n = /* @__PURE__ */ t({
+var Background = /* @__PURE__ */ defineComponent({
 	name: "Background",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	props: {
 		fill: String,
 		fillOpacity: Number,
@@ -12,19 +12,22 @@ var n = /* @__PURE__ */ t({
 		height: Number,
 		ry: Number
 	},
-	setup(t) {
-		return () => !t.fill || t.fill === "none" ? null : e("rect", {
-			x: t.x,
-			y: t.y,
-			ry: t.ry,
-			width: t.width,
-			height: t.height,
-			stroke: "none",
-			fill: t.fill,
-			"fill-opacity": t.fillOpacity,
-			class: "v-charts-cartesian-grid-bg"
-		}, null);
+	setup(props) {
+		return () => {
+			if (!props.fill || props.fill === "none") return null;
+			return createVNode("rect", {
+				"x": props.x,
+				"y": props.y,
+				"ry": props.ry,
+				"width": props.width,
+				"height": props.height,
+				"stroke": "none",
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"class": "v-charts-cartesian-grid-bg"
+			}, null);
+		};
 	}
 });
 //#endregion
-export { n as default };
+export { Background as default };