Membangun Dashboard Custom dengan React & Recharts (Tanpa Tableau)

Sebagai Data Analyst, Tableau dan PowerBI adalah teman sehari-hari. Tapi sebagai Developer, saya sering merasa terbatasi. Bagaimana jika klien butuh fitur yang sangat spesifik? Atau bagaimana jika biaya lisensi per-user terlalu mahal untuk startup kecil?

Jawabannya: Build it yourself. Di artikel ini, saya akan membedah arsitektur Dashboard Penjualan Real-time yang saya bangun menggunakan ekosistem JavaScript.

The Tech Stack

Frontend Next.js & Tailwind CSS untuk UI yang cepat dan responsif.
Visualization Recharts & D3.js untuk kontrol piksel yang sempurna.
Backend Node.js (Express) untuk API endpoint.
Database MongoDB dengan Aggregation Pipeline untuk query cepat.

Tantangan: Performa Rendering

Menampilkan 10.000 titik data di browser bisa membuat aplikasi lambat (lag). Solusi saya adalah melakukan agregasi data di sisi Backend sebelum dikirim ke Frontend.

// React Component: Memoized Chart
const SalesChart = useMemo(() => {
  return (
    <ResponsiveContainer width="100%">
      <AreaChart data={data} />
    </ResponsiveContainer>
  );
}, [data]);

Kesimpulan

Membangun dashboard sendiri memberikan fleksibilitas tanpa batas. Saya bisa mengintegrasikan fitur autentikasi, export PDF custom, hingga notifikasi WhatsApp—hal yang sulit dilakukan di tools BI konvensional.

Ini adalah bukti kekuatan menjadi seorang Hybrid (Analyst + Developer): Anda tidak hanya bisa membaca data, tapi juga bisa membangun alat untuk menyajikannya.