Xây Dựng Hệ Thống Dashboard Thống Kê Với Supabase Và Chart.js

Giới thiệu

Trong thời đại dữ liệu, việc trực quan hóa thông tin trở thành yếu tố then chốt giúp người dùng nhanh chóng nắm bắt tình hình kinh doanh hay hoạt động. Một dashboard thống kê không chỉ đẹp mắt mà còn phải linh hoạt, dễ cập nhật và dễ mở rộng. Supabase với khả năng cung cấp cơ sở dữ liệu PostgreSQL mạnh mẽ cùng các API Real-time, kết hợp với Chart.js - thư viện vẽ biểu đồ đa dạng và dễ tùy chỉnh, tạo nên bộ đôi hoàn hảo để xây dựng hệ thống dashboard chuyên nghiệp. Bài viết này sẽ hướng dẫn từng bước để bạn có thể tự tay tạo ra một dashboard sống động, tương tác và đầy đủ tính năng.

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

Để bắt đầu, bạn cần có tài khoản Supabase (có thể tạo miễn phí tại supabase.com) và một dự án web đơn giản với HTML, CSS, JavaScript. Supabase sẽ cung cấp database, authentication, và Real-time cho ứng dụng của bạn. Chart.js có thể được thêm vào dự án thông qua CDN hoặc npm.

Bước đầu tiên là tạo 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: id, category, amount, created_at. Sau khi có bảng, bạn sẽ insert một số dữ liệu mẫu để test.

Tiếp theo, trong dự án web, bạn khởi tạo Supabase client bằng cách lấy project URL và public anon key từ dashboard của Supabase. Chart.js cũng cần được khai báo, hoặc qua CDN trong thẻ hoặc import nếu dùng module bundler.

Thiết kế dashboard

Giao diện dashboard nên được chia thành các khu vực rõ ràng: tiêu đề, các card hiển thị tổng quan (total sales, average, growth), và khu vực biểu đồ. Sử dụng CSS grid hoặc flexbox để layout gọn gàng. Chart.js hỗ trợ nhiều dạng biểu đồ: line, bar, pie, doughnut, radar... Tùy vào loại dữ liệu và mục đích mà chọn loại chart phù hợp.

Ví dụ, nếu muốn xem doanh số theo thời gian, line chart là lựa chọn tốt. Nếu so sánh doanh số giữa các danh mục, bar chart hoặc doughnut chart sẽ trực quan hơn. Chart.js cho phép tùy chỉnh màu sắc, label, legend, tooltip, giúp dashboard sinh động và dễ đọc.

Kết nối dữ liệu từ Supabase

Để dashboard luôn cập nhật, bạn cần fetch dữ liệu từ Supabase. Sử dụng hàm fetch hoặc thư viện supabase-js để query dữ liệu. Ví dụ, để lấy tổng doanh số và dữ liệu theo danh mục, bạn có thể query:

SELECT category, SUM(amount) as total
FROM sales
GROUP BY category;

Với dữ liệu dạng thời gian, query:

SELECT date_trunc('day', created_at) as day, SUM(amount) as total
FROM sales
GROUP BY day
ORDER BY day;

Kết quả trả về là JSON, bạn sẽ chuyển đổi thành dạng array phù hợp với Chart.js. Chart.js yêu cầu dữ liệu đầu vào có cấu trúc { labels: [], datasets: [{ data: [] }] }.

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

Sau khi có dữ liệu, khởi tạo chart bằng cách chọn canvas element trong HTML và truyền config vào Chart.js. Ví dụ, với line chart:

const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: days,
    datasets: [{
      label: 'Sales',
      data: salesData,
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { display: true },
      title: {
        display: true,
        text: 'Sales Over Time'
      }
    }
  }
});

Chart.js còn hỗ trợ nhiều tùy chọn nâng cao như animation, tooltip format, zoom/pan, giúp người dùng tương tác tốt hơn với dashboard.

Cập nhật dữ liệu tự động

Để dashboard luôn mới, bạn có thể dùng subscription của Supabase. Thay vì fetch một lần, bạn đăng ký lắng nghe thay đổi trên bảng sales:

const mySubscription = supabase
  .channel('dashboard-channel')
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'sales'
  }, (payload) => {
    // Refresh chart data
    updateDashboard();
  })
  .subscribe();

Mỗi khi có record mới được insert, hàm updateDashboard sẽ được gọi, refetch dữ liệu và vẽ lại chart. Điều này giúp dashboard real-time mà không cần reload trang.

Tối ưu và nâng cao

Với lượng dữ liệu lớn, nên cân nhắc pagination hoặc query theo khoảng thời gian để tránh overload. Chart.js cho phép vẽ nhiều datasets trên cùng một chart, giúp so sánh nhiều chỉ số. Bạn cũng có thể thêm filter (theo tháng, theo danh mục) để người dùng chủ động thao tác.

Ngoài ra, sử dụng localStorage hoặc session để cache dữ liệu giúp giảm số lần gọi API. Nếu ứng dụng mở rộng, có thể tách các chart thành component riêng, dễ bảo trì và tái sử dụng.

Kết luận

Xây dựng dashboard thống kê với Supabase và Chart.js là giải pháp hiệu quả, cân bằng giữa tốc độ phát triển và hiệu năng. Supabase lo việc backend - database, authentication, real-time - trong khi Chart.js xử lý phần hiển thị dữ liệu một cách mượt mà và bắt mắt. Với kiến thức và code mẫu trong bài viết, bạn hoàn toàn có thể tạo ra một dashboard chuyên nghiệp, đáp ứng nhu cầu theo dõi và phân tích dữ liệu của mình. Hãy bắt tay vào thực hành và tùy biến để có sản phẩm ưng ý nhất.