Dashboard-Beispiele
Interaktive Beispieldaten und Browser-Demos. Alle Werte sind illustrativ.
Dashboard-Ansichten
Vier Ansichten desselben fiktiven Datensatzes. Zeitraum und Szenario steuern alle Darstellungen.
Abgeschlossen358
Automatisierter Anteil47%
Ø Bearbeitung38m
Verzögert81
Illustrative BeispieldatenArbeitsmix
Direkter Vergleich
Balken machen das Verhältnis von automatisierter und manueller Arbeit direkt vergleichbar.
Ändern Sie Zeitraum oder Szenario und vergleichen Sie die Anteile.
Verlauf
Signal und Ausnahmen
Eine helle Linie verfolgt abgeschlossene Arbeit; die gestufte Linie hält Verzögerungen sichtbar.
Bewegen Sie den Zeiger über die Linien, um einzelne Tage zu prüfen.
Kumulierte Aktivität
Volumen und Druck
Gestapelte Flächen zeigen die Gesamtlast und wie Verzögerungen zur aktiven Warteschlange beitragen.
Vergleichen Sie die Flächen; genaue Tageswerte finden Sie unter „Daten ansehen“.
Gestapelte Fläche für 30 Tage im Szenario Normale Woche: 358 abgeschlossen und 81 verzögert. Genaue Tageswerte sind über „Daten ansehen“ verfügbar.
Bearbeitungszeit-Gruppen
Verteilung
Ein gerastertes Histogramm zeigt, in welchen Zeitspannen sich Tage häufen.
Wechseln Sie den Zeitraum und beobachten Sie, wie sich die Verteilung verschiebt.
Jedes gerasterte Band gruppiert Tage nach durchschnittlicher Bearbeitungszeit.
So wurden diese Visualisierungen erstellt
Das Vergleichsdiagramm nutzt TanStack Charts. Die gestapelte Fläche nutzt Apache ECharts. Die Zeitreihe adaptiert die MIT-lizenzierte Recharts-Komponente von NeonBlade UI. Die gerasterte Verteilung ist eine eigenständige Umsetzung, inspiriert von Dither Kit; dessen Quellcode ist nicht enthalten.
Interaktionen
Fünf bedienbare Experimente und ein illustratives Codebild zeigen unterschiedliche Formen von Feedback, Typografie und Zuständen.
Taktile Aktion
Tiefe und Bewegung geben einer wichtigen Aktion eine klare physische Rückmeldung.
Öffnen Sie den Kontakt mit Maus, Touch oder Tastatur.
Tastaturfokus und Drucktiefe gehören zur Komponente.
Signalmuster
Ein anpassbares Punktfeld gibt Lade- und Statusmomenten Charakter, ohne den Inhalt zu verdecken.
Stellen Sie mit dem Regler eine andere Signaldichte ein.
Textenthüllung
Eine kurze Enthüllung bringt Energie in einen Produktmoment und endet in gut lesbarem Text.
Wechseln oder kopieren Sie die sichtbare Botschaft.
Textbreite prüfen
Die Schätzung nutzt den tatsächlich verfügbaren Raum für stabile Listen und inhaltsreiche Werkzeuge.
Ändern Sie die Spaltenbreite und vergleichen Sie Prognose und Umbruch.
Komplexe Arbeit wird leichter, wenn die Oberfläche erklärt, was zählt, was sich geändert hat und was als Nächstes zu tun ist.
Zustände erklären
Auswahl, Verfügbarkeit und Sperre bleiben auch ohne Hover eindeutig.
Wechseln Sie zwischen den verfügbaren Tönen und prüfen Sie die Zustände.
Illustratives Codebild
Ein kurzer Ausschnitt zeigt die Haltung vom konkreten Problem zur nützlichen Umsetzung.
Lesen Sie das Bild oder nutzen Sie den Text in der Bildbeschreibung.
Referenzen für diese Experimente
Die taktile Aktion verweist auf Evil Buttons, das anpassbare Signal auf Dot Matrix, die Enthüllung auf Remocn Typography, die Breitenmessung nutzt Pretext und die Zustandsauswahl folgt Shark UIs primitiver Herangehensweise. Umsetzung und Lizenzen stehen in THIRD_PARTY.md.