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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user