svelte-heatmap
A light weight and customizable version of GitHub's contribution graph.
📦 Installation
The recommended way to install this package is through NPM.
npm install svelte-heatmap
Alternatively, you use this script tag to install via the CDN. When choosing the CDN, the package will be exposed globally as SvelteHeatmap
.
<script src="https://unpkg.com/svelte-heatmap"></script>
🚀 Basic usage
To create a heatmap, pass props
and a target
to the SvelteHeatmap
constructor.
import SvelteHeatmap from 'svelte-heatmap';
const heatmap = new SvelteHeatmap({
props: {
data: [
],
},
target: '#some-container',
});
To remove the component, call $destroy
.
heatmap.$destroy();
See the Svelte documentation for more information.
⚙️ Options
Note: Date values for data
, startDate
, and endDate
should be JavaScript Date
objects objects, or a value compatible with the Date constructor.
allowOverflow
Renders cells that fall outside the startDate
to endDate
range. Defaults to false
.
cellGap
Defines the space between cells.
cellRadius
Defines the radius of each cell. This should be a number relative to the cellSize
, or a string representing a percentage such as '50%'
.
cellSize
Defines the size of each cell.
colors
Array of CSS colors to use for the chart, ordered from lowest to highest. Default colors match the GitHub contribution graph.
data
Array of objects containing the chart data. These objects should be in the shape of { date, value }
.
dayLabelWidth
Horizontal space to allocate for day labels. If this is 0
, day labels will not be rendered.
dayLabels
Array of strings to use for day labels. Defaults to ['', 'Mon', '', 'Web', '', 'Fri', '']
.
fontColor
Label font color. Defaults to #333
.
fontFamily
Label font family. Defaults to sans-serif
.
fontSize
Label font size. Defaults to 8
.
emptyColor
CSS color to use for cells with no value.
monthGap
Defines the space between months when view
is set to monthly
.
monthLabelHeight
Vertical space to allocate for month labels. If this is 0
, month labels will not be rendered.
monthLabels
Array of strings to use for month labels. Defaults to ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
.
startDate
Date object representing the first day of the graph. If omitted, this will default to the first day of the month
or year
, based on the current view
.
endDate
Date object represending the last day of the graph. If omitted, this will default to the last day of the current month
or year
, depending on the current view
.
view
Determines how the chart should be displayed. Supported values are monthly
and yearly
, defaults to yearly
.
📄 License
MIT
Copyright (c) 2017-present, Scott Bedard