{/* Top row — composite stacked bar, color cascade */}
{aging.map((a, i) => {
const pct = a.amount / total;
const isHov = hover === i;
const dim = hover !== null && !isHov;
return (
setHover(i)}
onMouseLeave={() => setHover(null)}
title={`${a.bucket} — ${fmt$(a.amount)}`}
/>
);
})}
{/* Detail rows — each bucket */}
{aging.map((a, i) => {
const pct = a.amount / total;
const isHov = hover === i;
return (
setHover(i)}
onMouseLeave={() => setHover(null)}
style={{ background: isHov ? tones[i].glow : "transparent" }}
>
{a.bucket}
{RISK_LABELS[i]}
{fmt$M(a.amount)}
{fmtPct(pct, 0)}
);
})}
);
}
/* ──────────────────────────────────────────────────────────
Denial summary — nested ring (overall / CPT / encounter)
────────────────────────────────────────────────────────── */
function DenialNestedRing({ overall, byCPT, byEncounter, palette }) {
// Top-N rollup so the rings stay readable
const topN = (data, n) => {
const sorted = [...data].sort((a, b) => b.v - a.v);
if (sorted.length <= n) return sorted;
const head = sorted.slice(0, n);
const tail = sorted.slice(n);
const otherV = tail.reduce((a, d) => a + d.v, 0);
if (otherV > 0) head.push({ k: "Other", v: otherV });
return head;
};
const cpt = topN(byCPT, 5);
const enc = topN(byEncounter, 5);
// Bigger canvas + breathing room
const W = 460, H = 460;
const cx = W / 2, cy = H / 2;
// Concentric rings: outer = encounter, middle = CPT, inner = overall rate
const rings = [
{ key: "enc", data: enc, R: 200, r: 158, label: "By encounter" },
{ key: "cpt", data: cpt, R: 152, r: 110, label: "By CPT" },
{ key: "ovr", data: [
{ k: "Denial rate", v: overall },
{ k: "Clean", v: 1 - overall }
], R: 100, r: 64, label: "Overall" }
];
const [hover, setHover] = useState(null); // { ringKey, idx, k, v }
// Soft palette — accent for outer, sage for middle, terracotta+border for inner
const palettes = {
enc: [
"var(--accent)",
"color-mix(in oklab, var(--accent) 70%, var(--surface))",
"color-mix(in oklab, var(--accent) 48%, var(--surface))",
"color-mix(in oklab, var(--accent) 28%, var(--surface))",
"color-mix(in oklab, var(--accent) 14%, var(--surface))",
"color-mix(in oklab, var(--rcm-ink) 18%, var(--surface))",
],
cpt: [
"var(--hero-headline)",
"color-mix(in oklab, var(--hero-headline) 72%, var(--surface))",
"color-mix(in oklab, var(--hero-headline) 50%, var(--surface))",
"color-mix(in oklab, var(--hero-headline) 30%, var(--surface))",
"color-mix(in oklab, var(--hero-headline) 14%, var(--surface))",
"color-mix(in oklab, var(--rcm-ink) 18%, var(--surface))",
],
ovr: [
"var(--accent)",
"color-mix(in oklab, var(--rcm-ink) 8%, var(--surface))"
]
};
function arcs(ring) {
const sum = ring.data.reduce((a, d) => a + d.v, 0);
let acc = 0;
return ring.data.map((d, i) => {
const start = (acc / sum) * Math.PI * 2 - Math.PI / 2;
acc += d.v;
const end = (acc / sum) * Math.PI * 2 - Math.PI / 2;
const large = end - start > Math.PI ? 1 : 0;
const x1 = cx + Math.cos(start) * ring.R, y1 = cy + Math.sin(start) * ring.R;
const x2 = cx + Math.cos(end) * ring.R, y2 = cy + Math.sin(end) * ring.R;
const x3 = cx + Math.cos(end) * ring.r, y3 = cy + Math.sin(end) * ring.r;
const x4 = cx + Math.cos(start) * ring.r, y4 = cy + Math.sin(start) * ring.r;
const path = `M${x1.toFixed(2)},${y1.toFixed(2)} A${ring.R},${ring.R} 0 ${large} 1 ${x2.toFixed(2)},${y2.toFixed(2)} L${x3.toFixed(2)},${y3.toFixed(2)} A${ring.r},${ring.r} 0 ${large} 0 ${x4.toFixed(2)},${y4.toFixed(2)} Z`;
return { ...d, path, color: palettes[ring.key][i % palettes[ring.key].length], pct: d.v / sum, idx: i };
});
}
// Hover summary text in the center
const centerNum = hover
? (hover.ringKey === "ovr" ? fmtPct(hover.v, 1) : fmtPct(hover.pct, 0))
: fmtPct(overall, 1);
const centerLabel = hover
? (hover.k.length > 22 ? hover.k.slice(0, 22) + "…" : hover.k)
: "claims with denial codes";
const centerSub = hover
? (hover.ringKey === "enc" ? "encounter type" : hover.ringKey === "cpt" ? "CPT code share" : "overall rate")
: null;
return (
);
}
Object.assign(window, {
KPITile, IncomeVsBilledChart, ServiceLineChart, DonutChart, BubbleChart, StackedHBarChart,
PayerMixChart, ARAgingChart, DenialNestedRing,
fmt$, fmt$M, fmtPct, fmtN
});