Statistics Page - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Thống Kê Số Lượng Vào Ra</title> <link rel="stylesheet" href="styles.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <div class="container"> <header> <h1>Thống Kê Số Lượng Vào Ra</h1> </header> <main> <! Bộ lọc chọn thời gian > <div class="filter container"> <label for="startDate">Từ ngày:</label> <input type="date" id="startDate"> <label for="endDate">Đến ngày:</label> <input type="date" id="endDate"> <button id="filterBtn">Thống Kê</button> </div> <! Thông tin tổng số lượng > <div class="stats container"> <div class="stat item"> <h2>Tổng Số Lượng Hiện Tại</h2> <p id="totalQuantity">0</p> </div> </div> <! Biểu đồ thống kê > <div class="chart container"> <canvas id="entryExitChart"></canvas> </div> </main> <footer> <p>© 2024 Thống Kê Hệ Thống</p> </footer> </div> <script src="scripts.js"></script> </body> </html> <style> /* styles.css */ body { font family: Arial, sans serif; margin: 0; padding: 0; background color: #f4f7fc; color: #333; } .container { display: flex; flex direction: column; min height: 100vh; } header { background color: #0b74e5; color: white; text align: center; padding: 20px 0; } header h1 { margin: 0; font size: 24px; } main { flex: 1; padding: 20px; } .filter container { display: flex; justify content: center; align items: center; gap: 10px; margin bottom: 30px; } .filter container label { font size: 16px; } .filter container input, .filter container button { padding: 8px 10px; font size: 14px; border radius: 4px; border: 1px solid #ccc; } .filter container button { background color: #0b74e5; color: white; border: none; cursor: pointer; transition: background color 0.3s; } .filter container button:hover { background color: #094a99; } .stats container { display: flex; justify content: center; margin bottom: 30px; } .stat item { background color: #fff; border radius: 8px; padding: 20px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text align: center; flex: 1; margin: 0 10px; } .stat item h2 { margin: 0 0 10px; font size: 18px; color: #0b74e5; } .stat item p { font size: 20px; margin: 0; font weight: bold; } .chart container { background color: white; border radius: 8px; padding: 20px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } canvas { max width: 100%; height: 400px; } footer { background color: #0b74e5; color: white; text align: center; padding: 10px 0; } </style> <script> // scripts.js // Dữ liệu mẫu const sampleData = { dates: ["2024 11 20", "2024 11 21", "2024 11 22", "2024 11 23", "2024 11 24"], entries: [50, 75, 100, 125, 150], // Số lượng vào exits: [20, 50, 70, 90, 100] // Số lượng ra }; // Cập nhật tổng số lượng hiện tại const totalQuantity = sampleData.entries.reduce((a, b) => a + b, 0) sampleData.exits.reduce((a, b) => a + b, 0); document.getElementById("totalQuantity").textContent = totalQuantity; // Tạo biểu đồ const ctx = document.getElementById("entryExitChart").getContext("2d"); const entryExitChart = new Chart(ctx, { type: "bar", // Biểu đồ cột data: { labels: sampleData.dates, datasets: [ { label: "Số Lượng Vào", data: sampleData.entries, backgroundColor: "rgba(75, 192, 192, 0.6)", borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1 }, { label: "Số Lượng Ra", data: sampleData.exits, backgroundColor: "rgba(255, 99, 132, 0.6)", borderColor: "rgba(255, 99, 132, 1)", borderWidth: 1 } ] }, options: { responsive: true, plugins: { legend: { display: true, position: "top" } }, scales: { x: { title: { display: true, text: "Thời Gian", color: "#0b74e5" } }, y: { title: { display: true, text: "Số Lượng", color: "#0b74e5" }, beginAtZero: true } } } }); // Xử lý sự kiện khi nhấn nút Thống Kê document.getElementById("filterBtn").addEventListener("click", () => { const startDate = document.getElementById("startDate").value; const endDate = document.getElementById("endDate").value; if (!startDate || !endDate) { alert("Vui lòng chọn khoảng thời gian thống kê!"); return; } // Lọc dữ liệu dựa trên khoảng thời gian (mô phỏng) const filteredData = sampleData.dates.reduce( (acc, date, index) => { if (date >= startDate && date <= endDate) { acc.dates.push(date); acc.entries.push(sampleData.entries[index]); acc.exits.push(sampleData.exits[index]); } return acc; }, { dates: [], entries: [], exits: [] } ); // Cập nhật biểu đồ entryExitChart.data.labels = filteredData.dates; entryExitChart.data.datasets[0].data = filteredData.entries; entryExitChart.data.datasets[1].data = filteredData.exits; entryExitChart.update(); // Cập nhật tổng số lượng hiện tại const updatedTotalQuantity = filteredData.entries.reduce((a, b) => a </script>
