dashboard
Create interactive analytics dashboards with React components from drizzle-cube/client. Use when building dashboards, configuring portlets, setting up grid layouts, or creating analytics UIs with drizzle-cube React components.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create interactive analytics dashboards with React components from drizzle-cube/client. Use when building dashboards, configuring portlets, setting up grid layouts, or creating analytics UIs with drizzle-cube React components.
How to use
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.