Fix variant pill labels to show short priority tag instead of full description

This commit is contained in:
root
2026-04-22 18:37:54 +00:00
parent 0bea387ac9
commit f3ba322403

View File

@@ -90,7 +90,7 @@ function groupByMetricFamily(allEntries, team) {
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Sub-components // Sub-components
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
function VariantPill({ entry }) { function VariantPill({ entry, label }) {
const color = statusColor(entry.status); const color = statusColor(entry.status);
const isOk = entry.status === 'Meets/Exceeds Target'; const isOk = entry.status === 'Meets/Exceeds Target';
return ( return (
@@ -114,7 +114,7 @@ function VariantPill({ entry }) {
boxShadow: `0 0 5px ${color}`, boxShadow: `0 0 5px ${color}`,
}} /> }} />
)} )}
<span style={{ color: '#94A3B8' }}>{entry.description || entry.team}</span> {label && <span style={{ color: '#94A3B8' }}>{label}</span>}
<span style={{ color, fontWeight: '600' }}>{pctDisplay(entry.compliance_pct)}</span> <span style={{ color, fontWeight: '600' }}>{pctDisplay(entry.compliance_pct)}</span>
</span> </span>
); );
@@ -178,9 +178,14 @@ function MetricHealthCard({ family, active, onClick, onInfoClick, definitionLook
{/* Variant pills */} {/* Variant pills */}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem', marginBottom: '0.5rem' }}> <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem', marginBottom: '0.5rem' }}>
{family.entries.map((entry, i) => ( {family.entries.map((entry, i) => {
<VariantPill key={entry.metric_id + '-' + i} entry={entry} /> // Only show a label when there are multiple variants to differentiate
))} let label = null;
if (family.entries.length > 1) {
label = entry.priority || `#${i + 1}`;
}
return <VariantPill key={entry.metric_id + '-' + i} entry={entry} label={label} />;
})}
</div> </div>
{/* Target */} {/* Target */}