Initial commit

1 files changed, 128 insertions, 0 deletions

diff --git a/plot.html b/plot.html
new file mode 100644
index 0000000..84c6aaf
--- /dev/null
+++ b/plot.html
@@ -0,0 +1,128 @@
+<link href="https://cdn.jsdelivr.net/npm/uplot@1.6.24/dist/uPlot.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/uplot@1.6.24/dist/uPlot.iife.min.js"></script>
+
+<script>
+	const palette = [
+		'#ffffff', // 0: unused
+		'#7EB26D', // 1: pale green
+		'#6ED0E0', // 2: light blue
+		'#EF843C', // 3: orange
+		'#E24D42', // 4: red
+		'#1F78C1', // 5: ocean
+		'#BA43A9', // 6: purple
+		'#705DA0', // 7: violet
+		'#508642', // 8: dark green
+		'#CCA300', // 9: dark sand
+	];
+
+	// this doesn't work for the theme button but idc
+	const fore = getComputedStyle(document.body).getPropertyValue('--text-normal');
+	const back = getComputedStyle(document.body).getPropertyValue('--background-code');
+
+	// this doesn't work on resize without reload but idc
+	const width = +getComputedStyle(document.body).width.slice(0,-2);
+
+	const opts = {
+		width: width,
+		height: 0.6 * width,
+		scales: {
+			x: {
+				time: false,
+			}
+		},
+		axes: [
+			{
+				stroke: fore,
+				grid: {
+					stroke: back,
+					width: 1,
+				},
+				ticks: {
+					stroke: back,
+				}
+			},
+			{
+				stroke: fore,
+				grid: {
+					stroke: back,
+					width: 1,
+				},
+				ticks: {
+					stroke: back,
+				},
+				size(self, values, axisIdx, cycleNum) {
+					let axis = self.axes[axisIdx];
+
+					// bail out, force convergence
+					if (cycleNum > 1)
+						return axis._size;
+
+					let axisSize = axis.ticks.size + axis.gap;
+
+					// find longest value
+					let longestVal = (values ?? []).reduce((acc, val) => (
+						val.length > acc.length ? val : acc
+					), "");
+
+					if (longestVal != "") {
+						self.ctx.font = axis.font[0];
+						axisSize += self.ctx.measureText(longestVal).width / devicePixelRatio;
+					}
+
+					return Math.ceil(axisSize);
+				}
+			}
+		]
+	};
+
+	const tables = document.querySelectorAll("table");
+	for (let table of tables) {
+		const head = table.querySelector("thead");
+		const body = table.querySelector("tbody");
+
+		const names = [...head.children[0].cells].map(c => c.innerText);
+		const rows = [...body.children].map(c => c.innerText.split("\t").map(x => +x))
+		const trans = rows[0].map((_, i) => rows.map(row => row[i]))
+
+		const cont = document.createElement("div");
+		cont.classList.add("plotWrap")
+
+		const button = document.createElement("button");
+		button.innerText = "toggle view";
+		button.addEventListener("click", () => {
+			[table.style.display, cont.children[0].style.display] = [cont.children[0].style.display, table.style.display]
+		})
+
+		opts.height = table.offsetHeight;
+		opts.series = [];
+		for (let i = 0; i < names.length; i++) {
+			const name = names[i];
+			opts.series.push({label: name, show: true, stroke: palette[i], width: 3});
+		}
+
+		new uPlot(opts, trans, cont);
+		table.parentNode.insertBefore(cont, table.nextSibling);
+		cont.appendChild(button);
+
+
+		table.style.display = "none";
+	}
+
+	window.matchMedia('print').addListener(function(mql) {
+		document.querySelectorAll(".plotWrap button").forEach(e => e.click());
+	});
+</script>
+
+<style>
+	.plotWrap, .plotWrap * {
+		margin: 0 auto;
+		text-align: center;
+	}
+	.plotWrap button {
+		border: 0;
+		background-color: var(--background-button);
+		color: var(--text-button);
+		padding: 8px;
+		border-radius: 5px;
+	}
+</style>