Analytics-Dashboards stehen und fallen mit ihren Visualisierungen. Wir haben einen systematischen Ansatz entwickelt, um komplexe Daten auf eine Weise darzustellen, die sofort verständlich und umsetzbar ist.

Auswahl der Diagrammbibliothek

Wir verwenden verschiedene Diagrammbibliotheken je nach spezifischen Anforderungen:

Recharts: Unsere primäre Bibliothek für Standard-Diagramme – Linie, Balken, Fläche und Kreis. Sie ist React-nativ, hochgradig anpassbar und verarbeitet responsive Größenanpassung gut.
Chart.js: Wird für spezielle Visualisierungen verwendet, wo Recharts an Grenzen stößt – insbesondere für animierte Donut-Diagramme und Radar-Plots.
Benutzerdefiniertes SVG: Für einzigartige Visualisierungen wie Funnel-Diagramme und Vergleichsbalken erstellen wir benutzerdefinierte SVG-Komponenten für vollständige Kontrolle.

3D-Globus-Implementierung

Der interaktive Globus ist Zenovays charakteristisches visuelles Element und zeigt Echtzeit-Besucherstandorte:

Mapbox GL JS: Treibt das 3D-Rendering mit WebGL-Beschleunigung für flüssige 60fps-Rotation und Zoom an.
Benutzerdefinierte Marker: Besucher-Pings sind animierte Kreise, die beim Ankommen pulsen und nach 10 Sekunden verblassen.
Bogenverbindungen: Linien, die Besucher mit ihren Zielen verbinden, verwenden quadratische Bézierkurven.
Fallback-Design: Eine CSS-animierte 2D-Darstellung wird geladen, wenn WebGL nicht verfügbar ist.

Heatmap-Visualisierung

Klick- und Scroll-Heatmaps erfordern sorgfältige Farbskalierung:

Farbverlauf: Blau (kalt) → Grün → Gelb → Rot (heiß) bietet intuitive Dichtewahrnehmung.
Logarithmische Skalierung: Wir wenden eine Log-Transformation an, um zu verhindern, dass Hotspots die gesamte Visualisierung dominieren.
Overlay-Rendering: Heatmaps werden als Canvas-Overlays auf Seiten-Screenshots für perfekte Ausrichtung gerendert.
Interaktive Inspektion: Beim Hovern werden genaue Klickzahlen und Element-Selektoren angezeigt.

Farbskalen für Analytics

Konsistente Farbverwendung hilft Nutzern, Daten schnell zu interpretieren:

Leistungsmetriken: Grün (gut) → Gelb (Warnung) → Rot (kritisch) für Absprungraten, Ladezeiten usw.
Besucherwert: Die Blauintensität korreliert mit dem Besucher-Score (0–100), wobei Dunkleres einen höheren Wert bedeutet.
Traffic-Quellen: Jeder Quellentyp hat eine eigene Farbe – direkt (blau), organisch (grün), sozial (lila), Verweis (orange).
Vergleichsdiagramme: Der aktuelle Zeitraum verwendet primäres Blau, der vorherige Zeitraum gedämpftes Grau für klare Unterscheidung.

Responsives Diagramm-Design

Diagramme müssen auf allen Bildschirmgrößen funktionieren:

Seitenverhältnisbeibehaltung: Diagramme behalten 16:9 auf dem Desktop bei, wechseln auf Mobilgeräten zu 4:3 für bessere vertikale Nutzung.
Beschriftungskürzung: Lange Achsenbeschriftungen werden auf kleinen Bildschirmen mit Auslassungspunkten abgekürzt, vollständiger Text in Tooltips.
Legendenplatzierung: Untere Legenden auf Mobilgeräten, seitliche Legenden auf Desktop zur Maximierung der Diagrammfläche.
Touch-Interaktionen: Größere Tippziele und Wischgesten für die Zeitbereichsnavigation auf Touch-Geräten.

Animationsrichtlinien

Bewegung sollte das Verständnis fördern, nicht ablenken:

Erstladevorgang: Diagramme animieren beim ersten Rendern von null aus (300 ms ease-out), um Aufmerksamkeit auf Daten zu lenken.
Datenaktualisierungen: Übergänge zwischen Datenzuständen verwenden 200 ms Dauer, um Kontext beizubehalten und gleichzeitig Änderungen zu zeigen.
Hover-Zustände: Sofortige Reaktion (keine Verzögerung) für Tooltips und Hervorhebungseffekte.
Reduzierte Bewegung: Alle Animationen respektieren prefers-reduced-motion und können deaktiviert werden.