@hpcc-js/chart - npm Package Compare versions

Comparing version 2.49.0 to 2.50.0

package.json

 {
     "name": "@hpcc-js/chart",
-    "version": "2.49.0",
+    "version": "2.50.0",
     "description": "hpcc-js - Viz Chart",
@@ -79,3 +79,2 @@ "main": "dist/index.js",
         "rollup-plugin-sourcemaps": "0.6.2",
-        "simpleheat": "0.4.0",
         "terser": "4.0.0",
@@ -97,3 +96,3 @@ "tslib": "2.0.1",
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "7a41434dc3f585a9767f1612fb27b537e7d6e2e9"
+    "gitHead": "c7bacd4b618399410f7effdc5e3705d2701e2283"
 }

src/__package__.ts

 export const PKG_NAME = "@hpcc-js/chart";
-export const PKG_VERSION = "2.49.0";
-export const BUILD_VERSION = "2.37.0";
+export const PKG_VERSION = "2.50.0";
+export const BUILD_VERSION = "2.38.0";

src/Heat.ts

 import { max, Palette } from "@hpcc-js/common";
 import { XYAxis } from "./XYAxis";
-import * as _simpleheat from "simpleheat";
 
-const simpleheat = (window as any).simpleheat || (_simpleheat && _simpleheat.default) || _simpleheat;
-
 export class Heat extends XYAxis {
@@ -21,2 +18,8 @@
 
+    radius(r: number): this {
+        this.radiusX(r);
+        this.radiusY(r);
+        return this;
+    }
+
     layerEnter(host: XYAxis, element, duration: number = 250) {
@@ -75,5 +78,9 @@ super.layerEnter(host, element, duration);
         this._heat.resize();
+
+        const radiusX = this.radiusAsPercent() ? this.radiusX() * width / 100 : this.radiusX();
+        const radiusY = this.radiusAsPercent() ? this.radiusY() * height / 100 : this.radiusY();
+
         this._heat
             .clear()
-            .radius(this.radius(), this.blur())
+            .radius(radiusX, radiusY, this.blur())
             .max(maxWeight)
@@ -97,6 +104,11 @@ .data(data)
 
-    radius(): number;
-    radius(_: number): this;
+    radiusX(): number;
+    radiusX(_: number): this;
+    radiusY(): number;
+    radiusY(_: number): this;
+    radiusAsPercent(): boolean;
+    radiusAsPercent(_: boolean): this;
     blur(): number;
     blur(_: number): this;
+
     minOpacity(): number;
@@ -110,4 +122,156 @@ minOpacity(_: number): this;
 
-Heat.prototype.publish("radius", 25, "number", "Point radius (25 by default)");
+Heat.prototype.publish("radiusX", 25, "number", "Point X radius (25 by default)");
+Heat.prototype.publish("radiusY", 25, "number", "Point Y radius (25 by default)");
+Heat.prototype.publish("radiusAsPercent", false, "boolean", "Calculate RadiusX + RadiusY as % of size");
 Heat.prototype.publish("blur", 15, "number", "Point blur radius (15 by default)");
+
 Heat.prototype.publish("minOpacity", 0.05, "number", "Minimum point opacity (0.05 by default)");
+
+//  The following code is a modified version of 
+//   - https://github.com/mourner/simpleheat
+//   - Licensed under BSD-2-Clause - https://github.com/mourner/simpleheat/blob/gh-pages/LICENSE
+//  Changes:
+//    *  Fixed TS syntax issues
+//    *  Added support for eliptical shapes instead of circles
+
+function simpleheat(canvas): void {
+    if (!(this instanceof simpleheat)) return new simpleheat(canvas);
+
+    this._canvas = canvas = typeof canvas === "string" ? document.getElementById(canvas) : canvas;
+
+    this._ctx = canvas.getContext("2d");
+    this._width = canvas.width;
+    this._height = canvas.height;
+
+    this._max = 1;
+    this._data = [];
+}
+
+simpleheat.prototype = {
+
+    defaultRadius: 25,
+
+    defaultGradient: {
+        0.4: "blue",
+        0.6: "cyan",
+        0.7: "lime",
+        0.8: "yellow",
+        1.0: "red"
+    },
+
+    data: function (data) {
+        this._data = data;
+        return this;
+    },
+
+    max: function (max) {
+        this._max = max;
+        return this;
+    },
+
+    add: function (point) {
+        this._data.push(point);
+        return this;
+    },
+
+    clear: function () {
+        this._data = [];
+        return this;
+    },
+
+    radius: function (rX, rY, blur) {
+        blur = blur === undefined ? 15 : blur;
+
+        // create a grayscale blurred ellipse image that we'll use for drawing points
+        const ellipse = this._ellipse = this._createCanvas();
+        const ctx = ellipse.getContext("2d");
+        const rX2 = this._r = rX + blur;
+        const rY2 = this._r = rY + blur;
+
+        ellipse.width = rX2 * 2;
+        ellipse.height = rY2 * 2;
+
+        ctx.shadowOffsetX = ctx.shadowOffsetY = rX2 * 2;
+        ctx.shadowOffsetY = ctx.shadowOffsetY = rY2 * 2;
+        ctx.shadowBlur = blur;
+        ctx.shadowColor = "black";
+
+        ctx.beginPath();
+        ctx.ellipse(-rX2, -rY2, rX, rY, 0, 0, Math.PI * 2, true);
+        ctx.closePath();
+        ctx.fill();
+
+        return this;
+    },
+
+    resize: function () {
+        this._width = this._canvas.width;
+        this._height = this._canvas.height;
+    },
+
+    gradient: function (grad) {
+        // create a 256x1 gradient that we'll use to turn a grayscale heatmap into a colored one
+        const canvas = this._createCanvas(),
+            ctx = canvas.getContext("2d"),
+            gradient = ctx.createLinearGradient(0, 0, 0, 256);
+
+        canvas.width = 1;
+        canvas.height = 256;
+
+        for (const i in grad) {
+            gradient.addColorStop(+i, grad[i]);
+        }
+
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 1, 256);
+
+        this._grad = ctx.getImageData(0, 0, 1, 256).data;
+
+        return this;
+    },
+
+    draw: function (minOpacity) {
+        if (!this._ellipse) this.radius(this.defaultRadius, this.defaultRadius);
+        if (!this._grad) this.gradient(this.defaultGradient);
+
+        const ctx = this._ctx;
+
+        ctx.clearRect(0, 0, this._width, this._height);
+
+        // draw a grayscale heatmap by putting a blurred ellipse at each data point
+        for (let i = 0, len = this._data.length, p; i < len; i++) {
+            p = this._data[i];
+            ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity);
+            ctx.drawImage(this._ellipse, p[0] - this._r, p[1] - this._r);
+        }
+
+        // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient
+        const colored = ctx.getImageData(0, 0, this._width, this._height);
+        this._colorize(colored.data, this._grad);
+        ctx.putImageData(colored, 0, 0);
+
+        return this;
+    },
+
+    _colorize: function (pixels, gradient) {
+        for (let i = 0, len = pixels.length, j; i < len; i += 4) {
+            j = pixels[i + 3] * 4; // get gradient color from opacity value
+
+            if (j) {
+                pixels[i] = gradient[j];
+                pixels[i + 1] = gradient[j + 1];
+                pixels[i + 2] = gradient[j + 2];
+            }
+        }
+    },
+
+    _createCanvas: function () {
+        if (typeof document !== "undefined") {
+            return document.createElement("canvas");
+        } else {
+            // create a new canvas instance in node.js
+            // the canvas class needs to have a default constructor without any parameter
+            return new this._canvas.constructor();
+        }
+    }
+};

types-3.4/__package__.d.ts

 export declare const PKG_NAME = "@hpcc-js/chart";
-export declare const PKG_VERSION = "2.49.0";
-export declare const BUILD_VERSION = "2.37.0";
+export declare const PKG_VERSION = "2.50.0";
+export declare const BUILD_VERSION = "2.38.0";
 //# sourceMappingURL=__package__.d.ts.map

types-3.4/Heat.d.ts

@@ -7,2 +7,3 @@ import { XYAxis } from "./XYAxis";
     constructor();
+    radius(r: number): this;
     layerEnter(host: XYAxis, element: any, duration?: number): void;
@@ -18,4 +19,8 @@ layerUpdate(host: XYAxis, element: any, duration?: number): void;
     reversePalette(_: boolean): this;
-    radius(): number;
-    radius(_: number): this;
+    radiusX(): number;
+    radiusX(_: number): this;
+    radiusY(): number;
+    radiusY(_: number): this;
+    radiusAsPercent(): boolean;
+    radiusAsPercent(_: boolean): this;
     blur(): number;
@@ -22,0 +27,0 @@ blur(_: number): this;

types/__package__.d.ts

 export declare const PKG_NAME = "@hpcc-js/chart";
-export declare const PKG_VERSION = "2.49.0";
-export declare const BUILD_VERSION = "2.37.0";
+export declare const PKG_VERSION = "2.50.0";
+export declare const BUILD_VERSION = "2.38.0";
 //# sourceMappingURL=__package__.d.ts.map

types/Heat.d.ts

@@ -7,2 +7,3 @@ import { XYAxis } from "./XYAxis";
     constructor();
+    radius(r: number): this;
     layerEnter(host: XYAxis, element: any, duration?: number): void;
@@ -18,4 +19,8 @@ layerUpdate(host: XYAxis, element: any, duration?: number): void;
     reversePalette(_: boolean): this;
-    radius(): number;
-    radius(_: number): this;
+    radiusX(): number;
+    radiusX(_: number): this;
+    radiusY(): number;
+    radiusY(_: number): this;
+    radiusAsPercent(): boolean;
+    radiusAsPercent(_: boolean): this;
     blur(): number;
@@ -22,0 +27,0 @@ blur(_: number): this;

No alert changes

Improved metrics

Total package byte prevSize

4134032

increased by0.31%

Dev dependency count

38

decreased by-2.56%

Lines of code

30352

increased by0.45%

No dependency changes