diff --git a/JetStream.css b/JetStream.css
index 997077f5..6305b1c7 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -462,9 +462,32 @@ dt:target {
.plot svg circle {
fill: var(--color-primary);
+ opacity: 0.9;
+}
+
+.plot svg .worst-line {
+ stroke: var(--color-primary);
+ stroke-width: 1.5;
+ stroke-dasharray: 10, 6;
+ stroke-linecap: round;
opacity: 0.8;
}
+.plot svg .average-line {
+ stroke: var(--text-color-subtle);
+ stroke-width: 1.5;
+ stroke-dasharray: 6, 10;
+ stroke-dashoffset: 6;
+ stroke-linecap: round;
+ opacity: 0.8;
+}
+
+.plot svg .line-hitbox {
+ stroke: var(--text-color-inverse);
+ stroke-width: 8;
+ opacity: 1.0;
+}
+
@keyframes fadein {
from {
opacity: 0;
diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 92df598e..0c206b8a 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -1079,27 +1079,51 @@ class Benchmark {
if (!plotContainer || !this.results || this.results.length === 0)
return;
- const scoreElement = document.getElementById(this.scoreIdentifier("Score"));
- const width = scoreElement.offsetWidth;
- const height = scoreElement.offsetHeight;
+ const scoreElementBounds = document.getElementById(this.scoreIdentifier("Score")).getBoundingClientRect();
+ const width = scoreElementBounds.width;
+ const height = scoreElementBounds.height;
- const padding = 5;
+ const radius = Math.max(1.5, Math.min(2.5, 10 - (this.iterations / 10)));
+
+ const padding = radius;
const maxResult = Math.max(...this.results);
const minResult = Math.min(...this.results);
- const xRatio = (width - 2 * padding) / (this.results.length - 1 || 1);
- const yRatio = (height - 2 * padding) / (maxResult - minResult || 1);
- const radius = Math.max(1.5, Math.min(2.5, 10 - (this.iterations / 10)));
+ const xRatio = (width - 2 * padding) / (this.results.length - 1);
+ const yRatio = (height - 2 * padding) / (maxResult - minResult);
+
+ const yPos = (value) => height - padding - (value - minResult) * yRatio;
let circlesSVG = "";
for (let i = 0; i < this.results.length; i++) {
const result = this.results[i];
const cx = padding + i * xRatio;
- const cy = height - padding - (result - minResult) * yRatio;
+ const cy = yPos(result);
const title = `Iteration ${i + 1}: ${uiFriendlyDuration(result)}`;
circlesSVG += `${title}`;
}
- plotContainer.innerHTML = ``;
+
+ let linesSVG = "";
+ let linesHitBoxSVG = "";
+ const lineWidth = width - padding;
+ if (this.worst4Time) {
+ const worstY = yPos(this.worst4Time);
+ const title = `Worst: ${uiFriendlyDuration(this.worst4Time)}`;
+ linesSVG += ``;
+ linesHitBoxSVG += `${title}`;
+ }
+ if (this.averageTime) {
+ const averageY = yPos(this.averageTime);
+ const title = `Average: ${uiFriendlyDuration(this.averageTime)}`;
+ linesSVG += ``;
+ linesHitBoxSVG += `${title}`;
+ }
+
+ plotContainer.innerHTML = ``;
}
updateConsoleAfterRun(scoreEntries) {