# Arkusz W Panel

> Zamienia plik z danymi (CSV, eksport z Excela lub arkusza Google) w jeden plik `panel.html` z sortowaniem, wyszukiwaniem i grupowaniem, który otwiera się dwuklikiem i działa bez internetu. Użyj, gdy mówisz „zrób z tego panel", „zamień CSV w tabelę", „chcę te dane sortować i grupować", „zrób mi prosty dashboard z danych", albo gdy chcesz wysłać komuś podgląd danych bez dostępu do swojego arkusza.

- Skill: `studiogo/arkusz-w-panel` (Agent Skill)
- Install (CLI): `npx skillmds@latest add studiogo/arkusz-w-panel`
- Raw SKILL.md: https://api.skillmd.com/api/skills/studiogo/arkusz-w-panel/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: studiogo (https://skillmd.com/u/studiogo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/studiogo/arkusz-w-panel

---


# Arkusz w panel — CSV zamieniony w gotową tabelę

Masz plik z danymi (CSV, eksport z Excela, arkusz Google) i chcesz go szybko przejrzeć — posortować, wyszukać, pogrupować — bez otwierania Excela i bez uczenia się nowego programu. Ten skill bierze Twoje dane i buduje **jeden plik `panel.html`**, który otwierasz zwykłym dwuklikiem. Wszystko — dane, wygląd, logika sortowania — jest wewnątrz tego jednego pliku. Nic nie trzeba instalować, nic nie łączy się z internetem.

## Kiedy uruchomić
- Masz CSV albo eksport z arkusza (sprzedaż, leady, zapasy, lista klientów, wyniki ankiety) i chcesz go szybko przejrzeć jako tabelę.
- Chcesz **wysłać komuś gotowy podgląd danych** — koledze, klientowi, wspólnikowi — który nie ma Excela ani dostępu do Twojego arkusza. Wystarczy jeden plik i dwuklik.
- Mówisz: „zrób z tego panel", „zamień CSV w tabelę", „chcę to sortować/grupować", „zrób mi prosty dashboard z danych", „wrzuć te dane w ładną tabelkę".

## Kiedy NIE uruchamiać
- Chcesz **edytować dane, dopisywać wiersze, zapisywać zmiany** — to nie jest arkusz kalkulacyjny, tylko panel do patrzenia. Do edycji zostań przy Excelu / Google Sheets.
- Potrzebujesz **danych na żywo** (aktualizujących się automatycznie) albo **wielu osób pracujących na tym samym widoku jednocześnie** — to jest statyczny plik, zamrożony zrzut danych z chwili wygenerowania.
- Masz **dziesiątki tysięcy wierszy i więcej** — plik zrobi się ciężki, przeglądarka może zwolnić. Kilka tysięcy wierszy działa bez problemu, ale to nie jest narzędzie do wielkich baz danych.

## Procedura
1. **Zbierz dane i cel.** Poproś użytkownika o dane (wklejony CSV/tekst albo ścieżkę do pliku) i o jedno zdanie kontekstu: co to za dane i co chce widzieć najpierw (np. „chcę widzieć sumę sprzedaży per miasto"). To podpowiada, którą kolumnę zaproponować jako domyślną do grupowania.
2. **Wczytaj i rozpoznaj strukturę.** Ustal separator (przecinek czy średnik — w polskich eksportach z Excela częściej średnik, bo przecinek to separator dziesiętny), nazwy kolumn z pierwszego wiersza, i typ każdej kolumny: **liczbowa** (da się sumować/uśredniać) albo **tekstowa** (grupuje się i filtruje, ale się nie sumuje). Zobacz zasady wykrywania niżej.
3. **Zbuduj jeden plik HTML** ze wszystkim wbudowanym w środku — danymi, stylami, logiką (specyfikacja niżej). Zero linków na zewnątrz.
4. **Zapisz plik** jako `panel.html` (albo `<nazwa-danych>-panel.html`, jeśli generujesz kilka paneli) — domyślnie obok pliku źródłowego, albo tam, gdzie wskaże użytkownik.
5. **Powiedz, jak otworzyć** (sekcja niżej) i w 3-4 zdaniach opisz, co panel umie — żeby użytkownik od razu wiedział, że może kliknąć nagłówek, wpisać coś w szukajkę i wybrać grupowanie z listy.

## Wykrywanie typu kolumny
| Sygnał | Traktuj jako |
|---|---|
| ≥90% wartości w kolumnie parsuje się na liczbę (po usunięciu spacji jako separatora tysięcy i zamianie przecinka dziesiętnego na kropkę) | **liczbowa** — sortowanie numeryczne, wchodzi do podsumowania (suma, średnia) |
| Wartości tekstowe, daty w dowolnym formacie, kody, nazwy | **tekstowa** — sortowanie alfabetyczne, dostępna do grupowania i wyszukiwania |
| Kolumna z małą liczbą unikalnych wartości powtarzających się w wielu wierszach (np. kategoria, miasto, status, sprzedawca) | dobry kandydat na **domyślne grupowanie** — zaproponuj ją, ale nie wymuszaj |

**Pułapka polskich danych:** w polskich eksportach z Excela przecinek często oznacza część dziesiętną („1234,56"), więc plik CSV bywa rozdzielany średnikami, nie przecinkami. Zawsze sprawdź pierwszy wiersz pliku, zanim założysz separator.

## Twarda reguła — zero zależności zewnętrznych
Wygenerowany plik **musi działać offline, bez internetu, jako pojedynczy plik**:
- Cały CSS w jednym `<style>` w nagłówku pliku — żadnego `<link rel="stylesheet">`.
- Cały JavaScript w jednym `<script>` na końcu pliku — żadnego `<script src="https://...">`, żadnego CDN, żadnej biblioteki (bez jQuery, bez Chart.js, bez Bootstrap, bez Google Fonts).
- Dane wbudowane wprost w kod JavaScript jako tablica obiektów (np. `const dane = [...]`) — **nie** wczytywane z osobnego pliku `fetch()`, bo przeglądarki blokują to przy otwieraniu pliku dwuklikiem (`file://`).
- `<meta charset="UTF-8">` w nagłówku — inaczej polskie znaki (ą, ę, ć, ś, ż, ź, ł, ń, ó) wyjdą jako krzaki.
- Zero wywołań do internetu jakiegokolwiek rodzaju. Jeśli plik ma zadziałać w samolocie albo na komputerze bez Wi-Fi — musi.

## Co ma zawierać panel.html
| Element | Zachowanie |
|---|---|
| **Pasek podsumowania** (góra strony) | Liczba wierszy (widocznych / wszystkich, jeśli filtr aktywny), a dla każdej kolumny liczbowej: suma i średnia, sformatowane z separatorem tysięcy i sensowną liczbą miejsc po przecinku |
| **Pole wyszukiwania** | Jedno pole tekstowe, filtruje wiersze po dowolnym dopasowaniu w dowolnej kolumnie (nie tylko jednej), aktualizuje się na bieżąco przy pisaniu |
| **Sortowanie** | Klik w nagłówek kolumny = sortuj rosnąco, drugi klik = malejąco, strzałka (▲/▼) pokazuje aktualny kierunek. Liczby sortują się numerycznie, tekst alfabetycznie |
| **Grupowanie** | Rozwijana lista nad tabelą z nazwami kolumn tekstowych + opcja „Brak grupowania". Po wybraniu kolumny wiersze dzielą się na sekcje z nagłówkiem grupy (wartość + liczba wierszy + suma kolumn liczbowych w tej grupie), każdą sekcję można zwinąć/rozwinąć klikiem |
| **Szczegóły wiersza** | Klik w wiersz rozwija pod nim pełny widok wszystkich pól „nazwa kolumny: wartość" — przydatne, gdy kolumn jest dużo i nie mieszczą się wygodnie w tabeli na wąskim ekranie |
| **Wygląd** | Czytelna, prosta tabela — naprzemienne tło wierszy, wyraźne nagłówki, responsywna (nie łamie się na węższym ekranie laptopa), bez ozdóbek utrudniających czytanie danych |

## Czego NIE robi (uczciwe ograniczenie)
To jest **panel do przeglądania i prostej analizy — nie baza danych i nie narzędzie do edycji na żywo**. Nie zapisuje zmian, nie dodaje wierszy, nie łączy się z żadnym źródłem danych, nie odświeża się automatycznie. Jeśli dane się zmienią w oryginalnym pliku, trzeba wygenerować panel jeszcze raz. Dla naprawdę dużych zbiorów danych (dziesiątki tysięcy wierszy i więcej) to nie jest właściwe narzędzie — wtedy potrzebna jest prawdziwa baza danych albo program BI.

## Jak otworzyć panel.html
1. Znajdź plik `panel.html` w Finderze (albo tam, gdzie go zapisano).
2. Kliknij dwa razy — otworzy się w domyślnej przeglądarce (Chrome, Safari, Edge — dowolna).
3. Jeśli otworzy się w złym programie: kliknij prawym przyciskiem → „Otwórz za pomocą" → wybierz przeglądarkę.
4. Działa bez internetu. Można go też wysłać mailem albo na pendrive — u odbiorcy zadziała tak samo, dwuklikiem.

## Przykład
„Mam CSV ze sprzedażą, 200 wierszy: Data, Produkt, Kategoria, Ilość, Cena, Wartość, Sprzedawca."

Dostajesz `panel.html`, w którym:
- na górze widzisz: „200 wierszy · suma Wartość: 184 320,00 zł · średnia Cena: 87,40 zł · suma Ilość: 2 110",
- w polu szukaj wpisujesz „Kowalski" i tabela od razu pokazuje tylko wiersze tego sprzedawcy,
- klikasz nagłówek „Wartość" i największe transakcje wskakują na górę,
- z listy grupowania wybierasz „Kategoria" i widzisz sekcje: Elektronika (42 wiersze, suma 61 200 zł), Odzież (58 wierszy, suma 38 900 zł) itd., każdą można zwinąć,
- klikasz dowolny wiersz i pod nim rozwija się pełny zestaw pól tej transakcji.

Wszystko w jednym pliku, otwartym dwuklikiem, bez Excela.