Cach Tao Dashboard Analytics Hieu Qua Voi Supabase Va Chartjs

Giới thiệu

Trong thời đại dữ liệu, việc có một dashboard analytics trực quan và mạnh mẽ là điều cần thiết cho mọi dự án. Supabase cung cấp một backend hoàn chỉnh với cơ sở dữ liệu PostgreSQL, trong khi Chart.js là một thư viện JavaScript mạnh mẽ để vẽ biểu đồ. Kết hợp cả hai, bạn có thể tạo ra một dashboard tương tác, đẹp mắt và hoàn toàn miễn phí. Bài viết này sẽ hướng dẫn bạn từng bước xây dựng một dashboard analytics đơn giản nhưng đầy đủ chức năng.

Tổng quan về Supabase và Chart.js

Supabase là một nền tảng backend-as-a-service mã nguồn mở, cung cấp cơ sở dữ liệu PostgreSQL, xác thực người dùng, API tự động, và nhiều tính năng khác. Với Supabase, bạn không cần phải lo lắng về việc thiết lập server hay viết backend từ đầu.

Chart.js là một thư viện JavaScript nhẹ, dễ sử dụng, hỗ trợ nhiều loại biểu đồ như line, bar, pie, và nhiều hơn nữa. Chart.js tương thích tốt với mọi framework frontend và có thể tùy chỉnh linh hoạt.

Chuẩn bị môi trường

Trước tiên, bạn cần có một dự án Supabase. Đăng nhập vào dashboard của Supabase, tạo một project mới, và lưu lại Project URL và Service Role Key để kết nối sau này.

Tiếp theo, tạo một bảng trong Supabase để lưu trữ dữ liệu mẫu. Ví dụ, bạn có thể tạo bảng sales với các cột như id, date, product, amount. Insert một vài dòng dữ liệu để có thể test.

Về frontend, bạn có thể tạo một HTML file đơn giản và thêm Chart.js qua CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Kết nối Supabase và lấy dữ liệu

Để lấy dữ liệu từ Supabase, bạn cần sử dụng thư viện JavaScript của Supabase. Thêm script vào HTML:

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@1"></script>

Khởi tạo Supabase client:

const supabase = new SupabaseClient('PROJECT_URL', {
  auth: { serviceRoleKey: 'SERVICE_ROLE_KEY' }
});

Viết hàm để query dữ liệu:

async function getSalesData() {
  const { data, error } = await supabase
    .from('sales')
    .select('*');
  return data;
}

Vẽ biểu đồ với Chart.js

Giả sử bạn muốn vẽ biểu đồ line chart để hiển thị doanh số theo thời gian. Đầu tiên, thêm một canvas vào HTML:

<canvas id="salesChart"></canvas>

Sau đó, sau khi có dữ liệu từ Supabase, xử lý và vẽ biểu đồ:

async function drawChart() {
  const data = await getSalesData();

// Xử lý dữ liệu
  const labels = data.map(item => item.date);
  const values = data.map(item => item.amount);


// Vẽ biểu đồ
  const ctx = document.getElementById('salesChart').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'Doanh số',
        data: values,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    }
  });
}


drawChart();

Nâng cao: Biểu đồ tương tác và responsive

Để dashboard trở nên chuyên nghiệp hơn, bạn có thể thêm các tính năng sau:

- Responsive: Chart.js hỗ trợ responsive mặc định, nhưng bạn có thể tùy chỉnh kích thước canvas. - Legend và tooltips: Giúp người dùng dễ đọc dữ liệu hơn. - Multiple datasets: Vẽ nhiều đường/biểu đồ trên cùng một chart để so sánh. - Filters và buttons: Cho phép người dùng chọn khoảng thời gian hoặc loại sản phẩm.

Ví dụ, thêm filter theo tháng:

document.getElementById('filterBtn').addEventListener('click', async () => {
  const filteredData = await getSalesData().filter(item => 
    new Date(item.date).getMonth() === selectedMonth
  );
  // Vẽ lại chart với filteredData
});

Kết luận

Việc kết hợp Supabase và Chart.js giúp bạn nhanh chóng xây dựng một dashboard analytics mạnh mẽ, không cần phải lo lắng về backend phức tạp hay vẽ biểu đồ thủ công. Supabase cung cấp dữ liệu realtime và an toàn, trong khi Chart.js mang lại trải nghiệm trực quan và tương tác. Bạn có thể mở rộng dashboard này với nhiều loại biểu đồ, bộ lọc, và thậm chí tích hợp authentication để bảo mật. Hãy bắt đầu thử nghiệm và biến dữ liệu thành những câu chuyện trực quan!