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 = `${circlesSVG}`; + + 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 = ` + ${linesHitBoxSVG} + ${circlesSVG}$ + ${linesSVG} + `; } updateConsoleAfterRun(scoreEntries) {