Merge pull request #97 from Telecominfraproject/NOJIRA-replace-highcharts

WIFI-1917: Make compatible with recharts
2025-10-29 18:02:36 +00:00 · 2021-05-03 15:45:13 -04:00
parent debd0712b3 adcffb5b73
commit 77dd63ea43
3 changed files with 262 additions and 72 deletions
--- a/app/containers/Dashboard/index.js
+++ b/app/containers/Dashboard/index.js
@@ -20,8 +20,11 @@ function formatBytes(bytes, decimals = 2) {
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i] || ''}`;
 }

-function trafficLabelFormatter() {
-  return formatBytes(this.value);
+function trafficLabelFormatter(bytes) {
+  if (this?.value) {
+    return formatBytes(this.value);
+  }
+  return formatBytes(bytes);
 }

 function trafficTooltipFormatter() {
@@ -31,7 +34,7 @@ function trafficTooltipFormatter() {
 }

 const lineChartConfig = [
-  { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
+  { key: 'service', title: 'Inservice APs (24 hours)' },
  { key: 'clientDevices', title: 'Client Devices (24 hours)' },
  {
    key: 'traffic',
@@ -56,9 +59,11 @@ const Dashboard = () => {
  });

  const [lineChartData, setLineChartData] = useState({
-    inservicesAPs: {
-      key: 'Inservice APs',
-      value: [],
+    service: {
+      inservicesAPs: {
+        key: 'Inservice APs',
+        value: [],
+      },
    },
    clientDevices: {
      is2dot4GHz: {
@@ -121,22 +126,23 @@ const Dashboard = () => {
              },
            },
          }) => {
-            inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
+            const timestamp = parseInt(eventTimestamp, 10);
+            inservicesAPs.push({ timestamp, value: equipmentInServiceCount });

            let total5GHz = 0;
            total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios

-            clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
-            clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
+            clientDevices2dot4GHz.push({ timestamp, value: radios.is2dot4GHz || 0 });
+            clientDevices5GHz.push({ timestamp, value: total5GHz || 0 });

-            trafficBytesDownstreamData.push([
-              eventTimestamp,
-              (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
-            ]);
-            trafficBytesUpstreamData.push([
-              eventTimestamp,
-              (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
-            ]);
+            trafficBytesDownstreamData.push({
+              timestamp,
+              value: (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0,
+            });
+            trafficBytesUpstreamData.push({
+              timestamp,
+              value: (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0,
+            });

            totalDown += (trafficBytesDownstream > 0 && trafficBytesDownstream) || 0;
            totalUp += (trafficBytesUpstream > 0 && trafficBytesUpstream) || 0;
@@ -144,9 +150,11 @@ const Dashboard = () => {
        );

        return {
-          inservicesAPs: {
-            ...prev.inservicesAPs,
-            value: [...prev.inservicesAPs.value, ...inservicesAPs],
+          service: {
+            inservicesAPs: {
+              ...prev.service.inservicesAPs,
+              value: [...prev.service.inservicesAPs.value, ...inservicesAPs],
+            },
          },
          clientDevices: {
            is2dot4GHz: {
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "1.1.7",
+  "version": "1.1.8",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -2223,9 +2223,9 @@
      }
    },
    "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "1.1.12",
-      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-1.1.12.tgz",
-      "integrity": "sha1-pGw7ycPlaN4i6OZXK5b3paDou5s="
+      "version": "1.1.13",
+      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-1.1.13.tgz",
+      "integrity": "sha1-vAxSv7SrTSO2PWIdITaEw7y6ONk="
    },
    "@types/anymatch": {
      "version": "1.3.1",
@@ -2280,6 +2280,32 @@
        "@babel/types": "^7.3.0"
      }
    },
+    "@types/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ=="
+    },
+    "@types/d3-scale": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.2.2.tgz",
+      "integrity": "sha512-qpQe8G02tzUwt9sdWX1h8A/W0Q1+N48wMnYXVOkrzeLUkCfvzJYV9Ee3aORCS4dN4ONRLFmMvaXdziQ29XGLjQ==",
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-shape": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.0.0.tgz",
+      "integrity": "sha512-NLzD02m5PiD1KLEDjLN+MtqEcFYn4ZL9+Rqc9ZwARK1cpKZXd91zBETbe6wpBB6Ia0D0VZbpmbW3+BsGPGnCpA==",
+      "requires": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "@types/d3-time": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.0.0.tgz",
+      "integrity": "sha512-Abz8bTzy8UWDeYs9pCa3D37i29EWDjNTjemdk0ei1ApYVNqulYlGUKip/jLOpogkPSsPz/GvZCYiC7MFlEk0iQ=="
+    },
    "@types/eslint": {
      "version": "7.2.7",
      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
@@ -2403,6 +2429,11 @@
      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
      "dev": true
    },
+    "@types/resize-observer-browser": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz",
+      "integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ=="
+    },
    "@types/source-list-map": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -5105,6 +5136,11 @@
        }
      }
    },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
    "css-what": {
      "version": "3.4.2",
      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -5259,6 +5295,73 @@
        "array-find-index": "^1.0.1"
      }
    },
+    "d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "requires": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "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.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "requires": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "requires": {
+        "d3-array": "2"
+      }
+    },
+    "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"
+      }
+    },
    "damerau-levenshtein": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -5305,6 +5408,11 @@
      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
      "dev": true
    },
+    "decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
    "decode-uri-component": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -5523,6 +5631,14 @@
        "utila": "~0.4"
      }
    },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
    "dom-serializer": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6264,8 +6380,7 @@
    "eventemitter3": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
    },
    "events": {
      "version": "3.3.0",
@@ -6645,6 +6760,11 @@
      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
      "dev": true
    },
+    "fast-equals": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-2.0.1.tgz",
+      "integrity": "sha512-jIHAbyu5Txdi299DitHXr4wuvw7ajz8S4xVgShJmQOUD6TovsKzvMoHoq9G8+dO6xeKWrwH3DURT+ZDKnwjSsA=="
+    },
    "fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -7269,16 +7389,6 @@
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
      "dev": true
    },
-    "highcharts": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.2.2.tgz",
-      "integrity": "sha512-F63TXO7RxsvTcpO/KOubQZWualYpCMyCTuKtoWbt7KCsfQ3Kl7Fr6HEyyJdjkYl+XlnmnKlSRi9d3HjLK9Q0wg=="
-    },
-    "highcharts-react-official": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/highcharts-react-official/-/highcharts-react-official-3.0.0.tgz",
-      "integrity": "sha512-VefJgDY2hkT9gfppsQGrRF2g5u8d9dtfHGcx2/xqiP+PkZXCqalw9xOeKVCRvJKTOh0coiDFwvVjOvB7KaGl4A=="
-    },
    "history": {
      "version": "4.10.1",
      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@@ -8002,6 +8112,11 @@
        "side-channel": "^1.0.4"
      }
    },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
    "interpret": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -11413,16 +11528,10 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
    },
    "lodash.memoize": {
      "version": "4.1.2",
@@ -11436,6 +11545,11 @@
      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
      "dev": true
    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
    "lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -12869,8 +12983,7 @@
    "performance-now": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
    "picomatch": {
      "version": "2.2.2",
@@ -13697,6 +13810,14 @@
      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
      "dev": true
    },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -14151,23 +14272,20 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
-    "react-jsx-highcharts": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/react-jsx-highcharts/-/react-jsx-highcharts-4.2.1.tgz",
-      "integrity": "sha512-IDrHGWpL4Y+nz36cwcESf4QVYzUSasrZqMLn2fdVf5DbEv3zM9uJHrrSjONooFYGtrBolXLsuj3oKSqZI17dlA==",
-      "requires": {
-        "@babel/runtime": "^7.13.9",
-        "uuid": "^8.3.2"
-      }
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
-    "react-jsx-highstock": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/react-jsx-highstock/-/react-jsx-highstock-4.2.1.tgz",
-      "integrity": "sha512-GabfVED3HY/v8QswqV7/XAHt+bbqhqaXLG31DZPVfmlweGh+enHjwAGvOfKpbsNYyDGlmcV6UKknHCDq2rj+mg==",
+    "react-resize-detector": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-6.7.1.tgz",
+      "integrity": "sha512-54l8LWPBIRdtv0I/W/fMkmtgWX0mUIxKKAJKKimihNFueXtHuElDdXDyinQRmV7iku99AoyrSAhkCU/zjFG5+Q==",
      "requires": {
-        "@babel/runtime": "^7.13.9",
-        "lodash-es": "^4.17.21",
-        "react-jsx-highcharts": "4.2.1"
+        "@types/resize-observer-browser": "^0.1.5",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.1"
      }
    },
    "react-router": {
@@ -14209,6 +14327,16 @@
        "shallowequal": "^1.0.1"
      }
    },
+    "react-smooth": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.0.tgz",
+      "integrity": "sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==",
+      "requires": {
+        "fast-equals": "^2.0.0",
+        "raf": "^3.4.0",
+        "react-transition-group": "2.9.0"
+      }
+    },
    "react-test-renderer": {
      "version": "16.14.0",
      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
@@ -14221,6 +14349,17 @@
        "scheduler": "^0.19.1"
      }
    },
+    "react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "requires": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
    "read-pkg": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -14456,6 +14595,41 @@
      "integrity": "sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==",
      "dev": true
    },
+    "recharts": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.0.9.tgz",
+      "integrity": "sha512-JNsXE80PuF3hugUCE7JqDOMSvu5xQLxtjOaqFKKZI2pCJ1PVJzhwDv4TWk0nO4AvADbeWzYEHbg8C5Hcrh42UA==",
+      "requires": {
+        "@types/d3-scale": "^3.0.0",
+        "@types/d3-shape": "^2.0.0",
+        "classnames": "^2.2.5",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-shape": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.19",
+        "react-is": "16.10.2",
+        "react-resize-detector": "^6.6.3",
+        "react-smooth": "^2.0.0",
+        "recharts-scale": "^0.4.4",
+        "reduce-css-calc": "^2.1.8"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.10.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+          "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
+        }
+      }
+    },
+    "recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "requires": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
    "rechoir": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
@@ -14486,6 +14660,22 @@
        }
      }
    },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
    "regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16921,11 +17111,6 @@
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
      "dev": true
    },
-    "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-    },
    "v8-compile-cache": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "1.1.7",
+  "version": "1.1.8",
  "author": "ConnectUs",
  "description": "React Portal",
  "engines": {
@@ -21,12 +21,10 @@
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^1.1.12",
+    "@tip-wlan/wlan-cloud-ui-library": "^1.1.13",
    "antd": "^4.5.2",
    "apollo-upload-client": "^13.0.0",
    "graphql": "^15.5.0",
-    "highcharts": "^8.1.0",
-    "highcharts-react-official": "^3.0.0",
    "history": "^4.10.1",
    "lodash": "^4.17.15",
    "moment": "^2.26.0",
@@ -34,9 +32,8 @@
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-helmet": "^5.2.1",
-    "react-jsx-highcharts": "^4.1.0",
-    "react-jsx-highstock": "^4.1.0",
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "recharts": "^2.0.9"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",