Spaces:
Sleeping
Sleeping
File size: 4,277 Bytes
dec56a6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | import clsx from 'clsx';
import { fmt, fmtPct } from '../utils/format.js';
const ZONE_COLORS = {
CRITICAL: 'var(--zone-critical)',
UNDERFUNDED: 'var(--zone-under)',
PROFIT: 'var(--zone-profit)',
WASTAGE: 'var(--zone-wastage)',
ZERO: 'var(--text-mute)',
};
function zoneFor(allocation, t) {
if (allocation === 0) return 'ZERO';
if (allocation < t.critical) return 'CRITICAL';
if (allocation < t.demand) return 'UNDERFUNDED';
if (allocation <= t.surplus) return 'PROFIT';
return 'WASTAGE';
}
export default function SectorCard({
sector,
allocation,
revenue,
revenueFactor,
consumption,
thresholds,
eventMultiplier,
isFailureRound = false,
isFailingSector = false,
}) {
const zone = zoneFor(allocation, thresholds);
const zoneColor = ZONE_COLORS[zone];
const max = Math.max(thresholds.wastage * 1.2, allocation * 1.05, 1);
const allocPct = (allocation / max) * 100;
const critPct = (thresholds.critical / max) * 100;
const demandPct = (thresholds.demand / max) * 100;
const surplusPct = (thresholds.surplus / max) * 100;
const wastagePct = (thresholds.wastage / max) * 100;
const ratio = thresholds.demand > 0 ? allocation / thresholds.demand : 0;
return (
<div
className={clsx('sector', {
'is-failure-round': isFailureRound,
'is-failing-sector': isFailingSector,
})}
style={{ '--zone-color': zoneColor }}
>
<div className="head">
<div>
<span className="name">{sector.full_name}</span>
{' '}<span className="full">{eventMultiplier !== 1 ? `event ×${eventMultiplier.toFixed(2)}` : ''}</span>
</div>
{isFailingSector ? (
<span className="zone-badge failing">FAILED · {fmtPct(ratio)}</span>
) : isFailureRound ? (
<span className="zone-badge muted">{zone} · no rev</span>
) : (
<span className="zone-badge">{zone}</span>
)}
</div>
<div className="alloc-bar" title={`Allocation ${fmt(allocation)} | Demand ${fmt(thresholds.demand)} | Surplus ${fmt(thresholds.surplus)}`}>
<div className="zones">
<div className="seg" style={{ width: `${critPct}%`, background: 'var(--zone-critical)' }} />
<div className="seg" style={{ width: `${demandPct - critPct}%`, background: 'var(--zone-under)' }} />
<div className="seg" style={{ width: `${surplusPct - demandPct}%`, background: 'var(--zone-profit)' }} />
<div className="seg" style={{ width: `${wastagePct - surplusPct}%`, background: 'var(--zone-wastage)' }} />
<div className="seg" style={{ width: `${100 - wastagePct}%`, background: 'var(--zone-wastage)', opacity: 0.08 }} />
</div>
<div className="alloc-fill" style={{ width: `${Math.min(allocPct, 100)}%` }} />
<div className="marker" style={{ left: `${critPct}%` }}>
<span className="label">crit</span>
</div>
<div className="marker" style={{ left: `${demandPct}%` }}>
<span className="label">demand</span>
</div>
<div className="marker" style={{ left: `${surplusPct}%` }}>
<span className="label">surplus</span>
</div>
<div className="marker" style={{ left: `${wastagePct}%` }}>
<span className="label">wastage</span>
</div>
</div>
<div className="metrics">
<div className="m">
<span className="l">Allocated</span>
<span className="v">{fmt(allocation)}</span>
</div>
<div className="m">
<span className="l">Revenue</span>
<span className="v">{fmt(revenue)}</span>
</div>
<div className="m">
<span className="l">RF × Prod</span>
<span className="v">{revenueFactor.toFixed(2)}</span>
</div>
<div className="m">
<span className="l">Demand</span>
<span className="v">{fmt(thresholds.demand)}</span>
</div>
<div className="m">
<span className="l">Consumed</span>
<span className="v">{fmt(consumption)}</span>
</div>
<div className="m">
<span className="l">% of demand</span>
<span className="v">{fmtPct(ratio)}</span>
</div>
</div>
</div>
);
}
|