diff --git a/package.json b/package.json
index b80b654..9a469ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "site-gateway",
- "version": "0.11.62",
+ "version": "0.11.63",
"private": true,
"description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
"type": "module",
diff --git a/src/public/app.js b/src/public/app.js
index b3e6c24..82b399d 100644
--- a/src/public/app.js
+++ b/src/public/app.js
@@ -249,17 +249,36 @@ function renderPerformance() {
const plotWidth = width - left - right, plotHeight = height - top - bottom;
const xAt = index => left + (points.length > 1 ? (index / (points.length - 1)) * plotWidth : plotWidth);
const yAt = count => top + plotHeight - (count / max) * plotHeight;
- const gridLines = [0, 0.5, 1].map(fraction => {
+ const gridFractions = [0, 0.5, 1];
+ const gridLines = gridFractions.map(fraction => {
const y = (top + plotHeight * (1 - fraction)).toFixed(1);
+ return ``;
+ }).join("");
+ const leftPct = (left / width) * 100, topPct = 0, plotHeightPct = (plotHeight / height) * 100, topInsetPct = (top / height) * 100;
+ const axisLabels = gridFractions.map(fraction => {
const value = Math.round(max * fraction);
- return `${value}`;
+ const yPct = topInsetPct + plotHeightPct * (1 - fraction);
+ return `${value}`;
}).join("");
const firstPoint = points[0], lastPoint = points[points.length - 1];
- const timeLabels = points.length ? `${escapeHtml(formatTime(firstPoint.at))}${escapeHtml(formatTime(lastPoint.at))}` : "";
- const linePoints = points.map((point, index) => `${xAt(index).toFixed(1)},${yAt(point.count).toFixed(1)}`).join(" ");
- const areaPath = points.length ? `M${xAt(0).toFixed(1)},${(top + plotHeight).toFixed(1)} L${linePoints.replaceAll(" ", " L")} L${xAt(points.length - 1).toFixed(1)},${(top + plotHeight).toFixed(1)} Z` : "";
+ const timeLabels = points.length ? `${escapeHtml(formatTime(firstPoint.at))}${escapeHtml(formatTime(lastPoint.at))}` : "";
+ $("#performance-sparkline-labels").innerHTML = points.length ? `${axisLabels}${timeLabels}` : "";
+ const coords = points.map((point, index) => [xAt(index), yAt(point.count)]);
+ const smoothLine = coords.length < 2 ? "" : coords.reduce((d, point, index) => {
+ if (index === 0) return `M${point[0].toFixed(1)},${point[1].toFixed(1)}`;
+ const p0 = coords[index - 2 >= 0 ? index - 2 : index - 1];
+ const p1 = coords[index - 1];
+ const p2 = point;
+ const p3 = coords[index + 1] || point;
+ const cp1x = p1[0] + (p2[0] - p0[0]) / 6, cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+ const cp2x = p2[0] - (p3[0] - p1[0]) / 6, cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+ return `${d} C${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${p2[0].toFixed(1)},${p2[1].toFixed(1)}`;
+ }, "");
+ const baseline = (top + plotHeight).toFixed(1);
+ const areaPath = coords.length ? `${smoothLine} L${coords[coords.length - 1][0].toFixed(1)},${baseline} L${coords[0][0].toFixed(1)},${baseline} Z` : "";
$("#performance-sparkline").setAttribute("viewBox", `0 0 ${width} ${height}`);
- $("#performance-sparkline").innerHTML = points.length ? `${gridLines}${timeLabels}` : 'No request data for this window yet.';
+ $("#performance-sparkline").innerHTML = points.length ? `${gridLines}` : "";
+ if (!points.length) $("#performance-sparkline-labels").innerHTML = 'No request data for this window yet.';
const routes = data.routes || [];
$("#performance-rows").innerHTML = routes.length ? routes.map(route => `| ${escapeHtml(route.host)} | ${route.hourRequests} | ${route.dayRequests} | ${route.dayErrors ? `${route.dayErrors}` : "0"} | ${route.dayAvgMs == null ? "—" : `${route.dayAvgMs} ms`} |
`).join("") : '| No requests have been logged yet. |
';
if (selected) $(`#performance-rows tr.row-highlight`)?.scrollIntoView({ block: "nearest" });
diff --git a/src/public/index.html b/src/public/index.html
index 38dbf74..05b5c8b 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -145,7 +145,10 @@
No requests recorded yet. Not checked yet.
Per-route
Throughput by domain