Tạo Dashboard Admin Với Supabase và Chart.js Trong 5 Phút

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'your_project_url';
const supabaseAnonKey = 'your_anon_key';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

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

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

Trong JavaScript, sau khi lấy dữ liệu từ Supabase, bạn cần xử lý để lấy ra các mảng cho labels (ví dụ: ngày tháng) và datasets (ví dụ: doanh số). Ví dụ, nếu bạn muốn vẽ biểu đồ doanh số theo ngày:

const labels = data.map(item => item.sale_date);
const salesData = data.map(item => item.quantity * item.price);

const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: 'Doanh số',
      data: salesData,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
});

Chart.js sẽ tự động render biểu đồ dựa trên dữ liệu bạn cung cấp. Bạn có thể tùy chỉnh màu sắc, kiểu dáng, và các tùy chọn khác để phù hợp với thiết kế của dashboard.

Nâng cao dashboard

Để dashboard trở nên hữu ích hơn, bạn có thể thêm nhiều biểu đồ khác nhau, ví dụ: biểu đồ tròn cho tỷ lệ sản phẩm bán chạy, biểu đồ cột cho doanh số theo tháng, hoặc heatmap cho hoạt động người dùng. Mỗi biểu đồ sẽ cần một query riêng từ Supabase, và bạn có thể dùng các hàm SQL như GROUP BY, SUM, COUNT để aggregate dữ liệu trước khi vẽ.

Ngoài ra, bạn có thể thêm authentication để bảo mật dashboard, hoặc real-time subscription để biểu đồ cập nhật tự động khi dữ liệu thay đổi. Supabase hỗ trợ cả hai tính năng này một cách dễ dàng.

Kết luận

Việc kết hợp Supabase và Chart.js giúp bạn xây dựng một dashboard admin mạnh mẽ mà không cần quá nhiều công sức. Supabase lo việc backend, lưu trữ và truy vấn dữ liệu, trong khi Chart.js biến dữ liệu đó thành các biểu đồ trực quan. Bạn có thể mở rộng dashboard với nhiều tính năng hơn, hoặc tích hợp vào các ứng dụng lớn hơn.

Hy vọng bài viết này đã cung cấp cho bạn cái nhìn tổng quan và các bước thực tế để bắt đầu. Hãy thử nghiệm và tùy chỉnh theo nhu cầu của bạn, và đừng ngần ngại khám phá thêm các tính năng của Supabase và Chart.js để nâng cao dashboard của mình.