Co dostajesz
- Kompletny pulpit KPI jako jeden plik HTML z widokami 7, 30 i 90 dni
- Skrypt zamieniający eksporty CSV albo JSON na dane pulpitu
- Blok React na recharts oraz wersja wykresu w ECharts
- Znaczniki zmian, linie poprzedniego okresu, tabela podziału i słupki celów
- Opcjonalnie: grafika nagłówka raportu z PopNow, wyceniona przed uruchomieniem
Sprawdzi się przy
- KPI produktu, sklepu, wsparcia albo wzrostu
- Tygodniowe i miesięczne strony raportów KPI
- Ekran przeglądu wewnętrznego narzędzia
Nie nadaje się do
- Pełne aplikacje administracyjne z wieloma ekranami
- Dane strumieniowe na żywo
- Porównywanie wielu serii na jednym wykresie
Jak z niej korzystać
W Claude lub ChatGPT
Użyj umiejętności PopNow „Szablon pulpitu KPI” (kpi-dashboard-template) do tego: Zbuduj pulpit KPI z exports/orders.csv: zamówienia, przychód, odwiedziny i czas pierwszej odpowiedzi, rozbite według kanału.
W agencie do programowania
/popnow-kpi-dashboard-template Zbuduj pulpit KPI z exports/orders.csv: zamówienia, przychód, odwiedziny i czas pierwszej odpowiedzi, rozbite według kanału.
Potem spróbuj
Dodaj cel przychodu 150 000 miesięcznie i ustaw domyślnie ostatnie 7 dni.
Daj mi wersję React dla naszej aplikacji administracyjnej w Next.js.
Co przygotować
- Eksport CSV albo JSON albo polecenie, które go tworzy
- Cztery metryki i informację, które są lepsze, gdy są niższe
- Opcjonalnie: cele i kolumnę, według której rozbić jedną metrykę
Podobne umiejętności
Zobacz wszystkie →Kreator awatarów 3D
+3Zbuduj w przeglądarce uroczą pluszową postać 3D i zapisz ją jako przezroczysty PNG albo stronę 3D.
Heatmapa kalendarzowa
+3Rok codziennej aktywności jako cieniowana siatka kalendarza, z seriami, sumami i obsługą klawiatury.
Strona lądowania SaaS AI
+3Ciepły piaszczysty papier i żywa tablica kanban, na której asystent planuje zadania i przesuwa karty.
Animowana sekcja hero
+3Sekcja hero dla landing page z płynnie zmieniającym się słowem w nagłówku, dwoma przyciskami i szeroką ramką na obraz.
Strona agencji kreatywnej z shaderem
+3Żywy pomarańczowy shader w hero, przyklejone hasło, zaokrąglone menu i siatka case studies.
Ciemny landing page SaaS
+3Ciemna strona marketingowa produktu software z bogatą animacją, dostarczana jako jeden samodzielny plik HTML.
Strona portfolio projektanta
+3Sześć przechylonych kart wokół blednącego nagłówka, jedna czerwona karta portretu, redakcyjne case studies.
Strona portfolio programisty
+3Ciemna strona osobista dla inżynierów z case studies, artykułami, wystąpieniami, CV i formularzem kontaktowym.
Redakcyjna strona SaaS
+3Granatowe dzielone hero, szeryfowy nagłówek obok zdjęcia dokumentalnego, skośne pasma i kobaltowy akcent.
Szablon strony glassmorphism
+3Matowe szklane pigułki na prawie czarnym tle, ogromny szeryfowy nagłówek i zapis e-mail.
Strona produktu sprzętowego
+3Ogromne cienkie nazwy modeli na srebrnych zdjęciach, matowe karty specyfikacji i linia produktów w skali.
Interaktywny diagram architektury
+3Klikalny diagram systemu offline, zbudowany ze sprawdzonego modelu JSON, z dowodami do każdego bloku.
Interaktywne hero z siatką
+3Ciemna siatka cienkich nici, która zagina się ku kursorowi i puszcza świecący pierścień z każdego kliknięcia.
Interaktywny graf wiedzy
+3Zamień notatki z projektu w przeszukiwalny graf offline, w którym każde twierdzenie prowadzi do wiersza źródła.
Strona lądowania z makiet AI
+3Najpierw zobacz trzy projekty pełnej strony, wybierz jeden, a agent zbuduje go jako czysty kod.
Szablon strony magazynu
+3Strona magazynu w jakości druku z artykułami, tematami, małym sklepem i prenumeratą, jako jeden plik HTML.
Hero z animacją cząsteczek
+3Tekst na ciepłym papierze obok obracającej się kuli z kropek, która zmienia kształt przy każdym pomyśle.
Strona marki osobistej
+3Portret wtopiony w ciepły papier pod cienkim nawiasem, z mocnymi hasłami po obu stronach.
Filmowa strona premiery produktu
+3Prawie czarna strona w świetle filmowym: szeryfowa karta tytułowa, nocna scena i formularz rezerwacji.
Szablon panelu administracyjnego
+3Działająca konsola zaplecza z wykresami, tabelami, tablicą kanban i kalendarzem, jako jeden plik HTML offline.
Szablon landing page SaaS
+3Spokojna, jasna strona marketingowa produktu software z działającą konsolą produktu, cennikiem i rejestracją.
Strona CV i portfolio w stylu scrapbooka
+3Wielostronicowe CV online z papierowych przedmiotów, z case studies i życiorysem do druku.
Szablon sklepu ze sneakersami
+3Kompletny sklep z obuwiem lub odzieżą: katalog, strony produktów, koszyk i demonstracyjna kasa w jednym pliku HTML.
Strona lądowania automatyzacji przepływów
+3Grafitowa strona, mały nagłówek i żywy graf węzłów, który działa, ponawia i strumieniuje logi.
Pytania
Skąd pochodzą liczby?
Z twojego własnego eksportu. Dołączony skrypt czyta CSV albo JSON, dzienne sumy albo surowe zdarzenia, i buduje jeden wiersz na dzień dla każdej metryki oraz opcjonalny podział, a potem wpisuje go na stronę.
Jak liczony jest procent zmiany?
Ostatnie 7, 30 albo 90 dni porównuje się z taką samą liczbą dni przed nimi. Sumy porównują sumy, czasy i wskaźniki porównują średnie, a poziomy, na przykład aktywni użytkownicy, porównują ostatnią wartość. Metryka oznaczona jako lepsza przy niższej pokazuje spadek jako dobry.
Czy potrzebuje biblioteki do wykresów?
Wersja HTML nie potrzebuje niczego i działa offline. Wersja React używa recharts, a dla projektów, które już używają ECharts, dołączona jest też wersja wykresu w ECharts.
Czy PopNow może narysować wykresy?
Nie i nie powinien: modele obrazów potrafią pomylić liczby. PopNow służy tylko do opcjonalnego tła nagłówka albo karty udostępnienia bez tekstu, a prawdziwe liczby leżą na wierzchu w HTML.