vue-chart-heatmap
v1.2.5
Published
A github style inspired heatmap capsuled as an easy to use vuejs component
Downloads
96
Readme
vue-heatmap
The github style inspired calendar-heatmap capsuled as an easy to use vue.js component
A d3.js heatmap representing time series data. Inspired by Github's contribution chart
Demo Link
How to use:
# 1. Install Vuejs heatmap
npm install --save vue-chart-heatmap
# 2. Import
import VueChartHeatmap from 'vue-chart-heatmap'
# 3. Use
<vue-chart-heatmap></vue-chart-heatmap>
Props
selector selector
Any string which should be the selector, use it for multiple heatmaps on one site.
'myFirstSelector'
entries entries
[
{
"counting": 2070,
"created_at": "2018-06-21"
},
{
"counting": 3493,
"created_at": "2018-06-22"
}
]
colorRange color-range
['#c9ecec', '#09b3af']
tooltipEnabled tooltip-enabled
true/false
tooltipUnit tooltip-unit
'Star'
locale locale
{
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
No: 'No',
on: 'on',
Less: 'Less',
More: 'More'
}
max max
Any number which should be the max color.
onClick on-click
A function that should be called if clicked, will receive an object as first parameter:
{
count: 123,
date: DateObject,
entry: {
counting: 123,
created_at: "2018-01-24"
// every property you pass in your entries.
}
}
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.