@oliasoft-open-source/charts-library 5.10.0-beta-2 → 5.10.0-beta-4

package/dist/index.d.ts

@@ -1116,6 +1116,13 @@ export declare type UnusedParameter = unknown;
 export { }
 
 
+declare module 'chart.js' {
+    interface PluginOptionsByType<TType extends ChartType> {
+        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
+    }
+}
+
+
 /**
  * Vertical Markers Plugin
  *
@@ -1176,10 +1183,3 @@ declare module 'chart.js' {
         };
     }
 }
-
-
-declare module 'chart.js' {
-    interface PluginOptionsByType<TType extends ChartType> {
-        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
-    }
-}

package/dist/index.js

@@ -20889,13 +20889,18 @@ var DEFAULT_VERTICAL_OFFSET = -18;
 var DEFAULT_ROW_GAP = 22;
 var DEFAULT_ITEM_GAP = 8;
 var DEFAULT_OVERLAP_ONLY_ITEM_GAP = 14;
-var DEFAULT_SIDE_SPREAD_STEP = 12;
-var DEFAULT_SIDE_SPREAD_MAX = 48;
+var DEFAULT_LANE_GAP = 12;
 var clamp$1 = (value, min, max) => {
 	if (Number.isNaN(value)) return min;
 	if (min > max) return min;
 	return Math.min(Math.max(value, min), max);
 };
+var clampRelaxed = (value, min, max) => {
+	if (min <= max) return clamp$1(value, min, max);
+	if (value < max) return max;
+	if (value > min) return min;
+	return value;
+};
 var getNumericValue = (value, fallback = 0) => {
 	return typeof value === "number" ? value : fallback;
 };
@@ -21099,15 +21104,6 @@ var getOverlappingCalloutIds = (chart) => {
 	});
 	return overlappingIds;
 };
-var getOccupiedOriginalLabelRects = (chart, area, overlappingIds) => {
-	return ((chart?.options)?.annotations?.annotationsData ?? []).flatMap((annotation, index) => {
-		const calloutCfg = getCalloutCfg(annotation);
-		const id = `callout-annotation-${index}`;
-		if (!calloutCfg?.enabled || !calloutCfg?.onlyWhenOverlapping) return [];
-		if (overlappingIds.has(id)) return [];
-		return [getOriginalLabelRect(chart, area, annotation, index)];
-	});
-};
 var isCalloutOverlapping = (ctx, refAnnotation, index) => {
 	const chart = getChartFromCtx$1(ctx);
 	if (!getCalloutCfg(refAnnotation)?.onlyWhenOverlapping) return true;
@@ -21140,7 +21136,6 @@ var getCalloutItems = (chart, area) => {
 		const calloutCfg = getCalloutCfg(annotation);
 		const id = `callout-annotation-${index}`;
 		if (!calloutCfg?.enabled) return [];
-		if (calloutCfg?.onlyWhenOverlapping && !overlappingIds.has(id)) return [];
 		const size = estimateLabelSize(chart, annotation, calloutCfg);
 		const xScale = getXScale(chart, getAxisId(annotation, "x"));
 		const yScale = getYScale(chart, getAxisId(annotation, "y"));
@@ -21162,6 +21157,7 @@ var getCalloutItems = (chart, area) => {
 			width: size.width,
 			height: size.height,
 			isFixed: hasStoredX && hasStoredY,
+			isOverlapping: overlappingIds.has(id),
 			overlapOnly: Boolean(calloutCfg?.onlyWhenOverlapping),
 			minX: area.left + margin + size.width / 2,
 			maxX: area.right - margin - size.width / 2,
@@ -21192,7 +21188,79 @@ var getLayoutGap = (item) => {
 var getLayoutOrderY = (item) => {
 	return item.isFixed ? item.preferredY : item.anchorY;
 };
+var intervalsOverlap = (top, bottom, otherTop, otherBottom) => {
+	return !(bottom <= otherTop || top >= otherBottom);
+};
+var assignLabelColumns = (items, layout) => {
+	const columns = [];
+	const hasPrimaryColumn = items.some((item) => {
+		return !item.overlapOnly || !item.isOverlapping;
+	});
+	[...items].sort((left, right) => getLayoutOrderY(left) - getLayoutOrderY(right)).forEach((item) => {
+		const current = layout.get(item.id);
+		if (!current) return;
+		const top = current.yValue - item.height / 2 - getLayoutGap(item) / 2;
+		const bottom = current.yValue + item.height / 2 + getLayoutGap(item) / 2;
+		let columnIndex = hasPrimaryColumn && item.overlapOnly && item.isOverlapping ? 1 : 0;
+		while (true) {
+			if (!(columns[columnIndex] ?? []).some((placed) => {
+				return intervalsOverlap(top, bottom, placed.top, placed.bottom);
+			})) {
+				if (!columns[columnIndex]) columns[columnIndex] = [];
+				columns[columnIndex].push({
+					id: item.id,
+					top,
+					bottom,
+					width: item.width
+				});
+				break;
+			}
+			columnIndex += 1;
+		}
+	});
+	return columns;
+};
+var applyLaneLayout = (items, layout, occupiedRects) => {
+	if (items.length <= 1) return;
+	const side = items[0]?.side;
+	const columns = assignLabelColumns(items, layout);
+	const getCurrentRect = (item) => {
+		const centerX = layout.get(item.id)?.xValue ?? item.preferredX;
+		return {
+			left: centerX - item.width / 2,
+			right: centerX + item.width / 2
+		};
+	};
+	const referenceItems = items.filter((item) => {
+		return columns[0]?.some((placed) => placed.id === item.id);
+	});
+	const referenceRects = referenceItems.length ? referenceItems : items;
+	const baseEdge = side === "right" ? occupiedRects.length ? Math.min(...occupiedRects.map((rect) => rect.left)) - DEFAULT_LANE_GAP : Math.min(...referenceRects.map((item) => getCurrentRect(item).left)) : occupiedRects.length ? Math.max(...occupiedRects.map((rect) => rect.right)) + DEFAULT_LANE_GAP : Math.max(...referenceRects.map((item) => getCurrentRect(item).right));
+	columns.forEach((column, columnIndex) => {
+		const columnWidth = Math.max(...column.map((placed) => placed.width));
+		column?.forEach((placed) => {
+			const item = items.find((candidate) => candidate.id === placed.id);
+			const current = layout.get(placed.id);
+			if (!item || !current) return;
+			const xValue = side === "right" ? baseEdge - columnIndex * (columnWidth + DEFAULT_LANE_GAP) - item.width / 2 : baseEdge + columnIndex * (columnWidth + DEFAULT_LANE_GAP) + item.width / 2;
+			layout.set(placed.id, {
+				...current,
+				xValue: clamp$1(xValue, item.minX, item.maxX)
+			});
+		});
+	});
+};
+var getOrderBounds = (item, occupiedRects) => {
+	const previousRect = [...occupiedRects].filter((rect) => rect.centerY <= item.anchorY).at(-1);
+	const nextRect = occupiedRects.find((rect) => rect.centerY >= item.anchorY);
+	const gap = getLayoutGap(item);
+	return {
+		minCenter: previousRect ? previousRect.bottom + gap + item.height / 2 : item.minY,
+		maxCenter: nextRect ? nextRect.top - gap - item.height / 2 : item.maxY
+	};
+};
 var layoutSide = (items, occupiedRects = []) => {
+	const sortedOccupiedRects = [...occupiedRects].sort((left, right) => left.centerY - right.centerY);
 	const sorted = [...items].sort((left, right) => getLayoutOrderY(left) - getLayoutOrderY(right));
 	const result = /* @__PURE__ */ new Map();
 	if (!sorted.filter((item) => !item.isFixed).length) {
@@ -21223,12 +21291,16 @@ var layoutSide = (items, occupiedRects = []) => {
 			previousBottom = yValue + item.height / 2;
 			return;
 		}
-		const minCenter = Math.max(item.minY, previousBottom + item.height / 2 + getLayoutGap(item));
-		let yValue = clamp$1(item.preferredY, minCenter, item.maxY);
-		let overlappingRect = overlapsOccupiedRect(yValue, item.height, occupiedRects);
+		const orderBounds = getOrderBounds(item, sortedOccupiedRects);
+		const maxCenter = Math.min(item.maxY, orderBounds.maxCenter);
+		const minCenter = Math.max(item.minY, orderBounds.minCenter, previousBottom + item.height / 2 + getLayoutGap(item));
+		let yValue = clampRelaxed(item.preferredY, minCenter, maxCenter);
+		let overlappingRect = overlapsOccupiedRect(yValue, item.height, sortedOccupiedRects);
 		while (overlappingRect) {
-			yValue = clamp$1(overlappingRect.bottom + getLayoutGap(item) + item.height / 2, item.minY, item.maxY);
-			overlappingRect = overlapsOccupiedRect(yValue, item.height, occupiedRects);
+			const nextCandidate = overlappingRect.bottom + getLayoutGap(item) + item.height / 2;
+			if (nextCandidate === yValue) break;
+			yValue = clampRelaxed(nextCandidate, minCenter, maxCenter);
+			overlappingRect = overlapsOccupiedRect(yValue, item.height, sortedOccupiedRects);
 		}
 		result.set(item.id, {
 			xValue: item.preferredX,
@@ -21244,54 +21316,67 @@ var layoutSide = (items, occupiedRects = []) => {
 			nextTop = current.yValue - item.height / 2;
 			return;
 		}
-		const maxCenter = Math.min(item.maxY, nextTop - item.height / 2 - getLayoutGap(item));
-		const yValue = clamp$1(current.yValue, item.minY, maxCenter);
+		const orderBounds = getOrderBounds(item, sortedOccupiedRects);
+		const maxCenter = Math.min(item.maxY, orderBounds.maxCenter, nextTop - item.height / 2 - getLayoutGap(item));
+		const minCenter = Math.max(item.minY, orderBounds.minCenter);
+		const yValue = clampRelaxed(current.yValue, minCenter, maxCenter);
 		result.set(item.id, {
 			...current,
 			yValue
 		});
 		nextTop = yValue - item.height / 2;
 	});
-	const overlapOnlyMovable = sorted.filter((item) => {
-		return item.overlapOnly && !item.isFixed;
+	previousBottom = Number.NEGATIVE_INFINITY;
+	sorted.forEach((item) => {
+		const current = result.get(item.id);
+		if (!current) return;
+		if (item.isFixed) {
+			previousBottom = current.yValue + item.height / 2;
+			return;
+		}
+		const orderBounds = getOrderBounds(item, sortedOccupiedRects);
+		const maxCenter = Math.min(item.maxY, orderBounds.maxCenter);
+		const minCenter = Math.max(item.minY, orderBounds.minCenter, previousBottom + item.height / 2 + getLayoutGap(item));
+		const yValue = clampRelaxed(current.yValue, minCenter, maxCenter);
+		result.set(item.id, {
+			...current,
+			yValue
+		});
+		previousBottom = yValue + item.height / 2;
 	});
-	if (overlapOnlyMovable.length > 1) {
-		const sortedOverlapOnlyMovable = [...overlapOnlyMovable].sort((left, right) => getLayoutOrderY(left) - getLayoutOrderY(right));
-		const sharedOuterEdge = sortedOverlapOnlyMovable[0]?.side === "right" ? Math.max(...sortedOverlapOnlyMovable.map((item) => {
-			return (result.get(item.id)?.xValue ?? item.preferredX) + item.width / 2;
-		})) : Math.min(...sortedOverlapOnlyMovable.map((item) => {
-			return (result.get(item.id)?.xValue ?? item.preferredX) - item.width / 2;
-		}));
-		sortedOverlapOnlyMovable.forEach((item, index) => {
-			const current = result.get(item.id);
-			if (!current) return;
-			const spreadOffset = Math.min(index * DEFAULT_SIDE_SPREAD_STEP, DEFAULT_SIDE_SPREAD_MAX);
-			const direction = item.side === "right" ? -1 : 1;
-			const alignedXValue = item.side === "right" ? sharedOuterEdge - item.width / 2 : sharedOuterEdge + item.width / 2;
+	if (sorted.some((item) => item.overlapOnly)) {
+		const untouchedPrimary = sorted.filter((item) => {
+			return !item.isFixed && item.overlapOnly && !item.isOverlapping;
+		});
+		const secondaryMovable = sorted.filter((item) => {
+			return !item.isFixed && item.overlapOnly && item.isOverlapping;
+		});
+		untouchedPrimary.forEach((item) => {
 			result.set(item.id, {
-				...current,
-				xValue: clamp$1(alignedXValue + direction * spreadOffset, item.minX, item.maxX)
+				xValue: item.preferredX,
+				yValue: clamp$1(item.preferredY, item.minY, item.maxY)
 			});
 		});
+		if (secondaryMovable.length) applyLaneLayout(secondaryMovable, result, untouchedPrimary.map((item) => {
+			const current = result.get(item.id);
+			const centerX = current?.xValue ?? item.preferredX;
+			const centerY = current?.yValue ?? item.preferredY;
+			return {
+				top: centerY - item.height / 2,
+				bottom: centerY + item.height / 2,
+				centerY,
+				left: centerX - item.width / 2,
+				right: centerX + item.width / 2
+			};
+		}));
 		return result;
 	}
-	sorted.forEach((item, index) => {
-		const current = result.get(item.id);
-		if (!current || item.isFixed) return;
-		const spreadOffset = Math.min(index * DEFAULT_SIDE_SPREAD_STEP, DEFAULT_SIDE_SPREAD_MAX);
-		const direction = item.side === "right" ? -1 : 1;
-		const xValue = clamp$1(current.xValue + direction * spreadOffset, item.minX, item.maxX);
-		result.set(item.id, {
-			...current,
-			xValue
-		});
-	});
+	applyLaneLayout(sorted.filter((item) => !item.isFixed), result, []);
 	return result;
 };
 var getCalloutLayoutPixels = (chart) => {
 	const area = chart?.chartArea;
 	if (!chart || !area) return /* @__PURE__ */ new Map();
-	const occupiedRects = getOccupiedOriginalLabelRects(chart, area, getOverlappingCalloutIds(chart));
 	const grouped = getCalloutItems(chart, area).map((item) => {
 		const xValue = clamp$1(item.preferredX, item.minX, item.maxX);
 		return {
@@ -21305,14 +21390,8 @@ var getCalloutLayoutPixels = (chart) => {
 		left: [],
 		right: []
 	});
-	const leftLayout = layoutSide(grouped.left, occupiedRects.filter((rect) => rect.side === "left").map((rect) => ({
-		top: rect.top,
-		bottom: rect.bottom
-	})));
-	const rightLayout = layoutSide(grouped.right, occupiedRects.filter((rect) => rect.side === "right").map((rect) => ({
-		top: rect.top,
-		bottom: rect.bottom
-	})));
+	const leftLayout = layoutSide(grouped.left, []);
+	const rightLayout = layoutSide(grouped.right, []);
 	return new Map([...leftLayout.entries(), ...rightLayout.entries()]);
 };
 var getCalloutLayout = (ctx, refAnnotation, index) => {
@@ -21686,11 +21765,7 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		...baseRest,
 		label: {
 			...label,
-			display: (ctx) => {
-				if (!(refAnnotation.display ?? true)) return false;
-				if (!calloutCfg?.onlyWhenOverlapping) return false;
-				return !isCalloutOverlapping(ctx, refAnnotation, index);
-			}
+			display: () => false
 		}
 	};
 	const color = calloutCfg?.color ?? "hsl(60, 10.34482759%, 12.5%)";
@@ -21722,7 +21797,7 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 		display: (ctx) => {
 			if (!(refAnnotation.display ?? true)) return false;
 			if (!isCalloutAnchorInChartArea(ctx, refAnnotation, calloutCfg.margin ?? 0)) return false;
-			return isCalloutOverlapping(ctx, refAnnotation, index);
+			return true;
 		},
 		xValue: (ctx) => {
 			const persistenceId = getChartFromCtx(ctx)?.options?.persistenceId;
@@ -21755,7 +21830,10 @@ var getCalloutAnnotation = (refAnnotation, index) => {
 			return onCalloutDragEnd(coords, refAnnotation);
 		} : void 0,
 		calloutConnector: {
-			enabled: true,
+			enabled: ({ chart }) => {
+				if (!calloutCfg?.onlyWhenOverlapping) return true;
+				return isCalloutOverlapping({ chart }, refAnnotation, index);
+			},
 			fromId: baseId,
 			strokeStyle,
 			lineWidth,
@@ -22724,11 +22802,17 @@ var calloutConnectorPlugin = {
 		if (!raw) return;
 		(Array.isArray(raw) ? raw : Object.values(raw)).forEach((opt) => {
 			const connector = opt?.calloutConnector;
-			if (!connector || !connector.enabled || !opt?.id) return;
+			if (!connector || !opt?.id) return;
 			const labelEl = elements.find((el) => el.options && el.options.id === opt.id);
 			const fromEl = elements.find((el) => el.options && el.options.id === connector.fromId);
 			if (!labelEl || !fromEl) return;
 			if (labelEl.options?.display === false) return;
+			if (!(typeof connector.enabled === "function" ? connector.enabled({
+				chart,
+				labelEl,
+				fromEl,
+				option: opt
+			}) : connector.enabled !== false)) return;
 			const { startX, startY, endX, endY, tickStartX, tickStartY, tickEndX, tickEndY } = computeConnectorPoints(fromEl, labelEl, connector) ?? {};
 			const ctx = chart?.ctx;
 			const strokeStyle = connector?.strokeStyle ?? "rgba(120, 126, 138, 0.9)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "5.10.0-beta-2",
+  "version": "5.10.0-beta-4",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {