vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/core/barSizing.mjs

@@ -0,0 +1,108 @@
+import { isNullish } from "../utils/validate.mjs";
+import { getPercentValue } from "../utils/data.mjs";
+//#region src/core/barSizing.ts
+function getBarSize(globalSize, totalSize, selfSize) {
+	const barSize = selfSize ?? globalSize;
+	return isNullish(barSize) ? void 0 : getPercentValue(barSize, totalSize, 0);
+}
+function barSizeList(allBars, globalSize, totalSize) {
+	const initialValue = Object.create(null);
+	const stackedBars = allBars.filter((b) => b.stackId != null);
+	const unstackedBars = allBars.filter((b) => b.stackId == null);
+	const groupByStack = stackedBars.reduce((acc, bar) => {
+		if (!acc[bar.stackId]) acc[bar.stackId] = [];
+		acc[bar.stackId].push(bar);
+		return acc;
+	}, initialValue);
+	const stackedSizeList = Object.entries(groupByStack).map(([stackId, bars]) => {
+		return {
+			stackId,
+			dataKeys: bars.flatMap((bar) => bar.dataKey == null ? [] : [bar.dataKey]),
+			barSize: getBarSize(globalSize, totalSize, bars[0].barSize)
+		};
+	});
+	const unstackedSizeList = unstackedBars.map((b) => {
+		return {
+			stackId: void 0,
+			dataKeys: b.dataKey == null ? [] : [b.dataKey],
+			barSize: getBarSize(globalSize, totalSize, b.barSize)
+		};
+	});
+	return [...stackedSizeList, ...unstackedSizeList];
+}
+function getBarPositions(barGap, barCategoryGap, bandSize, sizeList, maxBarSize) {
+	const len = sizeList.length;
+	if (len < 1) return null;
+	let realBarGap = getPercentValue(barGap, bandSize, 0, true);
+	let result;
+	const initialValue = [];
+	if (sizeList[0].barSize === +sizeList[0].barSize) {
+		let useFull = false;
+		let fullBarSize = bandSize / len;
+		let sum = sizeList.reduce((res, entry) => res + entry.barSize || 0, 0);
+		sum += (len - 1) * realBarGap;
+		if (sum >= bandSize) {
+			sum -= (len - 1) * realBarGap;
+			realBarGap = 0;
+		}
+		if (sum >= bandSize && fullBarSize > 0) {
+			useFull = true;
+			fullBarSize *= .9;
+			sum = len * fullBarSize;
+		}
+		let prev = {
+			offset: ((bandSize - sum) / 2 >> 0) - realBarGap,
+			size: 0
+		};
+		result = sizeList.reduce((res, entry) => {
+			const newPosition = {
+				stackId: entry.stackId,
+				dataKeys: entry.dataKeys,
+				position: {
+					offset: prev.offset + prev.size + realBarGap,
+					size: useFull ? fullBarSize : entry.barSize
+				}
+			};
+			const newRes = [...res, newPosition];
+			prev = newRes[newRes.length - 1].position;
+			return newRes;
+		}, initialValue);
+	} else {
+		const offset = getPercentValue(barCategoryGap, bandSize, 0, true);
+		if (bandSize - 2 * offset - (len - 1) * realBarGap <= 0) realBarGap = 0;
+		let originalSize = (bandSize - 2 * offset - (len - 1) * realBarGap) / len;
+		if (originalSize > 1) originalSize >>= 0;
+		const size = maxBarSize != null && maxBarSize === +maxBarSize ? Math.min(originalSize, maxBarSize) : originalSize;
+		result = sizeList.reduce((res, entry, i) => [...res, {
+			stackId: entry.stackId,
+			dataKeys: entry.dataKeys,
+			position: {
+				offset: offset + (originalSize + realBarGap) * i + (originalSize - size) / 2,
+				size
+			}
+		}], initialValue);
+	}
+	return result;
+}
+function barPositions(sizeList, globalMaxBarSize, barGap, barCategoryGap, barBandSize, bandSize, childMaxBarSize) {
+	let allBarPositions = getBarPositions(barGap, barCategoryGap, barBandSize !== bandSize ? barBandSize : bandSize, sizeList, childMaxBarSize ?? globalMaxBarSize);
+	if (barBandSize !== bandSize && allBarPositions != null) allBarPositions = allBarPositions.map((pos) => ({
+		...pos,
+		position: {
+			...pos.position,
+			offset: pos.position.offset - barBandSize / 2
+		}
+	}));
+	return allBarPositions;
+}
+function stackedData(stackGroups, barSettings) {
+	if (!stackGroups || barSettings?.dataKey == null) return;
+	const { stackId } = barSettings;
+	const stackGroup = stackGroups[stackId];
+	if (!stackGroup) return;
+	const { stackedData } = stackGroup;
+	if (!stackedData) return;
+	return stackedData.find((sd) => sd.key === barSettings.dataKey);
+}
+//#endregion
+export { barPositions, barSizeList, stackedData };

package/dist/es/core/color.mjs

@@ -0,0 +1,23 @@
+import { seriesColor } from "../utils/theme.mjs";
+//#region src/core/color.ts
+/**
+* The colour that stands for a whole series: its legend icon, tooltip swatch and active dot.
+* Outline series (area, line, radar) are their stroke unless it is hidden; filled shapes are
+* their fill.
+*/
+function mainColor(type, { stroke, fill }) {
+	if (type === "area" || type === "line" || type === "radar") return stroke && stroke !== "none" ? stroke : fill;
+	return fill;
+}
+function fillOf(source) {
+	return source != null && typeof source === "object" && "fill" in source && typeof source.fill === "string" ? source.fill : void 0;
+}
+/**
+* The colour of one data entry (a sector, trapezoid or bar): a `<Cell fill>` wins, then the
+* row's own `fill`, then the series fill, then the palette colour for its position.
+*/
+function entryColor({ cell, row, seriesFill, index }) {
+	return fillOf(cell) ?? fillOf(row) ?? seriesFill ?? seriesColor(index);
+}
+//#endregion
+export { entryColor, mainColor };

package/dist/es/core/coordinates.mjs

@@ -0,0 +1,57 @@
+import { isNullish, isNumber, toFiniteNumber } from "../utils/validate.mjs";
+import { findEntryInArray } from "../utils/data.mjs";
+import { getValueByDataKey } from "./data.mjs";
+//#region src/core/coordinates.ts
+function truncateByDomain(value, domain) {
+	if (!domain || domain.length !== 2 || !isNumber(domain[0]) || !isNumber(domain[1])) return value;
+	const minValue = Math.min(domain[0], domain[1]);
+	const maxValue = Math.max(domain[0], domain[1]);
+	const result = [value[0], value[1]];
+	if (!isNumber(value[0]) || value[0] < minValue) result[0] = minValue;
+	if (!isNumber(value[1]) || value[1] > maxValue) result[1] = maxValue;
+	if (result[0] > maxValue) result[0] = maxValue;
+	if (result[1] < minValue) result[1] = minValue;
+	return result;
+}
+function getNormalizedStackId(publicStackId) {
+	return publicStackId == null ? void 0 : String(publicStackId);
+}
+function getCateCoordinateOfLine({ axis, ticks, bandSize, entry, index, dataKey }) {
+	if (axis.type === "category") {
+		if (!axis.allowDuplicatedCategory && axis.dataKey && !isNullish(entry[axis.dataKey])) {
+			const matchedTick = findEntryInArray(ticks, "value", entry[axis.dataKey]);
+			if (matchedTick) return matchedTick.coordinate + bandSize / 2;
+		}
+		return ticks[index] ? ticks[index].coordinate + bandSize / 2 : null;
+	}
+	const value = getValueByDataKey(entry, !isNullish(dataKey) ? dataKey : axis.dataKey);
+	const number = toFiniteNumber(value instanceof Date ? Number(value) : value);
+	return number != null ? axis.scale(number) : null;
+}
+function getBaseValueOfBar({ numericAxis }) {
+	const domain = numericAxis.scale.domain();
+	if (numericAxis.type === "number") {
+		const minValue = Math.min(domain[0], domain[1]);
+		const maxValue = Math.max(domain[0], domain[1]);
+		if (minValue <= 0 && maxValue >= 0) return 0;
+		if (maxValue < 0) return maxValue;
+		return minValue;
+	}
+	return domain[0];
+}
+function getCateCoordinateOfBar({ axis, ticks, offset, bandSize, entry, index }) {
+	if (axis.type === "category") return ticks[index] ? ticks[index].coordinate + offset : null;
+	const value = getValueByDataKey(entry, axis.dataKey, axis.scale.domain()[index]);
+	const number = toFiniteNumber(value instanceof Date ? Number(value) : value);
+	return number != null ? axis.scale(number) - bandSize / 2 + offset : null;
+}
+/** Dots draw when the `dot` option is on, or always for a single point, which has no line. */
+function shouldRenderDots(points, dot) {
+	return points != null && points.length > 0 && (!!dot || points.length === 1);
+}
+function isClipDot(dot) {
+	if (dot && typeof dot === "object" && "clipDot" in dot) return Boolean(dot.clipDot);
+	return true;
+}
+//#endregion
+export { getBaseValueOfBar, getCateCoordinateOfBar, getCateCoordinateOfLine, getNormalizedStackId, isClipDot, shouldRenderDots, truncateByDomain };

package/dist/es/core/data.mjs

@@ -0,0 +1,20 @@
+//#region src/core/data.ts
+var keyPaths = /* @__PURE__ */ new Map();
+function getValueByDataKey(obj, dataKey, defaultValue) {
+	if (obj == null || dataKey == null) return defaultValue;
+	if (typeof dataKey === "function") return Reflect.apply(dataKey, void 0, [obj]);
+	let path = keyPaths.get(dataKey);
+	if (path === void 0) {
+		path = typeof dataKey === "string" && /[.[]/.test(dataKey) ? dataKey.replace(/\[(\d+)\]/g, ".$1").split(".") : null;
+		keyPaths.set(dataKey, path);
+	}
+	const row = obj;
+	let value = row[dataKey];
+	if (value === void 0 && path && !Object.hasOwn(row, dataKey)) {
+		value = row;
+		for (const segment of path) value = value?.[segment];
+	}
+	return value === void 0 ? defaultValue : value;
+}
+//#endregion
+export { getValueByDataKey };

package/dist/es/core/errorBar.mjs

@@ -0,0 +1,56 @@
+//#region src/core/errorBar.ts
+function errorBarLines({ x, y, value, errorVal }, axis, direction, offset, width) {
+	if (!errorVal || x == null || y == null) return null;
+	if (direction === "x" && axis.type !== "number") return null;
+	const [low, high] = Array.isArray(errorVal) ? errorVal : [errorVal, errorVal];
+	if (low == null || high == null) return null;
+	const min = axis.scale(value - low);
+	const max = axis.scale(value + high);
+	if (min == null || max == null) return [];
+	if (direction === "x") {
+		const mid = y + offset;
+		return [
+			{
+				x1: max,
+				y1: mid + width,
+				x2: max,
+				y2: mid - width
+			},
+			{
+				x1: min,
+				y1: mid,
+				x2: max,
+				y2: mid
+			},
+			{
+				x1: min,
+				y1: mid + width,
+				x2: min,
+				y2: mid - width
+			}
+		];
+	}
+	const mid = x + offset;
+	return [
+		{
+			x1: mid - width,
+			y1: max,
+			x2: mid + width,
+			y2: max
+		},
+		{
+			x1: mid,
+			y1: min,
+			x2: mid,
+			y2: max
+		},
+		{
+			x1: mid - width,
+			y1: min,
+			x2: mid + width,
+			y2: min
+		}
+	];
+}
+//#endregion
+export { errorBarLines };

package/dist/es/{cartesian/funnel/utils.mjs → core/funnel.mjs}

@@ -1,7 +1,6 @@
-import { isNumber } from "../../utils/validate.mjs";
-import { getValueByDataKey } from "../../utils/chart.mjs";
-import { omit } from "lodash-es";
-//#region src/cartesian/funnel/utils.ts
+import { isNumber, toFiniteNumber } from "../utils/validate.mjs";
+import { getValueByDataKey } from "./data.mjs";
+//#region src/core/funnel.ts
 function getRealWidthHeight({ customWidth }, offset) {
 	const { width, height, left, right, top, bottom } = offset;
 	const realHeight = height;
@@ -18,7 +17,11 @@ function getRealWidthHeight({ customWidth }, offset) {
 function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType, lastShapeType, reversed, offset, customWidth }) {
 	const { left, top } = offset;
 	const { realHeight, realWidth, offsetX, offsetY } = getRealWidthHeight({ customWidth }, offset);
-	const maxValue = Math.max.apply(null, displayedData.map((entry) => getValueByDataKey(entry, dataKey, 0)));
+	const values = displayedData.map((entry) => {
+		const value = getValueByDataKey(entry, dataKey);
+		return Array.isArray(value) ? value.map((part) => toFiniteNumber(part) ?? 0) : toFiniteNumber(value) ?? 0;
+	});
+	const maxValue = values.flat().reduce((max, value) => Math.max(max, value), 0) || 1;
 	const len = displayedData.length;
 	const rowHeight = realHeight / len;
 	const parentViewBox = {
@@ -28,12 +31,12 @@ function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType,
 		height: offset.height
 	};
 	let trapezoids = displayedData.map((entry, i) => {
-		const rawVal = getValueByDataKey(entry, dataKey, 0);
+		const rawVal = values[i];
 		const name = getValueByDataKey(entry, nameKey, i);
-		let val = rawVal;
+		let val = Array.isArray(rawVal) ? rawVal[0] : rawVal;
 		let nextVal;
 		if (i !== len - 1) {
-			nextVal = getValueByDataKey(displayedData[i + 1], dataKey, 0);
+			nextVal = values[i + 1];
 			if (Array.isArray(nextVal)) [nextVal] = nextVal;
 		} else if (Array.isArray(rawVal) && rawVal.length === 2) [val, nextVal] = rawVal;
 		else if (lastShapeType === "rectangle") nextVal = val;
@@ -54,6 +57,7 @@ function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType,
 			y: y + rowHeight / 2
 		};
 		return {
+			...Object(entry),
 			x,
 			y,
 			width: Math.max(upperWidth, lowerWidth),
@@ -64,7 +68,6 @@ function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType,
 			val,
 			tooltipPayload,
 			tooltipPosition,
-			...omit(entry, "width"),
 			payload: entry,
 			parentViewBox,
 			labelViewBox: {
@@ -78,7 +81,7 @@ function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType,
 	if (reversed) trapezoids = trapezoids.map((entry, index) => {
 		const newY = entry.y - index * rowHeight + (len - 1 - index) * rowHeight;
 		return {
-			...entry,
+			...Object(entry),
 			upperWidth: entry.lowerWidth,
 			lowerWidth: entry.upperWidth,
 			x: entry.x - (entry.lowerWidth - entry.upperWidth) / 2,
@@ -98,5 +101,22 @@ function computeFunnelTrapezoids({ dataKey, nameKey, displayedData, tooltipType,
 		data: displayedData
 	};
 }
+function funnelTrapezoids(offset, settings, chartData) {
+	const { data, presentationProps, ...geometry } = settings;
+	const displayedData = data?.length ? data : chartData;
+	if (!displayedData?.length) return {
+		trapezoids: [],
+		data: displayedData
+	};
+	return computeFunnelTrapezoids({
+		...geometry,
+		displayedData: displayedData.map((entry) => ({
+			payload: entry,
+			...presentationProps,
+			...Object(entry)
+		})),
+		offset
+	});
+}
 //#endregion
-export { computeFunnelTrapezoids };
+export { funnelTrapezoids };

package/dist/es/core/interaction.mjs

@@ -0,0 +1,152 @@
+import { mathSign } from "../utils/data.mjs";
+import { formatAngleOfSector, getAngleOfPoint, polarToCartesian, reverseFormatAngleOfSector } from "../utils/polar.mjs";
+//#region src/core/interaction.ts
+function activeProps(chartEvent, layout, polarViewBox, tooltipAxisType, tooltipAxisRange, tooltipTicks, orderedTooltipTicks, offset) {
+	if (!chartEvent || !layout || !tooltipAxisType || !tooltipAxisRange || !tooltipTicks) return;
+	const rangeObj = inRange(chartEvent.chartX, chartEvent.chartY, layout, polarViewBox, offset);
+	if (!rangeObj) return;
+	const pos = calculateTooltipPos(rangeObj, layout);
+	if (pos == null) return;
+	const activeIndex = calculateActiveTickIndex(pos, orderedTooltipTicks, tooltipTicks, tooltipAxisType, tooltipAxisRange);
+	return {
+		activeIndex,
+		activeCoordinate: getActiveCoordinate(layout, tooltipTicks, activeIndex, rangeObj)
+	};
+}
+function calculateTooltipPos(rangeObj, layout) {
+	if (layout === "horizontal") return rangeObj.x;
+	if (layout === "vertical") return rangeObj.y;
+	if (layout === "centric") return rangeObj.angle;
+	return rangeObj.radius;
+}
+function inRangeOfSector({ x, y }, viewBox) {
+	const { radius, angle } = getAngleOfPoint({
+		x,
+		y
+	}, viewBox);
+	const { innerRadius, outerRadius } = viewBox;
+	if (radius < innerRadius || radius > outerRadius) return null;
+	if (radius === 0) return null;
+	const { startAngle, endAngle } = formatAngleOfSector(viewBox);
+	let formatAngle = angle;
+	let inRange;
+	if (startAngle <= endAngle) {
+		while (formatAngle > endAngle) formatAngle -= 360;
+		while (formatAngle < startAngle) formatAngle += 360;
+		inRange = formatAngle >= startAngle && formatAngle <= endAngle;
+	} else {
+		while (formatAngle > startAngle) formatAngle -= 360;
+		while (formatAngle < endAngle) formatAngle += 360;
+		inRange = formatAngle >= endAngle && formatAngle <= startAngle;
+	}
+	if (inRange) return {
+		...viewBox,
+		radius,
+		angle: reverseFormatAngleOfSector(formatAngle, viewBox)
+	};
+	return null;
+}
+function inRange(x, y, layout, polarViewBox, offset) {
+	if (layout === "horizontal" || layout === "vertical") return x >= offset.left && x <= offset.left + offset.width && y >= offset.top && y <= offset.top + offset.height ? {
+		x,
+		y
+	} : null;
+	if (polarViewBox) return inRangeOfSector({
+		x,
+		y
+	}, polarViewBox);
+	return null;
+}
+function calculateActiveTickIndex(coordinate, ticks, unsortedTicks, axisType, range) {
+	let index = -1;
+	const len = ticks?.length ?? 0;
+	if (len <= 1) return 0;
+	if (axisType === "angleAxis" && range != null && Math.abs(Math.abs(range[1] - range[0]) - 360) <= 1e-6) for (let i = 0; i < len; i++) {
+		const before = i > 0 ? unsortedTicks[i - 1].coordinate : unsortedTicks[len - 1].coordinate;
+		const cur = unsortedTicks[i].coordinate;
+		const after = i >= len - 1 ? unsortedTicks[0].coordinate : unsortedTicks[i + 1].coordinate;
+		let sameDirectionCoord;
+		if (mathSign(cur - before) !== mathSign(after - cur)) {
+			const diffInterval = [];
+			if (mathSign(after - cur) === mathSign(range[1] - range[0])) {
+				sameDirectionCoord = after;
+				const curInRange = cur + range[1] - range[0];
+				diffInterval[0] = Math.min(curInRange, (curInRange + before) / 2);
+				diffInterval[1] = Math.max(curInRange, (curInRange + before) / 2);
+			} else {
+				sameDirectionCoord = before;
+				const afterInRange = after + range[1] - range[0];
+				diffInterval[0] = Math.min(cur, (afterInRange + cur) / 2);
+				diffInterval[1] = Math.max(cur, (afterInRange + cur) / 2);
+			}
+			const sameInterval = [Math.min(cur, (sameDirectionCoord + cur) / 2), Math.max(cur, (sameDirectionCoord + cur) / 2)];
+			if (coordinate > sameInterval[0] && coordinate <= sameInterval[1] || coordinate >= diffInterval[0] && coordinate <= diffInterval[1]) {
+				index = unsortedTicks[i].index;
+				break;
+			}
+		} else {
+			const minValue = Math.min(before, after);
+			const maxValue = Math.max(before, after);
+			if (coordinate > (minValue + cur) / 2 && coordinate <= (maxValue + cur) / 2) {
+				index = unsortedTicks[i].index;
+				break;
+			}
+		}
+	}
+	else for (let i = 0; i < len; i++) if (i === 0 && coordinate <= (ticks[i].coordinate + ticks[i + 1].coordinate) / 2 || i > 0 && i < len - 1 && coordinate > (ticks[i].coordinate + ticks[i - 1].coordinate) / 2 && coordinate <= (ticks[i].coordinate + ticks[i + 1].coordinate) / 2 || i === len - 1 && coordinate > (ticks[i].coordinate + ticks[i - 1].coordinate) / 2) {
+		index = ticks[i].index;
+		break;
+	}
+	return index;
+}
+function getActiveCoordinate(layout, tooltipTicks, activeIndex, rangeObj) {
+	const entry = tooltipTicks.find((tick) => tick && tick.index === activeIndex);
+	if (entry) {
+		if (layout === "horizontal") return rangeObj.y == null ? {
+			x: 0,
+			y: 0
+		} : {
+			x: entry.coordinate,
+			y: rangeObj.y
+		};
+		if (layout === "vertical") return rangeObj.x == null ? {
+			x: 0,
+			y: 0
+		} : {
+			x: rangeObj.x,
+			y: entry.coordinate
+		};
+		if (layout === "centric") {
+			const angle = entry.coordinate;
+			const { cx, cy, radius } = rangeObj;
+			if (cx == null || cy == null || radius == null) return {
+				x: 0,
+				y: 0
+			};
+			return {
+				...rangeObj,
+				...polarToCartesian(cx, cy, radius, angle),
+				angle,
+				radius
+			};
+		}
+		const radius = entry.coordinate;
+		const { cx, cy, angle } = rangeObj;
+		if (cx == null || cy == null || angle == null) return {
+			x: 0,
+			y: 0
+		};
+		return {
+			...rangeObj,
+			...polarToCartesian(cx, cy, radius, angle),
+			angle,
+			radius
+		};
+	}
+	return {
+		x: 0,
+		y: 0
+	};
+}
+//#endregion
+export { activeProps, calculateActiveTickIndex, calculateTooltipPos, getActiveCoordinate, inRange };

package/dist/es/core/layout.mjs

@@ -0,0 +1,91 @@
+import { isNumber } from "../utils/validate.mjs";
+//#region src/core/layout.ts
+function registeredAxes(axes) {
+	return Object.values(Object.fromEntries(axes.map((axis) => [axis.id, axis])));
+}
+function chartOffset(size, margin, brushHeight, xAxes, yAxes, legendSettings, legendSize) {
+	const sides = {
+		left: margin?.left || 0,
+		right: margin?.right || 0,
+		top: margin?.top || 0,
+		bottom: margin?.bottom || 0
+	};
+	for (const axis of yAxes) if (!axis.mirror && !axis.hide) sides[axis.orientation] += typeof axis.width === "number" ? axis.width : 60;
+	for (const axis of xAxes) if (!axis.mirror && !axis.hide) sides[axis.orientation] += axis.height;
+	const brushBottom = sides.bottom;
+	sides.bottom += brushHeight;
+	const offset = appendOffsetOfLegend({
+		...sides,
+		brushBottom,
+		width: 0,
+		height: 0
+	}, legendSettings, legendSize);
+	return {
+		...offset,
+		width: Math.max(size.width - offset.left - offset.right, 0),
+		height: Math.max(size.height - offset.top - offset.bottom, 0)
+	};
+}
+function chartViewBox(offset) {
+	return {
+		x: offset.left,
+		y: offset.top,
+		width: offset.width,
+		height: offset.height
+	};
+}
+function brushDimensions(brush, offset, margin) {
+	return {
+		height: brush.height,
+		x: isNumber(brush.x) ? brush.x : offset.left,
+		y: isNumber(brush.y) ? brush.y : offset.top + offset.height + offset.brushBottom - (margin?.bottom || 0),
+		width: isNumber(brush.width) ? brush.width : offset.width
+	};
+}
+function appendOffsetOfLegend(offset, legendSettings, legendSize) {
+	if (legendSettings && legendSize) {
+		const { width: boxWidth, height: boxHeight } = legendSize;
+		const { align, verticalAlign, layout, position, offset: legendOffset = 0 } = legendSettings;
+		if (position != null) {
+			if (position === "top" || position === "bottom" || position === "left" || position === "right") {
+				if (position === "top" && isNumber(offset.top)) return {
+					...offset,
+					top: offset.top + (boxHeight || 0) + legendOffset
+				};
+				if (position === "bottom" && isNumber(offset.bottom)) return {
+					...offset,
+					bottom: offset.bottom + (boxHeight || 0) + legendOffset
+				};
+				if (position === "left" && isNumber(offset.left)) return {
+					...offset,
+					left: offset.left + (boxWidth || 0) + legendOffset
+				};
+				if (position === "right" && isNumber(offset.right)) return {
+					...offset,
+					right: offset.right + (boxWidth || 0) + legendOffset
+				};
+			}
+			return offset;
+		}
+		if ((layout === "vertical" || layout === "horizontal" && verticalAlign === "middle") && align !== "center" && isNumber(offset[align])) return {
+			...offset,
+			[align]: offset[align] + (boxWidth || 0)
+		};
+		if ((layout === "horizontal" || layout === "vertical" && align === "center") && verticalAlign !== "middle" && isNumber(offset[verticalAlign])) return {
+			...offset,
+			[verticalAlign]: offset[verticalAlign] + (boxHeight || 0)
+		};
+	}
+	return offset;
+}
+/** Outside legends use the margin-inset chart area rather than the axis-inset plot. */
+function legendArea(size, margin) {
+	return {
+		x: margin.left || 0,
+		y: margin.top || 0,
+		width: Math.max(size.width - (margin.left || 0) - (margin.right || 0), 0),
+		height: Math.max(size.height - (margin.top || 0) - (margin.bottom || 0), 0)
+	};
+}
+//#endregion
+export { appendOffsetOfLegend, brushDimensions, chartOffset, chartViewBox, legendArea, registeredAxes };

package/dist/es/{cartesian/line/utils.mjs → core/line.mjs}

@@ -1,9 +1,10 @@
-import { isNullish } from "../../utils/validate.mjs";
-import { getCateCoordinateOfLine, getValueByDataKey } from "../../utils/chart.mjs";
-//#region src/cartesian/line/utils.ts
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { getValueByDataKey } from "./data.mjs";
+import { getCateCoordinateOfLine } from "./coordinates.mjs";
+//#region src/core/line.ts
 function computeLinePoints({ layout, xAxis, yAxis, xAxisTicks, yAxisTicks, dataKey, bandSize, displayedData }) {
 	return displayedData.map((entry, index) => {
-		const value = getValueByDataKey(entry, dataKey);
+		const value = toFiniteNumber(getValueByDataKey(entry, dataKey));
 		if (layout === "horizontal") return {
 			x: getCateCoordinateOfLine({
 				axis: xAxis,
@@ -12,12 +13,12 @@ function computeLinePoints({ layout, xAxis, yAxis, xAxisTicks, yAxisTicks, dataK
 				entry,
 				index
 			}),
-			y: isNullish(value) ? null : yAxis.scale(value),
+			y: value == null ? null : yAxis.scale(value),
 			value,
 			payload: entry
 		};
 		return {
-			x: isNullish(value) ? null : xAxis.scale(value),
+			x: value == null ? null : xAxis.scale(value),
 			y: getCateCoordinateOfLine({
 				axis: yAxis,
 				ticks: yAxisTicks,