diff --git a/client/package-lock.json b/client/package-lock.json
index 7c3e9ff..b985b37 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1577,27 +1577,27 @@
     },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
       "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
     },
     "@protobufjs/base64": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/base64/-/base64-1.1.2.tgz",
       "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
     },
     "@protobufjs/codegen": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/codegen/-/codegen-2.0.4.tgz",
       "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
     },
     "@protobufjs/eventemitter": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
       "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
     },
     "@protobufjs/fetch": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/fetch/-/fetch-1.1.0.tgz",
       "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
       "requires": {
         "@protobufjs/aspromise": "^1.1.1",
@@ -1606,27 +1606,27 @@
     },
     "@protobufjs/float": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/float/-/float-1.0.2.tgz",
       "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
     },
     "@protobufjs/inquire": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/inquire/-/inquire-1.1.0.tgz",
       "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
     },
     "@protobufjs/path": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/path/-/path-1.1.2.tgz",
       "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
     },
     "@protobufjs/pool": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/pool/-/pool-1.1.0.tgz",
       "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
     },
     "@protobufjs/utf8": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
     },
     "@svgr/babel-plugin-add-jsx-attribute": {
@@ -1975,7 +1975,7 @@
     },
     "@types/long": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@types/long/-/long-4.0.1.tgz",
       "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
     "@types/minimatch": {
@@ -2030,7 +2030,7 @@
     },
     "@types/react-select": {
       "version": "3.0.22",
-      "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.22.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@types/react-select/-/react-select-3.0.22.tgz",
       "integrity": "sha512-fqgmC979JPr/6476Pau6QnmI9zVV664R7Q92Ld1rgTn+umtUXT5X3+PO/x6O4imCZnh7XCqZcouabWAlAQJNpQ==",
       "requires": {
         "@types/react": "*",
@@ -2046,6 +2046,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-vis": {
+      "version": "1.11.6",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/@types/react-vis/-/react-vis-1.11.6.tgz",
+      "integrity": "sha512-om55tYHY7X3dPsIG0IKOi4Cu4FNjRqCXOgfVBcFNuHYLJIZ+Mzlc8uDy7YXNxLAqDOo6tabNIFeTvej2svy95g==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -4004,7 +4012,7 @@
     },
     "cli-width": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/cli-width/-/cli-width-3.0.0.tgz",
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
     },
     "cliui": {
@@ -4785,6 +4793,115 @@
         "type": "^1.0.1"
       }
     },
+    "d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
+    },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-contour": {
+      "version": "1.3.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-contour/-/d3-contour-1.3.2.tgz",
+      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
+      "requires": {
+        "d3-array": "^1.1.1"
+      }
+    },
+    "d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "d3-geo": {
+      "version": "1.12.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-geo/-/d3-geo-1.12.1.tgz",
+      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
+      "requires": {
+        "d3-array": "1"
+      }
+    },
+    "d3-hexbin": {
+      "version": "0.2.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-hexbin/-/d3-hexbin-0.2.2.tgz",
+      "integrity": "sha1-nFg32s/UcasFM3qeke8Qv8T5iDE="
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-sankey": {
+      "version": "0.7.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-sankey/-/d3-sankey-0.7.1.tgz",
+      "integrity": "sha1-0imDImj8aaf+yEgD6WwiVqYUxSE=",
+      "requires": {
+        "d3-array": "1",
+        "d3-collection": "1",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "d3-scale": {
+      "version": "1.0.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-scale/-/d3-scale-1.0.7.tgz",
+      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "1",
+        "d3-color": "1",
+        "d3-format": "1",
+        "d3-interpolate": "1",
+        "d3-time": "1",
+        "d3-time-format": "2"
+      }
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-time": {
+      "version": "1.1.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-time/-/d3-time-1.1.0.tgz",
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
+    },
+    "d3-time-format": {
+      "version": "2.3.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-time-format/-/d3-time-format-2.3.0.tgz",
+      "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
+      "requires": {
+        "d3-time": "1"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.4",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
+      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -5093,7 +5210,7 @@
     },
     "doctrine": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "requires": {
         "esutils": "^2.0.2"
@@ -5132,6 +5249,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5424,7 +5546,7 @@
     },
     "eslint": {
       "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/eslint/-/eslint-6.8.0.tgz",
       "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -5468,7 +5590,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "ansi-styles": {
@@ -5491,7 +5613,7 @@
         },
         "cross-spawn": {
           "version": "6.0.5",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/cross-spawn/-/cross-spawn-6.0.5.tgz",
           "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
           "requires": {
             "nice-try": "^1.0.4",
@@ -5503,14 +5625,14 @@
           "dependencies": {
             "semver": {
               "version": "5.7.1",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+              "resolved": "https://nexus.corp.indeed.com/repository/npm/semver/-/semver-5.7.1.tgz",
               "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
             }
           }
         },
         "eslint-utils": {
           "version": "1.4.3",
-          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/eslint-utils/-/eslint-utils-1.4.3.tgz",
           "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
           "requires": {
             "eslint-visitor-keys": "^1.1.0"
@@ -5518,7 +5640,7 @@
         },
         "globals": {
           "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/globals/-/globals-12.4.0.tgz",
           "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
           "requires": {
             "type-fest": "^0.8.1"
@@ -5535,22 +5657,22 @@
         },
         "regexpp": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/regexpp/-/regexpp-2.0.1.tgz",
           "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
         },
         "resolve-from": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/resolve-from/-/resolve-from-4.0.0.tgz",
           "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
         },
         "semver": {
           "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/semver/-/semver-6.3.0.tgz",
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         },
         "strip-ansi": {
           "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -5966,7 +6088,7 @@
     },
     "espree": {
       "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/espree/-/espree-6.2.1.tgz",
       "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
       "requires": {
         "acorn": "^7.1.1",
@@ -6422,7 +6544,7 @@
     },
     "file-entry-cache": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
       "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
       "requires": {
         "flat-cache": "^2.0.1"
@@ -6524,7 +6646,7 @@
     },
     "flat-cache": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/flat-cache/-/flat-cache-2.0.1.tgz",
       "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
       "requires": {
         "flatted": "^2.0.0",
@@ -6825,6 +6947,15 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs="
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -7062,6 +7193,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoek": {
+      "version": "4.2.1",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/hoek/-/hoek-4.2.1.tgz",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -7287,7 +7423,7 @@
     },
     "ignore": {
       "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "immer": {
@@ -7378,7 +7514,7 @@
     },
     "inquirer": {
       "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/inquirer/-/inquirer-7.3.3.tgz",
       "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
       "requires": {
         "ansi-escapes": "^4.2.1",
@@ -7398,7 +7534,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-regex/-/ansi-regex-5.0.0.tgz",
           "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "ansi-styles": {
@@ -7411,7 +7547,7 @@
         },
         "chalk": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/chalk/-/chalk-4.1.0.tgz",
           "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -7420,7 +7556,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
@@ -7428,27 +7564,27 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "emoji-regex": {
           "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/emoji-regex/-/emoji-regex-8.0.0.tgz",
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
         "string-width": {
           "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/string-width/-/string-width-4.2.0.tgz",
           "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
           "requires": {
             "emoji-regex": "^8.0.0",
@@ -7458,7 +7594,7 @@
         },
         "strip-ansi": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-ansi/-/strip-ansi-6.0.0.tgz",
           "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
             "ansi-regex": "^5.0.0"
@@ -9250,7 +9386,7 @@
     },
     "long": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/long/-/long-4.0.0.tgz",
       "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
     },
     "loose-envify": {
@@ -9493,6 +9629,14 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -11589,7 +11733,7 @@
     },
     "protobufjs": {
       "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.2.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/protobufjs/-/protobufjs-6.10.2.tgz",
       "integrity": "sha512-27yj+04uF6ya9l+qfpH187aqEzfCF4+Uit0I9ZBQVqK09hk/SQzKa2MUqUpXaVa7LOFRg1TSSr3lVxGOk6c0SQ==",
       "requires": {
         "@protobufjs/aspromise": "^1.1.2",
@@ -12088,6 +12232,23 @@
         "warning": "^4.0.3"
       }
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "^0.2.0",
+        "prop-types": "^15.5.8",
+        "raf": "^3.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "0.2.0",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        }
+      }
+    },
     "react-scripts": {
       "version": "3.4.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.4.tgz",
@@ -12413,6 +12574,31 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-vis": {
+      "version": "1.11.7",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/react-vis/-/react-vis-1.11.7.tgz",
+      "integrity": "sha512-vJqS12l/6RHeSq8DVl4PzX0j8iPgbT8H8PtgTRsimKsBNcPjPseO4RICw1FUPrwj8MPrrna34LBtzyC4ATd5Ow==",
+      "requires": {
+        "d3-array": "^1.2.0",
+        "d3-collection": "^1.0.3",
+        "d3-color": "^1.0.3",
+        "d3-contour": "^1.1.0",
+        "d3-format": "^1.2.0",
+        "d3-geo": "^1.6.4",
+        "d3-hexbin": "^0.2.2",
+        "d3-hierarchy": "^1.1.4",
+        "d3-interpolate": "^1.1.4",
+        "d3-sankey": "^0.7.1",
+        "d3-scale": "^1.0.5",
+        "d3-shape": "^1.1.0",
+        "d3-voronoi": "^1.1.2",
+        "deep-equal": "^1.0.1",
+        "global": "^4.3.1",
+        "hoek": "4.2.1",
+        "prop-types": "^15.5.8",
+        "react-motion": "^0.5.2"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -13287,7 +13473,7 @@
     },
     "slice-ansi": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/slice-ansi/-/slice-ansi-2.1.0.tgz",
       "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
       "requires": {
         "ansi-styles": "^3.2.0",
@@ -13297,7 +13483,7 @@
       "dependencies": {
         "ansi-styles": {
           "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "requires": {
             "color-convert": "^1.9.0"
@@ -13846,7 +14032,7 @@
     },
     "strip-json-comments": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
     "style-loader": {
@@ -13982,7 +14168,7 @@
     },
     "table": {
       "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/table/-/table-5.4.6.tgz",
       "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
       "requires": {
         "ajv": "^6.10.2",
@@ -13993,7 +14179,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "is-fullwidth-code-point": {
@@ -14003,7 +14189,7 @@
         },
         "string-width": {
           "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/string-width/-/string-width-3.1.0.tgz",
           "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "requires": {
             "emoji-regex": "^7.0.1",
@@ -14013,7 +14199,7 @@
         },
         "strip-ansi": {
           "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "resolved": "https://nexus.corp.indeed.com/repository/npm/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "requires": {
             "ansi-regex": "^4.1.0"
@@ -14464,7 +14650,7 @@
     },
     "typescript": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/typescript/-/typescript-4.0.3.tgz",
       "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg=="
     },
     "unicode-canonical-property-names-ecmascript": {
@@ -15532,7 +15718,7 @@
     },
     "write": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
+      "resolved": "https://nexus.corp.indeed.com/repository/npm/write/-/write-1.0.3.tgz",
       "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
       "requires": {
         "mkdirp": "^0.5.1"
diff --git a/client/package.json b/client/package.json
index 549aecd..f51934b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,6 +13,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-modal": "1.6.8",
     "@types/react-select": "3.0.22",
+    "@types/react-vis": "^1.11.6",
     "ansi-to-react": "^5.1.1",
     "humanize-duration": "^3.24.0",
     "js-base64": "^2.6.4",
@@ -27,6 +28,7 @@
     "react-select": "^3.1.0",
     "react-swipeable": "^5.5.1",
     "react-switch": "^5.0.1",
+    "react-vis": "^1.11.7",
     "swagger-parser": "^7.0.1",
     "typescript": "4.0.3",
     "xterm": "^3.14.5",
diff --git a/client/src/components/menu.tsx b/client/src/components/menu.tsx
index a065d16..698e694 100644
--- a/client/src/components/menu.tsx
+++ b/client/src/components/menu.tsx
@@ -62,6 +62,10 @@ export default class Menu extends Base<MenuProps, MenuStates> {
                         {canView(rules, api.namespace) && (
                             <MenuItem title='Namespaces' path='namespace' resource='Namespace' onClick={onClick} />
                         )}
+
+                        {canView(rules, api.namespace) && (
+                            <MenuItem title='PrometheusGraphs' path='prometheusgraphs' resource='Node' onClick={onClick} />
+                        )}
                     </Group>
 
                     {/* Workloads */}
diff --git a/client/src/components/nodeCpuChart.tsx b/client/src/components/nodeCpuChart.tsx
index f103961..4dc3535 100644
--- a/client/src/components/nodeCpuChart.tsx
+++ b/client/src/components/nodeCpuChart.tsx
@@ -1,17 +1,26 @@
 import _ from 'lodash';
 import React from 'react';
-import Chart from './chart';
+// import Chart from './chart';
 import LoadingChart from './loadingChart';
 import {parseCpu, TO_ONE_CPU} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeCpuChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeCpuTotals(items, metrics);
+    const query = {
+        queryString: 'instance:node_cpu:ratio',
+        title: 'Node CPU Usage',
+    };
 
     return (
         <div className='charts_item'>
             {totals ? (
-                <Chart used={totals.used} available={totals.available} />
+                // <Chart used={totals.used} available={totals.available} />
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
+                />
             ) : (
                 <LoadingChart />
             )}
diff --git a/client/src/components/nodeRamChart.tsx b/client/src/components/nodeRamChart.tsx
index 4896da3..2445500 100644
--- a/client/src/components/nodeRamChart.tsx
+++ b/client/src/components/nodeRamChart.tsx
@@ -1,26 +1,37 @@
 import _ from 'lodash';
 import React from 'react';
-import Chart from './chart';
+// import Chart from './chart';
 import LoadingChart from './loadingChart';
-import {parseRam, parseUnitsOfRam} from '../utils/unitHelpers';
+import {parseRam} from '../utils/unitHelpers';
+// import {parseUnitsOfRam} from '../utils/unitHelpers';
 import {Node, Metrics} from '../utils/types';
+import PrometheusGraph from '../views/prometheusgraph';
 
 export default function NodeRamChart({items, metrics}: {items?: Node[], metrics?: _.Dictionary<Metrics>}) {
     const totals = getNodeRamTotals(items, metrics);
-    const available = parseUnitsOfRam(totals && totals.available);
-    const used = parseUnitsOfRam(totals && totals.used, available && available.unit);
-    const decimals = used && used.value > 10 ? 1 : 2;
+    // const available = parseUnitsOfRam(totals && totals.available);
+    // const used = parseUnitsOfRam(totals && totals.used, available && available.unit);
+    // const decimals = used && used.value > 10 ? 1 : 2;
+
+    const query = {
+        queryString: 'instance:node_memory_utilisation:ratio',
+        title: 'Node Memory Usage',
+    };
 
     return (
         <div className='charts_item'>
             {totals ? (
-                <Chart
-                    decimals={decimals}
-                    used={used && used.value}
-                    usedSuffix={used && used.unit}
-                    available={available && available.value}
-                    availableSuffix={available && available.unit}
+                <PrometheusGraph
+                    queryString={query.queryString}
+                    title={query.title}
                 />
+                // <Chart
+                //     decimals={decimals}
+                //     used={used && used.value}
+                //     usedSuffix={used && used.unit}
+                //     available={available && available.value}
+                //     availableSuffix={available && available.unit}
+                // />
             ) : (
                 <LoadingChart />
             )}
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 0f79f10..6192ba2 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -26,6 +26,7 @@ import PersistentVolumeClaims from './views/persistentVolumeClaims';
 import PersistentVolumes from './views/persistentVolumes';
 import Pod from './views/pod';
 import Pods from './views/pods';
+import PrometheusGraphs from './views/prometheusgraphs';
 import ReplicaSet from './views/replicaSet';
 import ReplicaSets from './views/replicaSets';
 import Role from './views/role';
@@ -108,6 +109,8 @@ registerRoute('storageclass', () => <StorageClasses />);
 // @ts-ignore
 registerRoute('storageclass/:name', params => <StorageClass {...params} />);
 registerRoute('workload', () => <Workloads />);
+
+registerRoute('prometheusgraphs', () => <PrometheusGraphs />);
 // @ts-ignore
 registerRoute('workload/cronjob/:namespace/:name', params => <CronJob {...params} />);
 // @ts-ignore
diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index 86bcf7f..1028f83 100755
--- a/client/src/scss/index.scss
+++ b/client/src/scss/index.scss
@@ -12,6 +12,8 @@
 @import './elements/textarea.scss';
 @import './elements/textbox.scss';
 
+@import "~react-vis/dist/style";
+
 html, body, div, input, select {
 	box-sizing: border-box;
 }
@@ -112,6 +114,11 @@ button.titleBar_hamburger {
 	text-align: center;
 }
 
+.rv-xy-plot__inner {
+	width: 800px;
+	height: 800px;
+}
+
 @media only screen and (max-width: $media-medium) {
 	.optional_medium {
 		display: none;
diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx
new file mode 100644
index 0000000..4de2353
--- /dev/null
+++ b/client/src/views/prometheusgraph.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import {XYPlot, XAxis, YAxis, LineSeries, Crosshair, AreaSeries} from 'react-vis';
+import Base from '../components/base';
+
+
+const BASE_HTTP_URL = 'http://localhost:4654/prom';
+
+
+type Props = {
+    queryString: string;
+    title: string;
+}
+
+type State = {
+    metric: string;
+    data: Array<any>;
+    crosshairValues: any[];
+}
+
+export default class PrometheusGraph extends Base<Props, State> {
+    /**
+     * Event handler for onMouseLeave.
+     * @private
+     */
+    onMouseLeave = () => {
+        this.setState({crosshairValues: []});
+    };
+
+    /**
+     * Event handler for onNearestX.
+     * @param {Object} value Selected value.
+     * @param {index} index Index of the value in the data array.
+     * @private
+     */
+    onNearestX = (value: any, {index} : any) => {
+        this.setState((prevState => ({
+            ...prevState,
+            crosshairValues: [value],
+        })));
+    };
+
+    componentDidMount() {
+        const url = `${BASE_HTTP_URL}/api/v1/query_range`;
+        this.setState((prevState => ({
+            ...prevState,
+            data: new Array<any>(),
+            crosshairValues: [],
+        })));
+        const params = {
+            query: this.props.queryString,
+            start: (Date.now() / 1000 - 60 * 60).toString(),
+            end: (Date.now() / 1000).toString(), // One hour range
+            step: '1',
+        };
+        fetch(`${url}?${new URLSearchParams(params).toString()}`)
+            .then(result => result.json())
+            .then((json) => {
+                const jsonData = json.data;
+                const graphData : Array<any> = jsonData.result[0]?.values.map((value: any) => ({x: value[0], y: +value[1]}));
+                this.setState(prevState => ({
+                    ...prevState,
+                    data: graphData,
+                }));
+            });
+    }
+
+    render() {
+        if (!this.state || !this.state.data) {
+            return <div>
+                {/* <span style={{fontWeight: 'bold'}}>{this.props.title}</span> */}
+                <div>Pending...</div>
+            </div>;
+        }
+        return this.state.data
+            && <div>
+                {/* <div style={{fontWeight: 'bold'}}>{this.props.title}</div> */}
+                <XYPlot
+                    yPadding={60}
+                    width={150}
+                    height={150}
+                    xType="time"
+                    yDomain={[0, 1]}
+                    onMouseLeave={this.onMouseLeave}>
+                    <AreaSeries
+                        color={'#6822aa'}
+                        opacity={0.6}
+                        data={this.state.data}
+                    />
+                    <LineSeries
+                        data={this.state.data}
+                        color={'#6822aa'}
+                        onNearestX={this.onNearestX}
+                    />
+                    <Crosshair
+                        values={this.state.crosshairValues}
+                        titleFormat={
+                            d => ({title: 'Time', value: new Date(d[0].x * 1000).toLocaleTimeString()})
+                        }
+                        itemsFormat={
+                            d => [
+                                {title: 'Percent', value: `${(d[0].y * 100).toFixed(2)}%`},
+                            ]
+                        }
+                        className={'test-class-name'}
+                    />
+                    <XAxis
+                        tickFormat={function tickFormat(d) {
+                            const date = new Date(d * 1000);
+                            return date.toLocaleTimeString().slice(0, -6);
+                        }}
+                        tickPadding={5}
+                        tickTotal={3}
+                    />
+                    <YAxis
+                        tickFormat={function tickFormet(d) {
+                            return `${(d * 100).toFixed(0)}%`;
+                        }}
+                        tickLabelAngle={0}
+                        tickPadding={-5}
+                    />
+                </XYPlot>
+            </div>;
+    }
+}
diff --git a/client/src/views/prometheusgraphs.tsx b/client/src/views/prometheusgraphs.tsx
new file mode 100644
index 0000000..396d59e
--- /dev/null
+++ b/client/src/views/prometheusgraphs.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PrometheusGraph from './prometheusgraph';
+import Base from '../components/base';
+
+
+type Props = {
+
+}
+
+type State = {
+    metric: string;
+    data: Map<string, Array<Array<any>>>;
+    crosshairValues: [];
+}
+
+export default class PrometheusGraphs extends Base<Props, State> {
+    // GRAPH_QUERIES = [
+    //     ['instance:node_cpu:ratio', 'Node CPU Usage'],
+    //     ['instance:node_memory_utilisation:ratio', 'Node Memory Usage'],
+    // ];
+    GRAPH_QUERIES = [
+        {
+            queryString: 'instance:node_cpu:ratio',
+            title: 'Node CPU Usage',
+        },
+        {
+            queryString: 'instance:node_memory_utilisation:ratio',
+            title: 'Node Memory Usage',
+        },
+    ]
+
+    render() {
+        return <div>
+            {/* eslint-disable-next-line react/jsx-key */}
+            {this.GRAPH_QUERIES.map(query => <PrometheusGraph
+                queryString={query.queryString}
+                title={query.title}
+            />)}
+        </div>;
+    }
+}
diff --git a/server/index.js b/server/index.js
index c65e1d7..8af9602 100644
--- a/server/index.js
+++ b/server/index.js
@@ -173,4 +173,4 @@ async function logClusterInfo() {
     } catch (err) {
         console.error('Error getting cluster info', err);
     }
-}
+}
\ No newline at end of file