Merge https://github.com/OpenGov/react-leaflet-heatmap-layer

Author: evansiroky

.eslintignore

@@ -1 +1,2 @@
 node_modules/**
+lib/**

.eslintrc

@@ -47,7 +47,7 @@
     "block-scoped-var": 0,
     // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
     "padded-blocks": 0,
-
+    "no-param-reassign": 0
   },
   "plugins": [
     "react",

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 0.2.4 Release
+- List eslint as an explicit devDependency
+- upgrade the eslint related packages
+- fix linting errors using current config
+- Add notes about maintaining absence of lint errors and warnings in Contributing guide
+- This should make it easier to ensure code quality as others contribute in the open
+- Also, drop unused jest and enzyme deps
+
 # 0.2.3 Release
 - Missed Transpilation
 

CONTRIBUTING.md

@@ -56,6 +56,7 @@ Before submitting a Pull Request please ensure you have completed the following
 2. Make sure your copy is up to date: `git pull upstream master`
 3. Run `npm run compile`, to compile your changes to the exported `/lib` code.
 4. Bump the version in `package.json` as appropriate, see `Versioning` in the section below.
+4. Run `npm run lint` to verify code style, all pull requests should have zero lint errors and warnings
 4. Commit your changes
 5. Push your changes to your fork: `your-username/react-leaflet-heatmap-layer`
 6. Open a pull request from your fork to the `upstream` fork (`OpenGov/react-leaflet-heatmap-layer`)

example/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
+import { Map, TileLayer } from 'react-leaflet';
 import HeatmapLayer from '../src/HeatmapLayer';
 import { addressPoints } from './realworld.10000.js';
 
@@ -9,7 +9,7 @@ class MapExample extends React.Component {
   state = {
     mapHidden: false,
     layerHidden: false,
-    addressPoints: addressPoints
+    addressPoints
   };
 
   componentDidMount() {
@@ -25,38 +25,46 @@ class MapExample extends React.Component {
           <input
             type="button"
             value="Toggle Map"
-            onClick={() => this.setState({ mapHidden: !this.state.mapHidden })} />
+            onClick={() => this.setState({ mapHidden: !this.state.mapHidden })}
+          />
         </div>
       );
     }
-    const gradient = { '0.1': '#89BDE0', '0.2': '#96E3E6', '0.4': '#82CEB6', '0.6': '#FAF3A5', '0.8': '#F5D98B', '1.0': '#DE9A96'};
+
+    const gradient = {
+      0.1: '#89BDE0', 0.2: '#96E3E6', 0.4: '#82CEB6',
+      0.6: '#FAF3A5', 0.8: '#F5D98B', '1.0': '#DE9A96'
+    };
 
     return (
       <div>
-        <Map center={[0,0]} zoom={13}>
+        <Map center={[0, 0]} zoom={13}>
           {!this.state.layerHidden &&
               <HeatmapLayer
-              fitBoundsOnLoad
-              fitBoundsOnUpdate
-              points={this.state.addressPoints}
-              longitudeExtractor={m => m[1]}
-              latitudeExtractor={m => m[0]}
-              gradient={gradient}
-              intensityExtractor={m => parseFloat(m[2])} />
+                fitBoundsOnLoad
+                fitBoundsOnUpdate
+                points={this.state.addressPoints}
+                longitudeExtractor={m => m[1]}
+                latitudeExtractor={m => m[0]}
+                gradient={gradient}
+                intensityExtractor={m => parseFloat(m[2])}
+              />
             }
           <TileLayer
-            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
+            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
             attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           />
         </Map>
         <input
           type="button"
           value="Toggle Map"
-          onClick={() => this.setState({ mapHidden: !this.state.mapHidden })} />
+          onClick={() => this.setState({ mapHidden: !this.state.mapHidden })}
+        />
         <input
           type="button"
           value="Toggle Layer"
-          onClick={() => this.setState({ layerHidden: !this.state.layerHidden })} />
+          onClick={() => this.setState({ layerHidden: !this.state.layerHidden })}
+        />
       </div>
     );
   }

lib/HeatmapLayer.js

@@ -18,30 +18,22 @@ var _lodash3 = require('lodash.reduce');
 
 var _lodash4 = _interopRequireDefault(_lodash3);
 
-var _lodash5 = require('lodash.foreach');
+var _lodash5 = require('lodash.filter');
 
 var _lodash6 = _interopRequireDefault(_lodash5);
 
-var _lodash7 = require('lodash.pluck');
+var _lodash7 = require('lodash.min');
 
 var _lodash8 = _interopRequireDefault(_lodash7);
 
-var _lodash9 = require('lodash.filter');
+var _lodash9 = require('lodash.max');
 
 var _lodash10 = _interopRequireDefault(_lodash9);
 
-var _lodash11 = require('lodash.min');
+var _lodash11 = require('lodash.isnumber');
 
 var _lodash12 = _interopRequireDefault(_lodash11);
 
-var _lodash13 = require('lodash.max');
-
-var _lodash14 = _interopRequireDefault(_lodash13);
-
-var _lodash15 = require('lodash.isnumber');
-
-var _lodash16 = _interopRequireDefault(_lodash15);
-
 var _leaflet = require('leaflet');
 
 var _leaflet2 = _interopRequireDefault(_leaflet);
@@ -60,20 +52,20 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-function isValidLatLngArray(arr) {
-  return (0, _lodash10.default)(arr, isValid).length === arr.length;
+function isInvalid(num) {
+  return !(0, _lodash12.default)(num) && !num;
 }
 
-function isInvalidLatLngArray(arr) {
-  return !isValidLatLngArray(arr);
+function isValid(num) {
+  return !isInvalid(num);
 }
 
-function isInvalid(num) {
-  return !(0, _lodash16.default)(num) && !num;
+function isValidLatLngArray(arr) {
+  return (0, _lodash6.default)(arr, isValid).length === arr.length;
 }
 
-function isValid(num) {
-  return !isInvalid(num);
+function isInvalidLatLngArray(arr) {
+  return !isValidLatLngArray(arr);
 }
 
 function safeRemoveLayer(map, el) {
@@ -207,8 +199,8 @@ var HeatmapLayer = function (_MapLayer) {
     var points = this.props.points;
     var lngs = (0, _lodash2.default)(points, this.props.longitudeExtractor);
     var lats = (0, _lodash2.default)(points, this.props.latitudeExtractor);
-    var ne = { lng: (0, _lodash14.default)(lngs), lat: (0, _lodash14.default)(lats) };
-    var sw = { lng: (0, _lodash12.default)(lngs), lat: (0, _lodash12.default)(lats) };
+    var ne = { lng: (0, _lodash10.default)(lngs), lat: (0, _lodash10.default)(lats) };
+    var sw = { lng: (0, _lodash8.default)(lngs), lat: (0, _lodash8.default)(lats) };
 
     if (shouldIgnoreLocation(ne) || shouldIgnoreLocation(sw)) {
       return;
@@ -232,15 +224,15 @@ var HeatmapLayer = function (_MapLayer) {
   HeatmapLayer.prototype.attachEvents = function attachEvents() {
     var _this2 = this;
 
-    var map = this.context.map;
-    map.on('viewreset', function () {
+    var leafletMap = this.props.map;
+    leafletMap.on('viewreset', function () {
       return _this2.reset();
     });
-    map.on('moveend', function () {
+    leafletMap.on('moveend', function () {
       return _this2.reset();
     });
-    if (map.options.zoomAnimation && _leaflet2.default.Browser.any3d) {
-      map.on('zoomanim', this._animateZoom, this);
+    if (leafletMap.options.zoomAnimation && _leaflet2.default.Browser.any3d) {
+      leafletMap.on('zoomanim', this._animateZoom, this);
     }
   };
 
@@ -249,9 +241,9 @@ var HeatmapLayer = function (_MapLayer) {
     var offset = this.context.map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this.context.map._getMapPanePos());
 
     if (_leaflet2.default.DomUtil.setTransform) {
-      _leaflet2.default.DomUtil.setTransform(this._el, offset, scale);
+      _leaflet2.default.DomUtil.setTransform(this.refs.container, offset, scale);
     } else {
-      this._el.style[_leaflet2.default.DomUtil.TRANSFORM] = _leaflet2.default.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
+      this.refs.container.style[_leaflet2.default.DomUtil.TRANSFORM] = _leaflet2.default.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
     }
   };
 
@@ -262,13 +254,13 @@ var HeatmapLayer = function (_MapLayer) {
     var size = this.context.map.getSize();
 
     if (this._heatmap._width !== size.x) {
-      this._el.width = this._heatmap._width = size.x;
+      this.refs.container.width = this._heatmap._width = size.x;
     }
     if (this._heatmap._height !== size.y) {
-      this._el.height = this._heatmap._height = size.y;
+      this.refs.container.height = this._heatmap._height = size.y;
     }
 
-    if (this._heatmap && !this._frame && !this.context.map._animating) {
+    if (this._heatmap && !this._frame && !this.props.map._animating) {
       this._frame = _leaflet2.default.Util.requestAnimFrame(this.redraw, this);
     }
 
@@ -286,8 +278,7 @@ var HeatmapLayer = function (_MapLayer) {
     var v = 1 / Math.pow(2, Math.max(0, Math.min(maxZoom - this.context.map.getZoom(), 12)));
 
     var cellSize = r / 2;
-    var grid = [];
-    var panePos = this.context.map._getMapPanePos();
+    var panePos = this.props.map._getMapPanePos();
     var offsetX = panePos.x % cellSize;
     var offsetY = panePos.y % cellSize;
     var getLat = this.props.latitudeExtractor;
@@ -298,15 +289,15 @@ var HeatmapLayer = function (_MapLayer) {
       return bounds.contains(p);
     };
 
-    var filterUndefined = function filterUndefined(r) {
-      return (0, _lodash10.default)(r, function (c) {
+    var filterUndefined = function filterUndefined(row) {
+      return (0, _lodash6.default)(row, function (c) {
         return c !== undefined;
       });
     };
 
     var roundResults = function roundResults(results) {
       return (0, _lodash4.default)(results, function (result, row) {
-        return (0, _lodash2.default)(filterUndefined(row), function (cell, key, row) {
+        return (0, _lodash2.default)(filterUndefined(row), function (cell) {
           return [Math.round(cell[0]), Math.round(cell[1]), Math.min(cell[2], maxIntensity), cell[3]];
         }).concat(result);
       }, []);
@@ -348,28 +339,27 @@ var HeatmapLayer = function (_MapLayer) {
       }, []);
     };
 
-    var getBounds = function getBounds(leafletMap) {
+    var getBounds = function getBounds() {
       return new _leaflet2.default.Bounds(_leaflet2.default.point([-r, -r]), size.add([r, r]));
     };
 
     var getDataForHeatmap = function getDataForHeatmap(points, leafletMap) {
       return roundResults(accumulateInGrid(points, leafletMap, getBounds(leafletMap)));
     };
-    var data = getDataForHeatmap(this.props.points, this.context.map);
+
+    var data = getDataForHeatmap(this.props.points, this.props.map);
 
     this._heatmap.clear();
     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) {
+      this.props.onStatsUpdate((0, _lodash4.default)(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);
+      }, { min: Infinity, max: -Infinity }));
     }
   };
 

package.json

@@ -7,7 +7,8 @@
     "compile": "npm run clean; npm run transpile",
     "transpile": "./node_modules/.bin/babel src/HeatmapLayer.js --out-file lib/HeatmapLayer.js",
     "clean": "rm -rf ./lib/*",
-    "example": "webpack-dev-server --config ./example/webpack.config.js"
+    "example": "webpack-dev-server --config ./example/webpack.config.js",
+    "lint": "eslint ./src ./example/index.js"
   },
   "repository": {
     "type": "git",
@@ -36,8 +37,7 @@
   "devDependencies": {
     "babel-cli": "^6.6.5",
     "babel-core": "^6.7.4",
-    "babel-eslint": "^5.0.0",
-    "babel-jest": "^9.0.3",
+    "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.4",
     "babel-plugin-object-assign": "^1.2.1",
     "babel-plugin-react-transform": "^2.0.0",
@@ -46,43 +46,19 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
-    "enzyme": "^2.2.0",
+    "eslint": "^3.15.0",
     "eslint-config-airbnb": "^6.2.0",
     "eslint-plugin-arrow-function": "^2.0.0",
+    "eslint-plugin-lean-imports": "^0.3.3",
     "eslint-plugin-react": "^4.2.3",
-    "jest-cli": "^0.9.2",
     "leaflet": "^1.0.0",
     "react": "^15.4.1",
     "react-addons-test-utils": "^0.14.7",
     "react-dom": "^15.4.1",
     "react-leaflet": "^1.0.0",
     "react-transform-hmr": "^1.0.4",
-    "webpack-dev-server": "^1.14.1",
-    "webpack": "^1.12.14"
-  },
-  "jest": {
-    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest/src/index.js",
-    "unmockedModulePathPatterns": [
-      "react",
-      "enzyme",
-      "react-dom",
-      "react-addons-test-utils",
-      "fbjs",
-      "cheerio",
-      "htmlparser2",
-      "underscore",
-      "lodash",
-      "domhandler",
-      "object.assign",
-      "define-properties",
-      "function-bind",
-      "object-keys"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "jsx"
-    ]
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
     "lodash.filter": "^4.3.0",
@@ -93,6 +69,6 @@
     "lodash.min": "^4.0.0",
     "lodash.pluck": "^3.1.2",
     "lodash.reduce": "^4.3.0",
-    "simpleheat": "*"
+    "simpleheat": "^0.4.0"
   }
 }