Interaktiivinen dashboard datan visualisointiin.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
Luo analytiikka-dashboard. Layout: - Header (otsikko, aikavälivalitsin) - KPI-kortit (4 kpl rivissä) - Pääkaavio (viivakaavio, iso) - Sivukaaviot (2x2 grid: palkit, piiras, lista, kartta) - Taulukko (yksityiskohtainen data) Tech: - Next.js 14 - TypeScript - Tailwind CSS - Recharts (kaaviot) - Supabase (data) Mock-data aluksi, sitten Supabase-integraatio. Tee tumma teema, moderni design.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
Luo perustason metriikat.
Luo KPICard-komponentti joka näyttää: otsikko, arvo, muutos edellisestä jaksosta (prosentteina), ikoni. Luo 4-6 KPI-korttia dashboardin yläosaan.
Lisää datavisualisoinnit.
Luo Recharts-kaavioita: viivakaavio aikasarjadatalle, palkkikaavio kategoriadatalle, piirakkakaavio jakaumalle. Tee niistä responsiivisia.
Lisää datan suodatus.
Luo aikavälivalitsin (tänään, viikko, kuukausi, vuosi, custom). Lisää muut filtterit (kategoria, tuote, käyttäjä). Päivitä kaaviot filtterien mukaan.
Lisää live-päivitykset.
Integroi Supabase Realtime. Päivitä dashboard automaattisesti kun uutta dataa tulee. Lisää pieni indikaattori live-päivityksistä.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia data ja analytiikka projekteja tai tutustu muihin kategorioihin.