├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── README.md
├── bower.json
├── dist
    ├── react-heatmap.js
    └── react-heatmap.min.js
├── example
    └── src
    │   ├── .gitignore
    │   ├── example.js
    │   ├── example.less
    │   └── index.html
├── gulpfile.js
├── lib
    └── ReactHeatmap.js
├── package.json
└── src
    └── ReactHeatmap.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = false
 9 | insert_final_newline = true
10 | indent_style = tab
11 | 
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | .publish/*
2 | dist/*
3 | example/dist/*
4 | lib/*
5 | node_modules/*
6 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"parser": "babel-eslint",
 3 | 	"env": {
 4 | 		"browser": true,
 5 | 		"node": true
 6 | 	},
 7 | 	"plugins": [
 8 | 		"react"
 9 | 	],
10 | 	"rules": {
11 | 		"curly": [2, "multi-line"],
12 | 		"quotes": [2, "single", "avoid-escape"],
13 | 		"react/display-name": 0,
14 | 		"react/jsx-boolean-value": 1,
15 | 		"react/jsx-quotes": 1,
16 | 		"react/jsx-no-undef": 1,
17 | 		"react/jsx-sort-props": 0,
18 | 		"react/jsx-sort-prop-types": 1,
19 | 		"react/jsx-uses-react": 1,
20 | 		"react/jsx-uses-vars": 1,
21 | 		"react/no-did-mount-set-state": 1,
22 | 		"react/no-did-update-set-state": 1,
23 | 		"react/no-multi-comp": 1,
24 | 		"react/no-unknown-property": 1,
25 | 		"react/prop-types": 1,
26 | 		"react/react-in-jsx-scope": 1,
27 | 		"react/self-closing-comp": 1,
28 | 		"react/wrap-multilines": 1,
29 | 		"semi": 2,
30 | 		"strict": 0
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 | coverage.html
14 | .cover*
15 | 
16 | # Dependency directory
17 | node_modules
18 | 
19 | # Example build directory
20 | example/dist
21 | .publish
22 | 
23 | # Editor and other tmp files
24 | *.swp
25 | *.un~
26 | *.iml
27 | *.ipr
28 | *.iws
29 | *.sublime-*
30 | .idea/
31 | *.DS_Store
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Heatmap
 2 | 
 3 | A very simple port of `heatmap.js` for `React`. The idea behind this component is to be able to display a heatmap over any type of content (image, div, components ...). By default, the heatmap will always take all available width and height of its container.
 4 | 
 5 | 
 6 | ## Demo & Examples
 7 | 
 8 | Live demo: [JonathanWi.github.io/react-heatmap](http://JonathanWi.github.io/react-heatmap/)
 9 | 
10 | To build the examples locally, run:
11 | 
12 | ```bash
13 | npm install
14 | npm start
15 | ```
16 | 
17 | Then open [`localhost:8000`](http://localhost:8000) in a browser.
18 | 
19 | 
20 | ## Installation
21 | 
22 | The easiest way to use react-heatmap is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
23 | 
24 | You can also use the standalone build by including `dist/react-heatmap.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
25 | 
26 | ```bash
27 | npm install react-heatmap --save
28 | ```
29 | 
30 | 
31 | ## Usage
32 | 
33 | This component is pretty straightforward and only expecting 2 simple parameters (`max` and `data`; if you're unfamiliar with these, take a look at the [`heatmap.js documentation`](http://www.patrick-wied.at/static/heatmapjs));
34 | 
35 | ```js
36 | const ReactHeatmap = require('react-heatmap');
37 | 
38 | const data = [{ x: 10, y: 15, value: 5}, { x: 50, y: 50, value: 2}, ...];
39 | 
40 | <ReactHeatmap max={5} data={data} />
41 | ```
42 | 
43 | ## Properties
44 | 
45 | 
46 | General component description.
47 | 
48 | Props
49 | -----
50 | Prop                  | Type     | Default                   | Required | Description
51 | --------------------- | -------- | ------------------------- | -------- | -----------
52 | max|int|5|No|Maximum value for intensity
53 | data|array|[]|No|Heatmap array of dots
54 | unit|string|percent|No|Can be either `percent` or `pixels`. If percent, a `x` value like `26` is considered **26% of the container from the top left**
55 | 
56 | 
57 | ## Development (`src`, `lib` and the build process)
58 | 
59 | **NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
60 | 
61 | To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
62 | 
63 | ## License
64 | 
65 | [MIT License](https://en.wikipedia.org/wiki/MIT_License) Copyright (c) 2016 Jonathan Widawski.
66 | 
67 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-heatmap",
 3 |   "version": "0.0.0",
 4 |   "description": "React Heatmap",
 5 |   "main": "dist/react-heatmap.min.js",
 6 |   "homepage": "https://github.com/JonathanWi/react-heatmap",
 7 |   "authors": [
 8 |     "Jonathan Widawski"
 9 |   ],
10 |   "moduleType": [
11 |     "amd",
12 |     "globals",
13 |     "node"
14 |   ],
15 |   "keywords": [
16 |     "react",
17 |     "react-component"
18 |   ],
19 |   "license": "MIT",
20 |   "ignore": [
21 |     ".editorconfig",
22 |     ".gitignore",
23 |     "package.json",
24 |     "src",
25 |     "node_modules",
26 |     "example",
27 |     "test"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/dist/react-heatmap.js:
--------------------------------------------------------------------------------
   1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactHeatmap = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
   2 | "use strict";
   3 | 
   4 | /**
   5 |  * Copyright (c) 2013-present, Facebook, Inc.
   6 |  *
   7 |  * This source code is licensed under the MIT license found in the
   8 |  * LICENSE file in the root directory of this source tree.
   9 |  *
  10 |  * 
  11 |  */
  12 | 
  13 | function makeEmptyFunction(arg) {
  14 |   return function () {
  15 |     return arg;
  16 |   };
  17 | }
  18 | 
  19 | /**
  20 |  * This function accepts and discards inputs; it has no side effects. This is
  21 |  * primarily useful idiomatically for overridable function endpoints which
  22 |  * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
  23 |  */
  24 | var emptyFunction = function emptyFunction() {};
  25 | 
  26 | emptyFunction.thatReturns = makeEmptyFunction;
  27 | emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
  28 | emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
  29 | emptyFunction.thatReturnsNull = makeEmptyFunction(null);
  30 | emptyFunction.thatReturnsThis = function () {
  31 |   return this;
  32 | };
  33 | emptyFunction.thatReturnsArgument = function (arg) {
  34 |   return arg;
  35 | };
  36 | 
  37 | module.exports = emptyFunction;
  38 | },{}],2:[function(require,module,exports){
  39 | /**
  40 |  * Copyright (c) 2013-present, Facebook, Inc.
  41 |  *
  42 |  * This source code is licensed under the MIT license found in the
  43 |  * LICENSE file in the root directory of this source tree.
  44 |  *
  45 |  */
  46 | 
  47 | 'use strict';
  48 | 
  49 | /**
  50 |  * Use invariant() to assert state which your program assumes to be true.
  51 |  *
  52 |  * Provide sprintf-style format (only %s is supported) and arguments
  53 |  * to provide information about what broke and what you were
  54 |  * expecting.
  55 |  *
  56 |  * The invariant message will be stripped in production, but the invariant
  57 |  * will remain to ensure logic does not differ in production.
  58 |  */
  59 | 
  60 | var validateFormat = function validateFormat(format) {};
  61 | 
  62 | if ("production" !== 'production') {
  63 |   validateFormat = function validateFormat(format) {
  64 |     if (format === undefined) {
  65 |       throw new Error('invariant requires an error message argument');
  66 |     }
  67 |   };
  68 | }
  69 | 
  70 | function invariant(condition, format, a, b, c, d, e, f) {
  71 |   validateFormat(format);
  72 | 
  73 |   if (!condition) {
  74 |     var error;
  75 |     if (format === undefined) {
  76 |       error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
  77 |     } else {
  78 |       var args = [a, b, c, d, e, f];
  79 |       var argIndex = 0;
  80 |       error = new Error(format.replace(/%s/g, function () {
  81 |         return args[argIndex++];
  82 |       }));
  83 |       error.name = 'Invariant Violation';
  84 |     }
  85 | 
  86 |     error.framesToPop = 1; // we don't care about invariant's own frame
  87 |     throw error;
  88 |   }
  89 | }
  90 | 
  91 | module.exports = invariant;
  92 | },{}],3:[function(require,module,exports){
  93 | /**
  94 |  * Copyright (c) 2014-present, Facebook, Inc.
  95 |  *
  96 |  * This source code is licensed under the MIT license found in the
  97 |  * LICENSE file in the root directory of this source tree.
  98 |  *
  99 |  */
 100 | 
 101 | 'use strict';
 102 | 
 103 | var emptyFunction = require('./emptyFunction');
 104 | 
 105 | /**
 106 |  * Similar to invariant but only logs a warning if the condition is not met.
 107 |  * This can be used to log issues in development environments in critical
 108 |  * paths. Removing the logging code for production environments will keep the
 109 |  * same logic and follow the same code paths.
 110 |  */
 111 | 
 112 | var warning = emptyFunction;
 113 | 
 114 | if ("production" !== 'production') {
 115 |   var printWarning = function printWarning(format) {
 116 |     for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
 117 |       args[_key - 1] = arguments[_key];
 118 |     }
 119 | 
 120 |     var argIndex = 0;
 121 |     var message = 'Warning: ' + format.replace(/%s/g, function () {
 122 |       return args[argIndex++];
 123 |     });
 124 |     if (typeof console !== 'undefined') {
 125 |       console.error(message);
 126 |     }
 127 |     try {
 128 |       // --- Welcome to debugging React ---
 129 |       // This error was thrown as a convenience so that you can use this stack
 130 |       // to find the callsite that caused this warning to fire.
 131 |       throw new Error(message);
 132 |     } catch (x) {}
 133 |   };
 134 | 
 135 |   warning = function warning(condition, format) {
 136 |     if (format === undefined) {
 137 |       throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
 138 |     }
 139 | 
 140 |     if (format.indexOf('Failed Composite propType: ') === 0) {
 141 |       return; // Ignore CompositeComponent proptype check.
 142 |     }
 143 | 
 144 |     if (!condition) {
 145 |       for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
 146 |         args[_key2 - 2] = arguments[_key2];
 147 |       }
 148 | 
 149 |       printWarning.apply(undefined, [format].concat(args));
 150 |     }
 151 |   };
 152 | }
 153 | 
 154 | module.exports = warning;
 155 | },{"./emptyFunction":1}],4:[function(require,module,exports){
 156 | /*
 157 |  * heatmapjs v2.0.1 | JavaScript Heatmap Library
 158 |  *
 159 |  * Copyright 2008-2014 Patrick Wied <heatmapjs@patrick-wied.at> - All rights reserved.
 160 |  * Dual licensed under MIT and Beerware license 
 161 |  *
 162 |  * :: 2016-02-03 23:43
 163 |  */
 164 | ;(function (name, context, factory) {
 165 | 
 166 |   // Supports UMD. AMD, CommonJS/Node.js and browser context
 167 |   if (typeof module !== "undefined" && module.exports) {
 168 |     module.exports = factory();
 169 |   } else if (typeof define === "function" && define.amd) {
 170 |     define(factory);
 171 |   } else {
 172 |     context[name] = factory();
 173 |   }
 174 | 
 175 | })("h337", this, function () {
 176 | 
 177 | // Heatmap Config stores default values and will be merged with instance config
 178 | var HeatmapConfig = {
 179 |   defaultRadius: 40,
 180 |   defaultRenderer: 'canvas2d',
 181 |   defaultGradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
 182 |   defaultMaxOpacity: 1,
 183 |   defaultMinOpacity: 0,
 184 |   defaultBlur: .85,
 185 |   defaultXField: 'x',
 186 |   defaultYField: 'y',
 187 |   defaultValueField: 'value', 
 188 |   plugins: {}
 189 | };
 190 | var Store = (function StoreClosure() {
 191 | 
 192 |   var Store = function Store(config) {
 193 |     this._coordinator = {};
 194 |     this._data = [];
 195 |     this._radi = [];
 196 |     this._min = 0;
 197 |     this._max = 1;
 198 |     this._xField = config['xField'] || config.defaultXField;
 199 |     this._yField = config['yField'] || config.defaultYField;
 200 |     this._valueField = config['valueField'] || config.defaultValueField;
 201 | 
 202 |     if (config["radius"]) {
 203 |       this._cfgRadius = config["radius"];
 204 |     }
 205 |   };
 206 | 
 207 |   var defaultRadius = HeatmapConfig.defaultRadius;
 208 | 
 209 |   Store.prototype = {
 210 |     // when forceRender = false -> called from setData, omits renderall event
 211 |     _organiseData: function(dataPoint, forceRender) {
 212 |         var x = dataPoint[this._xField];
 213 |         var y = dataPoint[this._yField];
 214 |         var radi = this._radi;
 215 |         var store = this._data;
 216 |         var max = this._max;
 217 |         var min = this._min;
 218 |         var value = dataPoint[this._valueField] || 1;
 219 |         var radius = dataPoint.radius || this._cfgRadius || defaultRadius;
 220 | 
 221 |         if (!store[x]) {
 222 |           store[x] = [];
 223 |           radi[x] = [];
 224 |         }
 225 | 
 226 |         if (!store[x][y]) {
 227 |           store[x][y] = value;
 228 |           radi[x][y] = radius;
 229 |         } else {
 230 |           store[x][y] += value;
 231 |         }
 232 | 
 233 |         if (store[x][y] > max) {
 234 |           if (!forceRender) {
 235 |             this._max = store[x][y];
 236 |           } else {
 237 |             this.setDataMax(store[x][y]);
 238 |           }
 239 |           return false;
 240 |         } else{
 241 |           return { 
 242 |             x: x, 
 243 |             y: y,
 244 |             value: value, 
 245 |             radius: radius,
 246 |             min: min,
 247 |             max: max 
 248 |           };
 249 |         }
 250 |     },
 251 |     _unOrganizeData: function() {
 252 |       var unorganizedData = [];
 253 |       var data = this._data;
 254 |       var radi = this._radi;
 255 | 
 256 |       for (var x in data) {
 257 |         for (var y in data[x]) {
 258 | 
 259 |           unorganizedData.push({
 260 |             x: x,
 261 |             y: y,
 262 |             radius: radi[x][y],
 263 |             value: data[x][y]
 264 |           });
 265 | 
 266 |         }
 267 |       }
 268 |       return {
 269 |         min: this._min,
 270 |         max: this._max,
 271 |         data: unorganizedData
 272 |       };
 273 |     },
 274 |     _onExtremaChange: function() {
 275 |       this._coordinator.emit('extremachange', {
 276 |         min: this._min,
 277 |         max: this._max
 278 |       });
 279 |     },
 280 |     addData: function() {
 281 |       if (arguments[0].length > 0) {
 282 |         var dataArr = arguments[0];
 283 |         var dataLen = dataArr.length;
 284 |         while (dataLen--) {
 285 |           this.addData.call(this, dataArr[dataLen]);
 286 |         }
 287 |       } else {
 288 |         // add to store  
 289 |         var organisedEntry = this._organiseData(arguments[0], true);
 290 |         if (organisedEntry) {
 291 |           this._coordinator.emit('renderpartial', {
 292 |             min: this._min,
 293 |             max: this._max,
 294 |             data: [organisedEntry]
 295 |           });
 296 |         }
 297 |       }
 298 |       return this;
 299 |     },
 300 |     setData: function(data) {
 301 |       var dataPoints = data.data;
 302 |       var pointsLen = dataPoints.length;
 303 | 
 304 | 
 305 |       // reset data arrays
 306 |       this._data = [];
 307 |       this._radi = [];
 308 | 
 309 |       for(var i = 0; i < pointsLen; i++) {
 310 |         this._organiseData(dataPoints[i], false);
 311 |       }
 312 |       this._max = data.max;
 313 |       this._min = data.min || 0;
 314 |       
 315 |       this._onExtremaChange();
 316 |       this._coordinator.emit('renderall', this._getInternalData());
 317 |       return this;
 318 |     },
 319 |     removeData: function() {
 320 |       // TODO: implement
 321 |     },
 322 |     setDataMax: function(max) {
 323 |       this._max = max;
 324 |       this._onExtremaChange();
 325 |       this._coordinator.emit('renderall', this._getInternalData());
 326 |       return this;
 327 |     },
 328 |     setDataMin: function(min) {
 329 |       this._min = min;
 330 |       this._onExtremaChange();
 331 |       this._coordinator.emit('renderall', this._getInternalData());
 332 |       return this;
 333 |     },
 334 |     setCoordinator: function(coordinator) {
 335 |       this._coordinator = coordinator;
 336 |     },
 337 |     _getInternalData: function() {
 338 |       return { 
 339 |         max: this._max,
 340 |         min: this._min, 
 341 |         data: this._data,
 342 |         radi: this._radi 
 343 |       };
 344 |     },
 345 |     getData: function() {
 346 |       return this._unOrganizeData();
 347 |     }/*,
 348 | 
 349 |       TODO: rethink.
 350 | 
 351 |     getValueAt: function(point) {
 352 |       var value;
 353 |       var radius = 100;
 354 |       var x = point.x;
 355 |       var y = point.y;
 356 |       var data = this._data;
 357 | 
 358 |       if (data[x] && data[x][y]) {
 359 |         return data[x][y];
 360 |       } else {
 361 |         var values = [];
 362 |         // radial search for datapoints based on default radius
 363 |         for(var distance = 1; distance < radius; distance++) {
 364 |           var neighbors = distance * 2 +1;
 365 |           var startX = x - distance;
 366 |           var startY = y - distance;
 367 | 
 368 |           for(var i = 0; i < neighbors; i++) {
 369 |             for (var o = 0; o < neighbors; o++) {
 370 |               if ((i == 0 || i == neighbors-1) || (o == 0 || o == neighbors-1)) {
 371 |                 if (data[startY+i] && data[startY+i][startX+o]) {
 372 |                   values.push(data[startY+i][startX+o]);
 373 |                 }
 374 |               } else {
 375 |                 continue;
 376 |               } 
 377 |             }
 378 |           }
 379 |         }
 380 |         if (values.length > 0) {
 381 |           return Math.max.apply(Math, values);
 382 |         }
 383 |       }
 384 |       return false;
 385 |     }*/
 386 |   };
 387 | 
 388 | 
 389 |   return Store;
 390 | })();
 391 | 
 392 | var Canvas2dRenderer = (function Canvas2dRendererClosure() {
 393 |   
 394 |   var _getColorPalette = function(config) {
 395 |     var gradientConfig = config.gradient || config.defaultGradient;
 396 |     var paletteCanvas = document.createElement('canvas');
 397 |     var paletteCtx = paletteCanvas.getContext('2d');
 398 | 
 399 |     paletteCanvas.width = 256;
 400 |     paletteCanvas.height = 1;
 401 | 
 402 |     var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
 403 |     for (var key in gradientConfig) {
 404 |       gradient.addColorStop(key, gradientConfig[key]);
 405 |     }
 406 | 
 407 |     paletteCtx.fillStyle = gradient;
 408 |     paletteCtx.fillRect(0, 0, 256, 1);
 409 | 
 410 |     return paletteCtx.getImageData(0, 0, 256, 1).data;
 411 |   };
 412 | 
 413 |   var _getPointTemplate = function(radius, blurFactor) {
 414 |     var tplCanvas = document.createElement('canvas');
 415 |     var tplCtx = tplCanvas.getContext('2d');
 416 |     var x = radius;
 417 |     var y = radius;
 418 |     tplCanvas.width = tplCanvas.height = radius*2;
 419 | 
 420 |     if (blurFactor == 1) {
 421 |       tplCtx.beginPath();
 422 |       tplCtx.arc(x, y, radius, 0, 2 * Math.PI, false);
 423 |       tplCtx.fillStyle = 'rgba(0,0,0,1)';
 424 |       tplCtx.fill();
 425 |     } else {
 426 |       var gradient = tplCtx.createRadialGradient(x, y, radius*blurFactor, x, y, radius);
 427 |       gradient.addColorStop(0, 'rgba(0,0,0,1)');
 428 |       gradient.addColorStop(1, 'rgba(0,0,0,0)');
 429 |       tplCtx.fillStyle = gradient;
 430 |       tplCtx.fillRect(0, 0, 2*radius, 2*radius);
 431 |     }
 432 |     
 433 |     
 434 | 
 435 |     return tplCanvas;
 436 |   };
 437 | 
 438 |   var _prepareData = function(data) {
 439 |     var renderData = [];
 440 |     var min = data.min;
 441 |     var max = data.max;
 442 |     var radi = data.radi;
 443 |     var data = data.data;
 444 |     
 445 |     var xValues = Object.keys(data);
 446 |     var xValuesLen = xValues.length;
 447 | 
 448 |     while(xValuesLen--) {
 449 |       var xValue = xValues[xValuesLen];
 450 |       var yValues = Object.keys(data[xValue]);
 451 |       var yValuesLen = yValues.length;
 452 |       while(yValuesLen--) {
 453 |         var yValue = yValues[yValuesLen];
 454 |         var value = data[xValue][yValue];
 455 |         var radius = radi[xValue][yValue];
 456 |         renderData.push({
 457 |           x: xValue,
 458 |           y: yValue,
 459 |           value: value,
 460 |           radius: radius
 461 |         });
 462 |       }
 463 |     }
 464 | 
 465 |     return {
 466 |       min: min,
 467 |       max: max,
 468 |       data: renderData
 469 |     };
 470 |   };
 471 | 
 472 | 
 473 |   function Canvas2dRenderer(config) {
 474 |     var container = config.container;
 475 |     var shadowCanvas = this.shadowCanvas = document.createElement('canvas');
 476 |     var canvas = this.canvas = config.canvas || document.createElement('canvas');
 477 |     var renderBoundaries = this._renderBoundaries = [10000, 10000, 0, 0];
 478 | 
 479 |     var computed = getComputedStyle(config.container) || {};
 480 | 
 481 |     canvas.className = 'heatmap-canvas';
 482 | 
 483 |     this._width = canvas.width = shadowCanvas.width = +(computed.width.replace(/px/,''));
 484 |     this._height = canvas.height = shadowCanvas.height = +(computed.height.replace(/px/,''));
 485 | 
 486 |     this.shadowCtx = shadowCanvas.getContext('2d');
 487 |     this.ctx = canvas.getContext('2d');
 488 | 
 489 |     // @TODO:
 490 |     // conditional wrapper
 491 | 
 492 |     canvas.style.cssText = shadowCanvas.style.cssText = 'position:absolute;left:0;top:0;';
 493 | 
 494 |     container.style.position = 'relative';
 495 |     container.appendChild(canvas);
 496 | 
 497 |     this._palette = _getColorPalette(config);
 498 |     this._templates = {};
 499 | 
 500 |     this._setStyles(config);
 501 |   };
 502 | 
 503 |   Canvas2dRenderer.prototype = {
 504 |     renderPartial: function(data) {
 505 |       this._drawAlpha(data);
 506 |       this._colorize();
 507 |     },
 508 |     renderAll: function(data) {
 509 |       // reset render boundaries
 510 |       this._clear();
 511 |       this._drawAlpha(_prepareData(data));
 512 |       this._colorize();
 513 |     },
 514 |     _updateGradient: function(config) {
 515 |       this._palette = _getColorPalette(config);
 516 |     },
 517 |     updateConfig: function(config) {
 518 |       if (config['gradient']) {
 519 |         this._updateGradient(config);
 520 |       }
 521 |       this._setStyles(config);
 522 |     },
 523 |     setDimensions: function(width, height) {
 524 |       this._width = width;
 525 |       this._height = height;
 526 |       this.canvas.width = this.shadowCanvas.width = width;
 527 |       this.canvas.height = this.shadowCanvas.height = height;
 528 |     },
 529 |     _clear: function() {
 530 |       this.shadowCtx.clearRect(0, 0, this._width, this._height);
 531 |       this.ctx.clearRect(0, 0, this._width, this._height);
 532 |     },
 533 |     _setStyles: function(config) {
 534 |       this._blur = (config.blur == 0)?0:(config.blur || config.defaultBlur);
 535 | 
 536 |       if (config.backgroundColor) {
 537 |         this.canvas.style.backgroundColor = config.backgroundColor;
 538 |       }
 539 | 
 540 |       this._opacity = (config.opacity || 0) * 255;
 541 |       this._maxOpacity = (config.maxOpacity || config.defaultMaxOpacity) * 255;
 542 |       this._minOpacity = (config.minOpacity || config.defaultMinOpacity) * 255;
 543 |       this._useGradientOpacity = !!config.useGradientOpacity;
 544 |     },
 545 |     _drawAlpha: function(data) {
 546 |       var min = this._min = data.min;
 547 |       var max = this._max = data.max;
 548 |       var data = data.data || [];
 549 |       var dataLen = data.length;
 550 |       // on a point basis?
 551 |       var blur = 1 - this._blur;
 552 | 
 553 |       while(dataLen--) {
 554 | 
 555 |         var point = data[dataLen];
 556 | 
 557 |         var x = point.x;
 558 |         var y = point.y;
 559 |         var radius = point.radius;
 560 |         // if value is bigger than max
 561 |         // use max as value
 562 |         var value = Math.min(point.value, max);
 563 |         var rectX = x - radius;
 564 |         var rectY = y - radius;
 565 |         var shadowCtx = this.shadowCtx;
 566 | 
 567 | 
 568 | 
 569 | 
 570 |         var tpl;
 571 |         if (!this._templates[radius]) {
 572 |           this._templates[radius] = tpl = _getPointTemplate(radius, blur);
 573 |         } else {
 574 |           tpl = this._templates[radius];
 575 |         }
 576 |         // value from minimum / value range
 577 |         // => [0, 1]
 578 |         shadowCtx.globalAlpha = (value-min)/(max-min);
 579 | 
 580 |         shadowCtx.drawImage(tpl, rectX, rectY);
 581 | 
 582 |         // update renderBoundaries
 583 |         if (rectX < this._renderBoundaries[0]) {
 584 |             this._renderBoundaries[0] = rectX;
 585 |           } 
 586 |           if (rectY < this._renderBoundaries[1]) {
 587 |             this._renderBoundaries[1] = rectY;
 588 |           }
 589 |           if (rectX + 2*radius > this._renderBoundaries[2]) {
 590 |             this._renderBoundaries[2] = rectX + 2*radius;
 591 |           }
 592 |           if (rectY + 2*radius > this._renderBoundaries[3]) {
 593 |             this._renderBoundaries[3] = rectY + 2*radius;
 594 |           }
 595 | 
 596 |       }
 597 |     },
 598 |     _colorize: function() {
 599 |       var x = this._renderBoundaries[0];
 600 |       var y = this._renderBoundaries[1];
 601 |       var width = this._renderBoundaries[2] - x;
 602 |       var height = this._renderBoundaries[3] - y;
 603 |       var maxWidth = this._width;
 604 |       var maxHeight = this._height;
 605 |       var opacity = this._opacity;
 606 |       var maxOpacity = this._maxOpacity;
 607 |       var minOpacity = this._minOpacity;
 608 |       var useGradientOpacity = this._useGradientOpacity;
 609 | 
 610 |       if (x < 0) {
 611 |         x = 0;
 612 |       }
 613 |       if (y < 0) {
 614 |         y = 0;
 615 |       }
 616 |       if (x + width > maxWidth) {
 617 |         width = maxWidth - x;
 618 |       }
 619 |       if (y + height > maxHeight) {
 620 |         height = maxHeight - y;
 621 |       }
 622 | 
 623 |       var img = this.shadowCtx.getImageData(x, y, width, height);
 624 |       var imgData = img.data;
 625 |       var len = imgData.length;
 626 |       var palette = this._palette;
 627 | 
 628 | 
 629 |       for (var i = 3; i < len; i+= 4) {
 630 |         var alpha = imgData[i];
 631 |         var offset = alpha * 4;
 632 | 
 633 | 
 634 |         if (!offset) {
 635 |           continue;
 636 |         }
 637 | 
 638 |         var finalAlpha;
 639 |         if (opacity > 0) {
 640 |           finalAlpha = opacity;
 641 |         } else {
 642 |           if (alpha < maxOpacity) {
 643 |             if (alpha < minOpacity) {
 644 |               finalAlpha = minOpacity;
 645 |             } else {
 646 |               finalAlpha = alpha;
 647 |             }
 648 |           } else {
 649 |             finalAlpha = maxOpacity;
 650 |           }
 651 |         }
 652 | 
 653 |         imgData[i-3] = palette[offset];
 654 |         imgData[i-2] = palette[offset + 1];
 655 |         imgData[i-1] = palette[offset + 2];
 656 |         imgData[i] = useGradientOpacity ? palette[offset + 3] : finalAlpha;
 657 | 
 658 |       }
 659 | 
 660 |       img.data = imgData;
 661 |       this.ctx.putImageData(img, x, y);
 662 | 
 663 |       this._renderBoundaries = [1000, 1000, 0, 0];
 664 | 
 665 |     },
 666 |     getValueAt: function(point) {
 667 |       var value;
 668 |       var shadowCtx = this.shadowCtx;
 669 |       var img = shadowCtx.getImageData(point.x, point.y, 1, 1);
 670 |       var data = img.data[3];
 671 |       var max = this._max;
 672 |       var min = this._min;
 673 | 
 674 |       value = (Math.abs(max-min) * (data/255)) >> 0;
 675 | 
 676 |       return value;
 677 |     },
 678 |     getDataURL: function() {
 679 |       return this.canvas.toDataURL();
 680 |     }
 681 |   };
 682 | 
 683 | 
 684 |   return Canvas2dRenderer;
 685 | })();
 686 | 
 687 | var Renderer = (function RendererClosure() {
 688 | 
 689 |   var rendererFn = false;
 690 | 
 691 |   if (HeatmapConfig['defaultRenderer'] === 'canvas2d') {
 692 |     rendererFn = Canvas2dRenderer;
 693 |   }
 694 | 
 695 |   return rendererFn;
 696 | })();
 697 | 
 698 | 
 699 | var Util = {
 700 |   merge: function() {
 701 |     var merged = {};
 702 |     var argsLen = arguments.length;
 703 |     for (var i = 0; i < argsLen; i++) {
 704 |       var obj = arguments[i]
 705 |       for (var key in obj) {
 706 |         merged[key] = obj[key];
 707 |       }
 708 |     }
 709 |     return merged;
 710 |   }
 711 | };
 712 | // Heatmap Constructor
 713 | var Heatmap = (function HeatmapClosure() {
 714 | 
 715 |   var Coordinator = (function CoordinatorClosure() {
 716 | 
 717 |     function Coordinator() {
 718 |       this.cStore = {};
 719 |     };
 720 | 
 721 |     Coordinator.prototype = {
 722 |       on: function(evtName, callback, scope) {
 723 |         var cStore = this.cStore;
 724 | 
 725 |         if (!cStore[evtName]) {
 726 |           cStore[evtName] = [];
 727 |         }
 728 |         cStore[evtName].push((function(data) {
 729 |             return callback.call(scope, data);
 730 |         }));
 731 |       },
 732 |       emit: function(evtName, data) {
 733 |         var cStore = this.cStore;
 734 |         if (cStore[evtName]) {
 735 |           var len = cStore[evtName].length;
 736 |           for (var i=0; i<len; i++) {
 737 |             var callback = cStore[evtName][i];
 738 |             callback(data);
 739 |           }
 740 |         }
 741 |       }
 742 |     };
 743 | 
 744 |     return Coordinator;
 745 |   })();
 746 | 
 747 | 
 748 |   var _connect = function(scope) {
 749 |     var renderer = scope._renderer;
 750 |     var coordinator = scope._coordinator;
 751 |     var store = scope._store;
 752 | 
 753 |     coordinator.on('renderpartial', renderer.renderPartial, renderer);
 754 |     coordinator.on('renderall', renderer.renderAll, renderer);
 755 |     coordinator.on('extremachange', function(data) {
 756 |       scope._config.onExtremaChange &&
 757 |       scope._config.onExtremaChange({
 758 |         min: data.min,
 759 |         max: data.max,
 760 |         gradient: scope._config['gradient'] || scope._config['defaultGradient']
 761 |       });
 762 |     });
 763 |     store.setCoordinator(coordinator);
 764 |   };
 765 | 
 766 | 
 767 |   function Heatmap() {
 768 |     var config = this._config = Util.merge(HeatmapConfig, arguments[0] || {});
 769 |     this._coordinator = new Coordinator();
 770 |     if (config['plugin']) {
 771 |       var pluginToLoad = config['plugin'];
 772 |       if (!HeatmapConfig.plugins[pluginToLoad]) {
 773 |         throw new Error('Plugin \''+ pluginToLoad + '\' not found. Maybe it was not registered.');
 774 |       } else {
 775 |         var plugin = HeatmapConfig.plugins[pluginToLoad];
 776 |         // set plugin renderer and store
 777 |         this._renderer = new plugin.renderer(config);
 778 |         this._store = new plugin.store(config);
 779 |       }
 780 |     } else {
 781 |       this._renderer = new Renderer(config);
 782 |       this._store = new Store(config);
 783 |     }
 784 |     _connect(this);
 785 |   };
 786 | 
 787 |   // @TODO:
 788 |   // add API documentation
 789 |   Heatmap.prototype = {
 790 |     addData: function() {
 791 |       this._store.addData.apply(this._store, arguments);
 792 |       return this;
 793 |     },
 794 |     removeData: function() {
 795 |       this._store.removeData && this._store.removeData.apply(this._store, arguments);
 796 |       return this;
 797 |     },
 798 |     setData: function() {
 799 |       this._store.setData.apply(this._store, arguments);
 800 |       return this;
 801 |     },
 802 |     setDataMax: function() {
 803 |       this._store.setDataMax.apply(this._store, arguments);
 804 |       return this;
 805 |     },
 806 |     setDataMin: function() {
 807 |       this._store.setDataMin.apply(this._store, arguments);
 808 |       return this;
 809 |     },
 810 |     configure: function(config) {
 811 |       this._config = Util.merge(this._config, config);
 812 |       this._renderer.updateConfig(this._config);
 813 |       this._coordinator.emit('renderall', this._store._getInternalData());
 814 |       return this;
 815 |     },
 816 |     repaint: function() {
 817 |       this._coordinator.emit('renderall', this._store._getInternalData());
 818 |       return this;
 819 |     },
 820 |     getData: function() {
 821 |       return this._store.getData();
 822 |     },
 823 |     getDataURL: function() {
 824 |       return this._renderer.getDataURL();
 825 |     },
 826 |     getValueAt: function(point) {
 827 | 
 828 |       if (this._store.getValueAt) {
 829 |         return this._store.getValueAt(point);
 830 |       } else  if (this._renderer.getValueAt) {
 831 |         return this._renderer.getValueAt(point);
 832 |       } else {
 833 |         return null;
 834 |       }
 835 |     }
 836 |   };
 837 | 
 838 |   return Heatmap;
 839 | 
 840 | })();
 841 | 
 842 | 
 843 | // core
 844 | var heatmapFactory = {
 845 |   create: function(config) {
 846 |     return new Heatmap(config);
 847 |   },
 848 |   register: function(pluginKey, plugin) {
 849 |     HeatmapConfig.plugins[pluginKey] = plugin;
 850 |   }
 851 | };
 852 | 
 853 | return heatmapFactory;
 854 | 
 855 | 
 856 | });
 857 | },{}],5:[function(require,module,exports){
 858 | /*
 859 | object-assign
 860 | (c) Sindre Sorhus
 861 | @license MIT
 862 | */
 863 | 
 864 | 'use strict';
 865 | /* eslint-disable no-unused-vars */
 866 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
 867 | var hasOwnProperty = Object.prototype.hasOwnProperty;
 868 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 869 | 
 870 | function toObject(val) {
 871 | 	if (val === null || val === undefined) {
 872 | 		throw new TypeError('Object.assign cannot be called with null or undefined');
 873 | 	}
 874 | 
 875 | 	return Object(val);
 876 | }
 877 | 
 878 | function shouldUseNative() {
 879 | 	try {
 880 | 		if (!Object.assign) {
 881 | 			return false;
 882 | 		}
 883 | 
 884 | 		// Detect buggy property enumeration order in older V8 versions.
 885 | 
 886 | 		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
 887 | 		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
 888 | 		test1[5] = 'de';
 889 | 		if (Object.getOwnPropertyNames(test1)[0] === '5') {
 890 | 			return false;
 891 | 		}
 892 | 
 893 | 		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
 894 | 		var test2 = {};
 895 | 		for (var i = 0; i < 10; i++) {
 896 | 			test2['_' + String.fromCharCode(i)] = i;
 897 | 		}
 898 | 		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
 899 | 			return test2[n];
 900 | 		});
 901 | 		if (order2.join('') !== '0123456789') {
 902 | 			return false;
 903 | 		}
 904 | 
 905 | 		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
 906 | 		var test3 = {};
 907 | 		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
 908 | 			test3[letter] = letter;
 909 | 		});
 910 | 		if (Object.keys(Object.assign({}, test3)).join('') !==
 911 | 				'abcdefghijklmnopqrst') {
 912 | 			return false;
 913 | 		}
 914 | 
 915 | 		return true;
 916 | 	} catch (err) {
 917 | 		// We don't expect any of the above to throw, but better to be safe.
 918 | 		return false;
 919 | 	}
 920 | }
 921 | 
 922 | module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 923 | 	var from;
 924 | 	var to = toObject(target);
 925 | 	var symbols;
 926 | 
 927 | 	for (var s = 1; s < arguments.length; s++) {
 928 | 		from = Object(arguments[s]);
 929 | 
 930 | 		for (var key in from) {
 931 | 			if (hasOwnProperty.call(from, key)) {
 932 | 				to[key] = from[key];
 933 | 			}
 934 | 		}
 935 | 
 936 | 		if (getOwnPropertySymbols) {
 937 | 			symbols = getOwnPropertySymbols(from);
 938 | 			for (var i = 0; i < symbols.length; i++) {
 939 | 				if (propIsEnumerable.call(from, symbols[i])) {
 940 | 					to[symbols[i]] = from[symbols[i]];
 941 | 				}
 942 | 			}
 943 | 		}
 944 | 	}
 945 | 
 946 | 	return to;
 947 | };
 948 | 
 949 | },{}],6:[function(require,module,exports){
 950 | /**
 951 |  * Copyright (c) 2013-present, Facebook, Inc.
 952 |  *
 953 |  * This source code is licensed under the MIT license found in the
 954 |  * LICENSE file in the root directory of this source tree.
 955 |  */
 956 | 
 957 | 'use strict';
 958 | 
 959 | if ("production" !== 'production') {
 960 |   var invariant = require('fbjs/lib/invariant');
 961 |   var warning = require('fbjs/lib/warning');
 962 |   var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');
 963 |   var loggedTypeFailures = {};
 964 | }
 965 | 
 966 | /**
 967 |  * Assert that the values match with the type specs.
 968 |  * Error messages are memorized and will only be shown once.
 969 |  *
 970 |  * @param {object} typeSpecs Map of name to a ReactPropType
 971 |  * @param {object} values Runtime values that need to be type-checked
 972 |  * @param {string} location e.g. "prop", "context", "child context"
 973 |  * @param {string} componentName Name of the component for error messages.
 974 |  * @param {?Function} getStack Returns the component stack.
 975 |  * @private
 976 |  */
 977 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
 978 |   if ("production" !== 'production') {
 979 |     for (var typeSpecName in typeSpecs) {
 980 |       if (typeSpecs.hasOwnProperty(typeSpecName)) {
 981 |         var error;
 982 |         // Prop type validation may throw. In case they do, we don't want to
 983 |         // fail the render phase where it didn't fail before. So we log it.
 984 |         // After these have been cleaned up, we'll let them throw.
 985 |         try {
 986 |           // This is intentionally an invariant that gets caught. It's the same
 987 |           // behavior as without this statement except with a better message.
 988 |           invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'the `prop-types` package, but received `%s`.', componentName || 'React class', location, typeSpecName, typeof typeSpecs[typeSpecName]);
 989 |           error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
 990 |         } catch (ex) {
 991 |           error = ex;
 992 |         }
 993 |         warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error);
 994 |         if (error instanceof Error && !(error.message in loggedTypeFailures)) {
 995 |           // Only monitor this failure once because there tends to be a lot of the
 996 |           // same error.
 997 |           loggedTypeFailures[error.message] = true;
 998 | 
 999 |           var stack = getStack ? getStack() : '';
1000 | 
1001 |           warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : '');
1002 |         }
1003 |       }
1004 |     }
1005 |   }
1006 | }
1007 | 
1008 | module.exports = checkPropTypes;
1009 | 
1010 | },{"./lib/ReactPropTypesSecret":10,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],7:[function(require,module,exports){
1011 | /**
1012 |  * Copyright (c) 2013-present, Facebook, Inc.
1013 |  *
1014 |  * This source code is licensed under the MIT license found in the
1015 |  * LICENSE file in the root directory of this source tree.
1016 |  */
1017 | 
1018 | 'use strict';
1019 | 
1020 | var emptyFunction = require('fbjs/lib/emptyFunction');
1021 | var invariant = require('fbjs/lib/invariant');
1022 | var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');
1023 | 
1024 | module.exports = function() {
1025 |   function shim(props, propName, componentName, location, propFullName, secret) {
1026 |     if (secret === ReactPropTypesSecret) {
1027 |       // It is still safe when called from React.
1028 |       return;
1029 |     }
1030 |     invariant(
1031 |       false,
1032 |       'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
1033 |       'Use PropTypes.checkPropTypes() to call them. ' +
1034 |       'Read more at http://fb.me/use-check-prop-types'
1035 |     );
1036 |   };
1037 |   shim.isRequired = shim;
1038 |   function getShim() {
1039 |     return shim;
1040 |   };
1041 |   // Important!
1042 |   // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
1043 |   var ReactPropTypes = {
1044 |     array: shim,
1045 |     bool: shim,
1046 |     func: shim,
1047 |     number: shim,
1048 |     object: shim,
1049 |     string: shim,
1050 |     symbol: shim,
1051 | 
1052 |     any: shim,
1053 |     arrayOf: getShim,
1054 |     element: shim,
1055 |     instanceOf: getShim,
1056 |     node: shim,
1057 |     objectOf: getShim,
1058 |     oneOf: getShim,
1059 |     oneOfType: getShim,
1060 |     shape: getShim,
1061 |     exact: getShim
1062 |   };
1063 | 
1064 |   ReactPropTypes.checkPropTypes = emptyFunction;
1065 |   ReactPropTypes.PropTypes = ReactPropTypes;
1066 | 
1067 |   return ReactPropTypes;
1068 | };
1069 | 
1070 | },{"./lib/ReactPropTypesSecret":10,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2}],8:[function(require,module,exports){
1071 | /**
1072 |  * Copyright (c) 2013-present, Facebook, Inc.
1073 |  *
1074 |  * This source code is licensed under the MIT license found in the
1075 |  * LICENSE file in the root directory of this source tree.
1076 |  */
1077 | 
1078 | 'use strict';
1079 | 
1080 | var emptyFunction = require('fbjs/lib/emptyFunction');
1081 | var invariant = require('fbjs/lib/invariant');
1082 | var warning = require('fbjs/lib/warning');
1083 | var assign = require('object-assign');
1084 | 
1085 | var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');
1086 | var checkPropTypes = require('./checkPropTypes');
1087 | 
1088 | module.exports = function(isValidElement, throwOnDirectAccess) {
1089 |   /* global Symbol */
1090 |   var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
1091 |   var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
1092 | 
1093 |   /**
1094 |    * Returns the iterator method function contained on the iterable object.
1095 |    *
1096 |    * Be sure to invoke the function with the iterable as context:
1097 |    *
1098 |    *     var iteratorFn = getIteratorFn(myIterable);
1099 |    *     if (iteratorFn) {
1100 |    *       var iterator = iteratorFn.call(myIterable);
1101 |    *       ...
1102 |    *     }
1103 |    *
1104 |    * @param {?object} maybeIterable
1105 |    * @return {?function}
1106 |    */
1107 |   function getIteratorFn(maybeIterable) {
1108 |     var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
1109 |     if (typeof iteratorFn === 'function') {
1110 |       return iteratorFn;
1111 |     }
1112 |   }
1113 | 
1114 |   /**
1115 |    * Collection of methods that allow declaration and validation of props that are
1116 |    * supplied to React components. Example usage:
1117 |    *
1118 |    *   var Props = require('ReactPropTypes');
1119 |    *   var MyArticle = React.createClass({
1120 |    *     propTypes: {
1121 |    *       // An optional string prop named "description".
1122 |    *       description: Props.string,
1123 |    *
1124 |    *       // A required enum prop named "category".
1125 |    *       category: Props.oneOf(['News','Photos']).isRequired,
1126 |    *
1127 |    *       // A prop named "dialog" that requires an instance of Dialog.
1128 |    *       dialog: Props.instanceOf(Dialog).isRequired
1129 |    *     },
1130 |    *     render: function() { ... }
1131 |    *   });
1132 |    *
1133 |    * A more formal specification of how these methods are used:
1134 |    *
1135 |    *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
1136 |    *   decl := ReactPropTypes.{type}(.isRequired)?
1137 |    *
1138 |    * Each and every declaration produces a function with the same signature. This
1139 |    * allows the creation of custom validation functions. For example:
1140 |    *
1141 |    *  var MyLink = React.createClass({
1142 |    *    propTypes: {
1143 |    *      // An optional string or URI prop named "href".
1144 |    *      href: function(props, propName, componentName) {
1145 |    *        var propValue = props[propName];
1146 |    *        if (propValue != null && typeof propValue !== 'string' &&
1147 |    *            !(propValue instanceof URI)) {
1148 |    *          return new Error(
1149 |    *            'Expected a string or an URI for ' + propName + ' in ' +
1150 |    *            componentName
1151 |    *          );
1152 |    *        }
1153 |    *      }
1154 |    *    },
1155 |    *    render: function() {...}
1156 |    *  });
1157 |    *
1158 |    * @internal
1159 |    */
1160 | 
1161 |   var ANONYMOUS = '<<anonymous>>';
1162 | 
1163 |   // Important!
1164 |   // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
1165 |   var ReactPropTypes = {
1166 |     array: createPrimitiveTypeChecker('array'),
1167 |     bool: createPrimitiveTypeChecker('boolean'),
1168 |     func: createPrimitiveTypeChecker('function'),
1169 |     number: createPrimitiveTypeChecker('number'),
1170 |     object: createPrimitiveTypeChecker('object'),
1171 |     string: createPrimitiveTypeChecker('string'),
1172 |     symbol: createPrimitiveTypeChecker('symbol'),
1173 | 
1174 |     any: createAnyTypeChecker(),
1175 |     arrayOf: createArrayOfTypeChecker,
1176 |     element: createElementTypeChecker(),
1177 |     instanceOf: createInstanceTypeChecker,
1178 |     node: createNodeChecker(),
1179 |     objectOf: createObjectOfTypeChecker,
1180 |     oneOf: createEnumTypeChecker,
1181 |     oneOfType: createUnionTypeChecker,
1182 |     shape: createShapeTypeChecker,
1183 |     exact: createStrictShapeTypeChecker,
1184 |   };
1185 | 
1186 |   /**
1187 |    * inlined Object.is polyfill to avoid requiring consumers ship their own
1188 |    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
1189 |    */
1190 |   /*eslint-disable no-self-compare*/
1191 |   function is(x, y) {
1192 |     // SameValue algorithm
1193 |     if (x === y) {
1194 |       // Steps 1-5, 7-10
1195 |       // Steps 6.b-6.e: +0 != -0
1196 |       return x !== 0 || 1 / x === 1 / y;
1197 |     } else {
1198 |       // Step 6.a: NaN == NaN
1199 |       return x !== x && y !== y;
1200 |     }
1201 |   }
1202 |   /*eslint-enable no-self-compare*/
1203 | 
1204 |   /**
1205 |    * We use an Error-like object for backward compatibility as people may call
1206 |    * PropTypes directly and inspect their output. However, we don't use real
1207 |    * Errors anymore. We don't inspect their stack anyway, and creating them
1208 |    * is prohibitively expensive if they are created too often, such as what
1209 |    * happens in oneOfType() for any type before the one that matched.
1210 |    */
1211 |   function PropTypeError(message) {
1212 |     this.message = message;
1213 |     this.stack = '';
1214 |   }
1215 |   // Make `instanceof Error` still work for returned errors.
1216 |   PropTypeError.prototype = Error.prototype;
1217 | 
1218 |   function createChainableTypeChecker(validate) {
1219 |     if ("production" !== 'production') {
1220 |       var manualPropTypeCallCache = {};
1221 |       var manualPropTypeWarningCount = 0;
1222 |     }
1223 |     function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
1224 |       componentName = componentName || ANONYMOUS;
1225 |       propFullName = propFullName || propName;
1226 | 
1227 |       if (secret !== ReactPropTypesSecret) {
1228 |         if (throwOnDirectAccess) {
1229 |           // New behavior only for users of `prop-types` package
1230 |           invariant(
1231 |             false,
1232 |             'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
1233 |             'Use `PropTypes.checkPropTypes()` to call them. ' +
1234 |             'Read more at http://fb.me/use-check-prop-types'
1235 |           );
1236 |         } else if ("production" !== 'production' && typeof console !== 'undefined') {
1237 |           // Old behavior for people using React.PropTypes
1238 |           var cacheKey = componentName + ':' + propName;
1239 |           if (
1240 |             !manualPropTypeCallCache[cacheKey] &&
1241 |             // Avoid spamming the console because they are often not actionable except for lib authors
1242 |             manualPropTypeWarningCount < 3
1243 |           ) {
1244 |             warning(
1245 |               false,
1246 |               'You are manually calling a React.PropTypes validation ' +
1247 |               'function for the `%s` prop on `%s`. This is deprecated ' +
1248 |               'and will throw in the standalone `prop-types` package. ' +
1249 |               'You may be seeing this warning due to a third-party PropTypes ' +
1250 |               'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.',
1251 |               propFullName,
1252 |               componentName
1253 |             );
1254 |             manualPropTypeCallCache[cacheKey] = true;
1255 |             manualPropTypeWarningCount++;
1256 |           }
1257 |         }
1258 |       }
1259 |       if (props[propName] == null) {
1260 |         if (isRequired) {
1261 |           if (props[propName] === null) {
1262 |             return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
1263 |           }
1264 |           return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
1265 |         }
1266 |         return null;
1267 |       } else {
1268 |         return validate(props, propName, componentName, location, propFullName);
1269 |       }
1270 |     }
1271 | 
1272 |     var chainedCheckType = checkType.bind(null, false);
1273 |     chainedCheckType.isRequired = checkType.bind(null, true);
1274 | 
1275 |     return chainedCheckType;
1276 |   }
1277 | 
1278 |   function createPrimitiveTypeChecker(expectedType) {
1279 |     function validate(props, propName, componentName, location, propFullName, secret) {
1280 |       var propValue = props[propName];
1281 |       var propType = getPropType(propValue);
1282 |       if (propType !== expectedType) {
1283 |         // `propValue` being instance of, say, date/regexp, pass the 'object'
1284 |         // check, but we can offer a more precise error message here rather than
1285 |         // 'of type `object`'.
1286 |         var preciseType = getPreciseType(propValue);
1287 | 
1288 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
1289 |       }
1290 |       return null;
1291 |     }
1292 |     return createChainableTypeChecker(validate);
1293 |   }
1294 | 
1295 |   function createAnyTypeChecker() {
1296 |     return createChainableTypeChecker(emptyFunction.thatReturnsNull);
1297 |   }
1298 | 
1299 |   function createArrayOfTypeChecker(typeChecker) {
1300 |     function validate(props, propName, componentName, location, propFullName) {
1301 |       if (typeof typeChecker !== 'function') {
1302 |         return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
1303 |       }
1304 |       var propValue = props[propName];
1305 |       if (!Array.isArray(propValue)) {
1306 |         var propType = getPropType(propValue);
1307 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
1308 |       }
1309 |       for (var i = 0; i < propValue.length; i++) {
1310 |         var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
1311 |         if (error instanceof Error) {
1312 |           return error;
1313 |         }
1314 |       }
1315 |       return null;
1316 |     }
1317 |     return createChainableTypeChecker(validate);
1318 |   }
1319 | 
1320 |   function createElementTypeChecker() {
1321 |     function validate(props, propName, componentName, location, propFullName) {
1322 |       var propValue = props[propName];
1323 |       if (!isValidElement(propValue)) {
1324 |         var propType = getPropType(propValue);
1325 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
1326 |       }
1327 |       return null;
1328 |     }
1329 |     return createChainableTypeChecker(validate);
1330 |   }
1331 | 
1332 |   function createInstanceTypeChecker(expectedClass) {
1333 |     function validate(props, propName, componentName, location, propFullName) {
1334 |       if (!(props[propName] instanceof expectedClass)) {
1335 |         var expectedClassName = expectedClass.name || ANONYMOUS;
1336 |         var actualClassName = getClassName(props[propName]);
1337 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
1338 |       }
1339 |       return null;
1340 |     }
1341 |     return createChainableTypeChecker(validate);
1342 |   }
1343 | 
1344 |   function createEnumTypeChecker(expectedValues) {
1345 |     if (!Array.isArray(expectedValues)) {
1346 |       "production" !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
1347 |       return emptyFunction.thatReturnsNull;
1348 |     }
1349 | 
1350 |     function validate(props, propName, componentName, location, propFullName) {
1351 |       var propValue = props[propName];
1352 |       for (var i = 0; i < expectedValues.length; i++) {
1353 |         if (is(propValue, expectedValues[i])) {
1354 |           return null;
1355 |         }
1356 |       }
1357 | 
1358 |       var valuesString = JSON.stringify(expectedValues);
1359 |       return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
1360 |     }
1361 |     return createChainableTypeChecker(validate);
1362 |   }
1363 | 
1364 |   function createObjectOfTypeChecker(typeChecker) {
1365 |     function validate(props, propName, componentName, location, propFullName) {
1366 |       if (typeof typeChecker !== 'function') {
1367 |         return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
1368 |       }
1369 |       var propValue = props[propName];
1370 |       var propType = getPropType(propValue);
1371 |       if (propType !== 'object') {
1372 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
1373 |       }
1374 |       for (var key in propValue) {
1375 |         if (propValue.hasOwnProperty(key)) {
1376 |           var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
1377 |           if (error instanceof Error) {
1378 |             return error;
1379 |           }
1380 |         }
1381 |       }
1382 |       return null;
1383 |     }
1384 |     return createChainableTypeChecker(validate);
1385 |   }
1386 | 
1387 |   function createUnionTypeChecker(arrayOfTypeCheckers) {
1388 |     if (!Array.isArray(arrayOfTypeCheckers)) {
1389 |       "production" !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
1390 |       return emptyFunction.thatReturnsNull;
1391 |     }
1392 | 
1393 |     for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
1394 |       var checker = arrayOfTypeCheckers[i];
1395 |       if (typeof checker !== 'function') {
1396 |         warning(
1397 |           false,
1398 |           'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
1399 |           'received %s at index %s.',
1400 |           getPostfixForTypeWarning(checker),
1401 |           i
1402 |         );
1403 |         return emptyFunction.thatReturnsNull;
1404 |       }
1405 |     }
1406 | 
1407 |     function validate(props, propName, componentName, location, propFullName) {
1408 |       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
1409 |         var checker = arrayOfTypeCheckers[i];
1410 |         if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
1411 |           return null;
1412 |         }
1413 |       }
1414 | 
1415 |       return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
1416 |     }
1417 |     return createChainableTypeChecker(validate);
1418 |   }
1419 | 
1420 |   function createNodeChecker() {
1421 |     function validate(props, propName, componentName, location, propFullName) {
1422 |       if (!isNode(props[propName])) {
1423 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
1424 |       }
1425 |       return null;
1426 |     }
1427 |     return createChainableTypeChecker(validate);
1428 |   }
1429 | 
1430 |   function createShapeTypeChecker(shapeTypes) {
1431 |     function validate(props, propName, componentName, location, propFullName) {
1432 |       var propValue = props[propName];
1433 |       var propType = getPropType(propValue);
1434 |       if (propType !== 'object') {
1435 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
1436 |       }
1437 |       for (var key in shapeTypes) {
1438 |         var checker = shapeTypes[key];
1439 |         if (!checker) {
1440 |           continue;
1441 |         }
1442 |         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
1443 |         if (error) {
1444 |           return error;
1445 |         }
1446 |       }
1447 |       return null;
1448 |     }
1449 |     return createChainableTypeChecker(validate);
1450 |   }
1451 | 
1452 |   function createStrictShapeTypeChecker(shapeTypes) {
1453 |     function validate(props, propName, componentName, location, propFullName) {
1454 |       var propValue = props[propName];
1455 |       var propType = getPropType(propValue);
1456 |       if (propType !== 'object') {
1457 |         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
1458 |       }
1459 |       // We need to check all keys in case some are required but missing from
1460 |       // props.
1461 |       var allKeys = assign({}, props[propName], shapeTypes);
1462 |       for (var key in allKeys) {
1463 |         var checker = shapeTypes[key];
1464 |         if (!checker) {
1465 |           return new PropTypeError(
1466 |             'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
1467 |             '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
1468 |             '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
1469 |           );
1470 |         }
1471 |         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
1472 |         if (error) {
1473 |           return error;
1474 |         }
1475 |       }
1476 |       return null;
1477 |     }
1478 | 
1479 |     return createChainableTypeChecker(validate);
1480 |   }
1481 | 
1482 |   function isNode(propValue) {
1483 |     switch (typeof propValue) {
1484 |       case 'number':
1485 |       case 'string':
1486 |       case 'undefined':
1487 |         return true;
1488 |       case 'boolean':
1489 |         return !propValue;
1490 |       case 'object':
1491 |         if (Array.isArray(propValue)) {
1492 |           return propValue.every(isNode);
1493 |         }
1494 |         if (propValue === null || isValidElement(propValue)) {
1495 |           return true;
1496 |         }
1497 | 
1498 |         var iteratorFn = getIteratorFn(propValue);
1499 |         if (iteratorFn) {
1500 |           var iterator = iteratorFn.call(propValue);
1501 |           var step;
1502 |           if (iteratorFn !== propValue.entries) {
1503 |             while (!(step = iterator.next()).done) {
1504 |               if (!isNode(step.value)) {
1505 |                 return false;
1506 |               }
1507 |             }
1508 |           } else {
1509 |             // Iterator will provide entry [k,v] tuples rather than values.
1510 |             while (!(step = iterator.next()).done) {
1511 |               var entry = step.value;
1512 |               if (entry) {
1513 |                 if (!isNode(entry[1])) {
1514 |                   return false;
1515 |                 }
1516 |               }
1517 |             }
1518 |           }
1519 |         } else {
1520 |           return false;
1521 |         }
1522 | 
1523 |         return true;
1524 |       default:
1525 |         return false;
1526 |     }
1527 |   }
1528 | 
1529 |   function isSymbol(propType, propValue) {
1530 |     // Native Symbol.
1531 |     if (propType === 'symbol') {
1532 |       return true;
1533 |     }
1534 | 
1535 |     // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
1536 |     if (propValue['@@toStringTag'] === 'Symbol') {
1537 |       return true;
1538 |     }
1539 | 
1540 |     // Fallback for non-spec compliant Symbols which are polyfilled.
1541 |     if (typeof Symbol === 'function' && propValue instanceof Symbol) {
1542 |       return true;
1543 |     }
1544 | 
1545 |     return false;
1546 |   }
1547 | 
1548 |   // Equivalent of `typeof` but with special handling for array and regexp.
1549 |   function getPropType(propValue) {
1550 |     var propType = typeof propValue;
1551 |     if (Array.isArray(propValue)) {
1552 |       return 'array';
1553 |     }
1554 |     if (propValue instanceof RegExp) {
1555 |       // Old webkits (at least until Android 4.0) return 'function' rather than
1556 |       // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
1557 |       // passes PropTypes.object.
1558 |       return 'object';
1559 |     }
1560 |     if (isSymbol(propType, propValue)) {
1561 |       return 'symbol';
1562 |     }
1563 |     return propType;
1564 |   }
1565 | 
1566 |   // This handles more types than `getPropType`. Only used for error messages.
1567 |   // See `createPrimitiveTypeChecker`.
1568 |   function getPreciseType(propValue) {
1569 |     if (typeof propValue === 'undefined' || propValue === null) {
1570 |       return '' + propValue;
1571 |     }
1572 |     var propType = getPropType(propValue);
1573 |     if (propType === 'object') {
1574 |       if (propValue instanceof Date) {
1575 |         return 'date';
1576 |       } else if (propValue instanceof RegExp) {
1577 |         return 'regexp';
1578 |       }
1579 |     }
1580 |     return propType;
1581 |   }
1582 | 
1583 |   // Returns a string that is postfixed to a warning about an invalid type.
1584 |   // For example, "undefined" or "of type array"
1585 |   function getPostfixForTypeWarning(value) {
1586 |     var type = getPreciseType(value);
1587 |     switch (type) {
1588 |       case 'array':
1589 |       case 'object':
1590 |         return 'an ' + type;
1591 |       case 'boolean':
1592 |       case 'date':
1593 |       case 'regexp':
1594 |         return 'a ' + type;
1595 |       default:
1596 |         return type;
1597 |     }
1598 |   }
1599 | 
1600 |   // Returns class name of the object, if any.
1601 |   function getClassName(propValue) {
1602 |     if (!propValue.constructor || !propValue.constructor.name) {
1603 |       return ANONYMOUS;
1604 |     }
1605 |     return propValue.constructor.name;
1606 |   }
1607 | 
1608 |   ReactPropTypes.checkPropTypes = checkPropTypes;
1609 |   ReactPropTypes.PropTypes = ReactPropTypes;
1610 | 
1611 |   return ReactPropTypes;
1612 | };
1613 | 
1614 | },{"./checkPropTypes":6,"./lib/ReactPropTypesSecret":10,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2,"fbjs/lib/warning":3,"object-assign":5}],9:[function(require,module,exports){
1615 | /**
1616 |  * Copyright (c) 2013-present, Facebook, Inc.
1617 |  *
1618 |  * This source code is licensed under the MIT license found in the
1619 |  * LICENSE file in the root directory of this source tree.
1620 |  */
1621 | 
1622 | if ("production" !== 'production') {
1623 |   var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
1624 |     Symbol.for &&
1625 |     Symbol.for('react.element')) ||
1626 |     0xeac7;
1627 | 
1628 |   var isValidElement = function(object) {
1629 |     return typeof object === 'object' &&
1630 |       object !== null &&
1631 |       object.$$typeof === REACT_ELEMENT_TYPE;
1632 |   };
1633 | 
1634 |   // By explicitly using `prop-types` you are opting into new development behavior.
1635 |   // http://fb.me/prop-types-in-prod
1636 |   var throwOnDirectAccess = true;
1637 |   module.exports = require('./factoryWithTypeCheckers')(isValidElement, throwOnDirectAccess);
1638 | } else {
1639 |   // By explicitly using `prop-types` you are opting into new production behavior.
1640 |   // http://fb.me/prop-types-in-prod
1641 |   module.exports = require('./factoryWithThrowingShims')();
1642 | }
1643 | 
1644 | },{"./factoryWithThrowingShims":7,"./factoryWithTypeCheckers":8}],10:[function(require,module,exports){
1645 | /**
1646 |  * Copyright (c) 2013-present, Facebook, Inc.
1647 |  *
1648 |  * This source code is licensed under the MIT license found in the
1649 |  * LICENSE file in the root directory of this source tree.
1650 |  */
1651 | 
1652 | 'use strict';
1653 | 
1654 | var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
1655 | 
1656 | module.exports = ReactPropTypesSecret;
1657 | 
1658 | },{}],11:[function(require,module,exports){
1659 | (function (global){
1660 | 'use strict';
1661 | 
1662 | Object.defineProperty(exports, '__esModule', {
1663 | 	value: true
1664 | });
1665 | 
1666 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
1667 | 
1668 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
1669 | 
1670 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
1671 | 
1672 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
1673 | 
1674 | 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; }
1675 | 
1676 | var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
1677 | 
1678 | var _react2 = _interopRequireDefault(_react);
1679 | 
1680 | var _propTypes = require('prop-types');
1681 | 
1682 | var _propTypes2 = _interopRequireDefault(_propTypes);
1683 | 
1684 | var _reactDom = require('react-dom');
1685 | 
1686 | var _reactDom2 = _interopRequireDefault(_reactDom);
1687 | 
1688 | var _heatmapjsBuildHeatmapJs = require('heatmapjs/build/heatmap.js');
1689 | 
1690 | var _heatmapjsBuildHeatmapJs2 = _interopRequireDefault(_heatmapjsBuildHeatmapJs);
1691 | 
1692 | var ReactHeatmap = (function (_Component) {
1693 | 	_inherits(ReactHeatmap, _Component);
1694 | 
1695 | 	function ReactHeatmap(props) {
1696 | 		_classCallCheck(this, ReactHeatmap);
1697 | 
1698 | 		_get(Object.getPrototypeOf(ReactHeatmap.prototype), 'constructor', this).call(this, props);
1699 | 		this.setData = this.setData.bind(this);
1700 | 	}
1701 | 
1702 | 	_createClass(ReactHeatmap, [{
1703 | 		key: 'componentDidMount',
1704 | 		value: function componentDidMount() {
1705 | 			this.heatmap = _heatmapjsBuildHeatmapJs2['default'].create({
1706 | 				container: _reactDom2['default'].findDOMNode(this)
1707 | 			});
1708 | 			this.setData(this.props.max, this.props.data);
1709 | 		}
1710 | 	}, {
1711 | 		key: 'componentWillReceiveProps',
1712 | 		value: function componentWillReceiveProps(newProps) {
1713 | 			this.setData(newProps.max, newProps.data);
1714 | 		}
1715 | 	}, {
1716 | 		key: 'setData',
1717 | 		value: function setData(max, data) {
1718 | 			this.heatmap.setData({
1719 | 				max: max,
1720 | 				data: this.computeData(data)
1721 | 			});
1722 | 		}
1723 | 	}, {
1724 | 		key: 'computeData',
1725 | 		value: function computeData(data) {
1726 | 			var _this = this;
1727 | 
1728 | 			if (this.props.unit === 'percent') {
1729 | 				var _ret = (function () {
1730 | 					var container = {};
1731 | 					container.width = _reactDom2['default'].findDOMNode(_this).offsetWidth;
1732 | 					container.height = _reactDom2['default'].findDOMNode(_this).offsetHeight;
1733 | 					return {
1734 | 						v: data.map(function (values, index) {
1735 | 							return {
1736 | 								x: values.x / 100 * container.width,
1737 | 								y: values.y / 100 * container.height,
1738 | 								value: values.value
1739 | 							};
1740 | 						})
1741 | 					};
1742 | 				})();
1743 | 
1744 | 				if (typeof _ret === 'object') return _ret.v;
1745 | 			} else {
1746 | 				return data;
1747 | 			}
1748 | 		}
1749 | 	}, {
1750 | 		key: 'render',
1751 | 		value: function render() {
1752 | 			return _react2['default'].createElement('div', { style: { width: '100%', height: '100%' } });
1753 | 		}
1754 | 	}]);
1755 | 
1756 | 	return ReactHeatmap;
1757 | })(_react.Component);
1758 | 
1759 | ReactHeatmap.propTypes = {
1760 | 	max: _propTypes2['default'].number,
1761 | 	data: _propTypes2['default'].array,
1762 | 	unit: _propTypes2['default'].string
1763 | };
1764 | 
1765 | ReactHeatmap.defaultProps = {
1766 | 	max: 5,
1767 | 	data: [],
1768 | 	unit: 'percent'
1769 | };
1770 | 
1771 | exports['default'] = ReactHeatmap;
1772 | module.exports = exports['default'];
1773 | 
1774 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
1775 | },{"heatmapjs/build/heatmap.js":4,"prop-types":9,"react-dom":undefined}]},{},[11])(11)
1776 | });


--------------------------------------------------------------------------------
/dist/react-heatmap.min.js:
--------------------------------------------------------------------------------
1 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.ReactHeatmap=t()}}(function(){var t;return function e(t,n,r){function i(o,s){if(!n[o]){if(!t[o]){var u="function"==typeof require&&require;if(!s&&u)return u(o,!0);if(a)return a(o,!0);var c=new Error("Cannot find module '"+o+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return i(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var a="function"==typeof require&&require,o=0;o<r.length;o++)i(r[o]);return i}({1:[function(t,e,n){"use strict";function r(t){return function(){return t}}var i=function(){};i.thatReturns=r,i.thatReturnsFalse=r(!1),i.thatReturnsTrue=r(!0),i.thatReturnsNull=r(null),i.thatReturnsThis=function(){return this},i.thatReturnsArgument=function(t){return t},e.exports=i},{}],2:[function(t,e,n){"use strict";function r(t,e,n,r,a,o,s,u){if(i(e),!t){var c;if(void 0===e)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,a,o,s,u],f=0;c=new Error(e.replace(/%s/g,function(){return l[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var i=function(t){};e.exports=r},{}],3:[function(t,e,n){"use strict";var r=t("./emptyFunction"),i=r;e.exports=i},{"./emptyFunction":1}],4:[function(e,n,r){!function(e,r,i){"undefined"!=typeof n&&n.exports?n.exports=i():"function"==typeof t&&t.amd?t(i):r[e]=i()}("h337",this,function(){var t={defaultRadius:40,defaultRenderer:"canvas2d",defaultGradient:{.25:"rgb(0,0,255)",.55:"rgb(0,255,0)",.85:"yellow",1:"rgb(255,0,0)"},defaultMaxOpacity:1,defaultMinOpacity:0,defaultBlur:.85,defaultXField:"x",defaultYField:"y",defaultValueField:"value",plugins:{}},e=function(){var e=function(t){this._coordinator={},this._data=[],this._radi=[],this._min=0,this._max=1,this._xField=t.xField||t.defaultXField,this._yField=t.yField||t.defaultYField,this._valueField=t.valueField||t.defaultValueField,t.radius&&(this._cfgRadius=t.radius)},n=t.defaultRadius;return e.prototype={_organiseData:function(t,e){var r=t[this._xField],i=t[this._yField],a=this._radi,o=this._data,s=this._max,u=this._min,c=t[this._valueField]||1,l=t.radius||this._cfgRadius||n;return o[r]||(o[r]=[],a[r]=[]),o[r][i]?o[r][i]+=c:(o[r][i]=c,a[r][i]=l),o[r][i]>s?(e?this.setDataMax(o[r][i]):this._max=o[r][i],!1):{x:r,y:i,value:c,radius:l,min:u,max:s}},_unOrganizeData:function(){var t=[],e=this._data,n=this._radi;for(var r in e)for(var i in e[r])t.push({x:r,y:i,radius:n[r][i],value:e[r][i]});return{min:this._min,max:this._max,data:t}},_onExtremaChange:function(){this._coordinator.emit("extremachange",{min:this._min,max:this._max})},addData:function(){if(arguments[0].length>0)for(var t=arguments[0],e=t.length;e--;)this.addData.call(this,t[e]);else{var n=this._organiseData(arguments[0],!0);n&&this._coordinator.emit("renderpartial",{min:this._min,max:this._max,data:[n]})}return this},setData:function(t){var e=t.data,n=e.length;this._data=[],this._radi=[];for(var r=0;r<n;r++)this._organiseData(e[r],!1);return this._max=t.max,this._min=t.min||0,this._onExtremaChange(),this._coordinator.emit("renderall",this._getInternalData()),this},removeData:function(){},setDataMax:function(t){return this._max=t,this._onExtremaChange(),this._coordinator.emit("renderall",this._getInternalData()),this},setDataMin:function(t){return this._min=t,this._onExtremaChange(),this._coordinator.emit("renderall",this._getInternalData()),this},setCoordinator:function(t){this._coordinator=t},_getInternalData:function(){return{max:this._max,min:this._min,data:this._data,radi:this._radi}},getData:function(){return this._unOrganizeData()}},e}(),n=function(){function t(t){var n=t.container,r=this.shadowCanvas=document.createElement("canvas"),i=this.canvas=t.canvas||document.createElement("canvas"),a=(this._renderBoundaries=[1e4,1e4,0,0],getComputedStyle(t.container)||{});i.className="heatmap-canvas",this._width=i.width=r.width=+a.width.replace(/px/,""),this._height=i.height=r.height=+a.height.replace(/px/,""),this.shadowCtx=r.getContext("2d"),this.ctx=i.getContext("2d"),i.style.cssText=r.style.cssText="position:absolute;left:0;top:0;",n.style.position="relative",n.appendChild(i),this._palette=e(t),this._templates={},this._setStyles(t)}var e=function(t){var e=t.gradient||t.defaultGradient,n=document.createElement("canvas"),r=n.getContext("2d");n.width=256,n.height=1;var i=r.createLinearGradient(0,0,256,1);for(var a in e)i.addColorStop(a,e[a]);return r.fillStyle=i,r.fillRect(0,0,256,1),r.getImageData(0,0,256,1).data},n=function(t,e){var n=document.createElement("canvas"),r=n.getContext("2d"),i=t,a=t;if(n.width=n.height=2*t,1==e)r.beginPath(),r.arc(i,a,t,0,2*Math.PI,!1),r.fillStyle="rgba(0,0,0,1)",r.fill();else{var o=r.createRadialGradient(i,a,t*e,i,a,t);o.addColorStop(0,"rgba(0,0,0,1)"),o.addColorStop(1,"rgba(0,0,0,0)"),r.fillStyle=o,r.fillRect(0,0,2*t,2*t)}return n},r=function(t){for(var e=[],n=t.min,r=t.max,i=t.radi,t=t.data,a=Object.keys(t),o=a.length;o--;)for(var s=a[o],u=Object.keys(t[s]),c=u.length;c--;){var l=u[c],f=t[s][l],d=i[s][l];e.push({x:s,y:l,value:f,radius:d})}return{min:n,max:r,data:e}};return t.prototype={renderPartial:function(t){this._drawAlpha(t),this._colorize()},renderAll:function(t){this._clear(),this._drawAlpha(r(t)),this._colorize()},_updateGradient:function(t){this._palette=e(t)},updateConfig:function(t){t.gradient&&this._updateGradient(t),this._setStyles(t)},setDimensions:function(t,e){this._width=t,this._height=e,this.canvas.width=this.shadowCanvas.width=t,this.canvas.height=this.shadowCanvas.height=e},_clear:function(){this.shadowCtx.clearRect(0,0,this._width,this._height),this.ctx.clearRect(0,0,this._width,this._height)},_setStyles:function(t){this._blur=0==t.blur?0:t.blur||t.defaultBlur,t.backgroundColor&&(this.canvas.style.backgroundColor=t.backgroundColor),this._opacity=255*(t.opacity||0),this._maxOpacity=255*(t.maxOpacity||t.defaultMaxOpacity),this._minOpacity=255*(t.minOpacity||t.defaultMinOpacity),this._useGradientOpacity=!!t.useGradientOpacity},_drawAlpha:function(t){for(var e=this._min=t.min,r=this._max=t.max,t=t.data||[],i=t.length,a=1-this._blur;i--;){var o,s=t[i],u=s.x,c=s.y,l=s.radius,f=Math.min(s.value,r),d=u-l,h=c-l,p=this.shadowCtx;this._templates[l]?o=this._templates[l]:this._templates[l]=o=n(l,a),p.globalAlpha=(f-e)/(r-e),p.drawImage(o,d,h),d<this._renderBoundaries[0]&&(this._renderBoundaries[0]=d),h<this._renderBoundaries[1]&&(this._renderBoundaries[1]=h),d+2*l>this._renderBoundaries[2]&&(this._renderBoundaries[2]=d+2*l),h+2*l>this._renderBoundaries[3]&&(this._renderBoundaries[3]=h+2*l)}},_colorize:function(){var t=this._renderBoundaries[0],e=this._renderBoundaries[1],n=this._renderBoundaries[2]-t,r=this._renderBoundaries[3]-e,i=this._width,a=this._height,o=this._opacity,s=this._maxOpacity,u=this._minOpacity,c=this._useGradientOpacity;t<0&&(t=0),e<0&&(e=0),t+n>i&&(n=i-t),e+r>a&&(r=a-e);for(var l=this.shadowCtx.getImageData(t,e,n,r),f=l.data,d=f.length,h=this._palette,p=3;p<d;p+=4){var y=f[p],v=4*y;if(v){var m;m=o>0?o:y<s?y<u?u:y:s,f[p-3]=h[v],f[p-2]=h[v+1],f[p-1]=h[v+2],f[p]=c?h[v+3]:m}}l.data=f,this.ctx.putImageData(l,t,e),this._renderBoundaries=[1e3,1e3,0,0]},getValueAt:function(t){var e,n=this.shadowCtx,r=n.getImageData(t.x,t.y,1,1),i=r.data[3],a=this._max,o=this._min;return e=Math.abs(a-o)*(i/255)>>0},getDataURL:function(){return this.canvas.toDataURL()}},t}(),r=function(){var e=!1;return"canvas2d"===t.defaultRenderer&&(e=n),e}(),i={merge:function(){for(var t={},e=arguments.length,n=0;n<e;n++){var r=arguments[n];for(var i in r)t[i]=r[i]}return t}},a=function(){function n(){var n=this._config=i.merge(t,arguments[0]||{});if(this._coordinator=new a,n.plugin){var s=n.plugin;if(!t.plugins[s])throw new Error("Plugin '"+s+"' not found. Maybe it was not registered.");var u=t.plugins[s];this._renderer=new u.renderer(n),this._store=new u.store(n)}else this._renderer=new r(n),this._store=new e(n);o(this)}var a=function(){function t(){this.cStore={}}return t.prototype={on:function(t,e,n){var r=this.cStore;r[t]||(r[t]=[]),r[t].push(function(t){return e.call(n,t)})},emit:function(t,e){var n=this.cStore;if(n[t])for(var r=n[t].length,i=0;i<r;i++){var a=n[t][i];a(e)}}},t}(),o=function(t){var e=t._renderer,n=t._coordinator,r=t._store;n.on("renderpartial",e.renderPartial,e),n.on("renderall",e.renderAll,e),n.on("extremachange",function(e){t._config.onExtremaChange&&t._config.onExtremaChange({min:e.min,max:e.max,gradient:t._config.gradient||t._config.defaultGradient})}),r.setCoordinator(n)};return n.prototype={addData:function(){return this._store.addData.apply(this._store,arguments),this},removeData:function(){return this._store.removeData&&this._store.removeData.apply(this._store,arguments),this},setData:function(){return this._store.setData.apply(this._store,arguments),this},setDataMax:function(){return this._store.setDataMax.apply(this._store,arguments),this},setDataMin:function(){return this._store.setDataMin.apply(this._store,arguments),this},configure:function(t){return this._config=i.merge(this._config,t),this._renderer.updateConfig(this._config),this._coordinator.emit("renderall",this._store._getInternalData()),this},repaint:function(){return this._coordinator.emit("renderall",this._store._getInternalData()),this},getData:function(){return this._store.getData()},getDataURL:function(){return this._renderer.getDataURL()},getValueAt:function(t){return this._store.getValueAt?this._store.getValueAt(t):this._renderer.getValueAt?this._renderer.getValueAt(t):null}},n}(),o={create:function(t){return new a(t)},register:function(e,n){t.plugins[e]=n}};return o})},{}],5:[function(t,e,n){"use strict";function r(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function i(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(e).map(function(t){return e[t]});if("0123456789"!==r.join(""))return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach(function(t){i[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},i)).join("")}catch(a){return!1}}var a=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;e.exports=i()?Object.assign:function(t,e){for(var n,i,u=r(t),c=1;c<arguments.length;c++){n=Object(arguments[c]);for(var l in n)o.call(n,l)&&(u[l]=n[l]);if(a){i=a(n);for(var f=0;f<i.length;f++)s.call(n,i[f])&&(u[i[f]]=n[i[f]])}}return u}},{}],6:[function(t,e,n){"use strict";function r(t,e,n,r,i){}e.exports=r},{"./lib/ReactPropTypesSecret":10,"fbjs/lib/invariant":2,"fbjs/lib/warning":3}],7:[function(t,e,n){"use strict";var r=t("fbjs/lib/emptyFunction"),i=t("fbjs/lib/invariant"),a=t("./lib/ReactPropTypesSecret");e.exports=function(){function t(t,e,n,r,o,s){s!==a&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=r,n.PropTypes=n,n}},{"./lib/ReactPropTypesSecret":10,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2}],8:[function(t,e,n){"use strict";var r=t("fbjs/lib/emptyFunction"),i=t("fbjs/lib/invariant"),a=t("fbjs/lib/warning"),o=t("object-assign"),s=t("./lib/ReactPropTypesSecret"),u=t("./checkPropTypes");e.exports=function(t,e){function n(t){var e=t&&(C&&t[C]||t[S]);if("function"==typeof e)return e}function c(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function l(t){this.message=t,this.stack=""}function f(t){function n(n,r,a,o,u,c,f){if(o=o||k,c=c||a,f!==s)if(e)i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else;return null==r[a]?n?new l(null===r[a]?"The "+u+" `"+c+"` is marked as required "+("in `"+o+"`, but its value is `null`."):"The "+u+" `"+c+"` is marked as required in "+("`"+o+"`, but its value is `undefined`.")):null:t(r,a,o,u,c)}var r=n.bind(null,!1);return r.isRequired=n.bind(null,!0),r}function d(t){function e(e,n,r,i,a,o){var s=e[n],u=D(s);if(u!==t){var c=R(s);return new l("Invalid "+i+" `"+a+"` of type "+("`"+c+"` supplied to `"+r+"`, expected ")+("`"+t+"`."))}return null}return f(e)}function h(){return f(r.thatReturnsNull)}function p(t){function e(e,n,r,i,a){if("function"!=typeof t)return new l("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var o=e[n];if(!Array.isArray(o)){var u=D(o);return new l("Invalid "+i+" `"+a+"` of type "+("`"+u+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<o.length;c++){var f=t(o,c,r,i,a+"["+c+"]",s);if(f instanceof Error)return f}return null}return f(e)}function y(){function e(e,n,r,i,a){var o=e[n];if(!t(o)){var s=D(o);return new l("Invalid "+i+" `"+a+"` of type "+("`"+s+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return f(e)}function v(t){function e(e,n,r,i,a){if(!(e[n]instanceof t)){var o=t.name||k,s=T(e[n]);return new l("Invalid "+i+" `"+a+"` of type "+("`"+s+"` supplied to `"+r+"`, expected ")+("instance of `"+o+"`."))}return null}return f(e)}function m(t){function e(e,n,r,i,a){for(var o=e[n],s=0;s<t.length;s++)if(c(o,t[s]))return null;var u=JSON.stringify(t);return new l("Invalid "+i+" `"+a+"` of value `"+o+"` "+("supplied to `"+r+"`, expected one of "+u+"."))}return Array.isArray(t)?f(e):r.thatReturnsNull}function _(t){function e(e,n,r,i,a){if("function"!=typeof t)return new l("Property `"+a+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var o=e[n],u=D(o);if("object"!==u)return new l("Invalid "+i+" `"+a+"` of type "+("`"+u+"` supplied to `"+r+"`, expected an object."));for(var c in o)if(o.hasOwnProperty(c)){var f=t(o,c,r,i,a+"."+c,s);if(f instanceof Error)return f}return null}return f(e)}function g(t){function e(e,n,r,i,a){for(var o=0;o<t.length;o++){var u=t[o];if(null==u(e,n,r,i,a,s))return null}return new l("Invalid "+i+" `"+a+"` supplied to "+("`"+r+"`."))}if(!Array.isArray(t))return r.thatReturnsNull;for(var n=0;n<t.length;n++){var i=t[n];if("function"!=typeof i)return a(!1,"Invalid argument supplied to oneOfType. Expected an array of check functions, but received %s at index %s.",P(i),n),r.thatReturnsNull}return f(e)}function b(){function t(t,e,n,r,i){return O(t[e])?null:new l("Invalid "+r+" `"+i+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return f(t)}function x(t){function e(e,n,r,i,a){var o=e[n],u=D(o);if("object"!==u)return new l("Invalid "+i+" `"+a+"` of type `"+u+"` "+("supplied to `"+r+"`, expected `object`."));for(var c in t){var f=t[c];if(f){var d=f(o,c,r,i,a+"."+c,s);if(d)return d}}return null}return f(e)}function w(t){function e(e,n,r,i,a){var u=e[n],c=D(u);if("object"!==c)return new l("Invalid "+i+" `"+a+"` of type `"+c+"` "+("supplied to `"+r+"`, expected `object`."));var f=o({},e[n],t);for(var d in f){var h=t[d];if(!h)return new l("Invalid "+i+" `"+a+"` key `"+d+"` supplied to `"+r+"`.\nBad object: "+JSON.stringify(e[n],null,"  ")+"\nValid keys: "+JSON.stringify(Object.keys(t),null,"  "));var p=h(u,d,r,i,a+"."+d,s);if(p)return p}return null}return f(e)}function O(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(O);if(null===e||t(e))return!0;var r=n(e);if(!r)return!1;var i,a=r.call(e);if(r!==e.entries){for(;!(i=a.next()).done;)if(!O(i.value))return!1}else for(;!(i=a.next()).done;){var o=i.value;if(o&&!O(o[1]))return!1}return!0;default:return!1}}function j(t,e){return"symbol"===t||("Symbol"===e["@@toStringTag"]||"function"==typeof Symbol&&e instanceof Symbol)}function D(t){var e=typeof t;return Array.isArray(t)?"array":t instanceof RegExp?"object":j(e,t)?"symbol":e}function R(t){if("undefined"==typeof t||null===t)return""+t;var e=D(t);if("object"===e){if(t instanceof Date)return"date";if(t instanceof RegExp)return"regexp"}return e}function P(t){var e=R(t);switch(e){case"array":case"object":return"an "+e;case"boolean":case"date":case"regexp":return"a "+e;default:return e}}function T(t){return t.constructor&&t.constructor.name?t.constructor.name:k}var C="function"==typeof Symbol&&Symbol.iterator,S="@@iterator",k="<<anonymous>>",E={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:h(),arrayOf:p,element:y(),instanceOf:v,node:b(),objectOf:_,oneOf:m,oneOfType:g,shape:x,exact:w};return l.prototype=Error.prototype,E.checkPropTypes=u,E.PropTypes=E,E}},{"./checkPropTypes":6,"./lib/ReactPropTypesSecret":10,"fbjs/lib/emptyFunction":1,"fbjs/lib/invariant":2,"fbjs/lib/warning":3,"object-assign":5}],9:[function(t,e,n){e.exports=t("./factoryWithThrowingShims")()},{"./factoryWithThrowingShims":7,"./factoryWithTypeCheckers":8}],10:[function(t,e,n){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r},{}],11:[function(t,e,n){(function(r){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),u=function(t,e,n){for(var r=!0;r;){var i=t,a=e,o=n;r=!1,null===i&&(i=Function.prototype);var s=Object.getOwnPropertyDescriptor(i,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(o)}var c=Object.getPrototypeOf(i);if(null===c)return;t=c,e=a,n=o,r=!0,s=c=void 0}},c="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,l=i(c),f=t("prop-types"),d=i(f),h=t("react-dom"),p=i(h),y=t("heatmapjs/build/heatmap.js"),v=i(y),m=function(t){function e(t){a(this,e),u(Object.getPrototypeOf(e.prototype),"constructor",this).call(this,t),this.setData=this.setData.bind(this)}return o(e,t),s(e,[{key:"componentDidMount",value:function(){this.heatmap=v["default"].create({container:p["default"].findDOMNode(this)}),this.setData(this.props.max,this.props.data)}},{key:"componentWillReceiveProps",value:function(t){this.setData(t.max,t.data)}},{key:"setData",value:function(t,e){this.heatmap.setData({max:t,data:this.computeData(e)})}},{key:"computeData",value:function(t){var e=this;if("percent"!==this.props.unit)return t;var n=function(){var n={};return n.width=p["default"].findDOMNode(e).offsetWidth,n.height=p["default"].findDOMNode(e).offsetHeight,{v:t.map(function(t,e){return{x:t.x/100*n.width,y:t.y/100*n.height,value:t.value}})}}();return"object"==typeof n?n.v:void 0}},{key:"render",value:function(){return l["default"].createElement("div",{style:{width:"100%",height:"100%"}})}}]),e}(c.Component);m.propTypes={max:d["default"].number,data:d["default"].array,unit:d["default"].string},m.defaultProps={max:5,data:[],unit:"percent"},n["default"]=m,e.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"heatmapjs/build/heatmap.js":4,"prop-types":9,"react-dom":void 0}]},{},[11])(11)});


--------------------------------------------------------------------------------
/example/src/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 | 
4 | # Dependency directory
5 | node_modules
6 | 


--------------------------------------------------------------------------------
/example/src/example.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ReactDOM = require('react-dom');
 3 | var ReactHeatmap = require('react-heatmap');
 4 | 
 5 | var App = React.createClass({
 6 | 
 7 | 	getInitialState() {
 8 | 	  return {
 9 | 	  	data: []
10 | 	  }
11 | 	},
12 | 
13 | 	componentDidMount() {
14 | 
15 | 		this.setRandomData();
16 | 	},
17 | 
18 | 	randFromInterval(min, max) {
19 | 		return Math.floor(Math.random()*(max-min+1)+min);
20 | 	},
21 | 
22 | 	setRandomData() {
23 | 		let data = [];
24 | 		let dotsCount = this.randFromInterval(2, 30);
25 | 		for(let i = 0; i < dotsCount; i++) {
26 | 			let x = this.randFromInterval(1, 100);
27 | 			let y = this.randFromInterval(1, 100);
28 | 			let value = this.randFromInterval(1, 5);
29 | 			data.push({x:x,y:y,value:value});
30 | 		}
31 | 		this.setState({data : data});
32 | 	},
33 | 
34 | 	render () {
35 | 		return (
36 | 			<div style={{width: 200, height: 200}}>
37 | 				<ReactHeatmap max={5} data={this.state.data} />
38 | 				<div style={{marginTop:40}}>
39 | 					<button onClick={this.setRandomData}>Randomize data</button>
40 | 				</div>
41 | 			</div>
42 | 		);
43 | 	}
44 | });
45 | 
46 | ReactDOM.render(<App />, document.getElementById('app'));
47 | 


--------------------------------------------------------------------------------
/example/src/example.less:
--------------------------------------------------------------------------------
 1 | /* 
 2 | // Examples Stylesheet
 3 | // -------------------
 4 | */
 5 | 
 6 | body {
 7 | 	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 8 | 	font-size: 14px;
 9 | 	color: #333;
10 | 	margin: 0;
11 | 	padding: 0;
12 | }
13 | 
14 | a {
15 | 	color: #08c;
16 | 	text-decoration: none;
17 | }
18 | 
19 | a:hover {
20 | 	text-decoration: underline;
21 | }
22 | 
23 | .container {
24 | 	margin-left: auto;
25 | 	margin-right: auto;
26 | 	max-width: 720px;
27 | 	padding: 1em;
28 | }
29 | 
30 | .footer {
31 | 	margin-top: 50px;
32 | 	border-top: 1px solid #eee;
33 | 	padding: 20px 0;
34 | 	font-size: 12px;
35 | 	color: #999;
36 | }
37 | 
38 | h1, h2, h3, h4, h5, h6 {
39 | 	color: #222;
40 | 	font-weight: 100;
41 | 	margin: 0.5em 0;
42 | }
43 | 
44 | label {
45 | 	color: #999;
46 | 	display: inline-block;
47 | 	font-size: 0.85em;
48 | 	font-weight: bold;
49 | 	margin: 1em 0;
50 | 	text-transform: uppercase;
51 | }
52 | 
53 | .hint {
54 | 	margin: 15px 0;
55 | 	font-style: italic;
56 | 	color: #999;
57 | }
58 | 


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | 	<title>React Heatmap</title>
 4 | 	<link rel="stylesheet" href="example.css">
 5 | </head>
 6 | <body>
 7 | 	<div class="container">
 8 | 		<h1>React Heatmap</h1>
 9 | 		<h2><a href="https://github.com/JonathanWi/react-heatmap">View project on GitHub</a></h2>
10 | 		<!-- the example app is rendered into this div -->
11 | 		<div id="app"></div>
12 | 		<div class="hint">
13 | 			<!-- put any hints about your component example here -->
14 | 		</div>
15 | 		<div class="footer">
16 | 			Copyright &copy; 2016 Jonathan Widawski.
17 | 		</div>
18 | 	</div>
19 | 	<script src="common.js"></script>
20 | 	<script src="bundle.js"></script>
21 | 	<script src="example.js"></script>
22 | </body>
23 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var initGulpTasks = require('react-component-gulp-tasks');
 3 | 
 4 | /**
 5 |  * Tasks are added by the react-component-gulp-tasks package
 6 |  *
 7 |  * See https://github.com/JedWatson/react-component-gulp-tasks
 8 |  * for documentation.
 9 |  *
10 |  * You can also add your own additional gulp tasks if you like.
11 |  */
12 | 
13 | var taskConfig = {
14 | 
15 | 	component: {
16 | 		name: 'ReactHeatmap',
17 | 		dependencies: [
18 | 			'classnames',
19 | 			'react',
20 | 			'react-dom'
21 | 		],
22 | 		lib: 'lib'
23 | 	},
24 | 
25 | 	example: {
26 | 		src: 'example/src',
27 | 		dist: 'example/dist',
28 | 		files: [
29 | 			'index.html',
30 | 			'.gitignore'
31 | 		],
32 | 		scripts: [
33 | 			'example.js'
34 | 		],
35 | 		less: [
36 | 			'example.less'
37 | 		]
38 | 	}
39 | 
40 | };
41 | 
42 | initGulpTasks(gulp, taskConfig);
43 | 


--------------------------------------------------------------------------------
/lib/ReactHeatmap.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, '__esModule', {
  4 | 	value: true
  5 | });
  6 | 
  7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  8 | 
  9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 10 | 
 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 12 | 
 13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 14 | 
 15 | 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; }
 16 | 
 17 | var _react = require('react');
 18 | 
 19 | var _react2 = _interopRequireDefault(_react);
 20 | 
 21 | var _propTypes = require('prop-types');
 22 | 
 23 | var _propTypes2 = _interopRequireDefault(_propTypes);
 24 | 
 25 | var _reactDom = require('react-dom');
 26 | 
 27 | var _reactDom2 = _interopRequireDefault(_reactDom);
 28 | 
 29 | var _heatmapjsBuildHeatmapJs = require('heatmapjs/build/heatmap.js');
 30 | 
 31 | var _heatmapjsBuildHeatmapJs2 = _interopRequireDefault(_heatmapjsBuildHeatmapJs);
 32 | 
 33 | var ReactHeatmap = (function (_Component) {
 34 | 	_inherits(ReactHeatmap, _Component);
 35 | 
 36 | 	function ReactHeatmap(props) {
 37 | 		_classCallCheck(this, ReactHeatmap);
 38 | 
 39 | 		_get(Object.getPrototypeOf(ReactHeatmap.prototype), 'constructor', this).call(this, props);
 40 | 		this.setData = this.setData.bind(this);
 41 | 	}
 42 | 
 43 | 	_createClass(ReactHeatmap, [{
 44 | 		key: 'componentDidMount',
 45 | 		value: function componentDidMount() {
 46 | 			this.heatmap = _heatmapjsBuildHeatmapJs2['default'].create({
 47 | 				container: _reactDom2['default'].findDOMNode(this)
 48 | 			});
 49 | 			this.setData(this.props.max, this.props.data);
 50 | 		}
 51 | 	}, {
 52 | 		key: 'componentWillReceiveProps',
 53 | 		value: function componentWillReceiveProps(newProps) {
 54 | 			this.setData(newProps.max, newProps.data);
 55 | 		}
 56 | 	}, {
 57 | 		key: 'setData',
 58 | 		value: function setData(max, data) {
 59 | 			this.heatmap.setData({
 60 | 				max: max,
 61 | 				data: this.computeData(data)
 62 | 			});
 63 | 		}
 64 | 	}, {
 65 | 		key: 'computeData',
 66 | 		value: function computeData(data) {
 67 | 			var _this = this;
 68 | 
 69 | 			if (this.props.unit === 'percent') {
 70 | 				var _ret = (function () {
 71 | 					var container = {};
 72 | 					container.width = _reactDom2['default'].findDOMNode(_this).offsetWidth;
 73 | 					container.height = _reactDom2['default'].findDOMNode(_this).offsetHeight;
 74 | 					return {
 75 | 						v: data.map(function (values, index) {
 76 | 							return {
 77 | 								x: values.x / 100 * container.width,
 78 | 								y: values.y / 100 * container.height,
 79 | 								value: values.value
 80 | 							};
 81 | 						})
 82 | 					};
 83 | 				})();
 84 | 
 85 | 				if (typeof _ret === 'object') return _ret.v;
 86 | 			} else {
 87 | 				return data;
 88 | 			}
 89 | 		}
 90 | 	}, {
 91 | 		key: 'render',
 92 | 		value: function render() {
 93 | 			return _react2['default'].createElement('div', { style: { width: '100%', height: '100%' } });
 94 | 		}
 95 | 	}]);
 96 | 
 97 | 	return ReactHeatmap;
 98 | })(_react.Component);
 99 | 
100 | ReactHeatmap.propTypes = {
101 | 	max: _propTypes2['default'].number,
102 | 	data: _propTypes2['default'].array,
103 | 	unit: _propTypes2['default'].string
104 | };
105 | 
106 | ReactHeatmap.defaultProps = {
107 | 	max: 5,
108 | 	data: [],
109 | 	unit: 'percent'
110 | };
111 | 
112 | exports['default'] = ReactHeatmap;
113 | module.exports = exports['default'];


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-heatmap",
 3 |   "version": "1.0.6",
 4 |   "description": "React Heatmap",
 5 |   "main": "lib/ReactHeatmap.js",
 6 |   "author": "Jonathan Widawski",
 7 |   "homepage": "https://github.com/JonathanWi/react-heatmap",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/JonathanWi/react-heatmap.git"
11 |   },
12 |   "bugs": {
13 |     "url": "https://github.com/JonathanWi/react-heatmap/issues"
14 |   },
15 |   "dependencies": {
16 |     "classnames": "^2.1.2",
17 |     "heatmapjs": "git+https://github.com/JonathanWi/heatmap.js.git"
18 |   },
19 |   "devDependencies": {
20 |     "babel-eslint": "^4.1.3",
21 |     "eslint": "^1.6.0",
22 |     "eslint-plugin-react": "^3.5.1",
23 |     "gulp": "^3.9.0",
24 |     "react": "^0.14.6",
25 |     "react-component-gulp-tasks": "^0.7.6",
26 |     "react-dom": "^0.14.0"
27 |   },
28 |   "peerDependencies": {
29 |     "react": "^0.14.6"
30 |   },
31 |   "browserify-shim": {
32 |     "react": "global:React"
33 |   },
34 |   "scripts": {
35 |     "build": "gulp clean && NODE_ENV=production gulp build",
36 |     "examples": "gulp dev:server",
37 |     "lint": "eslint ./; true",
38 |     "publish:site": "NODE_ENV=production gulp publish:examples",
39 |     "release": "NODE_ENV=production gulp release",
40 |     "start": "gulp dev",
41 |     "test": "echo \"no tests yet\" && exit 0",
42 |     "watch": "gulp watch:lib"
43 |   },
44 |   "keywords": [
45 |     "react",
46 |     "react-component"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/src/ReactHeatmap.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import PropTypes from 'prop-types';
 3 | import ReactDOM from 'react-dom'
 4 | import Heatmap from 'heatmapjs/build/heatmap.js'
 5 | 
 6 | class ReactHeatmap extends Component {
 7 | 
 8 | 	constructor(props) {
 9 | 		super(props);
10 | 		this.setData = this.setData.bind(this);
11 | 	}
12 | 
13 | 	componentDidMount() {
14 | 		this.heatmap = Heatmap.create({
15 | 		  container: ReactDOM.findDOMNode(this)
16 | 		});
17 | 		this.setData(this.props.max, this.props.data);
18 | 	}
19 | 
20 | 	componentWillReceiveProps(newProps) {
21 | 		this.setData(newProps.max, newProps.data);
22 | 	}
23 | 
24 | 	setData(max, data) {
25 | 		this.heatmap.setData({
26 | 		  max: max,
27 | 		  data: this.computeData(data)
28 | 		});
29 | 	}
30 | 
31 | 	computeData(data) {
32 | 		if(this.props.unit === 'percent') {
33 | 			let container = {};
34 | 			container.width = ReactDOM.findDOMNode(this).offsetWidth;
35 | 			container.height = ReactDOM.findDOMNode(this).offsetHeight;
36 | 			return data.map(function(values, index) {
37 | 				return {
38 | 					x : Math.round(values.x/100 * container.width),
39 | 					y : Math.round(values.y/100 * container.height),
40 | 					value: values.value
41 | 				}
42 | 			})
43 | 		} else {
44 | 			return data;
45 | 		}
46 | 	}
47 | 
48 | 	render () {
49 | 		return( 
50 | 			<div style={{width: '100%', height: '100%'}}></div>
51 | 		);
52 | 	}
53 | }
54 | 
55 | ReactHeatmap.propTypes = {
56 | 	max : PropTypes.number,
57 | 	data : PropTypes.array,
58 | 	unit : PropTypes.string
59 | }
60 | 
61 | ReactHeatmap.defaultProps = {
62 | 	max: 5,
63 | 	data: [],
64 | 	unit: 'percent'
65 | }
66 | 
67 | export default ReactHeatmap
68 | 


--------------------------------------------------------------------------------