Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
heatmapjs-vue
Advanced tools
heatmapjs component for Vue.js.
Built upon heatmap.js v2.0.5+ and depends on Vue.js v2.2.6+.
Install the package.
$ npm install heatmapjs-vue
Register the component
import Vue from 'vue'
import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)
You may now use the component in your markup
<style>
.heatmapjs-container {
width: 1000px;
height: 500px;
}
</style>
<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>
include vue
、heatmap.js
、 heatmapjs-vue.js
、heatmapjs-vue.css
- I recommend using unpkg.
<link rel="stylesheet" href="https://unpkg.com/heatmapjs-vue@0.0.5/dist/heatmapjs-vue.css"/>
<style>
.heatmapjs-container {
width: 1000px;
height: 500px;
}
</style>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/heatmap.js@2.0.5/build/heatmap.min.js"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/heatmapjs-vue@latest"></script>
<!-- or point to a specific release -->
<script src="https://unpkg.com/heatmapjs-vue@0.0.5"></script>
You may now use the component in your markup
<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>
options
(default: {}
)
For further details, see heatmap.js' API documentation
min
(default: 0
)
the lower bound of your dataset
max
(default: 100
)
the upper bound of your dataset
data
(default: []
)
dataset
var dataPoint = {
x: 5, // x coordinate of the datapoint, a number
y: 5, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
var data = [
dataPoint, dataPoint, dataPoint, dataPoint
]
clickDrawable
(default: false
)
add a datapoint when click
moveDrawable
(default: false
)
add a datapoint when mousemove or touchmove
drawValue
(default: 1
)
the value of datapoint when click or move
getValueAt
getData
getDataURL
repaint
For further details, see heatmap.js' API documentation
change
triggered when data changes due to a click or move and the first parameter emit is the latest dataset
development
$ npm i
$ npm run docs-dev
publish
$ npm install -g babel-cli
$ npm i rollup -g
$ chmod a+x scripts/build
$ npm run release
$ git push --follow-tags origin dev && npm publish
If you use the window system, you can't execute directly npm run release
, you need to install git bash software, and then use git bash to execute the command ./scripts/build
and npm run release:only
.
docs-publish
$ npm install -g gh-pages
$ chmod a+x scripts/docs-publish
$ npm run docs-publish
If you use the window system, you can't execute directly npm run docs-publish
, you need to install git bash software, and then use git bash to execute the command ./scripts/docs-publish
.
If you find it useful, you can buy us a cup of coffee.
Copyright (c) 2019-present, Qin Nian
0.0.5 (2019-03-13)
<a name="0.0.4"></a>
FAQs
heatmapjs component from vue
The npm package heatmapjs-vue receives a total of 78 weekly downloads. As such, heatmapjs-vue popularity was classified as not popular.
We found that heatmapjs-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.