Tooltip issue #question

[Sam-tech94]

How to write correctly the condition that the tooltip stays inside of graph from the left

<title>Measure / Datums</title>

<link rel="stylesheet" href="../dist/uPlot.min.css" />

<script src="../dist/uPlot.iife.js"></script> <script> // converts the legend into a simple tooltip function legendAsTooltipPlugin({ className, style = { backgroundColor: "rgba(0, 0, 0, 0.97)", color: "#f0f0f0", }, } = {}) { let legendEl;

		function init(u, opts) {
			legendEl = u.root.querySelector(".u-legend");

			legendEl.classList.remove("u-inline");
			className && legendEl.classList.add(className);

			uPlot.assign(legendEl.style, {
				textAlign: "left",
				pointerEvents: "none",
				display: "none",
				position: "absolute",
				left: 0,
				top: 0,
				zIndex: 100,
				boxShadow: "2px 2px 10px rgba(0,0,0,0.5)",
				...style,
			});

			const idents = legendEl.querySelectorAll(".u-marker");

			for (let i = 0; i < idents.length; i++)
				idents[i].style.height = 0;

			const overEl = u.over;
			overEl.style.overflow = "visible";

			overEl.appendChild(legendEl);

			overEl.addEventListener("mouseenter", () => {
				legendEl.style.display = null;
			});
			overEl.addEventListener("mouseleave", () => {
				legendEl.style.display = "none";
			});
		}

		// function update(u) {
		// 	const { left, top } = u.cursor;

		// 	if (u.bbox.width === 666 && u.bbox.width === 1450 ) {
		// 		legendEl.offsetLeft = 20
		// 	} else {
		// 		legendEl.style.transform = "translate(" + left + "px, " + top + "px)";
		// 	}

		// 	// // Get the dimensions of the tooltip
		// 	// const tooltipWidth = legendEl.offsetWidth;
		// 	// const tooltipHeight = legendEl.offsetHeight;

		// 	// // Calculate the translated position relative to the graph area
		// 	// let translatedLeft = left;
		// 	// let translatedTop = top;

		// 	// // Adjust translation for left side
		// 	// if (left < 0) {
		// 	// 	translatedLeft = 0;
		// 	// } else if (left + tooltipWidth > u.bbox.width) { // Adjust translation for right side
		// 	// 	translatedLeft = u.bbox.width - tooltipWidth;
		// 	// }

		// 	// // Adjust translation for top side
		// 	// if (top < 0) {
		// 	// 	translatedTop = 0;
		// 	// } else if (top + tooltipHeight > u.bbox.height) { // Adjust translation for bottom side
		// 	// 	translatedTop = u.bbox.height - tooltipHeight;
		// 	// }

		// 	// // Adjust for the position of the graph area within the document
		// 	// const graphOffsetLeft = u.bbox.left;
		// 	// const graphOffsetTop = u.bbox.top;

		// 	// // Calculate the position of the tooltip relative to the graph area
		// 	// const tooltipLeft = translatedLeft - graphOffsetLeft;
		// 	// const tooltipTop = translatedTop - graphOffsetTop;

		// 	// // Set the position of the tooltip
		// 	// legendEl.style.left = tooltipLeft + "px";
		// 	// legendEl.style.top = tooltipTop + "px";
		// }

		function update(u) {
			const { left, top } = u.cursor;

			// Get the dimensions of the tooltip
			const tooltipWidth = legendEl.offsetWidth;
			const tooltipHeight = legendEl.offsetHeight;

			// Calculate the maximum translation for the tooltip
			const maxLeftTranslation = u.bbox.width - tooltipWidth;
			const maxTopTranslation = u.bbox.height - tooltipHeight;

			// Calculate the translated position relative to the graph area
			let translatedLeft = left;
			let translatedTop = top;

			// Adjust translation for left side
			if (left < 0) {
				translatedLeft = 0;
			} else if (left > maxLeftTranslation) {
				translatedLeft = maxLeftTranslation;
			}

			// Adjust translation for top side
			if (top < 0) {
				translatedTop = 0;
			} else if (top > maxTopTranslation) {
				translatedTop = maxTopTranslation;
			}

			// Adjust for the position of the graph area within the document
			const graphOffsetLeft = u.bbox.left;
			const graphOffsetTop = u.bbox.top;

			// Calculate the position of the tooltip relative to the graph area
			const tooltipLeft = translatedLeft - graphOffsetLeft;
			const tooltipTop = translatedTop - graphOffsetTop;

			// Set the position of the tooltip
			legendEl.style.left = tooltipLeft + "px";
			legendEl.style.top = tooltipTop + "px";
		}










		return {
			hooks: {
				init: init,
				setCursor: update,
			},
		};
	}

	function datumsPlugin() {
		let x1;
		let x2;
		let y1;
		let y2;

		const drawDatum = (u, x, y, color) => {
			let cx = u.valToPos(x, "x", true);
			let cy = u.valToPos(y, "y", true);
			let rad = 10;

			u.ctx.strokeStyle = color;
			u.ctx.beginPath();

			u.ctx.arc(cx, cy, rad, 0, 2 * Math.PI);

			u.ctx.moveTo(cx - rad - 5, cy);
			u.ctx.lineTo(cx + rad + 5, cy);
			u.ctx.moveTo(cx, cy - rad - 5);
			u.ctx.lineTo(cx, cy + rad + 5);

			u.ctx.stroke();
		};

		const clearDatums = (u) => {
			x1 = x2 = y1 = y2 = null;
			u.redraw();
		};

		const drawDelta = (u) => {
			let dxLabel = (x2 - x1).toPrecision(3);
			let dyLabel = (y2 - y1).toPrecision(3);
			let xPos = u.valToPos((x1 + x2) / 2, "x", true);
			let yPos = u.valToPos((y1 + y2) / 2, "y", true);
			u.ctx.textAlign = "center";
			u.ctx.textBaseline = "middle";
			u.ctx.fillStyle = "black";
			u.ctx.fillText(
				`dx: ${dxLabel}, dy: ${dyLabel}`,
				xPos,
				yPos
			);
		};

		return {
			hooks: {
				init: (u) => {
					u.over.tabIndex = -1; // required for key handlers
					u.over.style.outlineWidth = "0"; // prevents yellow input box outline when in focus

					u.over.addEventListener("wheel", (e) => {
						clearDatums(u);
					});

					u.over.addEventListener("dblclick", (e) => {
						clearDatums(u);
					});

					u.over.addEventListener(
						"keydown",
						(e) => {
							if (e.key == "Escape") {
								clearDatums(u);
							} else {
								const { left, top } = u.cursor;

								if (left >= 0 && top >= 0) {
									if (e.key == "1") {
										x1 = u.posToVal(left, "x");
										y1 = u.posToVal(top, "y");
										u.redraw();
									} else if (e.key == "2") {
										x2 = u.posToVal(left, "x");
										y2 = u.posToVal(top, "y");
										u.redraw();
									}
								}
							}
						},
						true
					);
				},

			},
		};
	}

	let data = [
		[0, 1, 2, 3, 4],
		[0, 60, 30, 25, 7],
		[0, 30, 40, 35, 48],
		[0, 20, 40, 15, 8],
	];

	const opts = {
		width: 800,
		height: 400,
		plugins: [datumsPlugin(), legendAsTooltipPlugin()],
		focus: {
			alpha: 0.3,
		},
		cursor: {
			lock: true,
			drag: {
				x: true,
				y: true,
			},
			sync: {
				key: 1,
				scales: ["x", "y"],
			},
			focus: {
				prox: 30,
			},
		},
		scales: {
			x: {
				time: false,
			},
		},
		series: [
			{},
			{
				label: "Data 1",
				stroke: "red",
				fill: "rgba(255,0,0,0.1)",
			},
			{
				label: "Data 2",
				stroke: "blue",
				fill: "rgba(0,0,255,0.1)",
			},
		],
	};

	let u = new uPlot(opts, data, document.body);
</script>