Cach Tao Dashboard Analytics Hieu Qua Voi Supabase Va Chartjs

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

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

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!