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 may access it via the CDN. When using the CDN, this 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 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.

📄 License

MIT

scottbedard / svelte-heatmap

readme