Update Readme and documentation.

README.md

@@ -4,6 +4,14 @@
 
 [![NPM](https://img.shields.io/npm/v/@rongmz/react-stock-heatmap.svg)](https://www.npmjs.com/package/@rongmz/react-stock-heatmap) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+
+**[Live Demo Here](https://rongmz.in/react-stock-heatmap/)**
+
+
+## Screenshot
+![Screenshot](./screenshot.png)
+
+
 ## Install
 
 ```bash
@@ -13,18 +21,38 @@ npm install --save @rongmz/react-stock-heatmap
 ## Usage
 
 ```jsx
-import React, { Component } from 'react'
+import React from 'react'
+import StockHeatmap from '@rongmz/react-stock-heatmap';
+
+class Example extends React.Component {
 
-import MyComponent from '@rongmz/react-stock-heatmap'
-import '@rongmz/react-stock-heatmap/dist/index.css'
+  heatmapRef = React.createRef();
+
+  loadDataFromFile = () => {
+    // Somehow load market depth datapoints
+    ...
+    ...
+    // set the data to StockHeatmap to render graph
+    if(heatmapRef.current !== null) {
+      heatmapRef.current.setData(data);
+    }
+  }
+
+  onLiveDataReceived = (data) => {
+    // Add more data to existing data. This is useful for live graphing.
+    if(heatmapRef.current !== null) {
+      heatmapRef.current.addData(data);
+    }
+  }
 
-class Example extends Component {
   render() {
-    return <MyComponent />
+    return <StockHeatmap ref={heatmapRef} width={800} height={600} />
   }
+
 }
 ```
 
+
 ## License
 
-MIT © [rongmz](https://github.com/rongmz)
+MIT © [Rounak Saha](https://github.com/rongmz)

example/package-lock.json

@@ -21,6 +21,17 @@
     },
     "@rongmz/react-stock-heatmap": {
       "version": "file:..",
+      "requires": {
+        "d3-array": "^2.7.1",
+        "d3-color": "^2.0.0",
+        "d3-ease": "^2.0.0",
+        "d3-format": "^2.0.0",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.2",
+        "d3-shape": "^2.0.0",
+        "d3-timer": "^2.0.0",
+        "d3-zoom": "^2.0.0"
+      },
       "dependencies": {
         "@babel/code-frame": {
           "version": "7.10.4",
@@ -11434,14 +11445,8 @@
           }
         },
         "react": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-          "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2"
-          }
+          "version": "file:https:/registry.npmjs.org/react/-/react-16.13.1.tgz",
+          "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w=="
         },
         "react-app-polyfill": {
           "version": "1.0.6",
@@ -11671,15 +11676,8 @@
           }
         },
         "react-dom": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-          "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2",
-            "scheduler": "^0.19.1"
-          }
+          "version": "file:https:/registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+          "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag=="
         },
         "react-error-overlay": {
           "version": "6.0.7",
@@ -11692,191 +11690,8 @@
           "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
         "react-scripts": {
-          "version": "3.4.3",
-          "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
-          "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==",
-          "requires": {
-            "@babel/core": "7.9.0",
-            "@svgr/webpack": "4.3.3",
-            "@typescript-eslint/eslint-plugin": "^2.10.0",
-            "@typescript-eslint/parser": "^2.10.0",
-            "babel-eslint": "10.1.0",
-            "babel-jest": "^24.9.0",
-            "babel-loader": "8.1.0",
-            "babel-plugin-named-asset-import": "^0.3.6",
-            "babel-preset-react-app": "^9.1.2",
-            "camelcase": "^5.3.1",
-            "case-sensitive-paths-webpack-plugin": "2.3.0",
-            "css-loader": "3.4.2",
-            "dotenv": "8.2.0",
-            "dotenv-expand": "5.1.0",
-            "eslint": "^6.6.0",
-            "eslint-config-react-app": "^5.2.1",
-            "eslint-loader": "3.0.3",
-            "eslint-plugin-flowtype": "4.6.0",
-            "eslint-plugin-import": "2.20.1",
-            "eslint-plugin-jsx-a11y": "6.2.3",
-            "eslint-plugin-react": "7.19.0",
-            "eslint-plugin-react-hooks": "^1.6.1",
-            "file-loader": "4.3.0",
-            "fs-extra": "^8.1.0",
-            "html-webpack-plugin": "4.0.0-beta.11",
-            "identity-obj-proxy": "3.0.0",
-            "jest": "24.9.0",
-            "jest-environment-jsdom-fourteen": "1.0.1",
-            "jest-resolve": "24.9.0",
-            "jest-watch-typeahead": "0.4.2",
-            "mini-css-extract-plugin": "0.9.0",
-            "optimize-css-assets-webpack-plugin": "5.0.3",
-            "pnp-webpack-plugin": "1.6.4",
-            "postcss-flexbugs-fixes": "4.1.0",
-            "postcss-loader": "3.0.0",
-            "postcss-normalize": "8.0.1",
-            "postcss-preset-env": "6.7.0",
-            "postcss-safe-parser": "4.0.1",
-            "react-app-polyfill": "^1.0.6",
-            "react-dev-utils": "^10.2.1",
-            "resolve": "1.15.0",
-            "resolve-url-loader": "3.1.1",
-            "sass-loader": "8.0.2",
-            "semver": "6.3.0",
-            "style-loader": "0.23.1",
-            "terser-webpack-plugin": "2.3.8",
-            "ts-pnp": "1.1.6",
-            "url-loader": "2.3.0",
-            "webpack": "4.42.0",
-            "webpack-dev-server": "3.11.0",
-            "webpack-manifest-plugin": "2.2.0",
-            "workbox-webpack-plugin": "4.3.1"
-          },
-          "dependencies": {
-            "@babel/core": {
-              "version": "7.9.0",
-              "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
-              "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
-              "requires": {
-                "@babel/code-frame": "^7.8.3",
-                "@babel/generator": "^7.9.0",
-                "@babel/helper-module-transforms": "^7.9.0",
-                "@babel/helpers": "^7.9.0",
-                "@babel/parser": "^7.9.0",
-                "@babel/template": "^7.8.6",
-                "@babel/traverse": "^7.9.0",
-                "@babel/types": "^7.9.0",
-                "convert-source-map": "^1.7.0",
-                "debug": "^4.1.0",
-                "gensync": "^1.0.0-beta.1",
-                "json5": "^2.1.2",
-                "lodash": "^4.17.13",
-                "resolve": "^1.3.2",
-                "semver": "^5.4.1",
-                "source-map": "^0.5.0"
-              },
-              "dependencies": {
-                "semver": {
-                  "version": "5.7.1",
-                  "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-                  "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-                }
-              }
-            },
-            "doctrine": {
-              "version": "1.5.0",
-              "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
-              "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-              "requires": {
-                "esutils": "^2.0.2",
-                "isarray": "^1.0.0"
-              }
-            },
-            "eslint-plugin-import": {
-              "version": "2.20.1",
-              "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz",
-              "integrity": "sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==",
-              "requires": {
-                "array-includes": "^3.0.3",
-                "array.prototype.flat": "^1.2.1",
-                "contains-path": "^0.1.0",
-                "debug": "^2.6.9",
-                "doctrine": "1.5.0",
-                "eslint-import-resolver-node": "^0.3.2",
-                "eslint-module-utils": "^2.4.1",
-                "has": "^1.0.3",
-                "minimatch": "^3.0.4",
-                "object.values": "^1.1.0",
-                "read-pkg-up": "^2.0.0",
-                "resolve": "^1.12.0"
-              },
-              "dependencies": {
-                "debug": {
-                  "version": "2.6.9",
-                  "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-                  "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-                  "requires": {
-                    "ms": "2.0.0"
-                  }
-                }
-              }
-            },
-            "eslint-plugin-react": {
-              "version": "7.19.0",
-              "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz",
-              "integrity": "sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==",
-              "requires": {
-                "array-includes": "^3.1.1",
-                "doctrine": "^2.1.0",
-                "has": "^1.0.3",
-                "jsx-ast-utils": "^2.2.3",
-                "object.entries": "^1.1.1",
-                "object.fromentries": "^2.0.2",
-                "object.values": "^1.1.1",
-                "prop-types": "^15.7.2",
-                "resolve": "^1.15.1",
-                "semver": "^6.3.0",
-                "string.prototype.matchall": "^4.0.2",
-                "xregexp": "^4.3.0"
-              },
-              "dependencies": {
-                "doctrine": {
-                  "version": "2.1.0",
-                  "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-                  "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-                  "requires": {
-                    "esutils": "^2.0.2"
-                  }
-                },
-                "resolve": {
-                  "version": "1.17.0",
-                  "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-                  "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-                  "requires": {
-                    "path-parse": "^1.0.6"
-                  }
-                }
-              }
-            },
-            "json5": {
-              "version": "2.1.3",
-              "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-              "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            },
-            "ms": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-            },
-            "resolve": {
-              "version": "1.15.0",
-              "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.0.tgz",
-              "integrity": "sha512-+hTmAldEGE80U2wJJDC1lebb5jWqvTYAfm3YZ1ckk1gBr0MnCqUKlwK1e+anaFljIl+F5tR5IoZcm4ZDA1zMQw==",
-              "requires": {
-                "path-parse": "^1.0.6"
-              }
-            }
-          }
+          "version": "file:https:/registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
+          "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA=="
         },
         "read-pkg": {
           "version": "2.0.0",
@@ -15392,6 +15207,120 @@
         }
       }
     },
+    "d3-array": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.7.1.tgz",
+      "integrity": "sha512-dYWhEvg1L2+osFsSqNHpXaPQNugLT4JfyvbLE046I2PDcgYGFYc0w24GSJwbmcjjZYOPC3PNP2S782bWUM967Q=="
+    },
+    "d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "d3-dispatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+    },
+    "d3-drag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
+      "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
+      "requires": {
+        "d3-dispatch": "1 - 2",
+        "d3-selection": "2"
+      }
+    },
+    "d3-ease": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+    },
+    "d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "requires": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "d3-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+    },
+    "d3-scale": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.2.tgz",
+      "integrity": "sha512-3Mvi5HfqPFq0nlyeFlkskGjeqrR/790pINMHc4RXKJ2E6FraTd3juaRIRZZHyMAbi3LjAMW0EH4FB1WgoGyeXg==",
+      "requires": {
+        "d3-array": "1.2.0 - 2",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "1 - 2",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+    },
+    "d3-shape": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.0.0.tgz",
+      "integrity": "sha512-djpGlA779ua+rImicYyyjnOjeubyhql1Jyn1HK0bTyawuH76UQRWXd+pftr67H6Fa8hSwetkgb/0id3agKWykw==",
+      "requires": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "d3-time": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz",
+      "integrity": "sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q=="
+    },
+    "d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "requires": {
+        "d3-time": "1 - 2"
+      }
+    },
+    "d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+    },
+    "d3-transition": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
+      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "requires": {
+        "d3-color": "1 - 2",
+        "d3-dispatch": "1 - 2",
+        "d3-ease": "1 - 2",
+        "d3-interpolate": "1 - 2",
+        "d3-timer": "1 - 2"
+      }
+    },
+    "d3-zoom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+      "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+      "requires": {
+        "d3-dispatch": "1 - 2",
+        "d3-drag": "2",
+        "d3-interpolate": "1 - 2",
+        "d3-selection": "2",
+        "d3-transition": "2"
+      }
+    },
     "react": {
       "version": "file:../node_modules/react",
       "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
@@ -17143,9 +17072,9 @@
           "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
         },
         "@types/node": {
-          "version": "14.10.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.10.1.tgz",
-          "integrity": "sha512-aYNbO+FZ/3KGeQCEkNhHFRIzBOUgc7QvcVNKXbfnhDkSfwUv91JsQQa10rDgKSTSLkXZ1UIyPe4FJJNVgw1xWQ=="
+          "version": "14.11.1",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.1.tgz",
+          "integrity": "sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw=="
         },
         "@types/parse-json": {
           "version": "4.0.0",
@@ -17499,9 +17428,9 @@
           }
         },
         "ajv": {
-          "version": "6.12.4",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
-          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "version": "6.12.5",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz",
+          "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -18524,13 +18453,13 @@
           }
         },
         "browserslist": {
-          "version": "4.14.2",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
-          "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
+          "version": "4.14.3",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz",
+          "integrity": "sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==",
           "requires": {
-            "caniuse-lite": "^1.0.30001125",
-            "electron-to-chromium": "^1.3.564",
-            "escalade": "^3.0.2",
+            "caniuse-lite": "^1.0.30001131",
+            "electron-to-chromium": "^1.3.570",
+            "escalade": "^3.1.0",
             "node-releases": "^1.1.61"
           }
         },
@@ -18680,9 +18609,9 @@
           }
         },
         "caniuse-lite": {
-          "version": "1.0.30001125",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001125.tgz",
-          "integrity": "sha512-9f+r7BW8Qli917mU3j0fUaTweT3f3vnX/Lcs+1C73V+RADmFme+Ih0Br8vONQi3X0lseOe6ZHfsZLCA8MSjxUA=="
+          "version": "1.0.30001131",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz",
+          "integrity": "sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw=="
         },
         "capture-exit": {
           "version": "2.0.0",
@@ -19853,9 +19782,9 @@
           },
           "dependencies": {
             "domelementtype": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
-              "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+              "version": "2.0.2",
+              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
+              "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA=="
             }
           }
         },
@@ -19976,9 +19905,9 @@
           "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
         },
         "electron-to-chromium": {
-          "version": "1.3.567",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.567.tgz",
-          "integrity": "sha512-1aKkw0Hha1Bw9JA5K5PT5eFXC/TXbkJvUfNSNEciPUMgSIsRJZM1hF2GUEAGZpAbgvd8En21EA+Lv820KOhvqA=="
+          "version": "1.3.570",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz",
+          "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg=="
         },
         "elliptic": {
           "version": "6.5.3",
@@ -20147,9 +20076,9 @@
           }
         },
         "escalade": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
-          "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ=="
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.0.tgz",
+          "integrity": "sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig=="
         },
         "escape-html": {
           "version": "1.0.3",
@@ -20566,11 +20495,11 @@
           "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA=="
         },
         "eslint-scope": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
-          "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
           "requires": {
-            "esrecurse": "^4.1.0",
+            "esrecurse": "^4.3.0",
             "estraverse": "^4.1.1"
           }
         },
@@ -23720,9 +23649,9 @@
           }
         },
         "node-forge": {
-          "version": "0.9.0",
-          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-          "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ=="
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+          "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
         },
         "node-int64": {
           "version": "0.4.0",
@@ -24549,9 +24478,9 @@
           "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
         },
         "postcss": {
-          "version": "7.0.32",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
-          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "version": "7.0.34",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.34.tgz",
+          "integrity": "sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==",
           "requires": {
             "chalk": "^2.4.2",
             "source-map": "^0.6.1",
@@ -26523,11 +26452,11 @@
           "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
         },
         "selfsigned": {
-          "version": "1.10.7",
-          "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-          "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+          "version": "1.10.8",
+          "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+          "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
           "requires": {
-            "node-forge": "0.9.0"
+            "node-forge": "^0.10.0"
           }
         },
         "semver": {
@@ -27017,9 +26946,9 @@
           }
         },
         "spdx-license-ids": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
-          "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q=="
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz",
+          "integrity": "sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw=="
         },
         "spdy": {
           "version": "4.0.2",

example/src/App.js

@@ -14,7 +14,7 @@ export default () => {
   // ------------ Load data -------------
   React.useEffect(() => {
     setLoading(true);
-    fetch('http://localhost:3000/20200814_1h').then(async ({ body, headers }) => {
+    fetch('20200814').then(async ({ body, headers }) => {
       const reader = body.getReader();
       // Step 2: get total length
       const contentLength = +headers.get('Content-Length');

package.json

@@ -36,7 +36,7 @@
     "test:lint": "eslint .",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && npm install && npm run build",
+    "predeploy": "cd example && npm run build",
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {

src/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './styles.module.css';
 import * as d3Scale from 'd3-scale';
 import * as d3Array from 'd3-array';
 import * as d3Color from 'd3-color';
@@ -307,12 +306,10 @@ export default class StockHeatmap extends React.Component {
     this.drawingContext.textAlign = 'left';
     this.drawingContext.fillText(`Zoom Level:  ${zoomTimeFormat(this.windowLength)}`, 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     let w = this.drawingContext.measureText(`Zoom Level:  ${zoomTimeFormat(this.windowLength)}`).width;
-    if(this.windowedData.length>0) 
-      this.drawingContext.fillText(`LTP:  ${
-        this.windowedData[this.windowedData.length-1].marketDepth.lastTradedPrice
-      }     LTQ:  ${
-        this.windowedData[this.windowedData.length-1].marketDepth.lastTradedQty
-      }`, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
+    if (this.windowedData.length > 0)
+      this.drawingContext.fillText(`LTP:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedPrice
+        }     LTQ:  ${this.windowedData[this.windowedData.length - 1].marketDepth.lastTradedQty
+        }`, 20 + w + 20, this.defaults.axisTickSize + this.defaults.xAxisTextPadding + 20);
     this.drawingContext.lineWidth = 1.2;
     this.drawingContext.strokeStyle = this.defaults.axisColor;
     this.drawingContext.stroke();
@@ -512,7 +509,7 @@ export default class StockHeatmap extends React.Component {
    * @param {any[]} data The data to set
    */
   setData = (data) => {
-    console.log('setdata called=', data);
+    // console.log('setdata called=', data);
     if (data && data.length > 0) {
       this.data = data;
       this.updateWindowedData();
@@ -575,7 +572,13 @@ export default class StockHeatmap extends React.Component {
     const { width, height } = this.props;
     // console.log('heatmap rendered', width, height, this.data);
     return (
-      <canvas ref={this.canvasRef} width={width || 300} height={height || 150} className={styles.mapCanvas}></canvas>
+      <canvas ref={this.canvasRef} width={width || 300} height={height || 150}
+        style={{
+          display: 'block',
+          width: '100%',
+          height: '100%',
+          cursor: 'crosshair',
+        }}></canvas>
     );
   }
 }