svelte-heatmap

svelte-heatmap

Demo

https://scottbedard.net/svelte-heatmap

Installation

The preferred way to install this package is through Yarn or NPM.

# install through yarn
yarn add svelte-heatmap

# or install through npm
npm install --save svelte-heatmap

Alternatively, you can simply reference it from a CDN.

<!-- heatmap script -->
<script src="https://rawgit.com/scottbedard/svelte-heatmap/master/dist/heatmap.js"></script>

<!-- default styles -->
<link rel="stylesheet" href="https://rawgit.com/scottbedard/svelte-heatmap/master/dist/heatmap.css">

Basic usage

To use the heatmap, simply instantiate one and mount it to a DOM element.

Note: If you're using this from a CDN, use the global variable SvelteHeatmap.

import SvelteHeatmap from 'svelte-heatmap';

new SvelteHeatmap({
    target: document.querySelector('#target'),
    data: {
        history: [
            { date: '2000/01/01', value: 5 },
        ],
        tooltip: (date, value) => `${value} contributions on ${date}`,
    },
});

Custom colors

To define a set of custom colors, simply provide an array of css colors. The emptyColor property will be used for days with no value.

new SvelteHeatmap({
    target: el,
    data: {
        colors: ['#c6e48b', '#7bc96f', '#239a3b', '#196127'],
        emptyColor: '#dddddd',
        history: [],
    },
});

Alternatively, you can calculate colors on the fly using the following options. Be aware when doing this, lowColor and highColor must be 6 digit hex values (ex: #123456).

new SvelteHeatmap({
    target: el,
    data: {
        colors: 10, // <- number of colors to use
        lowColor: '#aaaaaa', // <- color for low values
        highColor: '#000000', // <- color for high values
        emptyColor: '#dddddd',
        history: [],
    },
});