react-easy-heatmap
Made with create-react-library
Install
npm install --save react-easy-heatmap
Usage
import React, { Component } from 'react'
import Heatmap from 'react-easy-heatmap'
import 'react-easy-heatmap/dist/index.css'
class Example extends Component {
render() {
return <Heatmap />
}
}
Main Features
- Simplified API
- Adaptable zooming of the map
- Map Zoom out & Zoom in
- Map dragging
- Color configured
- Data scaled by slider
- Heat Point tooltip
API
data
[xCoordinate: number, yCoordinate: number, value: number][]
mapFile
- optional. Default to a transparent png.
type TPoint = {
x: number;
y: number;
}
type TMapFile = {
image: string;
imgSize: TPoint
coordinate: {
x: TPoint;
y: TPoint;
}
}
heatmapConfig
type TheatmapConfig = {
opacity?: number;
radius?: number;
theme?: number;
}
onConfigChange
Function being called when slider config changed.
Usually used to save slider config.
type TonConfigChangeProp = TheatmapConfig
onPostionChange
Function being called when heatmap scale change or be dragged.
Usually used to sync operations from multi-heatmaps
type TOnPositionChangeProp = {
scale: number
bgP: {
x: TPoint;
y: TPoint;
}
}
localeMap
Used for i18n :)
type THeatmapLocale = {
opacity?: string;
radius?: string;
colorTheme?: string;
reset?: string;
zoomOut?: string;
zoomIn?: string;
setting?: string;
}
documentResizeEventKey
Event key bound in document, will cause heatmap resize when being triggered
type TDocumentResizeEventKey = string;
Ref - handleSyncAction
Used to sync operations from multi-heatmaps
type THandleSyncActionProp = {
scale: number
bgP: {
x: TPoint;
y: TPoint;
}
}
Todo
- Button. Sorry for the bad-looking buttons. I will update them as soon as possible.
- More examples
- Less size. Because of the heatmap.min.js and rc-slider, rc-tooltip, rc-checkbox, size looks a little large. will get rid of rc-components soon.
- radius auto-update when scale/containerSize changes
Contact Me
This is my first npm package :)
Please raise issues in github or email me iyoungliu@163.com if you have any questions :)
License
MIT ©