/* global React, YUNO_DATA, YUNO_COMPONENTS, YUNO_PANELS, YUNO_MARCH_2026 */
(function () {
const { useState, useMemo } = React;
const D = window.YUNO_DATA;
const M = window.YUNO_MARCH_2026;
const { C, KpiCard, KpiTile, ExpandableKpiTile, RegionTile, TrendChart, FunnelChart,
ComparisonBar, DonutChart, computeFiltered, HeroKpiCard, HeadlineCard,
KpiDistributionChart, EnhancedKpiPieChart, ContextualFilters, HoverInsightTooltip } = window.YUNO_COMPONENTS;
// ============================================================================
// Section: Overview — executive dashboard rebuilt against the March 2026 cascade
// ============================================================================
const PILLAR_TAGS = {
'Scalable Growth': 'P1',
'Operational Leverage': 'P2',
'Customer Value': 'P3',
'People & Culture': 'P4'
};
const Q_MONTHS = {
Q1: ['Jan', 'Feb', 'Mar'],
Q2: ['Apr', 'May', 'Jun'],
Q3: ['Jul', 'Aug', 'Sep'],
Q4: ['Oct', 'Nov', 'Dec']
};
// Bump these monthly. Today (2026-05-11) we're mid-Q2; April is the last
// completed month with full actuals, so it's the default landing view.
const CURRENT_Q = 'Q2';
const CURRENT_MONTH = 'Apr';
// All 12 monthKey strings the rest of the code uses. Order matters: it's
// chronological so "previous month" lookups (e.g. variance vs prior month)
// can walk this array directly.
const MONTH_KEYS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun',
'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
const MONTH_LABEL = {
jan: 'January', feb: 'February', mar: 'March', apr: 'April',
may: 'May', jun: 'June', jul: 'July', aug: 'August',
sep: 'September', oct: 'October', nov: 'November', dec: 'December'
};
// 'Apr' (UI label) → 'apr' (key). Centralized so we don't sprinkle .toLowerCase() everywhere.
const monthLabelToKey = (label) => label ? label.toLowerCase() : null;
// 'Mar' → 'Q1', etc. Inverse of Q_MONTHS.
const Q_FOR_MONTH = Object.fromEntries(
Object.entries(Q_MONTHS).flatMap(([q, months]) => months.map(m => [m, q]))
);
const STATUS_NUM_COLOR = { good: '#10B981', warn: '#F59E0B', bad: '#DC2626', neutral: '#1E293B' };
const STATUS_PCT_BG = { good: '#ECFDF5', warn: '#FFFBEB', bad: '#FEF2F2', neutral: '#F1F5F9' };
const STATUS_PCT_FG = { good: '#10B981', warn: '#F59E0B', bad: '#DC2626', neutral: '#64748B' };
// User-facing label for the current-period target line.
// Quarter-end months (Mar/Jun/Sep/Dec) get the quarter label since they're
// also the quarter-end checkpoint; mid-quarter months get the month name.
function periodTargetLabel(monthKey) {
if (!monthKey) return 'TARGET';
const isQuarterEnd = { mar: 'Q1', jun: 'Q2', sep: 'Q3', dec: 'Q4' };
if (isQuarterEnd[monthKey]) return `${isQuarterEnd[monthKey]} TARGET`;
const label = MONTH_LABEL[monthKey];
return label ? `${label.toUpperCase()} TARGET` : 'TARGET';
}
// Synthesize an 8-point sparkline by linearly interpolating from baseline → actual.
// Real time-series will replace this once we wire monthly data.
function makeSpark(actual) {
if (actual === null || actual === undefined || typeof actual === 'string') return [];
const base = actual === 0 ? 0 : actual * (actual > 0 ? 0.7 : 1.3);
const n = 8;
const step = (actual - base) / (n - 1);
return Array.from({ length: n }, (_, i) => base + step * i);
}
function sparkPath(values, w, h) {
if (!values || values.length < 2) return '';
const max = Math.max(...values), min = Math.min(...values);
const range = max - min || 1;
return values.map((v, i) => {
const x = (i / (values.length - 1)) * w;
const y = h - ((v - min) / range) * h * 0.78 - h * 0.11;
return (i === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1);
}).join(' ');
}
// Anchor card — pillar header (top) + hero metric tile (bottom).
// `monthKey` selects the period bucket on the KPI ('mar', 'apr', ...). The card pulls
// actual/target from that bucket. When April is active and no actual exists yet we keep
// March's actual in view as "latest" and show the April target + a tiny Mar→Apr trend strip.
// Anchor (KEY METRICS) card. Color always reflects FY-target performance (same logic in
// March and April views). Card shows: priority pill + category, big colored value, FY target
// line. No period target / variance pill on the anchor card — those live on the strategic
// cards and the deep-dive panel.
// Per-anchor narrative copy — kept only as a single-line FALLBACK shown when
// the spreadsheet's `Insights` tab has nothing for the active month. The
// primary anchor-card prose is now the curated Driving / Watch / Risk rows
// from `cascade.insights` (see selectInsightsForAnchor below).
const ANCHOR_NARRATIVES = {
arr: "ARR ramp behind FY pace; SQL pipeline running ahead but Win Rate dragging in NA. Q2 outcome depends on +2–3 deals closing on time.",
ebitda: "Burn discipline holding through Q1. Watch revenue-per-employee as headcount expands.",
customer_retention: "Retention decent absolute but 8 pp gap to FY 100% — recovering that needs commercial execution.",
enps: "−10 eNPS shows poor sentiment; 40 points to climb to FY 30 in 9 months is steep. Time to Fill drifting up.",
};
// Normalize the free-form `type` column from the Insights tab into a small set
// of canonical keys the UI styles + sorts by. The owner types phrases like
// "What's driving", "What to watch", "Risk", "Note" in the spreadsheet —
// we don't want a strict enum upstream because the prose framing matters,
// but downstream we need a stable key for icons, colors, and ordering.
function normalizeInsightType(t) {
const s = String(t || '').toLowerCase();
if (s.includes('driv')) return 'driving';
if (s.includes('watch')) return 'watch';
if (s.includes('risk')) return 'risk';
return 'note';
}
// Build the YYYY-MM month string the Insights tab uses, from a monthKey like
// 'apr'. Year defaults to 2026 (dashboard year). When we roll over to 2027,
// either bump this constant or thread the year through from cascade metadata.
const INSIGHT_YEAR = 2026;
function insightMonthString(monthKey) {
const idx = MONTH_KEYS.indexOf(monthKey);
if (idx < 0) return null;
return `${INSIGHT_YEAR}-${String(idx + 1).padStart(2, '0')}`;
}
// Pick the curated insights that should appear on an anchor card for a given
// month. Pulls from `cascade.insights.byKpi[anchor.id]` (most specific) and
// `cascade.insights.byPillar[pillar.tag]` (pillar-wide). When both contain a
// Driving/Watch/Risk insight for the active month, the KPI-level one wins —
// the anchor card is about that specific KPI. Limited to one of each type
// so a single card never shows 5 driving lines.
//
// Returns: array of up to 3 insights in display order [driving, watch, risk],
// each as { type, text, source, last_updated, _norm: 'driving'|'watch'|'risk' }.
function selectInsightsForAnchor(anchor, pillar, monthKey) {
if (!anchor || !pillar) return [];
const cd = window.YUNO_CASCADE_DATA || {};
const ins = cd.insights || {};
const byKpi = ins.byKpi || {};
const byPillar = ins.byPillar || {};
const monthStr = insightMonthString(monthKey);
if (!monthStr) return [];
// KPI insights come first so they win the de-dup-by-type pass.
const all = [
...(byKpi[anchor.id] || []).map(i => ({ ...i, _source: 'kpi' })),
...(byPillar[pillar.tag] || []).map(i => ({ ...i, _source: 'pillar' })),
];
const forMonth = all.filter(i => i.month === monthStr);
const picked = {};
for (const i of forMonth) {
const k = normalizeInsightType(i.type);
if (!picked[k]) picked[k] = { ...i, _norm: k };
}
const order = ['driving', 'watch', 'risk', 'note'];
return order.filter(k => picked[k]).map(k => picked[k]);
}
// Dispatch a window event that the app's palette-action listener routes into
// a sidebar open. We use the same event channel the command palette uses so
// the wiring stays in one place (app.jsx's `yuno-palette-action` handler).
function dispatchOpenPillarInsights(pillar, anchor, monthKey) {
window.dispatchEvent(new CustomEvent('yuno-palette-action', { detail: {
type: 'open-pillar-insights',
pillarTag: pillar.tag,
pillarName: pillar.name,
anchorId: anchor && anchor.id,
anchorName: anchor && anchor.name,
monthKey,
}}));
}
// preferCascadeFy(kpi) — return the FY target to display for a KPI, with the
// cascade value preferred over the hand-curated kpi.fy.target. The spreadsheet
// is the source of truth: when an owner edits FY targets (e.g. New Logo ARR
// LATAM 6.9 → 6.2 after the "(including Banking & AI)" rename), the dashboard
// should follow.
//
// Guard: if the cascade value is 50× smaller than the hand-curated value, we
// fall back to hand-curated. This catches a known unit-scale gap where a
// percentage KPI (Overall Maya Agent Impact, Factory Developer Efficiency,
// Factory - Adoption on Platform) is stored as `format: 'number'` in
// march-data.js with a target of "34", but the spreadsheet cell is a pct
// stored as 0.34 — without the guard, the dashboard would suddenly start
// showing 0.34 instead of 34. The proper fix is to flag those KPIs as
// format: 'pct' (then cascade-merge.js' existing scalePct path picks them
// up), but that changes display from "34" to "34%". Until that decision is
// made the guard keeps the existing display correct.
function preferCascadeFy(kpi) {
const cFy = kpi && kpi.cascade && kpi.cascade.monthlyTargets && kpi.cascade.monthlyTargets.fy;
const handFy = kpi && kpi.fy && kpi.fy.target;
const cValid = (cFy !== null && cFy !== undefined);
const hValid = (handFy !== null && handFy !== undefined);
if (!cValid) return hValid ? handFy : null;
if (!hValid) return cFy;
// Both present — prefer cascade unless it looks like a unit mismatch.
if (Math.abs(cFy) > 0 && Math.abs(handFy) / Math.abs(cFy) > 50) {
return handFy;
}
return cFy;
}
// Map a cascade RAG ("GREEN" / "AMBER" / "RED" / null) → status key used by
// the variance pill + value-color classes ("good" / "warn" / "bad" / "neutral").
function ragToStatus(rag) {
if (rag === 'GREEN') return 'good';
if (rag === 'AMBER') return 'warn';
if (rag === 'RED') return 'bad';
return 'neutral';
}
// Format the variance pill text for an anchor card. Different KPIs use
// different framings:
// "currencyMM" / "currencyK" → "−11% vs pace" (favourable variance vs current period target)
// "pct" → "8 pp gap to FY" (percentage-point gap vs FY)
// "score" / "number" → "40 pts gap to FY" (absolute gap vs FY)
// actual or target missing → "Data pending"
function formatAnchorPill(kpi, monthKey) {
const c = kpi.cascade || {};
const periodActual = (c.monthlyActuals && c.monthlyActuals[monthKey])
?? (kpi[monthKey] && kpi[monthKey].actual);
const periodTarget = (c.monthlyTargets && c.monthlyTargets[monthKey])
?? (kpi[monthKey] && kpi[monthKey].target);
const fy = (c.monthlyTargets && c.monthlyTargets.fy) ?? (kpi.fy && kpi.fy.target);
const isLower = c.polarity === 'lower_is_better' || kpi.higherIsBetter === false;
const status = ragToStatus(c.latestRag);
if (typeof periodActual !== 'number') {
return { text: 'Data pending', status: 'warn', arrow: 'flat' };
}
// pct KPI → percentage-point gap to FY
if (kpi.format === 'pct' && typeof fy === 'number') {
const gap = isLower ? periodActual - fy : fy - periodActual;
const arrow = gap > 0.5 ? 'down' : gap < -0.5 ? 'up' : 'flat';
return { text: `${Math.round(Math.abs(gap))} pp gap to FY`, status, arrow };
}
// score / number with FY → absolute "pts" gap
if ((kpi.format === 'score' || kpi.format === 'number') && typeof fy === 'number') {
const gap = isLower ? periodActual - fy : fy - periodActual;
const arrow = gap > 0.5 ? 'down' : gap < -0.5 ? 'up' : 'flat';
return { text: `${Math.round(Math.abs(gap))} pts gap to FY`, status, arrow };
}
// Default → "X% vs pace" against current period target
if (typeof periodTarget === 'number' && periodTarget !== 0) {
const raw = (periodActual - periodTarget) / Math.abs(periodTarget) * 100;
const fav = isLower ? -raw : raw;
const sign = fav >= 0 ? '+' : '−';
const arrow = fav < -2 ? 'down' : fav > 2 ? 'up' : 'flat';
return { text: `${sign}${Math.round(Math.abs(fav))}% vs pace`, status, arrow };
}
return { text: 'Data pending', status: 'warn', arrow: 'flat' };
}
// Hero search — large centered search bar shown at the very top of the
// Executive Overview. Clicking the bar (or any of the suggestion chips below)
// opens the command palette; chips also seed the query so a single click takes
// the user from idle landing → palette open at a relevant question. The
// existing small `CommandPaletteTrigger` button still lives in the top toolbar
// for other pages and as a Cmd+K reminder, so this hero search isn't the only
// way to reach the palette.
function HeroSearch() {
const open = (query) => {
window.dispatchEvent(new CustomEvent('yuno-palette-toggle', {
detail: query ? { query } : undefined,
}));
};
const isMac = typeof navigator !== 'undefined' && navigator.platform && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
// Chip suggestions. Half are navigation queries (KPI / team names), half are
// insight queries (so users learn the palette answers "why" questions too).
const chips = [
'why is ARR declining',
'eNPS',
'Eng. Core',
'EBITDA risks',
'contract to live time',
];
return (
);
}
// Compute the pillar-status block for an anchor card: total KPI count from
// the full cascade, split into measured/awaiting and (for measured ones)
// grouped by RAG color. Falls back to STRATEGIC + HEADLINES when cascade
// global isn't loaded.
function computePillarStatus(pillar) {
const cd = window.YUNO_CASCADE_DATA;
if (cd && Array.isArray(cd.kpis)) {
// Cascade pillar field is "P1: Scalable Growth" — match by tag prefix.
const pillarTag = pillar.tag; // 'P1' | 'P2' | 'P3' | 'P4'
const matching = cd.kpis.filter(k => typeof k.pillar === 'string' && k.pillar.startsWith(pillarTag + ':'));
// "Measured" = any KPI that has reported an actual value for any month so
// far this year. Previously we counted only KPIs with k.latest.month set,
// which the ETL populates ONLY when BOTH actual and monthly target exist
// — KPIs with quarterly-only targets (most of Op Leverage / Customer
// Value) reported actuals but were wrongly classified "awaiting". For
// P2 the dashboard showed "1 measured" while 53 of 55 had a March actual.
const hasAnyActual = (k) => k.actuals && Object.values(k.actuals).some(v => typeof v === 'number');
const measured = matching.filter(hasAnyActual);
// RAG-rated subset: needs both actual and target → only these populate
// the green/amber/red tiles. The remainder are "measured but unrated"
// (we have the value but no monthly target to compare against).
const rated = measured.filter(k => k.latest && k.latest.rag_color);
return {
total: matching.length,
measured: measured.length,
awaiting: matching.length - measured.length,
rated: rated.length,
unrated: measured.length - rated.length,
good: rated.filter(k => k.latest.rag_color === 'GREEN').length,
warn: rated.filter(k => k.latest.rag_color === 'AMBER').length,
bad: rated.filter(k => k.latest.rag_color === 'RED').length,
};
}
// Fallback: dashboard's STRATEGIC + HEADLINES
const strategic = (M.STRATEGIC || []).filter(k => k.pillar === pillar.name);
const headlines = M.HEADLINES ? Object.values(M.HEADLINES).flat().filter(k => k.pillar === pillar.name) : [];
const all = [...strategic, ...headlines];
return { total: all.length, measured: 0, awaiting: all.length, rated: 0, unrated: 0, good: 0, warn: 0, bad: 0 };
}
// Rich anchor card — replaces the previous slim AnchorCard + AnchorDrillIn drawer.
//
// - Pillar accent stripe at top (muted shade, 4px)
// - Pillar tag + name header
// - KPI name + big value (RAG color from cascade.latestRag)
// - Trend arrow + variance pill (format depends on KPI: pp gap, pts gap, or % vs pace)
// - FY target footer
// - PILLAR STATUS — total / measured / awaiting + green/amber/red count tiles
// - "What's driving · what to watch" narrative (per-anchor, editable)
//
// Click → smooth-scrolls to the matching pillar group on the same page.
function AnchorCard({ pillar, anchor, hasData, monthKey = 'mar' }) {
if (!anchor) {
return (
{pillar.tag}
{pillar.name}
No anchor mapped
);
}
const c = anchor.cascade || {};
// Resolve anchor value: prefer cascade actual for active month → hand-curated
// anchor[monthKey].actual → walk back chronologically until we find a non-null
// value. Mirrors MarchCard's carry-over so anchors don't go blank mid-quarter
// (e.g. May view kept anchors showing "—" because cascade.monthlyActuals.may
// is null for most anchors; meanwhile the strategic cards below carried over
// April values, creating a confusing UX mismatch).
const valueWithCarryOver = (() => {
const direct = (c.monthlyActuals && c.monthlyActuals[monthKey])
?? (anchor[monthKey] && anchor[monthKey].actual);
if (direct !== null && direct !== undefined) return { value: direct, carriedFrom: null };
const idx = MONTH_KEYS.indexOf(monthKey);
for (let i = idx - 1; i >= 0; i--) {
const mk = MONTH_KEYS[i];
const v = (c.monthlyActuals && c.monthlyActuals[mk])
?? (anchor[mk] && anchor[mk].actual);
if (v !== null && v !== undefined) return { value: v, carriedFrom: mk };
}
return { value: null, carriedFrom: null };
})();
const value = valueWithCarryOver.value;
const carriedFromMonth = valueWithCarryOver.carriedFrom;
const fyTarget = (c.monthlyTargets && c.monthlyTargets.fy) ?? (anchor.fy && anchor.fy.target);
const fyPending = anchor.fy && anchor.fy.pending;
const status = ragToStatus(c.latestRag);
const valueColor = status === 'neutral' ? '#94A3B8'
: status === 'good' ? '#059669'
: status === 'warn' ? '#D97706'
: '#DC2626';
const pill = formatAnchorPill(anchor, monthKey);
const pillarStatus = computePillarStatus(pillar);
// Curated insights from the spreadsheet's Insights tab for the active
// month. Up to 3 (driving / watch / risk). Empty array → render a single
// tile-derived line as a fallback so the card never looks bare.
const curatedInsights = selectInsightsForAnchor(anchor, pillar, monthKey);
// Tile-derived single-line fallback. Used only when no curated insights
// exist for the active month — gives the card a tiny prose line so the
// bottom half isn't empty for newly-tracked pillars.
const fallbackNarrative = (() => {
const { good, warn, bad } = pillarStatus;
const rated = good + warn + bad;
if (rated === 0) return '';
const ratio = bad / rated;
if (ratio >= 0.5) return 'Pillar needs attention — multiple KPIs at risk.';
if (ratio >= 0.25) return 'Watch the at-risk KPIs.';
if (warn >= rated / 2) return 'Several KPIs trending; nothing in red yet.';
return 'Pillar broadly on track.';
})();
// The card has two click zones (see CSS .anchor-rich-summary / .anchor-rich-insights):
// - top half (header → status tiles) → smooth-scroll to the pillar's
// KPI group below on the same page (existing behavior).
// - bottom half (insights block) → open the right-side sidebar with all
// curated insights for the pillar + anchor KPI across all months.
const handleScrollToPillar = (e) => {
e.stopPropagation();
const el = document.querySelector(`[data-pillar-group="${pillar.name}"]`);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
const handleOpenInsights = (e) => {
e.stopPropagation();
dispatchOpenPillarInsights(pillar, anchor, monthKey);
};
const fyLine = (fyPending || fyTarget == null)
? 'FY plan refresh landing'
: `FY target ${M.formatValue(fyTarget, anchor.format)}`;
const monthLabelShort = (MONTH_LABEL[monthKey] || '').slice(0, 3).toUpperCase();
const insightCount = curatedInsights.length;
return (
{/* TOP ZONE — click → scroll to pillar group below */}
{fallbackNarrative || 'No insights yet for this month.'}
)}
);
}
function TrendAreaChart({ kpi, status, height = 150, monthKey }) {
// Slots are positioned by month-of-year (0=Jan-1, 12=end-Dec) so x-spacing
// honors real time. When the cascade has a Jan-1 baseline we prepend it as a
// hollow point so the chart shows the full year-to-date arc, not just March-onward.
// All 12 months are slotted — quarter-end months (Mar/Jun/Sep/Dec) get the
// quarter label and pull target from kpi.q*, mid-quarter months get the
// 3-letter month label and pull target from kpi.cascade.monthlyTargets[mk].
const ca = (kpi.cascade && kpi.cascade.monthlyActuals) || {};
const ct = (kpi.cascade && kpi.cascade.monthlyTargets) || {};
const hasBaseline = kpi.cascade && typeof kpi.cascade.jan1 === 'number';
const slots = [];
if (hasBaseline) slots.push({ label: 'Jan-1', actual: kpi.cascade.jan1, monthIdx: 0, isBaseline: true });
const QUARTER_LABEL = { mar: 'Q1', jun: 'Q2', sep: 'Q3', dec: 'Q4' };
const QUARTER_TARGET_KEY = { mar: 'q1', jun: 'q2', sep: 'q3', dec: 'q4' };
MONTH_KEYS.forEach((mk, i) => {
const monthIdx = i + 1;
const cascadeActual = ca[mk];
const handActual = kpi[mk] && kpi[mk].actual;
const actual = (cascadeActual !== undefined && cascadeActual !== null) ? cascadeActual : (handActual ?? null);
const qKey = QUARTER_TARGET_KEY[mk];
const handTarget = (qKey && kpi[qKey] && kpi[qKey].target) ?? (kpi[mk] && kpi[mk].target);
const target = handTarget != null ? handTarget : (ct[mk] ?? null);
// Drop the "JAN" label when the Jan-1 baseline label is also rendered —
// they sit visually adjacent and overlap. The Jan-1 baseline communicates
// the start point; the JAN end-of-month tick stays in place (just unlabelled).
const label = (mk === 'jan' && hasBaseline) ? '' : (QUARTER_LABEL[mk] || mk.toUpperCase());
slots.push({ key: mk, label, actual, target, monthIdx });
});
// Active slot — the one tied to the dashboard's current period filter.
// When the user toggles March → April, this should move from the MAR slot
// to the APR slot even if the Apr actual hasn't landed yet (so the chart
// visibly tracks the active period). Falls back to the latest slot with an
// actual if no monthKey is passed.
const activeSlotIdx = (() => {
if (!monthKey) return -1;
const i = slots.findIndex(s => s.key === monthKey);
return i;
})();
// Last position with a real actual.
let lastActualIdx = -1;
slots.forEach((s, i) => { if (s.actual !== null && s.actual !== undefined) lastActualIdx = i; });
if (lastActualIdx < 0) return null;
const lastActual = slots[lastActualIdx].actual;
// Per-month slope: walk back to the previous slot with a real actual and
// compute (lastActual − prevActual) / months between. Time-honest with the
// non-uniform Jan-1/Mar/Apr/Q2/Q3/Q4 spacing.
let slopePerMonth = 0;
for (let i = lastActualIdx - 1; i >= 0; i--) {
if (slots[i].actual !== null && slots[i].actual !== undefined) {
const dt = slots[lastActualIdx].monthIdx - slots[i].monthIdx;
if (dt > 0) slopePerMonth = (lastActual - slots[i].actual) / dt;
break;
}
}
const projectedValues = slots.map((s, i) =>
i <= lastActualIdx ? s.actual : lastActual + slopePerMonth * (s.monthIdx - slots[lastActualIdx].monthIdx)
);
// Target pace: prefer cascade-truth (Jan-1 → FY linear pace) when present.
// Cascade trend line: 13 points 0=Jan-1, 1=end-Jan, …, 12=end-Dec — look up
// each slot's value via slot.monthIdx so it works whether or not Jan-1 is present.
const fyTarget = (kpi.fy && kpi.fy.target !== undefined && kpi.fy.target !== null) ? kpi.fy.target : null;
const startVal = slots[0].actual !== null && slots[0].actual !== undefined ? slots[0].actual : lastActual;
const tl = kpi.cascade && kpi.cascade.trendLine;
const tlValid = Array.isArray(tl) && tl.length === 13 && tl.every(v => typeof v === 'number');
const idealValues = tlValid
? slots.map(s => tl[s.monthIdx])
: (fyTarget !== null
? slots.map((_, i) => startVal + (fyTarget - startVal) * (i / (slots.length - 1)))
: null);
// Geometry — time-proportional x: month 0 → padX, month 12 → w − padX.
const w = 320, h = height, padX = 14, padTop = 22, padBot = 14;
const xs = slots.map(s => padX + (s.monthIdx / 12) * (w - 2 * padX));
const allValues = [...projectedValues, ...(idealValues || [])].filter(v => v !== null && v !== undefined);
const min = Math.min(...allValues);
const max = Math.max(...allValues);
const range = (max - min) || Math.abs(max) || 1;
const yTop = padTop, yBot = h - padBot;
const yFor = v => yBot - ((v - min) / range) * (yBot - yTop);
// Path strings
const actualPath = slots.slice(0, lastActualIdx + 1)
.map((s, i) => `${i === 0 ? 'M' : 'L'}${xs[i].toFixed(1)},${yFor(s.actual).toFixed(1)}`).join(' ');
const projPath = lastActualIdx < slots.length - 1
? slots.slice(lastActualIdx).map((_, i) =>
`${i === 0 ? 'M' : 'L'}${xs[lastActualIdx + i].toFixed(1)},${yFor(projectedValues[lastActualIdx + i]).toFixed(1)}`
).join(' ')
: '';
// Filled area under actual + projected combined line
const combinedY = projectedValues.map(yFor);
const areaPath = xs.map((x, i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${combinedY[i].toFixed(1)}`).join(' ')
+ ` L${xs[xs.length - 1].toFixed(1)},${yBot.toFixed(1)} L${xs[0].toFixed(1)},${yBot.toFixed(1)} Z`;
const idealPath = idealValues
? xs.map((x, i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${yFor(idealValues[i]).toFixed(1)}`).join(' ')
: '';
const stroke = STATUS_NUM_COLOR[status] || '#3E4FE0';
const fill = STATUS_PCT_BG[status] || '#EEF2FF';
// Compact baseline value formatter for the inline annotation.
const fmtBaseline = (v) => {
if (v === null || v === undefined) return '';
if (kpi.format === 'currencyMM') return `$${Number(v).toFixed(1)}M`;
if (kpi.format === 'currencyK') return `$${Math.round(v)}K`;
if (kpi.format === 'pct') return `${Number(v).toFixed(0)}%`;
if (kpi.format === 'months' || kpi.format === 'days') return `${Math.round(v)}`;
return Number.isInteger(v) ? String(v) : Number(v).toFixed(1);
};
return (
Actual
Projected
{idealValues && (
Target pace
)}
);
}
// "TREND" + "DRIVERS" rows shown below every deep-dive trend chart.
// Trend caption: projected end-of-year value vs FY target → "expected to miss / hit FY by X%".
function TrendCaption({ kpi, status }) {
// Polarity-aware: for lower-is-better KPIs (CAC Payback, Sales Cycle, Bugs/Month,
// Latency, Voluntary Turnover, Time to Fill, Burn Multiple, …) the verb flips.
// E.g. CAC Payback Period projected EOY 32mo vs FY target 7mo → "miss" not "beat".
// Prefers cascade.projectedLine when present so the caption matches the chart's
// dashed projected line (and any downstream consumers like Slack digests).
const c = kpi.cascade;
const cascadeProj = c && c.projectedLine && Array.isArray(c.projectedLine.values) && c.projectedLine.values.length
? c.projectedLine.values[c.projectedLine.values.length - 1]
: null;
let projectedEoy = cascadeProj;
if (projectedEoy === null) {
// Fallback: project EOY using the slope of recent actuals (flat if only one).
const marActual = kpi.mar && kpi.mar.actual;
const aprActual = kpi.apr && kpi.apr.actual;
if (marActual !== null && marActual !== undefined) {
if (aprActual !== null && aprActual !== undefined) {
const slope = aprActual - marActual;
// 8 months from Apr to Dec
projectedEoy = aprActual + slope * 8;
} else {
// No measurable growth yet — project flat
projectedEoy = marActual;
}
}
}
const fyTarget = (c && c.monthlyTargets && c.monthlyTargets.fy) || (kpi.fy && kpi.fy.target);
const isLowerBetter = (c && c.polarity === 'lower_is_better') || kpi.higherIsBetter === false;
let trendStr = '—';
// Compute a TREND-SPECIFIC status (not the latest-month RAG passed in via
// props). A KPI can be GREEN this month (above interpolated month target)
// while its FY projection misses badly — e.g. Payments Concierge Adoption
// at 15.4% in March is ahead of the 13% March waypoint but on track to
// land at 61% vs FY 80%. The trend caption colour must reflect the
// PROJECTION, not the month. Otherwise we render "Projected to miss by
// 23%" in green, sending mixed signals.
let trendStatus = 'neutral';
if (projectedEoy !== null && fyTarget !== null && fyTarget !== undefined && fyTarget !== 0) {
const rawPct = ((projectedEoy - fyTarget) / Math.abs(fyTarget)) * 100;
const fav = isLowerBetter ? -rawPct : rawPct;
const absFav = Math.abs(fav);
// Within ±1% of FY → "reach target" (not "beat by 0%" / "miss by 0%").
if (absFav < 1) {
trendStr = 'Projected to reach FY target';
trendStatus = 'good';
} else {
const verb = fav >= 0 ? 'beat' : 'miss';
// Wording is conditional ("would" not "will") and explicit about the
// model ("on current pace"). The projection is a linear extrapolation
// from Jan-1 baseline through the latest actual — it assumes the
// current rate continues, which seasonality / Q4 push / deal-mix
// shifts routinely violate. "~" signals imprecision. Sub-line gives
// the model in plain English so executives don't read the integer
// percentage as a forecast.
trendStr = `On current pace, would ${verb} FY by ~${Math.round(absFav)}%`;
if (fav >= 0) trendStatus = 'good';
else if (fav >= -30) trendStatus = 'warn';
else trendStatus = 'bad';
}
}
// Confidence qualifier — surfaces the model's data-thinness honestly.
// Counts actuals available for this KPI.
const actualMonths = c && c.monthlyActuals
? Object.values(c.monthlyActuals).filter(v => typeof v === 'number').length
: 0;
const lowData = actualMonths > 0 && actualMonths < 3;
const modelNote = projectedEoy !== null && fyTarget !== null && fyTarget !== undefined && fyTarget !== 0
? `Linear extrapolation from Jan-1 baseline · ${actualMonths || 'no'} actual month${actualMonths === 1 ? '' : 's'}${lowData ? ' · limited data' : ''}`
: null;
return (
TREND
{trendStr}
{modelNote && (
TREND
{modelNote}
)}
DRIVERS— No driver notes
);
}
// Clock-style circular progress: arc shows "actual / target" as % of the way toward target.
// Direction-aware via higherIsBetter: % higher is closer to target either way.
// Caps the ring at 100% (over-performance shows the ring full + numeric % > 100).
function ProgressGauge({ actual, target, higherIsBetter, status, label, size = 44 }) {
const valid = actual !== null && actual !== undefined && target !== null && target !== undefined && target !== 0;
let pct = 0;
if (valid) {
const ratio = higherIsBetter ? (actual / target) : (target / actual);
pct = Math.max(0, Math.round(ratio * 100));
}
const clamped = Math.min(100, pct);
const r = (size / 2) - 4;
const c = 2 * Math.PI * r;
const dash = (clamped / 100) * c;
const stroke = STATUS_NUM_COLOR[status] || '#94A3B8';
return (
{valid ? `${pct}%` : '—'}
);
}
// Strategic KPI card. No arrow icons, semantic colors, "TBA" badge for Tier 1 - TBA,
// optional info icon (kpi.tooltip), FY target footnote.
// `monthKey` selects which period bucket on the KPI to show (mar/apr/may/...).
// Data resolution: prefer `kpi[monthKey]` (hand-curated, in march-data.js for Mar/Apr),
// fall back to `kpi.cascade.monthly{Actuals,Targets}[monthKey]` (auto-generated from
// the spreadsheet, every month). Once Phase 3's full march-data.js retirement lands,
// the cascade path becomes the only source.
// Resolve a KPI's (actual, target) for a given month.
//
// Precedence: cascade > hand-curated.
//
// Why: cascade-data.js is regenerated monthly from the canonical spreadsheet
// (`KPI Cascade.xlsx`). march-data.js's hand-curated `kpi.mar` / `kpi.apr`
// fields drift the moment owners edit the spreadsheet. As of 2026-05-11 a
// drift audit found 188 stale values across ~50 KPIs (e.g. # Total SQLs Mar
// Actual showed 79 on the dashboard while the spreadsheet says 42). Flipping
// precedence makes the dashboard self-correct on every monthly refresh —
// no more parallel manual update of march-data.js.
//
// march-data.js still carries the curated structural metadata (PILLARS,
// strategic-KPI list, anchor mappings, FY targets, quarter targets, tier
// flags, format, tooltip overrides). Only the monthly bucket fields are
// superseded.
function periodBucket(kpi, monthKey) {
if (!monthKey) return null;
const c = kpi.cascade || {};
const cActuals = c.monthlyActuals || {};
const cTargets = c.monthlyTargets || {};
const cA = cActuals[monthKey];
const cT = cTargets[monthKey];
if (cA != null || cT != null) {
return { actual: cA ?? null, target: cT ?? null };
}
// Fall back to the hand-curated bucket when cascade has nothing
// (KPI not in the cascade, or month not yet populated).
return kpi[monthKey] || null;
}
const QUARTER_END_KEYS = new Set(['mar', 'jun', 'sep', 'dec']);
const Q_FOR_MONTH_KEY = {
jan: 'q1', feb: 'q1', mar: 'q1', apr: 'q2', may: 'q2', jun: 'q2',
jul: 'q3', aug: 'q3', sep: 'q3', oct: 'q4', nov: 'q4', dec: 'q4'
};
// Resolves a KPI's period stats for the active month. Used by drill-in cascade
// panels (L1 strategic, L1 headlines list, L2 headline detail) to avoid repeating
// the same Mar/Apr-vs-other-month branching everywhere. Quarter-end months
// (Mar/Jun/Sep/Dec) score health vs FY target; mid-quarter months score vs
// month target and surface a variance pill + "of target" line. Previous-month
// fallback walks chronologically so Apr→Mar, May→Apr, Jul→Jun, etc.
function resolveKpiForMonth(kpi, mk) {
if (!mk || !kpi) {
return { actual: null, target: null, localStatus: 'neutral', status: 'neutral',
pct: null, showOfTarget: false, isQuarterEnd: false,
isCarriedOver: false, carriedFromMonth: null };
}
const cur = periodBucket(kpi, mk) || {};
// currentPeriodActual = ONLY the active month's actual (null if not reported).
// actual = currentPeriodActual ?? carry-over (walk back chronologically).
// The split matters for variance: comparing a carried-over Mar value against
// an Apr target produces a misleading -8% that contradicts the chart.
const currentPeriodActual = (cur.actual !== null && cur.actual !== undefined) ? cur.actual : null;
let carriedFromMonth = null;
let carriedValue = null;
if (currentPeriodActual === null) {
const idx = MONTH_KEYS.indexOf(mk);
for (let i = idx - 1; i >= 0; i--) {
const mk2 = MONTH_KEYS[i];
const b = periodBucket(kpi, mk2);
if (b && b.actual !== null && b.actual !== undefined) {
carriedFromMonth = mk2;
carriedValue = b.actual;
break;
}
}
}
const actual = currentPeriodActual !== null ? currentPeriodActual : carriedValue;
const isCarriedOver = currentPeriodActual === null && carriedValue !== null;
const target = (cur.target !== null && cur.target !== undefined) ? cur.target : null;
const isQuarterEnd = QUARTER_END_KEYS.has(mk);
const fyTarget = kpi.fy && kpi.fy.target;
// Status fallback ladder. Cards + drill-ins must agree on color so we
// share this logic across MarchCard / resolveKpiForMonth / KpiDrillDown.
// 1) Quarter-end month → vs FY target (the quarter-end IS the FY checkpoint).
// 2) Mid-quarter w/ monthly target → vs monthly target (immediate pace).
// 3) Mid-quarter w/o monthly target → vs FY target (don't return 'neutral'
// when we have a real signal — KPIs with quarterly-only targets like
// Qualified Pipeline Stage Demo were rendering neutral on cards but
// red on drill-ins, confusing the user).
const localStatus = isQuarterEnd
? M.healthVsFY(actual, fyTarget, kpi.higherIsBetter)
: (target !== null && target !== undefined
? M.health(actual, target, kpi.higherIsBetter)
: M.healthVsFY(actual, fyTarget, kpi.higherIsBetter));
const status = window.YUNO_KPI_STATUS ? window.YUNO_KPI_STATUS(kpi, localStatus) : localStatus;
// Don't compute variance when the displayed value was carried from a prior
// month — would compare Mar actual vs Apr target = misleading -8%.
const pct = (!isQuarterEnd && !isCarriedOver)
? M.variancePct(currentPeriodActual, target, kpi.higherIsBetter)
: null;
return { actual, target, localStatus, status, pct,
showOfTarget: !isQuarterEnd && !isCarriedOver, isQuarterEnd,
isCarriedOver, carriedFromMonth };
}
// Quarter-context row used by L1/L2 drill panels for mid-quarter months.
// "Apr → Q2 target", "May → Q2 target", "Jul → Q3 target", etc.
function resolveQuarterContext(kpi, mk, actual) {
if (!mk || !kpi || QUARTER_END_KEYS.has(mk)) return null;
const qKey = Q_FOR_MONTH_KEY[mk];
const qLabel = qKey ? qKey.toUpperCase() : '';
const qBucket = qKey && kpi[qKey];
const qt = qBucket && qBucket.target;
const qPending = qBucket && qBucket.pending;
const hasQ = qt !== null && qt !== undefined;
const qStatus = hasQ ? M.health(actual, qt, kpi.higherIsBetter) : 'neutral';
const qPct = hasQ ? M.variancePct(actual, qt, kpi.higherIsBetter) : null;
return { qKey, qLabel, qt, qPending, hasQ, qStatus, qPct };
}
function MarchCard({ kpi, headlines, isActive, onClick, hasData, monthKey = 'mar' }) {
const cur = hasData ? periodBucket(kpi, monthKey) : null;
// Previous month for variance carry-over: chronological neighbour, regardless
// of quarter boundary (e.g. Apr → Mar, May → Apr, Jul → Jun).
const prevIdx = monthKey ? MONTH_KEYS.indexOf(monthKey) - 1 : -1;
const prevKey = prevIdx >= 0 ? MONTH_KEYS[prevIdx] : null;
const prev = prevKey ? periodBucket(kpi, prevKey) : null;
// Display value: use the current period's actual when available, otherwise carry
// over the previous month so the card still shows a number while new-month data
// is pending.
const actual = (cur && cur.actual !== null && cur.actual !== undefined)
? cur.actual
: (prev ? prev.actual : null);
// Variance value: ONLY the current period's actual. Don't carry over the
// previous month's number for an apples-to-oranges comparison against this
// month's target. When the current month's actual is null, the pill shows a
// grey em-dash with a " pending" tooltip so the user can see the
// chart is tracking the active period even before data lands.
const currentPeriodActual = (cur && cur.actual !== null && cur.actual !== undefined) ? cur.actual : null;
const target = cur ? cur.target : null;
// Quarter-end months (Mar/Jun/Sep/Dec) score health vs FY target since they
// also serve as quarter checkpoints. Mid-quarter months score vs month target
// (the clock ring conveys progress through the quarter).
// Prefer the cascade FY target — when the spreadsheet changes (e.g. New
// Logo ARR LATAM went from 6.9 to 6.2 after the "(including Banking & AI)"
// rename), the hand-curated value goes stale and the card would score
// health against the wrong target. preferCascadeFy() guards against a known
// unit-scale gap where cascade returns 0.34 for KPIs hand-curated as 34
// (pct-formatted spreadsheet cells but format: 'number' in march-data).
const fyTargetForHealth = preferCascadeFy(kpi);
// Same status-fallback ladder as resolveKpiForMonth — keeps card + drill-in
// in agreement. See its comment for details.
const localStatus = !hasData
? 'neutral'
: (QUARTER_END_KEYS.has(monthKey)
? M.healthVsFY(actual, fyTargetForHealth, kpi.higherIsBetter)
: (target !== null && target !== undefined
? M.health(actual, target, kpi.higherIsBetter)
: M.healthVsFY(actual, fyTargetForHealth, kpi.higherIsBetter)));
// Prefer cascade RAG (authoritative — computed from latest-month actual vs target
// with polarity-aware logic) over the dashboard's own local computation.
const status = window.YUNO_KPI_STATUS ? window.YUNO_KPI_STATUS(kpi, localStatus) : localStatus;
const pct = (hasData && !QUARTER_END_KEYS.has(monthKey) && currentPeriodActual !== null && target !== null && target !== undefined)
? M.variancePct(currentPeriodActual, target, kpi.higherIsBetter)
: null;
// "Pending" treatment for any active month that has no actual yet
// (mid-month / future / TBD KPIs). Existing Apr-specific behavior generalized.
const periodPending = hasData && currentPeriodActual === null && !QUARTER_END_KEYS.has(monthKey);
const periodLabel = monthKey ? (MONTH_LABEL[monthKey] || monthKey) : '';
const valueColor = STATUS_NUM_COLOR[status];
const isTba = kpi.tier === 'tba';
return (
onClick && onClick(kpi)}>
{PILLAR_TAGS[kpi.pillar]}{kpi.team}
{isTba && To be activated}
{/* Show " TARGET" row for mid-quarter months. Quarter-end months
(Mar/Jun/Sep/Dec) skip this — their FY-target footer line says it all. */}
{!QUARTER_END_KEYS.has(monthKey) && (
)}
{(() => {
// FY target footer — shown in both March and April views. Q2 progress + trajectory
// live in the deep-dive panel, not on the card.
// Same preferCascadeFy() helper as above to keep cards in sync with
// spreadsheet updates while avoiding the pct unit-scale gap.
const fyTarget = preferCascadeFy(kpi);
const fyPending = kpi.fy?.pending;
const hasFyTarget = fyTarget !== null && fyTarget !== undefined;
if (hasFyTarget) {
return
FY target: {M.formatValue(fyTarget, kpi.format)}
;
}
if (fyPending) {
return
FY target TBC
;
}
return
FY target: —
;
})()}
{headlines && headlines.length > 0 && (
▼ {headlines.length} headlines
)}
);
}
function OverviewSection({ view, onKpiClick, onOpenSidebar, activeQ: extQ, setActiveQ: extSetQ, activeMonth: extMonth, setActiveMonth: extSetMonth }) {
// Cascading panels: L1 = strategic KPI drill, L2 = headline KPI drill
const [activeStrategicId, setActiveStrategicId] = useState(null);
const [activeHeadlineId, setActiveHeadlineId] = useState(null);
// Period state — uses parent state if provided, else falls back to local state.
const [localQ, setLocalQ] = useState(CURRENT_Q);
const [localMonth, setLocalMonth] = useState(CURRENT_MONTH);
const activeQ = extQ !== undefined ? extQ : localQ;
const setActiveQ = extSetQ || setLocalQ;
const activeMonth = extMonth !== undefined ? extMonth : localMonth;
const setActiveMonth = extSetMonth || setLocalMonth;
// Strategic + headline lookup over the new March dataset
const strategicById = M.STRATEGIC_BY_ID;
const headlinesByParent = M.HEADLINES;
const allKnownById = useMemo(() => {
const out = { ...strategicById };
for (const parent of Object.keys(headlinesByParent)) {
for (const h of headlinesByParent[parent]) out[h.id] = h;
}
return out;
}, []);
// Click a strategic card: toggle L1 panel. Same card again closes everything.
const handleStrategicClick = (kpi) => {
setActiveStrategicId(prev => {
if (prev === kpi.id) { setActiveHeadlineId(null); return null; }
setActiveHeadlineId(null);
return kpi.id;
});
};
const handleHeadlineClick = (hkpi) => {
setActiveHeadlineId(prev => prev === hkpi.id ? null : hkpi.id);
};
// Closing the L1 panel: scroll back to whatever pillar the user was viewing
// so they can keep navigating between cards. Without this, React re-renders
// remove the panel + main content reflows + the page snaps to the top.
// pillarToFocus overrides the "stay on current pillar" default — used by
// the pillar-header click handler to jump to a different pillar.
const closeL1 = (pillarToFocus) => {
const targetPillar = pillarToFocus || activePillarName;
setActiveStrategicId(null);
setActiveHeadlineId(null);
if (targetPillar) {
// Run after React commits the state change so the layout is settled
// before we scroll.
requestAnimationFrame(() => {
const el = document.querySelector(`[data-pillar-group="${targetPillar}"]`);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
}
};
const closeL2 = () => { setActiveHeadlineId(null); };
// Resolve current selection
const activeStrategic = activeStrategicId ? allKnownById[activeStrategicId] : null;
const activeHeadline = activeHeadlineId ? allKnownById[activeHeadlineId] : null;
const activeHeadlines = activeStrategicId ? (headlinesByParent[activeStrategicId] || []) : [];
const activePillarName = activeStrategic ? activeStrategic.pillar : null;
const cascadeClass = activeStrategicId
? (activeHeadlineId ? 'cascade-l2' : 'cascade-l1')
: '';
// Default month for a quarter — current month if active Q is current, else last for past, first for future
const defaultMonthFor = (q) => {
if (q === CURRENT_Q) return CURRENT_MONTH;
const order = ['Q1', 'Q2', 'Q3', 'Q4'];
return order.indexOf(q) < order.indexOf(CURRENT_Q) ? Q_MONTHS[q][2] : Q_MONTHS[q][0];
};
const handleQClick = (q) => {
setActiveQ(q);
setActiveMonth(defaultMonthFor(q));
};
// Resolve UI label → canonical lowercase monthKey. The active month is
// valid iff it belongs to the active quarter (defensive — should always
// hold given how the picker is wired, but keeps null-safety in one place).
const monthKey = (Q_MONTHS[activeQ] && Q_MONTHS[activeQ].includes(activeMonth))
? monthLabelToKey(activeMonth)
: null;
const hasData = monthKey !== null;
const scrollToPillar = (pillar) => {
const el = document.querySelector(`[data-pillar-group="${pillar.name}"]`);
if (!el) return;
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
el.classList.remove('pulse');
void el.offsetWidth;
el.classList.add('pulse');
setTimeout(() => el.classList.remove('pulse'), 1500);
};
return (
{/* Hero search — primary entry point. Sits at the top of the overview
so it's the first thing the eye lands on when the dashboard opens. */}
{/* Period selector — quarter pill on top, active quarter's months below */}
{['Q1', 'Q2', 'Q3', 'Q4'].map(q => (
))}
{Q_MONTHS[activeQ].map(m => (
))}
{/* KEY METRICS strip — four anchor cards. Clicking an anchor toggles the
Pattern C drill-in drawer below (3 milestones + Jan→Dec chart). */}
{s.items.map(({ k, actual, target, pct, status }) => (
))}
);
})}
)}
);
})}
);
}
// ============================================================================
// Teams Section — picker (tile grid) + leaf-team page (anchor row + MarchCards)
//
// Two render modes:
// 1. Picker (selectedTeam = 'picker', 'all', null, or any cluster id) —
// shows TeamPicker: a tile grid of every leaf team grouped under cluster
// headers. Cluster headers (CRO, Product & Tech) are not clickable to
// their own page; only leaf teams navigate.
// 2. Leaf team (any leaf id like 'finance', 'cro:gm-latam', 'hr', …) —
// shows TeamPage: anchor row at top (any tier='anchor' KPIs the team owns)
// + strategic KPI cards grouped by pillar, using the same MarchCard
// component as Executive Overview.
//
// Sub-team click on a card → onKpiClick handler (existing right-side drawer).
// ============================================================================
// Picker tile — single team or sub-team.
function TeamPickerTile({ teamLabel, kpiCount, onClick, pillar, anchorName, hasData }) {
return (