dejanandClaude Opus 5
b8bf987d0e
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung, nicht der Produktivbetrieb. Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten), 26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026). Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner (Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste Abweichungen stehen in docs/HERKUNFT.md. Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM, KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { KATEGORIE_FARBEN } from "../../utils/chartTheme";
|
|
import { ChartLeer } from "./ChartLeer";
|
|
|
|
/**
|
|
* Vertriebstrichter.
|
|
*
|
|
* Zeigt je Stufe die absolute Zahl, die Balkenlänge als Anteil an der ersten
|
|
* Stufe und die Übergangsquote von der vorherigen Stufe. Genau die
|
|
* Übergangsquote ist die Zahl, nach der Betriebe ihren Vertrieb steuern:
|
|
* Sie zeigt, wo Vorgänge verloren gehen.
|
|
*
|
|
* Einfarbig: Die Stufen sind eine Reihenfolge, keine unabhängigen Kategorien —
|
|
* DESIGN-SYSTEM.md §1 „Rangfolgen einfarbig". Eine Farbabstufung würde nur
|
|
* kodieren, was die Reihenfolge ohnehin sagt.
|
|
*
|
|
* Die Balken sind zentriert, nicht linksbündig: So liest man die Verjüngung als
|
|
* Trichterform, ohne die gemeinsame Skala aufzugeben. Ein echtes Funnel-Chart
|
|
* mit breitenkodierten Segmenten kennt Carbon bewusst nicht — es verzerrt.
|
|
*/
|
|
export function Trichter({
|
|
stufen,
|
|
formatWert,
|
|
}: {
|
|
stufen: { name: string; value: number }[];
|
|
formatWert: (wert: number) => string;
|
|
}) {
|
|
const [aktiv, setAktiv] = React.useState<number | null>(null);
|
|
|
|
if (!stufen.length || stufen[0].value === 0) return <ChartLeer hoehe={220} />;
|
|
|
|
const start = stufen[0].value;
|
|
|
|
return (
|
|
<ol className="flex flex-col gap-2">
|
|
{stufen.map((stufe, index) => {
|
|
const anteilGesamt = (stufe.value / start) * 100;
|
|
const vorher = index > 0 ? stufen[index - 1].value : null;
|
|
const uebergang = vorher && vorher > 0 ? (stufe.value / vorher) * 100 : null;
|
|
const hervorgehoben = aktiv === index;
|
|
|
|
return (
|
|
<li
|
|
key={stufe.name}
|
|
onMouseEnter={() => setAktiv(index)}
|
|
onMouseLeave={() => setAktiv(null)}
|
|
className="grid grid-cols-[96px_minmax(0,1fr)_52px_44px] items-center gap-2"
|
|
>
|
|
<span className="truncate text-[12px] text-text-neutral-secondary">{stufe.name}</span>
|
|
|
|
<span className="flex h-6 w-full items-center justify-center rounded-sm bg-neutral-100">
|
|
<span
|
|
className="block h-full rounded-sm transition-[width,opacity] duration-300"
|
|
style={{
|
|
width: `${Math.max(3, anteilGesamt)}%`,
|
|
background: KATEGORIE_FARBEN[0],
|
|
opacity: aktiv !== null && !hervorgehoben ? 0.45 : 1,
|
|
}}
|
|
/>
|
|
</span>
|
|
|
|
<span className="text-right text-[12px] font-semibold tabular-nums text-text-neutral-primary">
|
|
{formatWert(stufe.value)}
|
|
</span>
|
|
|
|
<span
|
|
className={`text-right text-[12px] tabular-nums ${
|
|
hervorgehoben ? "font-semibold text-text-neutral-primary" : "text-text-neutral-tertiary"
|
|
}`}
|
|
title={uebergang !== null ? "Übergang von der vorherigen Stufe" : "Startwert des Trichters"}
|
|
>
|
|
{uebergang !== null ? `${uebergang.toFixed(0)} %` : "—"}
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
|
|
<li className="mt-1 flex items-center justify-end gap-1 border-t border-solid border-border-default pt-2 text-[11px] text-text-neutral-tertiary">
|
|
Rechte Spalte: Übergang von der vorherigen Stufe
|
|
</li>
|
|
</ol>
|
|
);
|
|
}
|