DOCSEARCHbyAlgolia
Submit Docs

svelte-heatmap

repository·master·Indexed 41 days ago

https://github.com/scottbedard/svelte-heatmap

A lightweight and customizable Svelte component for rendering contribution graphs similar to GitHub's heatmap. Version 1.0.2 supports monthly and yearly views, custom color scales, and configurable cell styling.

Tokens
760
Snippets
3
Records
4
Agent score
1%

What's inside svelte-heatmap

  2. Basic usage of SvelteHeatmap

    master

    To instantiate a heatmap, import the SvelteHeatmap constructor and pass an options object containing props and a target selector. To clean up the component and prevent memory leaks, call the $destroy() method.

    import SvelteHeatmap from 'svelte-heatmap';

const heatmap = new SvelteHeatmap({
    props: {
        data: [
            // ...
        ],
    },
    target: '#some-container',
});

// To remove the component
heatmap.$destroy();

  3. Configure svelte-heatmap options

    master

    The SvelteHeatmap constructor accepts a props object. Note that all date values (data, startDate, and endDate) must be JavaScript Date objects or values compatible with the Date constructor.

    Data and View

    • data: Array of { date, value } objects.
    • view: Display mode. Supported values: 'monthly' or 'yearly' (default: 'yearly').
    • startDate: The first day of the graph.
    • endDate: The last day of the graph.
    • allowOverflow: If true, renders cells outside the startDate to endDate range (default: false).

    Styling and Cells

    • cellSize: Size of each cell.
    • cellGap: Space between cells.
    • cellRadius: Radius of each cell (number relative to cellSize or percentage string like '50%').
    • colors: Array of CSS colors from lowest to highest value. Default: ['#c6e48b', '#7bc96f', '#239a3b', '#196127'].
    • emptyColor: CSS color for cells with no value.

    Labels and Typography

    • dayLabels: Array of strings for day labels. Default: ['', 'Mon', '', 'Web', '', 'Fri', ''].
    • dayLabelWidth: Horizontal space for day labels. Set to 0 to hide.
    • monthLabels: Array of strings for month labels. Default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].
    • monthLabelHeight: Vertical space for month labels. Set to 0 to hide.
    • monthGap: Space between months (when view is 'monthly').
    • fontColor: Label font color. Default: #333.
    • fontFamily: Label font family. Default: sans-serif.
    • fontSize: Label font size. Default: 8.

  4. Import the SvelteHeatmap component

    master

    The SvelteHeatmap component is the primary entry point for the library. You can import it directly from the package to use it within your Svelte applications. The component also exposes a VERSION property containing the current library version string.

    import SvelteHeatmap from 'svelte-heatmap';

// Access the version if needed
console.log(SvelteHeatmap.VERSION);