dashboard
Buduj interaktywne dashboardy analityczne z komponentami React — wykresy, KPI i tabele w responsywnej siatce
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia interaktywnych dashboardów analitycznych przy użyciu komponentów React z biblioteki Drizzle Cube. Pozwala budować kompletne dashboardy zawierające wykresy, wskaźniki KPI i tabele danych w responsywnym układzie siatki. Skonfiguruj portlety (widżety), połącz je z API Cube.js i zarządzajLayoutem — wszystko bez pisania kodu od zera. Idealne do szybkiego prototypowania interfejsów analitycznych.
Jak używać
Zainstaluj pakiet npm install drizzle-cube react react-dom, aby uzyskać dostęp do komponentów Drizzle Cube i zależności React.
Otwórz główny plik aplikacji i zawiń komponent z dashboardem w CubeProvider, przekazując opcje połączenia (apiUrl wskazujący na Twój serwer Cube.js) oraz token autoryzacyjny.
Utwórz komponent dashboardu, importując AnalyticsDashboard z drizzle-cube/client i useState z React do zarządzania konfiguracją.
Zdefiniuj tablicę portletów w stanie — każdy portlet to obiekt z id, tytułem, zapytaniem JSON (measures i dimensions), typem wykresu (np. bar, line), konfiguracją osi oraz pozycją w siatce (x, y, szerokość w, wysokość h).
Przekaż konfigurację do komponentu AnalyticsDashboard wraz z flagą editable=true, aby umożliwić użytkownikowi zmianę layoutu, oraz callback onConfigChange do aktualizacji stanu.
Dodaj callback onSave, aby zapisać nową konfigurację na backendzie, gdy użytkownik zatwierdzi zmiany — wtedy dashboard będzie gotów do wyświetlania danych z Cube.js.