heatmapjs-vue
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

heatmapjs-vue

version download license

heatmapjs component for Vue.js.

CN 中文版

Built upon heatmap.js v2.0.5+ and depends on Vue.js v2.2.6+.

Features

  • IE9+
  • Support Typescript
  • Auto resize

Documentation

Install

NPM

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>

CDN

include vueheatmap.jsheatmapjs-vue.jsheatmapjs-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>

typescript

heatmapjs-vue-ts-example

Using the component

Props (all reactive)

  • 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

Methods

  • getValueAt
  • getData
  • getDataURL
  • repaint

For further details, see heatmap.js' API documentation

Events

  • change

    triggered when data changes due to a click or move and the first parameter emit is the latest dataset

Local development

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.

Donation

If you find it useful, you can buy us a cup of coffee.

donation

License

MIT

Copyright (c) 2019-present, Qin Nian

Package Sidebar

Install

npm i heatmapjs-vue

Weekly Downloads

110

Version

0.0.5

License

MIT

Unpacked Size

256 kB

Total Files

41

Last publish

Collaborators

  • nianqin