Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip issue #question #931

Open
Sam-tech94 opened this issue Feb 29, 2024 · 0 comments
Open

Tooltip issue #question #931

Sam-tech94 opened this issue Feb 29, 2024 · 0 comments

Comments

@Sam-tech94
Copy link

How to write correctly the condition that the tooltip stays inside of graph from the left
Screenshot 2024-02-29 at 18 30 14
Screenshot 2024-02-29 at 18 30 11
Screenshot 2024-02-29 at 18 30 08
Screenshot 2024-02-29 at 18 30 05

<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>
@Sam-tech94 Sam-tech94 changed the title Tooltip issue Tooltip issue #question Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant