<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VByte Performance Regression</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: -apple-system, sans-serif; margin: 20px; background: #1a1a2e; color: #eee; }
h1 { color: #00d4ff; margin-bottom: 5px; }
.subtitle { color: #888; margin-bottom: 20px; }
.latest { background: #16213e; padding: 15px; border-radius: 8px; margin: 20px 0; }
.latest h3 { margin-top: 0; color: #00d4ff; }
.metrics { display: flex; flex-wrap: wrap; gap: 15px; }
.metric { background: #0f3460; padding: 12px 16px; border-radius: 6px; min-width: 140px; }
.metric .label { font-size: 11px; color: #888; margin-bottom: 4px; }
.metric .value { font-size: 18px; font-weight: bold; color: #fff; }
.metric .diff { font-size: 12px; margin-top: 4px; }
.metric .diff.improved { color: #0f0; }
.metric .diff.regressed { color: #f66; }
.metric .diff.neutral { color: #ff0; }
.chart-container { width: 100%; max-width: 1200px; margin: 30px 0; }
.note { color: #666; font-size: 12px; margin-top: 10px; }
</style>
</head>
<body>
<h1>VByte Performance Regression</h1>
<div class="subtitle">Commit: 3ce70e1 (dev) | 2025-12-30 16:16:41</div>
<div class="latest">
<h3>Latest Results</h3>
<div class="metrics">
<div class="metric">
<div class="label">e_li()</div>
<div class="value">15.58 µs</div>
<div class="diff neutral">+0.8%</div>
</div>
<div class="metric">
<div class="label">d_li()</div>
<div class="value">23.02 µs</div>
<div class="diff neutral">-0.5%</div>
</div>
<div class="metric">
<div class="label">e_diff()</div>
<div class="value">6.65 µs</div>
<div class="diff improved">-1.2%</div>
</div>
<div class="metric">
<div class="label">d_diff()</div>
<div class="value">7.14 µs</div>
<div class="diff neutral">-0.7%</div>
</div></div>
<div class="note">Lower is better. Green = improved, Red = regressed vs previous.</div>
</div>
<div class="chart-container"><canvas id="chart"></canvas></div>
<script>
const data = [{"date":"2025-12-30 15:53:24","commit":"4bfcb72","branch":"main"},{"date":"2025-12-30 15:53:53","commit":"4bfcb72","branch":"main","e_li":17400,"d_li":31462,"e_diff":6727.299999999999,"d_diff":6724.1},{"date":"2025-12-30 16:04:06","commit":"35fac3e","branch":"dev","e_li":16444,"d_li":28282,"e_diff":6568.2,"d_diff":7063.1},{"date":"2025-12-30 16:05:58","commit":"5bd9d38","branch":"dev","e_li":17235,"d_li":22168,"e_diff":6656.4,"d_diff":7131.5},{"date":"2025-12-30 16:07:20","commit":"148455f","branch":"dev","e_li":17469,"d_li":21972,"e_diff":6584.2,"d_diff":7061.7},{"date":"2025-12-30 16:09:11","commit":"148455f","branch":"dev","e_li":18034,"d_li":26510,"e_diff":6803.7,"d_diff":7111.4},{"date":"2025-12-30 16:10:54","commit":"148455f","branch":"dev","e_li":15460,"d_li":23146,"e_diff":6738.6,"d_diff":7190.9},{"date":"2025-12-30 16:16:41","commit":"3ce70e1","branch":"dev","e_li":15578,"d_li":23022,"e_diff":6654.7,"d_diff":7138}];
const labels = data.map(d => d.commit);
new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels,
datasets: [
{
label: "e_li()",
data: data.map(d => d.e_li),
borderColor: "#00d4ff",
backgroundColor: "#00d4ff22",
fill: false,
tension: 0.3,
hidden: false
},
{
label: "d_li()",
data: data.map(d => d.d_li),
borderColor: "#0f0",
backgroundColor: "#0f022",
fill: false,
tension: 0.3,
hidden: false
},
{
label: "e_diff()",
data: data.map(d => d.e_diff),
borderColor: "#ff6b6b",
backgroundColor: "#ff6b6b22",
fill: false,
tension: 0.3,
hidden: false
},
{
label: "d_diff()",
data: data.map(d => d.d_diff),
borderColor: "#ffa500",
backgroundColor: "#ffa50022",
fill: false,
tension: 0.3,
hidden: false
}
]
},
options: {
responsive: true,
interaction: { mode: "index", intersect: false },
plugins: {
legend: { labels: { color: "#eee" }, position: "bottom" },
title: { display: true, text: "Execution Time (ns) - Lower is Better", color: "#eee" }
},
scales: {
x: { ticks: { color: "#888" }, grid: { color: "#333" } },
y: { ticks: { color: "#888" }, grid: { color: "#333" }, type: "logarithmic" }
}
}
});
</script>
</body>
</html>