React-easy-heatmap NPM

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

required

[xCoordinate: number, yCoordinate: number, value: number][]

mapFile

optional. Default to a transparent png.

type TPoint = {
  x: number; // x coordinate or width
  y: number; // y coordinate or height
}
type TMapFile = {
  image: string; // img url
  imgSize: TPoint
  coordinate: {
    x: TPoint; // left bottom point's coordinate
    y: TPoint; // right top point's coordinate
  }
}

heatmapConfig

optional

type TheatmapConfig = {
  opacity?: number; // default 100
  radius?: number; // heatmap data point radius, default to 20
  theme?: number; // default to 0
}

onConfigChange

optional

Function being called when slider config changed.

Usually used to save slider config.

type TonConfigChangeProp = TheatmapConfig

onPostionChange

optional

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

optional

Used for i18n :)

type THeatmapLocale = {
  opacity?: string;
  radius?: string;
  colorTheme?: string;
  reset?: string;
  zoomOut?: string;
  zoomIn?: string;
  setting?: string;
}

documentResizeEventKey

optional

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