/* Metric family deep-dive — full page view for a company + metric family */ const STATUS_TONES = { 'moss-solid': { color: '#F4F7EE', background: 'var(--moss-deep)', border: '1px solid var(--moss-deep)' }, moss: { color: 'var(--moss-deep)', background: 'var(--sage-tint)', border: '1px solid #D5DEC4' }, amber: { color: '#8a6a1f', background: '#fdf6e3', border: '1px solid #ecd9a8' }, red: { color: '#8b4545', background: '#fdf0f0', border: '1px solid #e8c4c4' }, grey: { color: 'var(--ink-3)', background: 'var(--canvas-2)', border: '1px solid var(--line)' }, }; /* Hover definition bubble — portalled to because transformed ancestors (e.g. .lift hover cards) re-anchor position:fixed and send it across the screen */ const TipBubble = ({ pos, children }) => ReactDOM.createPortal( {children} , document.body ); const tipPosFor = (el) => { const r = el.getBoundingClientRect(); const below = r.top < 120; return { x: Math.max(135, Math.min(window.innerWidth - 135, r.left + r.width / 2)), y: below ? r.bottom + 8 : r.top - 8, below, }; }; /* Wraps a technical term with a dotted underline + hover definition from GLOSSARY (or an explicit `def` override for generated definitions). */ const Gloss = ({ term, def: defProp, children, style }) => { const [pos, setPos] = React.useState(null); const def = defProp || (window.GLOSSARY || {})[term]; if (!def) return children || term || null; return ( setPos(tipPosFor(e.currentTarget))} onMouseLeave={() => setPos(null)} style={{ borderBottom: '1px dotted var(--ink-3)', cursor: 'help', ...style }}> {children || term} {pos && {def}} ); }; window.Gloss = Gloss; /* Explains any unit string — glossary first, then a generated explanation for compound intensity units like "ktCO2-e/kt Cu-eq". */ const unitTokenDef = (tok) => { const g = window.GLOSSARY || {}; if (g[tok]) return g[tok]; if (/cu.?-?eq/i.test(tok)) return 'Copper-equivalent — mixed commodity production expressed as the tonnage of copper with equivalent value.'; if (/co2.?-?e/i.test(tok)) return 'CO2-equivalent — all greenhouse gases converted to the warming impact of CO2.'; return null; }; const unitDef = (u) => { if (!u) return null; const g = window.GLOSSARY || {}; if (g[u]) return g[u]; const parts = u.split('/'); if (parts.length === 2) { const num = parts[0].trim(); const den = parts[1].trim(); const nd = unitTokenDef(num); const dd = unitTokenDef(den); const numDef = nd ? ` (${nd.replace(/\.$/, '').toLowerCase()})` : ''; const denDef = dd ? ` (${dd.replace(/\.$/, '').toLowerCase()})` : ''; return `An intensity ratio — ${num}${numDef} for every ${den}${denDef}. Lower means less impact per unit of activity.`; } return unitTokenDef(u); }; const UnitGloss = ({ unit }) => { const def = unitDef(unit); return def ? : (unit || null); }; window.UnitGloss = UnitGloss; /* Splits text and glosses known technical tokens (Scope 1/2/3, GHG, safety rates) */ const TermedText = ({ text }) => { const parts = String(text).split(/(Scope 1|Scope 2|Scope 3|GHG|TRIFR|LTIFR|FIFR)/g); return <>{parts.map((p, i) => (window.GLOSSARY || {})[p] ? : p)}; }; window.TermedText = TermedText; /* Renders prose with numeric figures (values, years, percentages, units) in white */ const FIG_RE = /(Scopes? \d(?:(?:, \d)*(?:,? and \d)?)?|\d[\d,]*(?:\.\d+)?(?:\s?(?:%|MtCO2-?e|ktCO2-?e|tCO2e(?:\/[A-Za-z]+)?|Mt|kt|TJ|PJ|GJ|MWh|GWh|ML|GL|ha))?)/g; const HighlightFigures = ({ text }) => { const parts = String(text).split(FIG_RE); return <>{parts.map((p, i) => i % 2 === 1 ? {p} : p)}; }; const StatusChip = ({ status }) => { const [pos, setPos] = React.useState(null); if (!status) return null; const def = (window.GLOSSARY || {})[status.label]; return ( def && setPos(tipPosFor(e.currentTarget))} onMouseLeave={() => setPos(null)} style={{ display: 'inline-flex', alignItems: 'center', padding: '3px 10px', borderRadius: 999, fontSize: 11, fontFamily: 'var(--mono)', fontWeight: 600, letterSpacing: '0.02em', whiteSpace: 'nowrap', cursor: def ? 'help' : 'default', ...STATUS_TONES[status.tone], }}> {status.label} {pos && {def}} ); }; window.StatusChip = StatusChip; const NotReported = () => ( Not reported ); /* Measures its container and renders the chart at full available width. Uses a layout effect + window resize listener as well as ResizeObserver — RO callbacks ride the paint pipeline and can stall in throttled tabs. */ const ResponsiveChart = ({ render }) => { const ref = React.useRef(null); const [w, setW] = React.useState(0); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const measure = () => { const cw = el.clientWidth; if (cw) setW(cw); }; measure(); window.addEventListener('resize', measure); let ro; if (typeof ResizeObserver !== 'undefined') { ro = new ResizeObserver(measure); ro.observe(el); } return () => { window.removeEventListener('resize', measure); if (ro) ro.disconnect(); }; }, []); return
{w > 0 && render(w)}
; }; /* Website-palette green ramp for donut segments (dark = largest → light), grey for "Other" */ const DONUT_GREENS = ['#3F4A30', '#4E5A41', '#6B7A5A', '#8A9A75', '#A8B894', '#C7D3B2']; const DONUT_OTHER = 'var(--class-none)'; /* Donut with a plain key (legend) on the right. segs: [{label, value (pct), abs, color, o}] sorted largest-first. */ const AnnotatedDonut = ({ segs, total, unit, onSeg }) => { return ( { const stack = W < 380; // very narrow → legend under the donut const size = stack ? 150 : (W < 760 ? 150 : 172); const cx = size / 2, cy = size / 2; const ro = size / 2; const ri = ro - (size < 170 ? 20 : 26); const GAP = 0.014 * 2 * Math.PI; let acc = 0; const placed = segs.map((s) => { const frac = s.value / 100; const a0 = -Math.PI / 2 + 2 * Math.PI * acc; const a1 = -Math.PI / 2 + 2 * Math.PI * (acc + frac); acc += frac; return { ...s, a0, a1 }; }); const ptAt = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`; const arcPath = (a0, a1) => { const large = (a1 - a0) > Math.PI ? 1 : 0; return `M ${ptAt(ro, a0)} A ${ro} ${ro} 0 ${large} 1 ${ptAt(ro, a1)} L ${ptAt(ri, a1)} A ${ri} ${ri} 0 ${large} 0 ${ptAt(ri, a0)} Z`; }; const ringSvg = ( {placed.map((s, i) => { const g = Math.min(GAP / 2, (s.a1 - s.a0) / 2 - 0.002); return ; })} {formatValue(total)} TOTAL {unit} ); // Plain key const legend = (
{placed.map((s, i) => (
onSeg(s.o) : undefined} title={s.o ? 'View source' : undefined} style={{ display: 'grid', gridTemplateColumns: '11px 1fr auto', gap: 9, alignItems: 'center', padding: '6px 0', borderBottom: i < placed.length - 1 ? '1px solid var(--line)' : 'none', cursor: s.o ? 'pointer' : 'default', }}> {s.label} {s.value.toFixed(0)}% {formatValue(s.abs)}
))}
); return (
{stack ?
{ringSvg}
: ringSvg} {legend}
); }} /> ); }; window.AnnotatedDonut = AnnotatedDonut; const cssId = (s) => s.replace(/[^a-zA-Z0-9-]/g, '-'); const srcKeyObs = (o) => cssId('src-' + o.metric_id + '-' + o.report_year + '-' + (o.dimension_type || 'group') + '-' + (o.dimension_value || '')); const srcKeyTarget = (t) => cssId('src-target-' + (t.target_id || (t.metric_id + '-' + t.target_year))); const SectionToggle = ({ open, onClick }) => ( ); const MetricDeepDive = ({ companyId, family, setRoute }) => { const ready = useStrix(); const [showBreakdowns, setShowBreakdowns] = React.useState(false); const [open, setOpen] = React.useState({ targets: false, meth: false, restate: false, events: false, sources: false }); const [showAllEvents, setShowAllEvents] = React.useState(false); const [highlightSrc, setHighlightSrc] = React.useState(null); const [showTop, setShowTop] = React.useState(false); const [activePara, setActivePara] = React.useState(0); const [openReason, setOpenReason] = React.useState(null); const sourcesHeaderRef = React.useRef(null); const toggle = (k) => setOpen(o => ({ ...o, [k]: !o[k] })); const jumpToSource = (key) => { setOpen(o => ({ ...o, sources: true })); setHighlightSrc({ key, ts: Date.now() }); setShowTop(true); }; React.useEffect(() => { if (!highlightSrc) return; const el = document.getElementById(highlightSrc.key); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, [highlightSrc]); React.useEffect(() => { // Show once the sources-table header has scrolled out of view, or simply deep in the page const onScroll = () => { const hdr = sourcesHeaderRef.current; const pastSources = hdr ? hdr.getBoundingClientRect().bottom < 0 : false; setShowTop(pastSources || window.scrollY > 900); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); const c = byId(companyId); if (!c || !ready) return null; const strixId = strixForCompany(companyId); const allObs = strixObsForCompany(companyId); const groupObs = allObs.filter(o => o.family === family && o.dimension_type === 'group'); const breakdownObs = allObs.filter(o => o.family === family && o.dimension_type !== 'group'); const targets = strixTargetsForCompany(companyId).filter(t => { const m = STRIX_METRICS[t.metric_id]; return m && m.family === family; }); const dropped = strixDroppedTargetsForCompany(companyId).filter(dt => { const m = STRIX_METRICS[dt.metric_id]; return m && m.family === family; }); const meth = strixMethodologyForCompany(companyId).filter(m => m.metric_family === family); const restatements = strixRestatementsForCompany(companyId) .filter(r => (STRIX_METRICS[r.metric_id] || {}).family === family) // Drop unit-scale artifacts: a ~1000x gap between original and restated is the same // value in different units ($ vs $m), not a real restatement. .filter(r => { const a = Math.abs(r.original_value), b = Math.abs(r.restated_value); if (!a || !b) return true; return Math.max(a, b) / Math.min(a, b) < 50; }) .sort((a, b) => b.fiscal_year - a.fiscal_year || strixMetricName(a.metric_id).localeCompare(strixMetricName(b.metric_id))); const events = strixEventsForCompany(companyId); const rawAnalysis = strixAnalysis(companyId, family); let analysisText = rawAnalysis ? rawAnalysis.replace(/^#.*$/gm, '').replace(/\*\*/g, '').trim() : null; if (analysisText && !/[.!?]$/.test(analysisText)) { // Truncated mid-sentence (token cap) — trim back to the last complete sentence const cut = Math.max(analysisText.lastIndexOf('.'), analysisText.lastIndexOf('!'), analysisText.lastIndexOf('?')); if (cut > 100) analysisText = analysisText.slice(0, cut + 1); } const analysisParas = analysisText ? analysisText.split(/\n\s*\n/).map(p => p.replace(/\s+/g, ' ').trim()).filter(Boolean) : []; if (!groupObs.length) return null; const metricIds = [...new Set(groupObs.map(o => o.metric_id))]; const latestYear = Math.max(...groupObs.map(o => o.report_year)); const latestObs = groupObs.filter(o => o.report_year === latestYear); const allYears = [...new Set(groupObs.map(o => o.report_year))].sort(); const unit = latestObs[0]?.unit || ''; const chartSeries = metricIds.slice(0, 6).map(mid => ({ mid, name: strixMetricName(mid), unit: STRIX_METRICS[mid]?.unit || '', data: groupObs.filter(o => o.metric_id === mid).map(o => ({ year: o.report_year, value: o.value })), })); const yoyChange = (mid) => { const sorted = groupObs.filter(o => o.metric_id === mid).sort((a, b) => b.report_year - a.report_year); if (sorted.length < 2 || sorted[0].value == null || sorted[1].value == null) return null; const prev = sorted[1].value; if (prev === 0) return null; return ((sorted[0].value - prev) / Math.abs(prev) * 100); }; const methYears = [...new Set(meth.map(m => m.report_year))].sort(); const breakdownTypes = [...new Set(breakdownObs.map(o => o.dimension_type))]; return (
{/* Header — forest-green hero panel, electric-green highlights, floating stat chips */} {(() => { const chips = [ // bobDur/bobDelay are deliberately mismatched so the chips never bob in unison { label: 'Observations', value: groupObs.length, top: 8, left: 20, w: 172, delay: 200, bobDur: 4.4, bobDelay: 0 }, { label: 'Breakdowns', value: breakdownObs.length, top: 84, right: 0, w: 172, delay: 320, bobDur: 5.2, bobDelay: -2.6 }, { label: 'Targets', value: targets.length, bottom: 60, left: 4, w: 160, delay: 440, bobDur: 3.9, bobDelay: -1.1 }, { label: 'Restated values', value: restatements.length, bottom: 0, right: 26, w: 196, delay: 560, bobDur: 5.7, bobDelay: -3.4, warn: restatements.length > 0 }, ]; return (

{c.name} — {strixFamilyName(family)}

{groupObs.length} group-level observations across {allYears.length} years ({allYears[0]}–{allYears[allYears.length - 1]}). {breakdownObs.length > 0 ? ` Plus ${breakdownObs.length} dimensional breakdowns.` : ''}

{/* Floating stat labels */}
{chips.map((ch) => (
{/* inner wrapper carries the gentle continuous bob; outer handles entrance. Uses the .drift class so prefers-reduced-motion disables it automatically. */}
► {ch.label}
))}
); })()} {/* Metric charts — each metric gets its own panel with independent Y-axis */}
{strixFamilyName(family)} — time series
{chartSeries.length} metric{chartSeries.length > 1 ? 's' : ''} · independent scales · click a point for its source
{chartSeries.map((s, i) => { const sorted = s.data.filter(d => d.value != null).sort((a, b) => b.year - a.year); return (
{s.unit ? : null}
{sorted.length === 0 ? (
Not reported in canonical units
) : ( <> ( { const hit = s.data.find(d => d.year === pt.year && d.value != null); if (!hit) return; jumpToSource(srcKeyObs({ metric_id: s.mid, report_year: pt.year, dimension_type: 'group', dimension_value: '' })); }} /> )} />
{formatValue(sorted[0].value)} {s.unit ? : null} · {sorted[0].year} {sorted.length >= 2 ? (() => { const change = ((sorted[0].value - sorted[1].value) / Math.abs(sorted[1].value || 1)) * 100; const dir = metricDirection(s.mid); const improving = Math.abs(change) <= 1 ? null : dir === 'lower' ? change < 0 : dir === 'higher' ? change > 0 : null; return ( {change > 0 ? '↑' : change < 0 ? '↓' : '—'} {Math.abs(change).toFixed(1)}% YoY ); })() : ( single year reported )}
)}
); })}
{/* Key metrics table */}
Latest values — {latestYear}
{['Metric', 'Value', 'Unit', 'YoY', 'Trend', 'Confidence'].map((h, i) => (
{h === 'Confidence' ? : h}
))}
{metricIds.map(mid => { const row = latestObs.find(o => o.metric_id === mid); if (!row) return null; const change = yoyChange(mid); const series = groupObs.filter(o => o.metric_id === mid) .sort((a, b) => a.report_year - b.report_year) .map(o => ({ year: o.report_year, value: o.value })); const trend = metricTrendStatus(mid, series); return (
{row.value != null ? formatValue(row.value) : }
{row.unit ? : 'NA'}
{change != null ? (() => { const dir = metricDirection(mid); const improving = Math.abs(change) <= 1 ? null : dir === 'lower' ? change < 0 : dir === 'higher' ? change > 0 : null; return ( {change > 0 ? '↑' : change < 0 ? '↓' : '—'} {Math.abs(change).toFixed(1)}% ); })() : ( NA )}
{trend ? : NA}
{Math.round(row.confidence * 100)}
); })}
{/* Analyst context — forest panel, rotating Trend / Drivers / Outlook */} {analysisParas.length > 0 && (() => { const kickers = analysisParas.map((_, i) => ['Trend', 'Drivers', 'Outlook'][i] || 'Note'); const idx = Math.min(activePara, analysisParas.length - 1); return (
Analyst context
{kickers.map((k, i) => ( ))}
{analysisParas.map((p, i) => (

))}
{idx + 1} / {analysisParas.length}
); })()} {/* Targets */} {targets.length > 0 && (
Targets — {strixFamilyName(family)}
{targets.length} target{targets.length !== 1 ? 's' : ''} · status computed from extracted history
toggle('targets')} />
{open.targets &&
{targets.map((t, i) => { const status = targetStatus(t, companyId); return (
jumpToSource(srcKeyTarget(t))} title="View source" style={{ paddingBottom: 16, borderBottom: i < targets.length - 1 ? '1px solid var(--line)' : 'none', cursor: 'pointer' }}>
{t.expressed_as}
{t.target_year ? `Target: ${t.target_year}` : ''} {t.baseline_year ? ` · Baseline: ${t.baseline_year}` : ''} {t.target_value != null ? ` · Goal: ${formatValue(t.target_value)}${t.target_unit ? ' ' + t.target_unit : t.target_kind === 'percentage_reduction' ? '% reduction' : t.target_kind === 'percentage_increase' ? '% increase' : ''}` : ''} {` · ${Math.round(t.confidence * 100)}% conf`}
); })}
}
)} {/* Dropped targets */} {dropped.length > 0 && (
Silently dropped — {strixFamilyName(family)}

Targets disclosed in a prior report but absent from the next.

{dropped.map((dt, i) => (
{dt.expressed_as}
Last seen: {dt.last_seen_year} · Dropped in: {dt.dropped_in_year} {dt.target_year ? ` · Target year: ${dt.target_year}` : ''}
))}
)} {/* Methodology history */} {meth.length > 0 && (
Methodology history — {strixFamilyName(family)}

How {c.name} has calculated these metrics over time. Changes here affect comparability.

toggle('meth')} />
{open.meth && <>
{family === 'ghg_emissions' && } {meth.sort((a, b) => b.report_year - a.report_year).map((m, i, arr) => { const prev = arr[i + 1]; // previous reported year (rows sorted newest-first) const changed = (field) => prev && prev[field] != null && m[field] != null && prev[field] !== m[field]; return ( {family === 'ghg_emissions' && ( )} ); })}
Year
{m.report_year} {m.boundary_basis ? : } {m.assurance_level ? : } {m.gwp_set ? m.gwp_set.toUpperCase() : } {m.includes_managed_jvs == null ? : m.includes_managed_jvs ? 'Yes' : 'No'} {m.includes_contractors == null ? : m.includes_contractors ? 'Yes' : 'No'} {m.restated_this_year ? ( restatements.length > 0 ? ( ) : Yes ) : 'No'}
Highlighted cells changed from the previous reported year — a comparability flag, not an error.
}
)} {/* Operational events */} {events.length > 0 && (
Operational events

{events.length} corporate changes that may affect {strixFamilyName(family).toLowerCase()} metrics.

toggle('events')} />
{open.events && <>
{(showAllEvents ? events : events.slice(0, 8)).map((ev, i, shown) => (
{formatEventKind(ev.event_kind)} {ev.effective_date && (
{ev.effective_date}
)}
{ev.affected_entity.replace(/_/g, ' ')}
{ev.description &&
{ev.description}
}
))}
{events.length > 8 && ( )} }
)} {/* Dimension breakdowns — section header, standalone headline panels, then the full table */} {breakdownObs.length > 0 && (
Dimensional breakdowns
{breakdownObs.length} observations by {breakdownTypes.map(formatDimType).join(', ')} · click an item for its source
{/* Headline breakdown charts — dominant metric per dimension, latest year. Alternates donut and bar presentation; every item links to its source row. */} {(() => { const DIM_ORDER = ['country', 'business_unit', 'asset', 'source_type', 'category']; const panels = DIM_ORDER.filter(dt => breakdownTypes.includes(dt)).slice(0, 4).map(dt => { const dtObs = breakdownObs.filter(o => o.dimension_type === dt && o.value != null && o.value > 0); if (!dtObs.length) return null; const dtLatest = Math.max(...dtObs.map(o => o.report_year)); const latest = dtObs.filter(o => o.report_year === dtLatest); const byMetric = {}; latest.forEach(o => { (byMetric[o.metric_id] = byMetric[o.metric_id] || []).push(o); }); const mid = Object.keys(byMetric).sort((a, b) => byMetric[b].length - byMetric[a].length)[0]; const rows = byMetric[mid].sort((a, b) => b.value - a.value); return { dt, mid, year: dtLatest, unit: rows[0].unit, rows }; }).filter(Boolean); if (!panels.length) return null; const GRID = 'repeating-linear-gradient(0deg, rgba(78,90,65,0.06) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(78,90,65,0.06) 0 1px, transparent 1px 40px)'; // Two annotated donuts side by side — prefer asset (Scope 1) and category (Scope 3) const donutPref = ['asset', 'category', 'country', 'business_unit', 'source_type']; const donutPanels = donutPref.map(dt => panels.find(p => p.dt === dt)).filter(Boolean).slice(0, 2); for (const p of panels) { if (donutPanels.length >= 2) break; if (!donutPanels.includes(p)) donutPanels.push(p); } const mkSegs = (p) => { const total = p.rows.reduce((a, o) => a + o.value, 0); const top = p.rows.slice(0, 5); const other = p.rows.slice(5).reduce((a, o) => a + o.value, 0); const segs = [ ...top.map((o, i) => ({ label: (o.dimension_value || 'unknown').replace(/_/g, ' '), value: (o.value / total) * 100, abs: o.value, color: DONUT_GREENS[i % DONUT_GREENS.length], o })), ...(other > 0 ? [{ label: `Remaining (${p.rows.length - 5})`, value: (other / total) * 100, abs: other, color: DONUT_OTHER, o: null }] : []), ]; return { total, segs }; }; return ( <> {/* Full-bleed grid band carrying the two annotated donuts (no card frames) */}
1 ? '1fr 1fr' : '1fr', gap: 40 }}> {donutPanels.map((p) => { const { total, segs } = mkSegs(p); return (
by {formatDimType(p.dt)}
{p.year} · · click a label for its source
jumpToSource(srcKeyObs(o))} />
); })}
); })()}
Full breakdown table
every dimensional observation · {latestYear}
setShowBreakdowns(!showBreakdowns)} />
{showBreakdowns && (
{breakdownTypes.map(dt => { const dtAll = breakdownObs.filter(o => o.dimension_type === dt); if (!dtAll.length) return null; const dtLatest = Math.max(...dtAll.map(o => o.report_year)); const dtObs = dtAll.filter(o => o.report_year === dtLatest); const byDimVal = {}; dtObs.forEach(o => { const key = o.dimension_value || 'Unknown'; if (!byDimVal[key]) byDimVal[key] = []; byDimVal[key].push(o); }); return (
By {formatDimType(dt)} — {dtLatest} · {dtObs.length} observations
{Object.entries(byDimVal).sort((a, b) => a[0].localeCompare(b[0])).map(([dv, obs]) => (
{dv.replace(/_/g, ' ')}
{obs.map((o, i) => (
jumpToSource(srcKeyObs(o))} title="View source" style={{ display: 'flex', justifyContent: 'space-between', gap: 16, fontSize: 12, color: 'var(--ink-3)', padding: '2px 0', cursor: 'pointer' }}> {strixMetricName(o.metric_id)} {o.value != null ? <>{formatValue(o.value)} : o.value_original != null ? <>{o.value_original} : 'Not reported'}
))}
))}
); })}
)}
)} {/* Restated figures */} {restatements.length > 0 && (
Restated figures — {strixFamilyName(family)}

{restatements.length} value{restatements.length !== 1 ? 's' : ''} {c.name} revised after first publishing them. Click a row for its source.

toggle('restate')} />
{open.restate && (
{restatements.map((r, i) => { const sameUnit = !r.restated_unit || r.restated_unit === r.unit; const pct = (sameUnit && r.original_value != null && r.restated_value != null && r.original_value !== 0) ? ((r.restated_value - r.original_value) / Math.abs(r.original_value)) * 100 : null; const methReason = (meth.find(m => m.report_year === r.restated_in_year) || {}).restatement_reason; const reason = methReason || r.notes || (r.kind ? r.kind.replace(/_/g, ' ').replace(/^./, ch => ch.toUpperCase()) : null); return ( jumpToSource(srcKeyObs({ metric_id: r.metric_id, report_year: r.fiscal_year, dimension_type: 'group', dimension_value: '' }))} title="View source" style={{ borderBottom: openReason === i ? 'none' : '1px solid var(--line)', cursor: 'pointer' }}> {openReason === i && reason && ( )} ); })}
Metric Year Original Restated Change Restated in Why
{r.fiscal_year} {r.original_value} {r.restated_value} {pct != null ? ( 10 ? '#8b4545' : 'var(--ink-2)' }}> {pct > 0 ? '+' : ''}{pct.toFixed(1)}% ) : !sameUnit ? ( unit changed ) : '—'} {r.restated_in_year ? `${r.restated_in_year} report` : (r.restated_source_doc || '—')} { e.stopPropagation(); if (reason) setOpenReason(openReason === i ? null : i); }}> {reason ? ( {reason} ) : }
Company’s explanation{r.restated_in_year ? ` — ${r.restated_in_year} report` : ''}
{methReason || reason}
)}
)} {/* Source provenance */}
Source provenance

Every data point traces back to a cell or page in {c.name}’s published reports —{' '} {groupObs.length} group values, {targets.length} targets, {breakdownObs.length} breakdowns.

csvForStrixObs([...groupObs, ...breakdownObs])} filename={`${companyId}-${family}-strix-data.csv`} count={groupObs.length + breakdownObs.length} title={`Download ${c.name}'s ${strixFamilyName(family)} data (${(groupObs.length + breakdownObs.length).toLocaleString()} observations) as CSV — original value & unit, normalised value & unit, and exact source (document · sheet · cell)`} /> toggle('sources')} />
{open.sources && (
{(() => { const obsSort = (a, b) => strixMetricName(a.metric_id).localeCompare(strixMetricName(b.metric_id)) || b.report_year - a.report_year; const rows = [ ...[...groupObs].sort(obsSort).map(o => ({ key: srcKeyObs(o), item: strixMetricName(o.metric_id), year: o.report_year, context: 'Group total', value: o.value_original != null ? `${o.value_original} ${o.unit_original || ''}` : null, doc: o.source_doc, sheet: o.source_sheet, cell: o.source_cell, page: o.source_page, })), ...targets.map(t => ({ key: srcKeyTarget(t), item: t.expressed_as.length > 70 ? t.expressed_as.substring(0, 70) + '…' : t.expressed_as, itemTitle: t.expressed_as, year: t.target_year, context: 'Target', value: t.target_value != null ? `${t.target_value} ${t.target_unit || ''}` : null, doc: t.source_doc, sheet: t.source_sheet, cell: t.source_cell, page: t.source_page, })), ...[...breakdownObs].sort(obsSort).map(o => ({ key: srcKeyObs(o), item: strixMetricName(o.metric_id), year: o.report_year, context: formatDimType(o.dimension_type) + ': ' + (o.dimension_value || '').replace(/_/g, ' '), value: o.value_original != null ? `${o.value_original} ${o.unit_original || ''}` : null, doc: o.source_doc, sheet: o.source_sheet, cell: o.source_cell, page: o.source_page, })), ]; return rows.map((r, i) => { const hl = highlightSrc && highlightSrc.key === r.key; return ( ); }); })()}
Item Year Context Reported value Document Sheet Cell / Page
{r.item} {r.year ?? '—'} {r.context} {r.value != null ? r.value : } {r.doc || } {r.sheet || '—'} {r.cell || (r.page != null ? `p.${r.page}` : '—')}
)}
{/* Back to top — portalled to so no transformed ancestor can re-anchor the fixed position */} {showTop && ReactDOM.createPortal( , document.body )}
); }; const thStyle = { textAlign: 'left', padding: '8px 12px', fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--mono)', letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }; const tdStyle = { padding: '10px 12px', fontSize: 13, color: 'var(--ink-2)', lineHeight: '18px', verticalAlign: 'top' }; const changeStyle = { background: '#fff8e6', fontWeight: 600, color: 'var(--ink)' }; window.MetricDeepDive = MetricDeepDive;