A light weight and customizable version of GitHub's contribution graph
npm install svelte-heatmap
A light weight and customizable version of GitHub's contribution graph.
The recommended way to install this package is through NPM.
``bash`
npm install svelte-heatmap
Alternatively, you may access it via the CDN. When using the CDN, this package will be exposed globally as SvelteHeatmap.
`html`
To create a heatmap, pass props and a target to the SvelteHeatmap constructor.
`js
import SvelteHeatmap from 'svelte-heatmap';
const heatmap = new SvelteHeatmap({
props: {
data: [
// ...
],
},
target: '#some-container',
});
`
To remove the component, call $destroy.
`js`
heatmap.$destroy();
See the Svelte documentation for more information.
> 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 GitHub's contribution graph with ['#c6e48b', '#7bc96f', '#239a3b', '#196127'].
##### 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`.
Copyright (c) 2017-present, Scott Bedard