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

the tooltip stick to points #930

Open
Sam-tech94 opened this issue Feb 29, 2024 · 1 comment
Open

the tooltip stick to points #930

Sam-tech94 opened this issue Feb 29, 2024 · 1 comment

Comments

@Sam-tech94
Copy link

Screenshot 2024-02-29 at 11 34 11

How to make the tooltip stick to points

<!doctype html>

<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(255, 249, 196, 0.92)", color: "black" } } = {}) { 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;
			legendEl.style.transform = "translate(" + left + "px, " + top + "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
					);
				},
				draw: (u) => {
					if (x1 != null || x2 != null) {
						u.ctx.save();

						u.ctx.lineWidth = 2;

						if (x1 != null) {
							drawDatum(u, x1, y1, "blue");
						}

						if (x2 != null) {
							drawDatum(u, x2, y2, "orange");
							drawDelta(u);
						}

						u.ctx.restore();
					}
				},
			},
		};
	}

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

	const opts = {
		width: 800,
		height: 400,
		plugins: [datumsPlugin(), legendAsTooltipPlugin()],
		scales: {
			x: {
				time: false,
			},
		},
		series: [
			{},
			{
				label: "Data 1",
				stroke: "green",
				fill: "rgba(255,0,0,0.1)",
			},
			{
				label: "Data 2",
				stroke: "red",
				fill: "rgba(255,0,0,0.1)",
			},
		],
		toolbar
	};

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

Hi Sam, I was implementing same feature to lock tooltip when user click inside uPlot and i want to share my solution.

funtion initTooltip(){
  // first we make variable to track if tooltip should be locked
  let locked = false;
  // initalize tooltip plugin
  const tooltip = {
    init: (u)=>{
      // initialize overlay like yours
      // add click listener on u.over
      u.over.addEventListener("click", ()=>{
        // toogle locked variable
        locked = !locked;
        // here to lock uPlot, user cannot interact to uPlot instance until lock is released (next click).
        // this is from option uPlot.Cursor after initialization
        u.cursor._lock = locked;
      })
    },
    setCursor: (u)=>{
      if(locked) return;
      // the rest of your update function
    }
  }
  return tooltip;
}

capture

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

2 participants