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

Contact Me

This is my first npm package :)

Please raise issues in github or email me [email protected] if you have any questions :)

License

MIT ©