wa0x6e/cal-heatmap

🗓️ Thư viện heatmap lịch mạnh mẽ cho dữ liệu chuỗi thời gian

Tạo biểu đồ calendar heatmap kiểu GitHub contributions chỉ với vài dòng cấu hình, nhưng có nhiều tính năng hơn bạn tưởng.

Cal-Heatmap là thư viện charting JavaScript/TypeScript để tạo biểu đồ heatmap dạng lịch, tương tự biểu đồ đóng góp trên trang GitHub nhưng với nhiều tính năng mở rộng. Thư viện hỗ trợ navigation ngày hoạt hình, tuỳ chỉnh khoảng thời gian, locale, timezone và hệ thống plugin cho phép mở rộng linh hoạt. Được xây dựng trên nền D3.js, cal-heatmap hoạt động rộng trên nhiều trình duyệt và hỗ trợ cả giao diện phải-sang-trái (RTL).

✨ Điểm nổi bật

• 🔀 Navigation hoạt hình: Chuyển đổi giữa các khoảng thời gian với hiệu ứng animation mượt mà
• ⏳ Tuỳ chỉnh khoảng thời gian: Cấu hình linh hoạt theo ngày, tuần, tháng, năm
• 🌐 Hỗ trợ locale và timezone: Hiển thị đúng theo khu vực và múi giờ người dùng
• ⚡ Hệ thống plugin: Mở rộng chức năng thông qua plugin mà không cần sửa core
• 🔚 Hỗ trợ RTL: Đảm bảo hiển thị đúng cho ngôn ngữ viết phải-sang-trái
• 🖥️ Tương thích đa trình duyệt: Hoạt động rộng trên các browser phổ biến
• 🗓️ Kiểm soát toàn bộ bố cục UI: Tuỳ chỉnh giao diện chi tiết từ layout đến legend

💡 Vì sao đáng chú ý

Cal-Heatmap giải quyết nhu cầu trực quan hoá dữ liệu theo dạng lịch — một pattern phổ biến trong analytics, tracking activity hay hiển thị tần suất sự kiện. Khác với việc tự xây dựng từ D3.js thuần, cal-heatmap cung cấp sẵn component hoàn chỉnh với khả năng tuỳ chỉnh cao, giúp rút ngắn đáng kể thời gian phát triển. Hệ thống plugin và hỗ trợ locale/timezone làm nó phù hợp cho ứng dụng quốc tế, nơi cần hiển thị dữ liệu theo ngữ cảnh vùng miền.

#JavaScript #CalendarHeatmap #D3JS #TiniX