@brunoofarias/heatmap-viewer

Biblioteca TypeScript para renderizar heatmaps sobre elementos HTML usando Canvas 2D, com API imperativa para Vanilla JS/TS e wrapper React em entry point separado.

Instalação

npm install @brunoofarias/heatmap-viewer

Para uso com React:

npm install react react-dom

Uso com Vanilla JS/TS

import { createHeatmapViewer, type HeatmapData } from "@brunoofarias/heatmap-viewer";

const data: HeatmapData = {
  version: "1.0.0",
  width: 1280,
  height: 720,
  points: [
    { x: 120, y: 200, value: 0.6 },
    { x: 340, y: 280, value: 0.9 }
  ]
};

const viewer = createHeatmapViewer({
  target: "#heatmap-container",
  data,
  options: { radius: 24, opacity: 0.7 }
});

viewer.render();

Uso com React

import { HeatmapViewer } from "@brunoofarias/heatmap-viewer/react";
import type { HeatmapData } from "@brunoofarias/heatmap-viewer";

const data: HeatmapData = {
  version: "1.0.0",
  width: 1280,
  height: 720,
  points: [{ x: 200, y: 300, value: 0.8 }]
};

export function Dashboard() {
  return (
    <div style={{ width: 900, height: 420 }}>
      <HeatmapViewer data={data} options={{ radius: 28, blur: 16 }} />
    </div>
  );
}

API

HeatmapViewerOptions

• radius?: number (default 25)
• blur?: number (default 15)
• opacity?: number (default 0.6)
• maxIntensity?: number
• gradient?: { [stop: number]: string } (default { 0: "blue", 0.5: "lime", 1: "red" })
• scaleMode?: "stretch" | "preserve-aspect-ratio" (default "stretch")
• zIndex?: number (default 0)
• interactive?: boolean (default false)

HeatmapViewer

• render(): void
• updateData(data: HeatmapData): void
• updateOptions(options: Partial<HeatmapViewerOptions>): void
• clear(): void
• destroy(): void

Desenvolvimento

npm install
npm run typecheck
npm run test
npm run build

Exemplos:

• examples/vanilla-html
• examples/react-vite

Licença

MIT