@lunit/heatmap - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

package.json

 {
   "name": "@lunit/heatmap",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Heatmap Library",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -0,1 +1,15 @@
+# Heatmap
+
+Heatmap 처리에 관련된 라이브러리
+
+- `engineResult.posMap`을 화면에 그리는데 관련된 것들
+    - `posMapToImageData(posMap: number[][], thoreshold: number<0-1>): ImageData`  
+- Heatmap Legend를 그리는데 관련된 것들
+    - `<HeatmapScaleSVGImage width={number} height={number} threshold?={number<0-1>} />`
+    - `useHeatmapScaleImageURI({width: number, height: number, threshold: number<0-1>}): string | null`
+- Heatmap RGBA 계산
+    - `getAlpha({stop: number<0-1>, threshold: number<0-1>}): number`
+    - `getRGBArray({stop: number<0-1>, threshold: number<0-1>}): [number, number, number]`
+    - `getRGBAArray({stop: number<0-1>, threshold: number<0-1>}): [number, number, number, number]`
+
 # Install
@@ -9,3 +23,3 @@
 
-<https://lunit-io.github.io/opt-tool-frontend>
+[Storybook](https://lunit-io.github.io/opt-tool-frontend)
 
@@ -17,7 +31,11 @@ ## Stories
 ```tsx
+import { number, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { HeatmapScaleSVGImage } from '../components/HeatmapScaleSVGImage';
-import { withKnobs, number } from '@storybook/addon-knobs';
 
+/**
+ * Heatmap이 그려진 SVG <image>를 만든다
+ * <svg>를 사용해서 별도의 디자인을 구현하려고 할때 사용할 수 있다
+ */
 storiesOf('heatmap', module)
@@ -47,29 +65,34 @@ .addDecorator(withKnobs)
 
+/**
+ * Heatmap이 그려진 ImageData를 만든다
+ * <canvas>를 사용해서 별도의 디자인을 구현하려고 할 때 사용할 수 있다
+ */
+function Sample() {
+  const canvasRef: MutableRefObject<HTMLCanvasElement | null> = useRef<HTMLCanvasElement | null>(null);
+  
+  // AI에서 나온 posMap 결과를 ImageData로 변환한다
+  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');
+    
+    // ImageData를 Canvas Context에 그린다
+    ctx.putImageData(imageData, 0, 0);
+  }, [imageData]);
+  
+  return <canvas ref={canvasRef}
+                 width={imageData.width}
+                 height={imageData.height}
+                 style={{
+                   width: imageData.width,
+                   height: imageData.height,
+                 }}/>;
+}
+
 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/>;
-  });
+  .add('posMapToImageData()', () => <Sample/>);
 ```
@@ -83,2 +106,6 @@ <h3>__stories__/useHeatmapScaleImageURI.stories.tsx</h3>
 
+/**
+ * Heatmap이 그려진 Data URI를 만든다
+ * <img>를 비롯한 여러 Element를 사용해서 별도의 디자인을 구현하려 할 때 사용할 수 있다
+ */
 function Image({width, height, threshold}: {width: number, height: number, threshold: number}) {
@@ -109,44 +136,2 @@ const dataUri: string | null = useHeatmapScaleImageURI({width, height, threshold});
 
-<!-- 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]);
-  });
-});
-```
-<!-- importend -->
-
 <!-- import __tests__/*.{ts,tsx} --title-tag h3 -->
@@ -153,0 +138,0 @@ <h3>__tests__/heatmap.test.ts</h3>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

2332516

decreased by-0.07%

Lines of code

74704

decreased by-0.07%

Number of lines in readme file

172

decreased by-8.02%

No dependency changes