react-leaflet-heatmap-layer - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

@@ -0,1 +1,4 @@
+# 1.0.2 Release
+- Fix bug where radius, blur, and max were not being used when passed in as props.
+
 # 1.0.1 Release
@@ -2,0 +5,0 @@ - Fix bug in componentWillUnmount->safeRemoveLayer where getPanes doesn't return anything so .contains is called on undefined.

example/index.js

@@ -12,9 +12,18 @@ import React from 'react';
     layerHidden: false,
-    addressPoints
+    addressPoints,
+    radius: 4,
+    blur: 8,
+    max: 0.5,
+    limitAddressPoints: true,
   };
 
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ addressPoints: addressPoints.slice(500, 1000) });
-    }, 5000);
+  /**
+   * Toggle limiting the address points to test behavior with refocusing/zooming when data points change
+   */
+  toggleLimitedAddressPoints() {
+    if (this.state.limitAddressPoints) {
+      this.setState({ addressPoints: addressPoints.slice(500, 1000), limitAddressPoints: false });
+    } else {
+      this.setState({ addressPoints, limitAddressPoints: true });
+    }
   }
@@ -52,2 +61,5 @@
                 intensityExtractor={m => parseFloat(m[2])}
+                radius={Number(this.state.radius)}
+                blur={Number(this.state.blur)}
+                max={Number.parseFloat(this.state.max)}
               />
@@ -70,2 +82,41 @@ }
         />
+        <input
+          type="button"
+          value="Toggle Limited Data"
+          onClick={this.toggleLimitedAddressPoints.bind(this)}
+        />
+
+        <div>
+          Radius
+          <input
+            type="range"
+            min={1}
+            max={40}
+            value={this.state.radius}
+            onChange={(e) => this.setState({ radius: e.currentTarget.value })}
+          /> {this.state.radius}
+        </div>
+
+        <div>
+          Blur
+          <input
+            type="range"
+            min={1}
+            max={20}
+            value={this.state.blur}
+            onChange={(e) => this.setState({ blur: e.currentTarget.value })}
+          /> {this.state.blur}
+        </div>
+
+        <div>
+          Max
+          <input
+            type="range"
+            min={0.1}
+            max={3}
+            step={0.1}
+            value={this.state.max}
+            onChange={(e) => this.setState({ max: e.currentTarget.value })}
+          /> {this.state.max}
+        </div>
       </div>
@@ -72,0 +123,0 @@ );

lib/HeatmapLayer.js

@@ -129,3 +129,2 @@ 'use strict';
     }
-
     this.attachEvents();
@@ -167,16 +166,60 @@ this.updateHeatmapProps(this.getHeatmapProps(this.props));
   HeatmapLayer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    this.updateHeatmapProps(this.getHeatmapProps(nextProps));
+    var currentProps = this.props;
+    var nextHeatmapProps = this.getHeatmapProps(nextProps);
+
+    this.updateHeatmapGradient(nextHeatmapProps.gradient);
+
+    var hasRadiusUpdated = nextHeatmapProps.radius !== currentProps.radius;
+    var hasBlurUpdated = nextHeatmapProps.blur !== currentProps.blur;
+
+    if (hasRadiusUpdated || hasBlurUpdated) {
+      this.updateHeatmapRadius(nextHeatmapProps.radius, nextHeatmapProps.blur);
+    }
+
+    if (nextHeatmapProps.max !== currentProps.max) {
+      this.updateHeatmapMax(nextHeatmapProps.max);
+    }
   };
 
-  HeatmapLayer.prototype.updateHeatmapProps = function updateHeatmapProps(nextProps) {
-    if (nextProps.radius && (!this.props || nextProps.radius !== this.props.radius)) {
-      this._heatmap.radius(nextProps.radius);
+  /**
+   * Update various heatmap properties like radius, gradient, and max
+   */
+
+
+  HeatmapLayer.prototype.updateHeatmapProps = function updateHeatmapProps(props) {
+    this.updateHeatmapRadius(props.radius, props.blur);
+    this.updateHeatmapGradient(props.gradient);
+    this.updateHeatmapMax(props.max);
+  };
+
+  /**
+   * Update the heatmap's radius and blur (blur is optional)
+   */
+
+
+  HeatmapLayer.prototype.updateHeatmapRadius = function updateHeatmapRadius(radius, blur) {
+    if (radius) {
+      this._heatmap.radius(radius, blur);
     }
+  };
 
-    if (nextProps.gradient) {
-      this._heatmap.gradient(nextProps.gradient);
+  /**
+   * Update the heatmap's gradient
+   */
+
+
+  HeatmapLayer.prototype.updateHeatmapGradient = function updateHeatmapGradient(gradient) {
+    if (gradient) {
+      this._heatmap.gradient(gradient);
     }
+  };
 
-    if (nextProps.max && (!this.props || nextProps.max !== this.props.max)) {
-      this._heatmap.max(nextProps.max);
+  /**
+   * Update the heatmap's maximum
+   */
+
+
+  HeatmapLayer.prototype.updateHeatmapMax = function updateHeatmapMax(maximum) {
+    if (maximum) {
+      this._heatmap.max(maximum);
     }
@@ -183,0 +226,0 @@ };

package.json

 {
   "name": "react-leaflet-heatmap-layer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A custom layer for heatmaps in react-leaflet",
@@ -5,0 +5,0 @@ "main": "lib/HeatmapLayer.js",

src/HeatmapLayer.js

@@ -130,3 +130,2 @@ import React from 'react';
     }
-
     this.attachEvents();
@@ -168,18 +167,53 @@ this.updateHeatmapProps(this.getHeatmapProps(this.props));
   componentWillReceiveProps(nextProps: Object): void {
-    this.updateHeatmapProps(this.getHeatmapProps(nextProps));
+    const currentProps = this.props;
+    const nextHeatmapProps = this.getHeatmapProps(nextProps);
+
+    this.updateHeatmapGradient(nextHeatmapProps.gradient);
+
+    const hasRadiusUpdated = nextHeatmapProps.radius !== currentProps.radius;
+    const hasBlurUpdated = nextHeatmapProps.blur !== currentProps.blur;
+
+    if (hasRadiusUpdated || hasBlurUpdated) {
+      this.updateHeatmapRadius(nextHeatmapProps.radius, nextHeatmapProps.blur);
+    }
+
+    if (nextHeatmapProps.max !== currentProps.max) {
+      this.updateHeatmapMax(nextHeatmapProps.max);
+    }
+
   }
 
-  updateHeatmapProps(nextProps: Object) {
-    if (nextProps.radius
-      && (!this.props || nextProps.radius !== this.props.radius)) {
-      this._heatmap.radius(nextProps.radius);
+  /**
+   * Update various heatmap properties like radius, gradient, and max
+   */
+  updateHeatmapProps(props: Object) {
+    this.updateHeatmapRadius(props.radius, props.blur);
+    this.updateHeatmapGradient(props.gradient);
+    this.updateHeatmapMax(props.max);
+  }
+
+  /**
+   * Update the heatmap's radius and blur (blur is optional)
+   */
+  updateHeatmapRadius(radius: number, blur: ?number): void {
+    if (radius) {
+      this._heatmap.radius(radius, blur);
     }
+  }
 
-    if (nextProps.gradient) {
-      this._heatmap.gradient(nextProps.gradient);
+  /**
+   * Update the heatmap's gradient
+   */
+  updateHeatmapGradient(gradient: Object): void {
+    if (gradient) {
+      this._heatmap.gradient(gradient);
     }
+  }
 
-    if (nextProps.max
-      && (!this.props || nextProps.max !== this.props.max)) {
-      this._heatmap.max(nextProps.max);
+  /**
+   * Update the heatmap's maximum
+   */
+  updateHeatmapMax(maximum: number): void {
+    if (maximum) {
+      this._heatmap.max(maximum);
     }
@@ -186,0 +220,0 @@ }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

434239

0.8%

Lines of code

10813

1.01%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Number of low supply chain risk alerts

3

50%

No dependency changes