Mouse in iframe demo

crisislab-platform · Dec 17, 2023 · 2ada66e · 2ada66e
1 parent 85eafec
commit 2ada66e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/examples/mouse-in-iframe/iframe.html b/examples/mouse-in-iframe/iframe.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Frame</title>
+	</head>
+	<body>
+		<div id="chart-container" height="250" width="500"></div>
+		<script type="module" src="mouse-in-iframe.ts"></script>
+	</body>
+</html>
diff --git a/examples/mouse-in-iframe/index.html b/examples/mouse-in-iframe/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Mouse effects in iFrame</title>
+	</head>
+	<body>
+		<h1>Mouse effects in iFrame</h1>
+		<iframe
+			src="./iframe.html"
+			frameborder="0"
+			style="width: 100%; height: auto; padding-inline: 10px"
+		></iframe>
+		<iframe
+			src="./iframe.html"
+			frameborder="0"
+			style="padding: 30%"
+		></iframe>
+	</body>
+</html>
diff --git a/examples/mouse-in-iframe/mouse-in-iframe.ts b/examples/mouse-in-iframe/mouse-in-iframe.ts
@@ -0,0 +1,53 @@
+import {
+	TimeLine,
+	Point,
+	doubleClickCopyPlugin,
+	pointerCrosshairPlugin,
+	highlightNearestPointPlugin,
+	nearestPointInfoPopupPlugin,
+} from "../../src";
+
+const data: Point[] = [];
+const maxPoints = 300;
+const chart = new TimeLine({
+	container: document.getElementById("chart-container") as HTMLElement,
+	data,
+	maxPoints,
+	// Note that these aren't used by the chart itself, they're just used by plugins
+	xLabel: "Time",
+	yLabel: "Random numbers",
+	plugins: [
+		doubleClickCopyPlugin(),
+		pointerCrosshairPlugin(),
+		highlightNearestPointPlugin(),
+		nearestPointInfoPopupPlugin(),
+	],
+});
+
+let prev = 0;
+setInterval(() => {
+	const y =
+		prev + Math.floor(Math.random() * 10) * (Math.random() > 0.5 ? -1 : 1);
+	prev = y;
+	data.push({
+		x: Date.now(),
+		y,
+	});
+	// This is very important!
+	// You can't have more points in the data array
+	// than chart.maxPoints, or you'll have weird
+	// rendering issues.
+	while (data.length > maxPoints) {
+		data.shift();
+	}
+
+	// Call chart.recompute() when you're done updating `data`
+	chart.recompute();
+}, 50);
+
+// Note that you need to call chart.draw() yourself
+function renderLoop() {
+	requestAnimationFrame(renderLoop);
+	chart.draw();
+}
+renderLoop();