Overview
The Svelte 5 heatmap component is an impressive tool for visualizing data in a clear and intuitive format, taking inspiration from GitHub’s contribution graph. This component allows developers to integrate heatmap functionalities into their applications effortlessly, showcasing how data varies over time with color-coded intensity. With its customizable features, it provides a perfect solution for anyone looking to enhance their data presentation.
Designed to be user-friendly, the Svelte 5 heatmap can easily accommodate various data inputs and offers flexibility in how the information is displayed. Whether you’re tracking project contributions, user activity, or any other metric, this component stands ready to provide visual insights that are both informative and engaging.
Features
- Data Prop: Requires an object containing chart data where each key is a date in ISO format (YYYY-MM-DD) and the value represents a numerical value.
- Color Customization: Allows the use of an array of color values for the heatmap cells, with the default settings mirroring GitHub’s contributions graph colors.
- Custom CSS Class: Offers a className option for applying custom CSS styling to fit the heatmap seamlessly into your app’s design.
- Year Control: You can specify the year to be displayed in the heatmap, with the current year set as the default.
- Day-of-Week Labels: Supports the option to display day-of-week labels on the left side of the heatmap, enhancing readability.
- Month Labels: Allows you to include month labels above the calendar for better context, with the default setting enabled.
- Interactive Callbacks: Comes with built-in event handlers that trigger functions on cell clicks and mouse hover events, enhancing interactivity.
- Responsive Sizing: The heatmap size adjusts automatically based on the parent element’s font size, ensuring optimal fit and appearance in your layout.
