Add required packages and add a script to run dev.

package-lock.json

@@ -1649,6 +1649,11 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@rongmz/simple-event-emitter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@rongmz/simple-event-emitter/-/simple-event-emitter-1.0.3.tgz",
+      "integrity": "sha512-ct54RmaqHtTJWtRqeMG/VDxi2DwnyF8Hv0F9iBIKqymZqIAzvvLcLsnP7+x0Jji4N4oVR/Hl3v5bBZ9oKc3D2w=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
@@ -5135,6 +5140,120 @@
         "type": "^1.0.1"
       }
     },
+    "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"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",

package.json

@@ -2,9 +2,24 @@
   "name": "@rongmz/react-stock-heatmap",
   "version": "1.0.0",
   "description": "This is a react chart library for genarating "Stock Heatmap" with given market depth data. Stock Heatmap graph useful for day traders.",
-  "author": "rongmz",
+  "author": "Rounak Saha",
   "license": "MIT",
-  "repository": "rongmz/react-stock-heatmap",
+  "keywords": [
+    "Stock-Heat-map",
+    "react",
+    "chart",
+    "intraday",
+    "trading",
+    "market-depth"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rongmz/react-stock-heatmap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rongmz/react-stock-heatmap/issues"
+  },
+  "homepage": "https://github.com/rongmz/react-stock-heatmap#readme",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",
@@ -24,7 +39,8 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "microbundle-crl": "^0.13.10",
@@ -49,5 +65,15 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "@rongmz/simple-event-emitter": "^1.0.3",
+    "d3-array": "^2.7.1",
+    "d3-color": "^2.0.0",
+    "d3-format": "^2.0.0",
+    "d3-interpolate": "^2.0.1",
+    "d3-scale": "^3.2.2",
+    "d3-shape": "^2.0.0",
+    "d3-zoom": "^2.0.0"
+  }
 }

run.bat

@@ -0,0 +1,3 @@
+start npm start
+cd example
+npm start