@lunit/heatmap

Install

npm install @lunit/heatmap

Sample Codes

https://lunit-io.github.io/opt-tool-frontend

Stories

__stories__/HeatmapScaleSVGImage.stories.tsx

```tsx import { storiesOf } from '@storybook/react'; import React from 'react'; import { HeatmapScaleSVGImage } from '../components/HeatmapScaleSVGImage'; import { withKnobs, number } from '@storybook/addon-knobs';

storiesOf('heatmap', module) .addDecorator(withKnobs) .add('', () => { const width: number = number('Width', 300, {range: true, step: 10, min: 100, max: 600}); const height: number = number('Height', 100, {range: true, step: 10, min: 60, max: 300}); const threshold: number = number('Threshold', 0, {range: true, step: 0.1, min: 0, max: 1});

return (
  <svg width={width} height={height}>
    <rect width={width} height={height} fill="#000000"/>
    <HeatmapScaleSVGImage width={width} height={height} threshold={threshold}/>
  </svg>
);

});

<h3>__stories__/posMapToImageData.stories.tsx</h3>
```tsx
import { posMapToImageData } from '@lunit/heatmap';
import { storiesOf } from '@storybook/react';
import React, { MutableRefObject, useEffect, useMemo, useRef } from 'react';
import data from './posMap.sample.json';

const {engine_result: {engine_result: {pos_map: posMap}}} = data;

storiesOf('heatmap', module)
  .add('posMapToImageData()', () => {
    function Component() {
      const canvasRef: MutableRefObject<HTMLCanvasElement | null> = useRef<HTMLCanvasElement | null>(null);
      const imageData = useMemo<ImageData>(() => {
        return posMapToImageData(posMap, 0.1);
      }, []);
      
      useEffect(() => {
        if (!canvasRef.current) throw new Error('<canvas> is null');
        const ctx: CanvasRenderingContext2D | null = canvasRef.current.getContext('2d');
        if (!ctx) throw new Error('ctx is null');
        
        ctx.putImageData(imageData, 0, 0);
      }, [imageData]);
      
      return <canvas ref={canvasRef}
                     width={imageData.width}
                     height={imageData.height}
                     style={{
                       width: imageData.width,
                       height: imageData.height,
                     }}/>;
    }
    
    return <Component/>;
  });

__stories__/useHeatmapScaleImageURI.stories.tsx

```tsx import { number, withKnobs } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { useHeatmapScaleImageURI } from '../hooks/useHeatmapScaleImageURI';

function Image({width, height, threshold}: {width: number, height: number, threshold: number}) { const dataUri: string | null = useHeatmapScaleImageURI({width, height, threshold}); return dataUri ? ( <img src={dataUri} style={{width, height, backgroundColor: '#000000'}} alt="test"/> ) : null; }

storiesOf('heatmap', module) .addDecorator(withKnobs) .add('useHeatmapScaleImageURI()', () => { const width: number = number('Width', 300, {range: true, step: 10, min: 100, max: 600}); const height: number = number('Height', 100, {range: true, step: 10, min: 60, max: 300}); const threshold: number = number('Threshold', 0, {range: true, step: 0.1, min: 0, max: 1});

return (
  <Image width={width} height={height} threshold={threshold}/>
);

});

<!-- importend -->

## Tests

<!-- import **/*.test.{ts,tsx} --title-tag h3 -->
<h3>__tests__/heatmap.test.ts</h3>
```ts
import { getAlpha } from '../draw/getAlpha';
import { getRGBAArray } from '../draw/getRGBAArray';
import { getRGBArray } from '../draw/getRGBArray';

describe('@lunit/heatmap', () => {
  test('getRGBArray', () => {
    expect(getRGBArray(0)).toEqual([0, 0, 255]);
    expect(getRGBArray(0.25)).toEqual([0, 255, 255]);
    expect(getRGBArray(0.5)).toEqual([0, 255, 0]);
    expect(getRGBArray(0.75)).toEqual([255, 255, 0]);
    expect(getRGBArray(1)).toEqual([255, 0, 0]);
  });
  
  test('getAlpha', () => {
    expect(getAlpha({threshold: 0, stop: 0})).toEqual(0);
    expect(getAlpha({threshold: 0, stop: 0.25})).toEqual(0.1875);
    expect(getAlpha({threshold: 0, stop: 0.5})).toEqual(0.375);
    expect(getAlpha({threshold: 0, stop: 0.75})).toEqual(0.5625);
    expect(getAlpha({threshold: 0, stop: 1})).toEqual(0.75);
    
    // threshold : 특정 stop 영역을 drop (alpha 0) 시키기 위한 값
    // stop < threshold -> alpha는 0이 된다
    expect(getAlpha({threshold: 0.5, stop: 0.49})).toEqual(0);
  });
  
  test('getRGBAArray', () => {
    expect(getRGBAArray({threshold: 0, stop: 0})).toEqual([0, 0, 0, 0]);
    expect(getRGBAArray({threshold: 0, stop: 0.25})).toEqual([0, 255, 255, 0.1875]);
    expect(getRGBAArray({threshold: 0, stop: 0.5})).toEqual([0, 255, 0, 0.375]);
    expect(getRGBAArray({threshold: 0, stop: 0.75})).toEqual([255, 255, 0, 0.5625]);
    expect(getRGBAArray({threshold: 0, stop: 1})).toEqual([255, 0, 0, 0.75]);
    
    // stop < threshold -> alpha는 0이 된다
    expect(getRGBAArray({threshold: 0.5, stop: 0.49})).toEqual([0, 0, 0, 0]);
  });
});

__tests__/heatmap.test.ts

```ts import { getAlpha } from '../draw/getAlpha'; import { getRGBAArray } from '../draw/getRGBAArray'; import { getRGBArray } from '../draw/getRGBArray';

describe('@lunit/heatmap', () => { test('getRGBArray', () => { expect(getRGBArray(0)).toEqual([0, 0, 255]); expect(getRGBArray(0.25)).toEqual([0, 255, 255]); expect(getRGBArray(0.5)).toEqual([0, 255, 0]); expect(getRGBArray(0.75)).toEqual([255, 255, 0]); expect(getRGBArray(1)).toEqual([255, 0, 0]); });

test('getAlpha', () => { expect(getAlpha({threshold: 0, stop: 0})).toEqual(0); expect(getAlpha({threshold: 0, stop: 0.25})).toEqual(0.1875); expect(getAlpha({threshold: 0, stop: 0.5})).toEqual(0.375); expect(getAlpha({threshold: 0, stop: 0.75})).toEqual(0.5625); expect(getAlpha({threshold: 0, stop: 1})).toEqual(0.75);

// threshold : 특정 stop 영역을 drop (alpha 0) 시키기 위한 값
// stop < threshold -> alpha는 0이 된다
expect(getAlpha({threshold: 0.5, stop: 0.49})).toEqual(0);

});

test('getRGBAArray', () => { expect(getRGBAArray({threshold: 0, stop: 0})).toEqual([0, 0, 0, 0]); expect(getRGBAArray({threshold: 0, stop: 0.25})).toEqual([0, 255, 255, 0.1875]); expect(getRGBAArray({threshold: 0, stop: 0.5})).toEqual([0, 255, 0, 0.375]); expect(getRGBAArray({threshold: 0, stop: 0.75})).toEqual([255, 255, 0, 0.5625]); expect(getRGBAArray({threshold: 0, stop: 1})).toEqual([255, 0, 0, 0.75]);

// stop < threshold -> alpha는 0이 된다
expect(getRGBAArray({threshold: 0.5, stop: 0.49})).toEqual([0, 0, 0, 0]);

}); });

<!-- importend -->