add onStatsUpdate prop

Author: Jeremiah R. Hall

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.2.0 Release
+
+- adds an `onStatsUpdate` prop which is called on redraw with a { min, max } object containing the min and max number of items found for a single coordinate
+
 # 0.1.0 Release
 
 - Handle invalid points gracefully

README.md

@@ -56,6 +56,7 @@ The `HeatmapLayer` component takes the following props:
 - `minOpacity`: minimum opacity for heatmap (default: 0.01)
 - `blur`: blur for heatmap points (default: 15)
 - `gradient`: object defining gradient stop points for heatmap e.g. `{ 0.4: 'blue', 0.8: 'orange', 1.0: 'red' }` (default: `simpleheat` package default gradient)
+- `onStatsUpdate`: called on redraw with a { min, max } object containing the min and max number of items found for a single coordinate
 
 ## Example
 

lib/HeatmapLayer.js

@@ -262,7 +262,7 @@ var HeatmapLayer = function (_MapLayer) {
     var roundResults = function roundResults(results) {
       return (0, _lodash4.default)(results, function (result, row) {
         return (0, _lodash2.default)(filterUndefined(row), function (cell, key, row) {
-          return [Math.round(cell[0]), Math.round(cell[1]), Math.min(cell[2], maxIntensity)];
+          return [Math.round(cell[0]), Math.round(cell[1]), Math.min(cell[2], maxIntensity), cell[3]];
         }).concat(result);
       }, []);
     };
@@ -291,11 +291,12 @@ var HeatmapLayer = function (_MapLayer) {
         var k = alt * v;
 
         if (!cell) {
-          grid[y][x] = [p.x, p.y, k];
+          grid[y][x] = [p.x, p.y, k, 1];
         } else {
           cell[0] = (cell[0] * cell[2] + p.x * k) / (cell[2] + k); // x
           cell[1] = (cell[1] * cell[2] + p.y * k) / (cell[2] + k); // y
           cell[2] += k; // accumulated intensity value
+          cell[3] += 1;
         }
 
         return grid;
@@ -315,6 +316,16 @@ var HeatmapLayer = function (_MapLayer) {
     this._heatmap.data(data).draw(this.getMinOpacity(this.props));
 
     this._frame = null;
+
+    if (this.props.onStatsUpdate && this.props.points && this.props.points.length > 0) {
+      var stats = _.reduce(data, function (stats, point) {
+        stats.max = point[3] > stats.max ? point[3] : stats.max;
+        stats.min = point[3] < stats.min ? point[3] : stats.min;
+        return stats;
+      }, { min: Infinity, max: -Infinity });
+
+      this.props.onStatsUpdate(stats);
+    }
   };
 
   HeatmapLayer.prototype.render = function render() {
@@ -345,6 +356,7 @@ HeatmapLayer.propTypes = {
   intensityExtractor: _react2.default.PropTypes.func.isRequired,
   fitBoundsOnLoad: _react2.default.PropTypes.bool,
   fitBoundsOnUpdate: _react2.default.PropTypes.bool,
+  onStatsUpdate: _react2.default.PropTypes.func,
   /* props controlling heatmap generation */
   max: _react2.default.PropTypes.number,
   radius: _react2.default.PropTypes.number,

src/HeatmapLayer.js

@@ -77,6 +77,7 @@ export default class HeatmapLayer extends MapLayer {
     intensityExtractor: React.PropTypes.func.isRequired,
     fitBoundsOnLoad: React.PropTypes.bool,
     fitBoundsOnUpdate: React.PropTypes.bool,
+    onStatsUpdate: React.PropTypes.func,
     /* props controlling heatmap generation */
     max: React.PropTypes.number,
     radius: React.PropTypes.number,
@@ -262,7 +263,8 @@ export default class HeatmapLayer extends MapLayer {
           return [
             Math.round(cell[0]),
             Math.round(cell[1]),
-            Math.min(cell[2], maxIntensity)
+            Math.min(cell[2], maxIntensity),
+            cell[3]
           ];
         }).concat(result);
       }, []);
@@ -291,11 +293,12 @@ export default class HeatmapLayer extends MapLayer {
         const k = alt * v;
 
         if (!cell) {
-            grid[y][x] = [p.x, p.y, k];
+            grid[y][x] = [p.x, p.y, k, 1];
         } else {
             cell[0] = (cell[0] * cell[2] + p.x * k) / (cell[2] + k); // x
             cell[1] = (cell[1] * cell[2] + p.y * k) / (cell[2] + k); // y
             cell[2] += k; // accumulated intensity value
+            cell[3] += 1;
         }
 
         return grid;
@@ -321,6 +324,16 @@ export default class HeatmapLayer extends MapLayer {
     this._heatmap.data(data).draw(this.getMinOpacity(this.props));
 
     this._frame = null;
+
+    if (this.props.onStatsUpdate && this.props.points && this.props.points.length > 0) {
+      const stats = _.reduce(data, (stats, point) => {
+        stats.max = point[3] > stats.max ? point[3] : stats.max;
+        stats.min = point[3] < stats.min ? point[3] : stats.min;
+        return stats;
+      }, { min: Infinity, max: -Infinity });
+
+      this.props.onStatsUpdate(stats);
+    }
   }