Socket
Socket
Sign inDemoInstall

svelte-heatmap

Package Overview
Dependencies
0
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

svelte-heatmap

A light weight and customizable version of GitHub's contribution graph


Version published
Maintainers
1
Weekly downloads
512
decreased by-6.06%

Weekly downloads

Readme

Source

svelte-heatmap

Build status Dependencies Dev dependencies Size NPM License

A light weight and customizable version of GitHub's contribution graph.

Heatmap examples

📦 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

Copyright (c) 2017-present, Scott Bedard

Keywords

FAQs

Last updated on 06 Jun 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc