Add FPS sparkline chart to target cards, move timing breakdown inline

Replace the three FPS text labels (actual/current/target) with a
Chart.js sparkline chart + compact label, matching the dashboard style.
FPS history (30 samples) persists across poll rebuilds. Pipeline timing
breakdown moved inside the metrics grid directly under the FPS chart.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-21 03:06:18 +03:00
parent 67d141b75b
commit 6d33686b79
2 changed files with 115 additions and 30 deletions

View File

@@ -519,6 +519,36 @@ ul.section-tip li {
color: #999;
}
/* Target FPS sparkline row */
.target-fps-row {
display: flex;
align-items: center;
gap: 8px;
grid-column: 1 / -1;
padding: 3px 8px;
background: var(--bg-color);
border-radius: 4px;
}
.target-fps-sparkline {
position: relative;
flex: 1;
min-width: 0;
overflow: hidden;
height: 36px;
}
.target-fps-label {
flex-shrink: 0;
text-align: right;
}
.target-fps-target {
font-weight: 400;
opacity: 0.5;
font-size: 0.75rem;
}
/* Timing breakdown bar */
.timing-breakdown {
margin-top: 8px;