@lunit/heatmap - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

package.json

 {
   "name": "@lunit/heatmap",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Heatmap Library",
@@ -10,3 +10,6 @@ "author": {
   "repository": "lunit-io/opt-tool-frontend",
-  "license": "UNLICENSED",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "index.js",
@@ -13,0 +16,0 @@ "dependencies": {

README.md

@@ -7,5 +7,182 @@ # Install
 
-# Use
+# Sample Codes
 
-- <https://lunit-io.github.io/opt-tool-frontend>
-- [heatmap.test.ts](https://github.com/lunit-io/opt-tool-frontend/blob/develop/src/_packages/%40lunit/heatmap/__tests__/heatmap.test.ts)
+<https://lunit-io.github.io/opt-tool-frontend>
+
+## Stories
+
+<!-- import **/*.stories.{ts,tsx} --title-tag h3 -->
+<h3>__stories__/HeatmapScaleSVGImage.stories.tsx</h3>
+```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('<HeatmapScaleSVGImage>', () => {
+    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/>;
+  });
+```
+<h3>__stories__/useHeatmapScaleImageURI.stories.tsx</h3>
+```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]);
+  });
+});
+```
+<!-- importend -->
+
+<!-- import __tests__/*.{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 -->

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

Explicitly Unlicensed Item

License

(Experimental) Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2334237

increased by0.29%

Number of high license alerts

0

decreased by-100%

Number of low license alerts

0

decreased by-100%

Number of medium license alerts

0

decreased by-100%

License quality

100

increased byInfinity%

Number of lines in readme file

187

increased by1600%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes