@lunit/heatmap - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.d.ts

@@ -1,3 +0,4 @@
-export * from './components/HeatmapLinearGradient';
+export * from './components/HeatmapScaleSVGImage';
+export * from './components/useHeatmapScaleImageURI';
 export * from './getRGBArray';
 export * from './getAlpha';

index.js

@@ -104,14 +104,15 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/getAlpha.ts
-function getAlpha(_ref) {
+// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/getRGBAArray.ts
+function getRGBAArray(_ref) {
   var stop = _ref.stop,
       threshold = _ref.threshold;
-  return (stop - threshold) * 0.75 / (1 - threshold);
-}
-// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/getRGBArray.ts
-function getRGBArray(value) {
+
+  if (stop < threshold) {
+    return [0, 0, 0, 0];
+  }
+
   var r = 1.0;
   var g = 1.0;
   var b = 1.0;
-  var v = Math.max(Math.min(value, 1), 0);
+  var v = Math.max(Math.min(stop, 1), 0);
 
@@ -130,16 +131,40 @@ if (v < 0.25) {
     b = 0;
-  } //tslint:disable-next-line:no-bitwise
+  } //tslint:disable:no-bitwise
 
 
-  return [r * 255 << 0, g * 255 << 0, b * 255 << 0];
+  return [r * 255 << 0, g * 255 << 0, b * 255 << 0, (stop - threshold) * 0.75 / (1 - threshold)];
 }
-// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/components/HeatmapLinearGradient.tsx
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/components/useHeatmapScaleImageURI.ts
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
 
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+function useHeatmapScaleImageURI(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      threshold = _ref.threshold;
+  return Object(external_react_["useMemo"])(function () {
+    var canvas = document.createElement('canvas');
+    if (!canvas) return null;
+    var ratio = window.devicePixelRatio;
+    var w = width * ratio;
+    var h = height * ratio;
+    canvas.setAttribute('width', w.toString());
+    canvas.setAttribute('height', h.toString());
+    var ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+    var i = w + 1;
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+    while (--i >= 0) {
+      ctx.beginPath();
+      ctx.fillStyle = "rgba(".concat(getRGBAArray({
+        stop: i / w,
+        threshold: threshold
+      }), ")");
+      ctx.fillRect(i, 0, 1, h);
+      ctx.closePath();
+    }
 
+    return canvas.toDataURL();
+  }, [threshold, width, height]);
+}
+// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/components/HeatmapScaleSVGImage.tsx
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -151,29 +176,53 @@
 
-
-function HeatmapLinearGradient(_ref) {
+function HeatmapScaleSVGImage(_ref) {
   var _ref$threshold = _ref.threshold,
       threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
-      linearGradientProps = _objectWithoutProperties(_ref, ["threshold"]);
+      width = _ref.width,
+      height = _ref.height,
+      imageProps = _objectWithoutProperties(_ref, ["threshold", "width", "height"]);
 
-  return external_react_default.a.createElement("linearGradient", Object.assign({}, linearGradientProps, {
-    x1: "0%",
-    y1: "0%",
-    x2: "100%",
-    y2: "0%"
-  }), [0, 0.25, 0.5, 0.75, 1].map(function (stop) {
-    var rgba = [].concat(_toConsumableArray(getRGBArray(stop)), [getAlpha({
-      stop: stop,
-      threshold: threshold
-    })]);
-    return external_react_default.a.createElement("stop", {
-      key: 'stop-' + stop,
-      offset: "".concat(stop * 100, "%"),
-      style: {
-        stopColor: "rgba(".concat(rgba.join(','), ")")
-      }
-    });
-  }));
+  var dataUri = useHeatmapScaleImageURI({
+    width: width,
+    height: height,
+    threshold: threshold
+  });
+  return dataUri ? external_react_default.a.createElement("image", Object.assign({}, imageProps, {
+    xlinkHref: dataUri,
+    width: width,
+    height: height
+  })) : null;
 }
+// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/getRGBArray.ts
+function getRGBArray(value) {
+  var r = 1.0;
+  var g = 1.0;
+  var b = 1.0;
+  var v = Math.max(Math.min(value, 1), 0);
+
+  if (v < 0.25) {
+    r = 0;
+    g = 4 * v;
+  } else if (v < 0.5) {
+    r = 0;
+    b = 1 + 4 * (0.25 - v);
+  } else if (v < 0.75) {
+    r = 4 * (v - 0.5);
+    b = 0;
+  } else {
+    g = 1 + 4 * (0.75 - v);
+    b = 0;
+  } //tslint:disable-next-line:no-bitwise
+
+
+  return [r * 255 << 0, g * 255 << 0, b * 255 << 0];
+}
+// CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/getAlpha.ts
+function getAlpha(_ref) {
+  var stop = _ref.stop,
+      threshold = _ref.threshold;
+  return stop < threshold ? 0 : (stop - threshold) * 0.75 / (1 - threshold);
+}
 // CONCATENATED MODULE: ./src/_packages/@lunit/heatmap/index.ts
-/* concated harmony reexport HeatmapLinearGradient */__webpack_require__.d(__webpack_exports__, "HeatmapLinearGradient", function() { return HeatmapLinearGradient; });
+/* concated harmony reexport HeatmapScaleSVGImage */__webpack_require__.d(__webpack_exports__, "HeatmapScaleSVGImage", function() { return HeatmapScaleSVGImage; });
+/* concated harmony reexport useHeatmapScaleImageURI */__webpack_require__.d(__webpack_exports__, "useHeatmapScaleImageURI", function() { return useHeatmapScaleImageURI; });
 /* concated harmony reexport getRGBArray */__webpack_require__.d(__webpack_exports__, "getRGBArray", function() { return getRGBArray; });
@@ -185,3 +234,4 @@ /* concated harmony reexport getAlpha */__webpack_require__.d(__webpack_exports__, "getAlpha", function() { return getAlpha; });
 
+
 /***/ })
 /******/ ])));

package.json

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

README.md

@@ -10,6 +10,6 @@ # Install
 ```ts
-import { getAlpha, getRGBArray } from '@lunit/heatmap';
+import { getRGBArray, getAlpha, getRGBAArray } from '@lunit/heatmap';
 
-describe('getRGBArray', () => {
-  test('basic', () => {
+describe('@lunit/heatmap', () => {
+  test('getRGBArray', () => {
     expect(getRGBArray(0)).toEqual([0, 0, 255]);
@@ -22,3 +22,3 @@ expect(getRGBArray(0.25)).toEqual([0, 255, 255]);
   
-  test('alpha', () => {
+  test('getAlpha', () => {
     expect(getAlpha({threshold: 0, stop: 0})).toEqual(0);
@@ -29,3 +29,18 @@ expect(getAlpha({threshold: 0, stop: 0.25})).toEqual(0.1875);
     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, 255, 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]);
+  });
 });
@@ -37,14 +52,11 @@ ```
 import React from 'react';
-import { HeatmapLinearGradient } from '@lunit/heatmap';
+import { HeatmapScaleSVGImage } from '@lunit/heatmap';
 
-storiesOf('<SVGLinearGradient>', module)
+storiesOf('<HeatmapScaleSVGImage>', module)
   .add('basic', () => (
-    <svg width={300} height={100} style={{backgroundColor: '#000000'}}>
-      <defs>
-        <HeatmapLinearGradient id="test-linear-gradient"/>
-      </defs>
-      
-      <rect width="100%" height="100%" fill="url(#test-linear-gradient)"/>
+    <svg width={300} height={100}>
+      <rect width={300} height={100} fill="#000000"/>
+      <HeatmapScaleSVGImage width={300} height={100} threshold={0.1}/>
     </svg>
   ));
 ```

No alert changes

Improved metrics

Total package byte prevSize

11872

increased by22.68%

Number of package files

9

increased by28.57%

Lines of code

235

increased by33.52%

Number of lines in readme file

58

increased by26.09%

No dependency changes