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
80 lines
2.3 KiB
CSS
80 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
@import "../ui/theme.css";
|
|
|
|
/*
|
|
* HiveGrid Analytics Dashboard
|
|
* ---------------------------------------------------------------
|
|
* Chrome (Sidebar, Karten, Buttons, Tabellen) nutzt die Subframe-
|
|
* Design-Tokens aus ui/theme.css.
|
|
* Die Datenvisualisierung folgt IBM Carbon (siehe docs/DESIGN-SYSTEM.md)
|
|
* und definiert eigene Tokens, damit Charts unabhaengig vom Brand-Theme
|
|
* lesbar und barrierearm bleiben.
|
|
*/
|
|
|
|
:root {
|
|
/* --- Carbon Data-Viz Tokens (Light Theme) --- */
|
|
--dv-grid: #e0e0e0; /* cds-layer-accent-01 - Gridlines */
|
|
--dv-axis: #8d8d8d; /* cds-border-strong-01 - Achsenlinie */
|
|
--dv-text: #161616; /* cds-text-primary - Chart-Titel */
|
|
--dv-text-secondary: #525252;/* cds-text-secondary - Achsenlabels */
|
|
--dv-tooltip-bg: #393939; /* cds-background-inverse */
|
|
--dv-tooltip-fg: #ffffff; /* cds-text-inverse */
|
|
|
|
/* Vertikaler Rhythmus fuer Dashboard-Raster (8px-System) */
|
|
--dv-card-padding: 16px;
|
|
--dv-card-gap: 16px;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-neutral-50, #fafafa);
|
|
color: var(--color-text-neutral-primary);
|
|
font-family: "Inter", system-ui, -apple-system, sans-serif;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/*
|
|
* Fokus-Sichtbarkeit.
|
|
* Eine Regel fuer alles Interaktive statt focus:-Klassen an jedem Element.
|
|
* :focus-visible zeigt den Ring nur bei Tastaturbedienung, nicht beim Klick.
|
|
*/
|
|
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--shadow-focus, 0 0 0 3px rgb(7 145 240 / 0.4));
|
|
border-radius: var(--radius-sm, 4px);
|
|
}
|
|
|
|
/* Radix-Portale (Dropdowns, Tooltips) ueber den Sticky-Header heben. */
|
|
[data-radix-popper-content-wrapper] {
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
/* Recharts: Fokus-Outline der SVG-Wrapper unterdruecken, Cursor vereinheitlichen. */
|
|
.recharts-wrapper:focus,
|
|
.recharts-surface:focus {
|
|
outline: none;
|
|
}
|
|
.recharts-sector,
|
|
.recharts-rectangle,
|
|
.recharts-dot {
|
|
transition: opacity 140ms ease, filter 140ms ease;
|
|
}
|
|
|
|
/* Scrollbars in Karten dezent halten. */
|
|
.dv-scroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.dv-scroll::-webkit-scrollbar-thumb {
|
|
background: #d4d4d4;
|
|
border-radius: 999px;
|
|
}
|
|
.dv-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
@media print {
|
|
.dv-no-print {
|
|
display: none !important;
|
|
}
|
|
}
|