Das bekommst du
- Ein komplettes KPI-Dashboard als eine HTML-Datei mit 7-, 30- und 90-Tage-Ansichten
- Ein Skript, das CSV- oder JSON-Exporte in Dashboard-Daten umwandelt
- Ein React-Block auf recharts sowie eine ECharts-Version des Diagramms
- Veränderungs-Chips, Linien der Vorperiode, Aufschlüsselungstabelle und Zielbalken
- Optional eine Kopfzeilen-Grafik für den Bericht von PopNow, vorher angeboten
Gut für
- Produkt-, Shop-, Support- oder Wachstums-KPIs
- Wöchentliche und monatliche KPI-Berichtsseiten
- Die Übersicht eines internen Werkzeugs
Nicht für
- Vollständige Admin-Apps mit vielen Bildschirmen
- Live-Streaming-Daten
- Viele Reihen in einem Diagramm vergleichen
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „KPI-Dashboard-Vorlage“ (kpi-dashboard-template) dafür: Baue ein KPI-Dashboard aus exports/orders.csv: Bestellungen, Umsatz, Besucher und erste Antwortzeit, aufgeschlüsselt nach Kanal.
In einem Coding-Agent
/popnow-kpi-dashboard-template Baue ein KPI-Dashboard aus exports/orders.csv: Bestellungen, Umsatz, Besucher und erste Antwortzeit, aufgeschlüsselt nach Kanal.
Dann probier
Füge ein Umsatzziel von 150.000 pro Monat hinzu und stell auf die letzten 7 Tage um.
Gib mir die React-Version für unsere Next.js-Admin-App.
Das solltest du bereithalten
- Einen CSV- oder JSON-Export oder den Befehl, der ihn erzeugt
- Die vier Kennzahlen und welche besser sind, wenn sie sinken
- Optional Ziele und eine Spalte, nach der eine Kennzahl aufgeschlüsselt wird
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Woher kommen die Zahlen?
Aus deinem eigenen Export. Das Skript liest CSV oder JSON, entweder Tagessummen oder Rohereignisse, und baut für jede Kennzahl eine Zeile pro Tag plus eine optionale Aufschlüsselung, die dann in die Seite geschrieben wird.
Wie wird die prozentuale Veränderung berechnet?
Die letzten 7, 30 oder 90 Tage werden mit der gleichen Anzahl Tage davor verglichen. Summen vergleichen Summen, Zeiten und Quoten vergleichen Durchschnitte, und Bestandswerte wie aktive Nutzer vergleichen den letzten Wert. Bei einer Kennzahl, bei der niedriger besser ist, zeigt ein Rückgang Grün.
Braucht es eine Diagrammbibliothek?
Die HTML-Version braucht nichts und läuft offline. Die React-Version nutzt recharts; eine ECharts-Version des Diagramms ist für Projekte enthalten, die ECharts schon nutzen.
Kann PopNow die Diagramme zeichnen?
Nein, und das sollte es nicht: Bildmodelle können Zahlen falsch wiedergeben. PopNow wird nur für eine optionale textfreie Kopf- oder Share-Card-Fläche genutzt, und die echten Zahlen liegen darüber in HTML.