Add echart module.

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "@fortawesome/fontawesome-common-types": "^0.2.35",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@juggle/resize-observer": "^3.3.1",
         "@mempool/chartist": "^0.11.4",
         "@mempool/mempool.js": "^2.2.4",
         "@ng-bootstrap/ng-bootstrap": "^7.0.0",
@@ -32,9 +33,11 @@
         "browserify": "^17.0.0",
         "clipboard": "^2.0.4",
         "domino": "^2.1.6",
+        "echarts": "^5.1.2",
         "express": "^4.17.1",
         "lightweight-charts": "^3.3.0",
         "ngx-bootrap-multiselect": "^2.0.0",
+        "ngx-echarts": "^7.0.1",
         "ngx-infinite-scroll": "^10.0.1",
         "qrcode": "^1.4.4",
         "rxjs": "^6.6.7",
@@ -2252,6 +2255,11 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
     "node_modules/@mempool/chartist": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/@mempool/chartist/-/chartist-0.11.4.tgz",
@@ -6931,6 +6939,20 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz",
+      "integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==",
+      "dependencies": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -11916,6 +11938,18 @@
         "tslib": "^2.0.0"
       }
     },
+    "node_modules/ngx-echarts": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-7.0.1.tgz",
+      "integrity": "sha512-DDRwEssQRjjgPElEjF1emORoUEnF6OMZ20xnQBLueSHitM7XnIUErYVe9GMmm/jCtI+iPvJPEedyxMPl62nHLw==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@juggle/resize-observer": ">=3.3.1",
+        "echarts": ">=5.0.0"
+      }
+    },
     "node_modules/ngx-infinite-scroll": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz",
@@ -19926,6 +19960,19 @@
       "dependencies": {
         "tslib": "^2.0.0"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz",
+      "integrity": "sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==",
+      "dependencies": {
+        "tslib": "2.0.3"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
     }
   },
   "dependencies": {
@@ -21914,6 +21961,11 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz",
+      "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw=="
+    },
     "@mempool/chartist": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/@mempool/chartist/-/chartist-0.11.4.tgz",
@@ -25975,6 +26027,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.2.tgz",
+      "integrity": "sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -30136,6 +30204,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "ngx-echarts": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-7.0.1.tgz",
+      "integrity": "sha512-DDRwEssQRjjgPElEjF1emORoUEnF6OMZ20xnQBLueSHitM7XnIUErYVe9GMmm/jCtI+iPvJPEedyxMPl62nHLw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-infinite-scroll": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz",
@@ -36780,6 +36856,21 @@
       "requires": {
         "tslib": "^2.0.0"
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.1.tgz",
+      "integrity": "sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

frontend/package.json

@@ -67,6 +67,7 @@
     "@fortawesome/fontawesome-common-types": "^0.2.35",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@juggle/resize-observer": "^3.3.1",
     "@mempool/chartist": "^0.11.4",
     "@mempool/mempool.js": "^2.2.4",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
@@ -76,9 +77,11 @@
     "browserify": "^17.0.0",
     "clipboard": "^2.0.4",
     "domino": "^2.1.6",
+    "echarts": "^5.1.2",
     "express": "^4.17.1",
     "lightweight-charts": "^3.3.0",
     "ngx-bootrap-multiselect": "^2.0.0",
+    "ngx-echarts": "^7.0.1",
     "ngx-infinite-scroll": "^10.0.1",
     "qrcode": "^1.4.4",
     "rxjs": "^6.6.7",

frontend/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { NgxEchartsModule } from 'ngx-echarts';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
@@ -106,6 +107,9 @@ import { SponsorComponent } from './components/sponsor/sponsor.component';
     NgbTypeaheadModule,
     FontAwesomeModule,
     SharedModule,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    })
   ],
   providers: [
     ElectrsApiService,