jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Color metric card percentage green/yellow/red based on target, keep NC count always red

Browse Source
This commit is contained in:
Jordan Ramos
2026-05-14 15:30:43 -06:00
parent a72300475b
commit b808d0e38e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/pages/CCPMetricsPage.js
View File

@@ -132,22 +132,22 @@ function MetricBreakdownPanel({ metrics }) {
{displayMetrics.map(m => { {displayMetrics.map(m => {
const pct = m.total > 0 ? (m.compliant / m.total) : 0; const pct = m.total > 0 ? (m.compliant / m.total) : 0;
const target = Number(m.target || 0); const target = Number(m.target || 0);
const color = pct >= target ? '#10B981' : pct >= target * 0.85 ? '#F59E0B' : '#EF4444'; const pctColor = pct >= target ? '#10B981' : pct >= target * 0.85 ? '#F59E0B' : '#EF4444';
return ( return (
<div <div
key={m.metric_id} key={m.metric_id}
style={{ style={{
background: 'rgba(15, 23, 42, 0.7)', background: 'rgba(15, 23, 42, 0.7)',
border: `1px solid ${color}30`, border: `1px solid ${pctColor}30`,
borderRadius: '0.4rem', borderRadius: '0.4rem',
padding: '0.6rem 0.75rem', padding: '0.6rem 0.75rem',
}} }}
> >
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.3rem' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.3rem' }}>
<span style={{ fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '700', color: '#E2E8F0' }}>{m.metric_id}</span> <span style={{ fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '700', color: '#E2E8F0' }}>{m.metric_id}</span>
<span style={{ fontSize: '0.55rem', color: '#475569', fontFamily: 'monospace' }}>{(pct * 100).toFixed(0)}%</span> <span style={{ fontSize: '0.55rem', fontFamily: 'monospace', color: pctColor }}>{(pct * 100).toFixed(0)}%</span>
</div> </div>
<div style={{ fontSize: '1rem', fontWeight: '700', color }}>{m.non_compliant.toLocaleString()}</div> <div style={{ fontSize: '1rem', fontWeight: '700', color: '#EF4444' }}>{m.non_compliant.toLocaleString()}</div>
</div> </div>
); );
})} })}