/* Sidebar, member tiles, heatmap, initiatives, footer panels. */
const { Donut: DonutAtom, Sparkline: SparkAtom, TrendChart: TrendAtom, MiniRadar: RadarAtom, heatColor: heatColorFn } = window;
// ── Icons (lucide-style hairline) ───────────────────────────────────────
const Icon = ({ d, size = 16 }) => (
{typeof d === "string" ?
);
const I = {
dashboard: <>
AIVC
AI VALUE CAPTURE SPECTRUM™
Reifegrad-Cockpit über alle sechs Facetten. Stand: {period}.
Alle Geschäftseinheiten
{period}
);
}
// ── Card wrapper ────────────────────────────────────────────────────────
function Card({ title, info, sub, children, className = "" }) {
return (
{title}
{info && i }
{sub &&
{sub}
}
{children}
);
}
// ── Spectrum score donut ──────────────────────────────────────────────────
function FamilyScorePanel({ score, delta, period, prev, facetten }) {
const sorted = [...(facetten || [])].sort((a, b) => b.score - a.score);
const top = sorted[0];
const bottom = sorted[sorted.length - 1];
return (
Etablierte Reife
↑ {Math.abs(delta)} vs. {prev}
{top && bottom ? (
<>
{top.code} zieht mit {top.score} ,
{bottom.code} braucht Fokus bei {bottom.score} .
Spannweite im Spectrum: {top.score - bottom.score} Punkte.
) : "Spectrum-Übersicht wird geladen."}
Vollständige Analyse
);
}
// ── Trend & forecast ────────────────────────────────────────────────────
function TrendPanel({ data }) {
return (
Bei aktueller Hebelgeschwindigkeit erreicht das Spectrum 73+ in 3 Monaten.
);
}
// ── Facette tile ──────────────────────────────────────────────────────────
function MemberTile({ g, idx, style = "bars" }) {
const deltaCls = g.delta > 0 ? "tile__delta--up" : g.delta < 0 ? "tile__delta--down" : "tile__delta--flat";
const arrow = g.delta > 0 ? "↑" : g.delta < 0 ? "↓" : "→";
return (
Facette 0{idx + 1}
{g.code}
{g.purpose}
{g.score}
{arrow} {Math.abs(g.delta)}
/100
Reifedimensionen D1–D6
{Math.min(...g.dimensions.map(d => d.score))}–{Math.max(...g.dimensions.map(d => d.score))}
{style === "bars" && (
{g.dimensions.map(d => (
{d.id}
{d.label}
{d.score}
))}
)}
{style === "radar" && (
)}
{style === "dots" && (
{g.dimensions.map(d => {
const filled = Math.round(d.score / 20); // 0..5
return (
{[0,1,2,3,4].map(i => (
{d.score}
{d.id}
{d.label.split(" ")[0]}
);
})}
)}
);
}
// ── Heatmap ─────────────────────────────────────────────────────────────
function HeatmapPanel({ facetten, axes }) {
return (
{axes.map(a => (
{a}
))}
{facetten.map(g => (
{axes.map(a => {
const v = g.cross[a];
const c = heatColorFn(v);
return (
{v}
);
})}
))}
);
}
// ── Initiatives / Hebel ─────────────────────────────────────────────────
function InitiativesPanel({ items }) {
return (
{items.map((it, i) => (
{String(i + 1).padStart(2, "0")}
{it.detail}
Potenzial · {it.potential}
))}
);
}
// ── Footer trio ─────────────────────────────────────────────────────────
function SignalsPanel({ signals }) {
return (
{signals.map(s => {
const cls = s.alert ? "signal__val--alert" : s.direction === "down" ? "signal__val--down" : "signal__val--up";
const arrow = s.direction === "down" ? "↓" : "↑";
return (
);
})}
);
}
function BenchmarkPanel({ facetten }) {
// Show top 5 by score with a benchmark mark at 70
const rows = [...facetten].sort((a, b) => b.score - a.score);
return (
{rows.map(g => (
{g.code.replace("AIVC ", "")}
{g.score}
))}
);
}
function ReviewPanel({ review }) {
return (
Nächstes Spectrum Review
{review.title}
{review.date} · {review.time}
{review.participants} Teilnehmer · alle Facetten-Owner
Vorbereiten
);
}
Object.assign(window, {
Sidebar, Header, Card, FamilyScorePanel, TrendPanel,
MemberTile, HeatmapPanel, InitiativesPanel,
SignalsPanel, BenchmarkPanel, ReviewPanel,
});