Dashboard w HTML z własnych danych

Arkusz z kilkuset wierszami sprzedaży odpowie na każde pytanie, jeśli wiesz, gdzie kliknąć i co zsumować. Dashboard odpowiada na dwa albo trzy pytania, za to od razu: kafelek z przychodem za miesiąc, wykres miesiąc po miesiącu, tabela produktów od tego, który sprzedaje się najlepiej. Taki widok czytasz w kilka sekund, a gdy pokazujesz dane klientowi, wygląda przy okazji znacznie atrakcyjniej niż arkusz.

Eksport do CSV, bez danych osobowych

Wybierz eksport, który i tak regularnie oglądasz w arkuszu, na przykład sprzedaż ze sklepu internetowego albo godziny z programu do ewidencji czasu pracy. Eksportuj go do pliku CSV. CSV to zwykły tekst z samymi danymi, bez kolorów, formuł i układu arkusza. Z takim plikiem agentowi AI pracuje się najłatwiej. Większość systemów ma eksport do CSV obok eksportu do Excela, a plik Excela, który już masz, zapiszesz w Excelu jako CSV.

Zanim plik trafi do folderu, w którym pracujesz z Claude Code, usuń z niego kolumny z danymi osobowymi: imiona i nazwiska klientów, adresy e-mail, telefony, adresy dostawy. Wszystko, co Claude Code przeczyta z pliku, trafia razem z rozmową na serwery dostawcy modelu, a dashboard sprzedaży i tak potrzebuje tylko kolumn w rodzaju data, produkt, kanał sprzedaży, liczba sztuk, przychód. W zestawieniu godzin usuń kolumnę z nazwiskami pracowników albo zamień nazwiska na stanowiska. Tę jedną zmianę zrób w samym programie, a nie przez Claude Code: przy eksporcie zaznacz tylko potrzebne kolumny, a jeśli program na to nie pozwala, usuń je w arkuszu przed zapisem do CSV. Chodzi o to, żeby Claude Code tych danych w ogóle nie zobaczył.

Nie masz pod ręką eksportu, na którym chcesz ćwiczyć? Poproś Claude Code o wymyślony:

Utwórz plik sprzedaz.csv z wymyśloną sprzedażą małego sklepu internetowego z ostatnich sześciu miesięcy: około 300 wierszy, kolumny data, produkt, kanał sprzedaży, liczba sztuk, przychód. Bez danych osobowych. Zapisz go tak, żeby poprawnie otwierał się w Excelu ustawionym po polsku.

Nazwa sprzedaz.csv to tylko przykład. Dalej w lekcji tak nazywa się plik z danymi, więc w poleceniach wpisuj nazwę swojego.

Opis kolumn, zanim powstanie pierwszy wykres

Dashboard zbudowany na źle odczytanej kolumnie pokaże błędne liczby w ładnej formie. Dlatego zacznij od prośby, żeby Claude Code opisał, co widzi w pliku. To i wszystkie kolejne polecenia z tej lekcji wpisuj w jednej rozmowie z Claude Code, uruchomionym w folderze z plikiem, bo każde następne korzysta z tego, co ustaliło poprzednie.

Przeczytaj plik sprzedaz.csv i opisz każdą kolumnę: co zawiera, w jakim formacie są daty i kwoty i z jakiego okresu są dane. Osobno wypisz, co odczytałeś wprost z pliku, a co jest twoim domysłem. Niczego jeszcze nie twórz i pliku nie zmieniaj.

W odpowiedzi sprawdź przede wszystkim domysły. Czy data 03.04 to dla Claude Code 3 kwietnia, czy 4 marca? Czy przychód to kwota netto, czy brutto? Czy ostatni wiersz pliku to zwykła sprzedaż, czy podsumowanie „Razem”, które przy sumowaniu policzyłoby się drugi raz? Gdy coś się nie zgadza, napisz wprost, jak jest, na przykład: „Daty są w formacie dzień.miesiąc.rok, a przychód to kwota brutto w złotych”.

Gdy w opisie zamiast polskich liter pojawiają się dziwne znaki albo wszystkie dane siedzą w jednej kolumnie, kłopot leży w zapisie pliku, a nie w danych. Plik z programu ustawionego po polsku często rozdziela kolumny średnikiem, a w kwotach ma przecinek zamiast kropki. Opisz agentowi AI, co widzisz, i poproś, żeby przeczytał plik jeszcze raz, z innym kodowaniem albo separatorem. Pliku nie przerabiaj, Claude Code poradzi sobie z odczytem.

Pytania, na które ma odpowiadać dashboard

Prośba „zrób z tego wykresy” kończy się zwykle stroną, na której jest wszystko, a żadna liczba nie odpowiada na pytanie, z którym naprawdę zaglądasz do tych danych. Ustal więc z Claude Code najpierw dwa albo trzy pytania. Dla sprzedaży mogą to być: jaki przychód sklep miał w każdym miesiącu, który kanał sprzedaży przynosi najwięcej, które produkty sprzedają się najlepiej. Dla godzin: ile godzin poszło na każdy projekt i jak rozkładają się na kolejne tygodnie.

Chcę z tego pliku zrobić dashboard. Zanim cokolwiek zrobisz, zadaj mi kilka pytań o to, co chcę z tych danych wyczytać, a potem zapisz dwa lub trzy pytania, na które dashboard ma odpowiadać.

Dashboard w jednym pliku HTML

Dashboard napisze Claude Code, a ty dostaniesz jeden plik HTML, który otworzysz w przeglądarce jak stronę internetową, tylko bez internetu. Kodu nie piszesz i nie poprawiasz ręcznie: każdą zmianę zamawiasz w rozmowie.

Zrób dashboard w jednym pliku HTML, który odpowiada na te pytania. Wstaw do strony dane z pliku sprzedaz.csv, a sumy, średnie i procenty niech liczy kod strony z tych danych, bez wpisywania gotowych liczb. Wykresy narysuj bez bibliotek pobieranych z internetu, żeby plik działał bez sieci. Pliku sprzedaz.csv nie zmieniaj. Na koniec napisz, jak nazywa się plik dashboardu.

Liczenie przez kod strony to najważniejsza część tego polecenia. Z naszych obserwacji wynika, że gdy agent AI sam wpisuje liczby do dashboardu, potrafi się pomylić nawet w zwykłej sumie albo procencie. Kod strony liczy z danych za każdym razem tak samo.

Gotowy plik znajdziesz w folderze, w którym pracujesz z Claude Code. Dwuklik otworzy go w przeglądarce, której używasz na co dzień. Dobrze zrobiony dashboard to strona z kafelkami liczb u góry, wykresami pod nimi i tabelą. Jeśli strona jest pusta albo w miejscu wykresu widać puste pole, opisz Claude Code dokładnie to, co widzisz, na przykład „strona jest biała, nie ma na niej nic” albo „wykres kanałów sprzedaży się nie pokazuje, reszta działa”, i poproś o poprawkę.

Plik dashboardu ma w sobie wszystkie dane z eksportu, także te, których nie widać na żadnym wykresie. Kto dostanie od ciebie ten plik, dostanie razem z nim wszystkie te dane.

Liczby z dashboardu sprawdzone w oryginale

Kod strony nie myli się w dodawaniu, ale dodaje to, co Claude Code kazał mu dodać. Jeśli Claude Code policzył wiersz „Razem” jak zwykłą sprzedaż albo wziął kwotę netto zamiast brutto, suma będzie policzona bezbłędnie i mimo to fałszywa. Dlatego zanim pokażesz dashboard komukolwiek, sprawdź dwie albo trzy liczby w oryginale: jedną sumę za cały okres, jedną za wybrany miesiąc albo kanał sprzedaży i jeden procent albo średnią.

Do sprawdzenia otwórz sprzedaz.csv w Excelu albo innym arkuszu. Gdy zaznaczysz kolumnę przychodu, Excel pokaże sumę zaznaczonych komórek na pasku na samym dole okna, a po włączeniu filtra, na przykład tylko na marzec, zsumuje same widoczne wiersze. Jeśli sumy na dole nie widać, wpisz w pustej komórce innej kolumny =SUMA(E:E), gdzie E to litera nad kolumną z przychodem (w Excelu po angielsku =SUM(E:E)). Dostaniesz sumę za cały okres, razem z wierszem „Razem”, jeśli eksport go ma, więc w takim wypadku odejmij go od wyniku.

Gdy po otwarciu w Excelu wszystkie dane stoją w jednej kolumnie albo suma wychodzi 0, Excel nie rozpoznał kwot jako liczb. To ten sam kłopot ze średnikiem i przecinkiem co przy opisie kolumn. Poproś Claude Code o kopię pliku zapisaną tak, żeby poprawnie otwierała się w Excelu ustawionym po polsku, i sprawdzaj liczby w tej kopii.

Gdy liczba się nie zgadza, nie pisz samego „popraw”. Podaj Claude Code obie liczby i poproś, żeby pokazał, jak doszedł do swojej:

Przychód za marzec na dashboardzie to 48 210 zł, a w pliku sprzedaz.csv wychodzi mi 45 930 zł. Pokaż, z których wierszy i z której kolumny liczysz tę sumę, i dopiero potem zaproponuj poprawkę.

Kwoty w tym poleceniu są wymyślone, wpisz swoje. Wyjaśnienie zwykle pokazuje przyczynę, a ty od razu widzisz, czy poprawka dotyczy właściwej rzeczy.

Poprawki układu i wykresów

Wygląd dashboardu poprawiaj jedną zmianą na prośbę i nazywaj to, co widzisz na ekranie: „przesuń kafelek z przychodem na początek i dodaj w nim zmianę wobec poprzedniego miesiąca”, „w tabeli produktów zostaw dziesięć pierwszych pozycji”. Kilka zmian naraz w jednej prośbie trudniej potem sprawdzić, a gdy coś się zepsuje, nie wiadomo, która zmiana to zrobiła.

Zmianę w czasie, na przykład przychód miesiąc po miesiącu, najczytelniej pokazuje wykres liniowy, a porównanie produktów albo kanałów sprzedaży – słupki ułożone od największego. Kolory niech coś znaczą i zostają stałe: jeśli sklep internetowy jest na jednym wykresie niebieski, na każdym innym też powinien być niebieski. Możesz o to po prostu poprosić:

Ustaw te same kolory na wszystkich wykresach: każdy kanał sprzedaży ma mieć wszędzie ten sam kolor, a przy każdym wykresie podpisz, co oznacza który kolor.

Po większej przebudowie, na przykład nowym wykresie albo zmianie tabeli, sprawdź w oryginale jeszcze raz jedną sumę z dashboardu. Przy przebudowie Claude Code przepisuje też kod, który liczy, i liczba, która wcześniej się zgadzała, może się zmienić.

Przycisk do wgrania nowego eksportu

Za miesiąc przyjdzie nowy eksport, a dashboard powinien pokazać nowe liczby bez kolejnej rozmowy z Claude Code. Poproś więc o przycisk, którym wgrasz nowy plik CSV bez pomocy AI:

Dodaj do dashboardu przycisk, którym wgram nowy plik CSV z tymi samymi kolumnami. Po wgraniu dashboard ma przeliczyć wszystkie liczby, wykresy i tabelę z nowych danych. Jeśli w pliku zabraknie którejś kolumny, strona ma to napisać, zamiast pokazywać puste wykresy. Plik ma dalej działać bez internetu.

Przycisk sprawdź na pliku, który różni się od pierwszego: na nowym eksporcie albo na kopii, do której Claude Code dopisze kilka wierszy.

Zrób kopię pliku sprzedaz.csv o nazwie sprzedaz-test.csv i dopisz do niej pięć wierszy sprzedaży z następnego miesiąca. Oryginału nie zmieniaj.

Otwórz dashboard, wgraj przyciskiem plik sprzedaz-test.csv i sprawdź dwie rzeczy: liczby się zmieniły, a suma za cały okres zgadza się z sumą policzoną w arkuszu na tym samym pliku. Jeśli po wgraniu nic się nie zmienia albo strona pokazuje komunikat o brakującej kolumnie, opisz to Claude Code razem z nazwą pliku, który wgrywasz.

Nowy eksport wczytuje przeglądarka na twoim komputerze. Claude Code tego pliku już nie czyta, więc jego dane nie trafiają do modelu.

Dane wgrane przyciskiem zostają na dashboardzie do zamknięcia karty przeglądarki. Po ponownym otwarciu pliku dashboard pokazuje znowu dane z pierwszego eksportu, więc najnowszy plik CSV wgrywasz jeszcze raz.

Z tej lekcji zapamiętaj

• Dane z arkusza dawaj AI w CSV, bez danych osobowych. Kolumny z nazwiskami i adresami usuwasz w programie, zanim plik zobaczy Claude Code.
• Najpierw opis kolumn, potem wykresy. Źle odczytana data albo wiersz podsumowania psuje każdą liczbę na dashboardzie.
• Liczby ma liczyć kod strony, a ty je sprawdzasz. Dwie albo trzy liczby porównane z oryginałem odróżniają dashboard, który wygląda dobrze, od takiego, który się zgadza.
• Jedna poprawka na prośbę, a po większej przebudowie jedna liczba sprawdzona jeszcze raz.
• Plik dashboardu niesie wszystkie dane z eksportu. Wysyłając go komuś, wysyłasz też te dane.

Zadania

• Eksport zapisany jako CSV, bez kolumn z danymi osobowymi
• Opis kolumn od Claude Code przeczytany, domysły poprawione
• Dwa albo trzy pytania do dashboardu ustalone
• Dashboard otwarty w przeglądarce, wszystkie wykresy widoczne
• Dwie albo trzy liczby z dashboardu sprawdzone w pliku z danymi
• Jedna poprawka układu albo kolorów zrobiona, a po większej przebudowie jedna liczba sprawdzona jeszcze raz
• Plik testowy wgrany przyciskiem, suma zgodna z arkuszem