1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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>
|
