vue-calendar-heatmap
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph. With vertical mode, tooltip powered by v-tooltip.
Table of contents
Installation
npm install --save vue-calendar-heatmap
Default import
Global Install:
Vue
Use specific components:
Vue
or in a parent components .vue
file
⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.
Distribution import
Global Install:
Vue
Use specific components:
Vue
⚠️ You may have to setup your bundler to embed the css file in your page.
Browser
The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
Vue
Use specific components:
Vue
Usage
Availables props
values
- required
values - Array of objects with date
and count
keys. date
values can be a date parseable string, a millisecond timestamp, or a Date object. count
value should be a number.
end-date
- required
endDate - Can be a date parseable string, a millisecond timestamp, or a Date object. The calendar will start automatically one year before this date.
color-range
colorRange - A Array of 5 strings which represents the colors of the progression. The color at colorRange[0]
will always represent the values for a count: 0
. The others are automatically distributed over the maximum value of count, unless you specify max
props. Default value is equal to the example.
max
max - Any number which should be the max color.
tooltip
tooltip - Boolean for enabble/disable tooltip on square hover. true
by default.
tooltip-unit
tooltipUnit - String representing heatmap's unit of measure. His value is "contributions"
by default.
vertical
vertical - Boolean to switch to vertical mode. false
by default.