From 427b7b9c91c44f73c90303ec442227304e71f201 Mon Sep 17 00:00:00 2001
From: Arno Kaimbacher <arno.kaimbacher@hotmail.de>
Date: Tue, 14 Sep 2021 15:22:31 +0200
Subject: [PATCH] - add bar component wit d3.js - new
 dataset-by-station-selector.component with angular/material/dialog -
 zoom.componentn: disable button at lasst zoom level

---
 notes.txt                                     |   20 +
 package-lock.json                             | 1319 ++++++++++++++++-
 package.json                                  |    4 +
 src/app/app-routing.module.ts                 |    4 +-
 src/app/app.component.html                    |    3 +
 src/app/app.module.ts                         |   23 +-
 src/app/components/bar/bar.component.css      |    0
 src/app/components/bar/bar.component.html     |    2 +
 src/app/components/bar/bar.component.ts       |   75 +
 ...dataset-by-station-selector.component.html |   48 +
 ...dataset-by-station-selector.component.scss |   13 +
 .../dataset-by-station-selector.component.ts  |  101 ++
 src/app/dashboard/dashboard.component.html    |    2 +-
 src/app/dashboard/dashboard.component.ts      |    7 +-
 src/app/map/map.component.html                |    1 -
 src/app/map/map.component.ts                  |    8 +-
 src/app/messages/messages.component.ts        |   18 +-
 src/app/services/dataset-api.service.ts       |   54 +-
 src/app/views/map-view/map-view.component.ts  |   26 +-
 .../zoom-control/zoom.component.html          |    4 +-
 .../components/zoom-control/zoom.component.ts |   29 +-
 src/shared/models/dataset.ts                  |   80 +
 src/shared/models/platform.ts                 |   10 +
 src/shared/models/station.ts                  |   39 +-
 src/styles.scss                               |    5 +
 25 files changed, 1840 insertions(+), 55 deletions(-)
 create mode 100644 src/app/components/bar/bar.component.css
 create mode 100644 src/app/components/bar/bar.component.html
 create mode 100644 src/app/components/bar/bar.component.ts
 create mode 100644 src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.html
 create mode 100644 src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.scss
 create mode 100644 src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts
 create mode 100644 src/shared/models/dataset.ts
 create mode 100644 src/shared/models/platform.ts

diff --git a/notes.txt b/notes.txt
index 6f7ed34..805015b 100644
--- a/notes.txt
+++ b/notes.txt
@@ -191,3 +191,23 @@ https://www.npmjs.com/package/@fortawesome/angular-fontawesome
 npm install @fortawesome/fontawesome-svg-core
 npm install @fortawesome/free-solid-svg-icons
 npm install @fortawesome/angular-fontawesome@latest
+
+
+
+=========================================== d3 ============================
+ 
+npm install d3 --save
+npm install @types/d3 --save-dev
+
+npx @angular/cli generate component bar --skip-tests
+CREATE src/app/bar/bar.component.html (18 bytes)
+CREATE src/app/bar/bar.component.ts (263 bytes)
+CREATE src/app/bar/bar.component.css (0 bytes)
+UPDATE src/app/app.module.ts (3039 bytes)
+
+
+
+
+========================================== dialog =========================
+npm install --save @angular/material @angular/cdk
+
diff --git a/package-lock.json b/package-lock.json
index d5b1248..f6e4bdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,10 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@angular/cdk": "^12.2.5",
         "@angular/core": "^12.1.4",
         "@angular/forms": "^12.1.4",
+        "@angular/material": "^12.2.5",
         "@angular/platform-browser": "^12.1.4",
         "@angular/platform-browser-dynamic": "^12.1.4",
         "@angular/router": "^12.2.3",
@@ -25,6 +27,7 @@
         "babel-plugin-transform-typescript-metadata": "^0.3.2",
         "bulma": "^0.9.3",
         "core-js": "^3.16.0",
+        "d3": "^7.0.1",
         "leaflet": "^1.7.1",
         "rxjs": "^7.3.0",
         "zone.js": "^0.11.4"
@@ -36,6 +39,7 @@
         "@babel/plugin-proposal-decorators": "^7.14.5",
         "@babel/preset-env": "^7.14.8",
         "@babel/preset-typescript": "^7.14.5",
+        "@types/d3": "^7.0.0",
         "angular2-template-loader": "^0.6.2",
         "babel-loader": "^8.2.2",
         "css-loader": "^6.2.0",
@@ -783,6 +787,43 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/@angular/animations": {
+      "version": "12.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-12.2.5.tgz",
+      "integrity": "sha512-a8jRimgrATq2CS95SO5yjsZo2d4FbfmN2SrPu6lZjWIdstXm4KQSJFslyxovhoUjGNu5cZgzfXTvWkXRxJYCxA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "12.2.5"
+      }
+    },
+    "node_modules/@angular/cdk": {
+      "version": "12.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.5.tgz",
+      "integrity": "sha512-sB+chDISuQ2orEgWumVkEaaQ2Mkf5SDBlNGMwgwUV5a2eSp0wDprZS+3+H8lHc533z2Y4GOh6Apklku8XQT5qw==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "12.2.5",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.5.tgz",
@@ -925,6 +966,22 @@
         "rxjs": "^6.5.3 || ^7.0.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "12.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.5.tgz",
+      "integrity": "sha512-oQMNxxDtcR3evZaOdTyzCWRCHcM6V4AGJx4pbyzEpYPo9j4iKFGtTPLGEkWtsWNFZp/g7E7gx0sU3ssjRDt7Dw==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^12.0.0 || ^13.0.0-0",
+        "@angular/cdk": "12.2.5",
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "@angular/forms": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "12.2.5",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.5.tgz",
@@ -3372,6 +3429,259 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.0.0.tgz",
+      "integrity": "sha512-7rMMuS5unvbvFCJXAkQXIxWTo2OUlmVXN5q7sfQFesuVICY55PSP6hhbUhWjTTNpfTTB3iLALsIYDFe7KUNABw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.1.tgz",
+      "integrity": "sha512-D/G7oG0czeszALrkdUiV68CDiHDxXf+M2mLVqAyKktGd12VKQQljj1sHJGBKjcK4jRH1biBd6ZPQPHpJ0mNa0w==",
+      "dev": true
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
+      "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
+      "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.0.2.tgz",
+      "integrity": "sha512-WVx6zBiz4sWlboCy7TCgjeyHpNjMsoF36yaagny1uXfbadc9f+5BeBf7U+lRmQqY3EHbGQpP8UdW8AC+cywSwQ==",
+      "dev": true
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
+      "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.0.tgz",
+      "integrity": "sha512-iGm7ZaGLq11RK3e69VeMM6Oqj2SjKUB9Qhcyd1zIcqn2uE8w9GFB445yCY46NOQO3ByaNyktX1DK+Etz7ZaX+w==",
+      "dev": true
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
+      "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
+      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==",
+      "dev": true
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
+      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
+      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
+      "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.0.2.tgz",
+      "integrity": "sha512-+krnrWOZ+aQB6v+E+jEkmkAx9HvsNAD+1LCD0vlBY3t+HwjKnsBFbpVLx6WWzDzCIuiTWdAxXMEnGnVXpB09qQ==",
+      "dev": true
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
+      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
+      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
+      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==",
+      "dev": true
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.1.tgz",
+      "integrity": "sha512-GDuXcRcR6mKcpUVMhPNttpOzHi2dP6YcDqLZYSZHgwTZ+sfCa8e9q0VEBwZomblAPNMYpVqxojnSyIEb4s/Pwg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.1.tgz",
+      "integrity": "sha512-aJ1d1SCUtERHH65bB8NNoLpUOI3z8kVcfg2BGm4rMMUwuZF4x6qnIEKjT60Vt0o7gP/a/xkRVs4D9CpDifbyRA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.0.2.tgz",
+      "integrity": "sha512-5+ButCmIfNX8id5seZ7jKj3igdcxx+S9IDBiT35fQGTLZUfkFgTv+oBH34xgeoWDKpWcMITSzBILWQtBoN5Piw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==",
+      "dev": true
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
+      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==",
+      "dev": true
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
+      "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
@@ -6319,6 +6629,395 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/d3": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.0.1.tgz",
+      "integrity": "sha512-74zonD4nAtxF9dtwFwJ3RuoHPh2D/UTFX26midBuMVH+7pRbOezuyLUIb8mbQMuYFlcUXT+xy++orCmnvMM/CA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "3",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.0.2.tgz",
+      "integrity": "sha512-nTN4OC6ufZueotlexbxBd2z8xmG1eIfhvP2m1auH2ONps0L+AZn1r0JWuzMXZ6XgOj1VBOp7GGZmEs9NUFEBbA==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-3.0.1.tgz",
+      "integrity": "sha512-0Oc4D0KyhwhM7ZL0RMnfGycLN7hxHB8CMmwZ3+H26PWAG0ozNuYG5hXSDNgmP1SgJkQMrlG6cP20HoaSbvcJTQ==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.0.1.tgz",
+      "integrity": "sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.0.1.tgz",
+      "integrity": "sha512-RlLTaofEoOrMK1JoXYIGhKTkJFI/6rFrYPgxy6QlZo2BcVc4HGTqEU0rPpzuMq5T/5XcMtAzv1XiLA3zRTfygw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+      "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.0.tgz",
+      "integrity": "sha512-foHQYKpWQcyndH1CGoHdUC4PECxTxonzwwBXGT8qu+Drb1FIc6ON6dG2P5f4hRRMkLiIKeWK7iFtdznDUrnuPQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.0.1.tgz",
+      "integrity": "sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -6669,6 +7368,14 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9189,6 +9896,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.1.tgz",
+      "integrity": "sha512-Ujwccrj9FkGqjbY3iVoxD1VV+KdZZeENx0rphrtzmRXbFvkFO88L80BL/zeSIguX/7T+y8k04xqtgWgS5vxwxw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -15398,6 +16113,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
+      "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -15430,6 +16150,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "node_modules/rxjs": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.3.0.tgz",
@@ -15461,8 +16186,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
       "version": "1.36.0",
@@ -19751,6 +20475,32 @@
         }
       }
     },
+    "@angular/animations": {
+      "version": "12.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-12.2.5.tgz",
+      "integrity": "sha512-a8jRimgrATq2CS95SO5yjsZo2d4FbfmN2SrPu6lZjWIdstXm4KQSJFslyxovhoUjGNu5cZgzfXTvWkXRxJYCxA==",
+      "peer": true,
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "12.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.5.tgz",
+      "integrity": "sha512-sB+chDISuQ2orEgWumVkEaaQ2Mkf5SDBlNGMwgwUV5a2eSp0wDprZS+3+H8lHc533z2Y4GOh6Apklku8XQT5qw==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "12.2.5",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.5.tgz",
@@ -19844,6 +20594,14 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/material": {
+      "version": "12.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.5.tgz",
+      "integrity": "sha512-oQMNxxDtcR3evZaOdTyzCWRCHcM6V4AGJx4pbyzEpYPo9j4iKFGtTPLGEkWtsWNFZp/g7E7gx0sU3ssjRDt7Dw==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "12.2.5",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.5.tgz",
@@ -21598,6 +22356,259 @@
       "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
       "dev": true
     },
+    "@types/d3": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.0.0.tgz",
+      "integrity": "sha512-7rMMuS5unvbvFCJXAkQXIxWTo2OUlmVXN5q7sfQFesuVICY55PSP6hhbUhWjTTNpfTTB3iLALsIYDFe7KUNABw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "@types/d3-array": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.1.tgz",
+      "integrity": "sha512-D/G7oG0czeszALrkdUiV68CDiHDxXf+M2mLVqAyKktGd12VKQQljj1sHJGBKjcK4jRH1biBd6ZPQPHpJ0mNa0w==",
+      "dev": true
+    },
+    "@types/d3-axis": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
+      "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-brush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
+      "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==",
+      "dev": true
+    },
+    "@types/d3-color": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.0.2.tgz",
+      "integrity": "sha512-WVx6zBiz4sWlboCy7TCgjeyHpNjMsoF36yaagny1uXfbadc9f+5BeBf7U+lRmQqY3EHbGQpP8UdW8AC+cywSwQ==",
+      "dev": true
+    },
+    "@types/d3-contour": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
+      "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "@types/d3-delaunay": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.0.tgz",
+      "integrity": "sha512-iGm7ZaGLq11RK3e69VeMM6Oqj2SjKUB9Qhcyd1zIcqn2uE8w9GFB445yCY46NOQO3ByaNyktX1DK+Etz7ZaX+w==",
+      "dev": true
+    },
+    "@types/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==",
+      "dev": true
+    },
+    "@types/d3-drag": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
+      "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-dsv": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
+      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==",
+      "dev": true
+    },
+    "@types/d3-ease": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
+      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
+      "dev": true
+    },
+    "@types/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "@types/d3-force": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
+      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==",
+      "dev": true
+    },
+    "@types/d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+      "dev": true
+    },
+    "@types/d3-geo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
+      "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
+    "@types/d3-hierarchy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.0.2.tgz",
+      "integrity": "sha512-+krnrWOZ+aQB6v+E+jEkmkAx9HvsNAD+1LCD0vlBY3t+HwjKnsBFbpVLx6WWzDzCIuiTWdAxXMEnGnVXpB09qQ==",
+      "dev": true
+    },
+    "@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-color": "*"
+      }
+    },
+    "@types/d3-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
+      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
+      "dev": true
+    },
+    "@types/d3-polygon": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
+      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==",
+      "dev": true
+    },
+    "@types/d3-quadtree": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
+      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==",
+      "dev": true
+    },
+    "@types/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==",
+      "dev": true
+    },
+    "@types/d3-scale": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.1.tgz",
+      "integrity": "sha512-GDuXcRcR6mKcpUVMhPNttpOzHi2dP6YcDqLZYSZHgwTZ+sfCa8e9q0VEBwZomblAPNMYpVqxojnSyIEb4s/Pwg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
+      "dev": true
+    },
+    "@types/d3-selection": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.1.tgz",
+      "integrity": "sha512-aJ1d1SCUtERHH65bB8NNoLpUOI3z8kVcfg2BGm4rMMUwuZF4x6qnIEKjT60Vt0o7gP/a/xkRVs4D9CpDifbyRA==",
+      "dev": true
+    },
+    "@types/d3-shape": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.0.2.tgz",
+      "integrity": "sha512-5+ButCmIfNX8id5seZ7jKj3igdcxx+S9IDBiT35fQGTLZUfkFgTv+oBH34xgeoWDKpWcMITSzBILWQtBoN5Piw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
+    "@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "dev": true
+    },
+    "@types/d3-time-format": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==",
+      "dev": true
+    },
+    "@types/d3-timer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
+      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==",
+      "dev": true
+    },
+    "@types/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-zoom": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
+      "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "@types/eslint": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
@@ -23921,6 +24932,284 @@
         "css-tree": "^1.1.2"
       }
     },
+    "d3": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.0.1.tgz",
+      "integrity": "sha512-74zonD4nAtxF9dtwFwJ3RuoHPh2D/UTFX26midBuMVH+7pRbOezuyLUIb8mbQMuYFlcUXT+xy++orCmnvMM/CA==",
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "3",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
+    "d3-array": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.0.2.tgz",
+      "integrity": "sha512-nTN4OC6ufZueotlexbxBd2z8xmG1eIfhvP2m1auH2ONps0L+AZn1r0JWuzMXZ6XgOj1VBOp7GGZmEs9NUFEBbA==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
+    },
+    "d3-contour": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-3.0.1.tgz",
+      "integrity": "sha512-0Oc4D0KyhwhM7ZL0RMnfGycLN7hxHB8CMmwZ3+H26PWAG0ozNuYG5hXSDNgmP1SgJkQMrlG6cP20HoaSbvcJTQ==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
+    "d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA=="
+    },
+    "d3-geo": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.0.1.tgz",
+      "integrity": "sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==",
+      "requires": {
+        "d3-array": "2.5.0 - 3"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.0.1.tgz",
+      "integrity": "sha512-RlLTaofEoOrMK1JoXYIGhKTkJFI/6rFrYPgxy6QlZo2BcVc4HGTqEU0rPpzuMq5T/5XcMtAzv1XiLA3zRTfygw=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+      "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
+    "d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-scale": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.0.tgz",
+      "integrity": "sha512-foHQYKpWQcyndH1CGoHdUC4PECxTxonzwwBXGT8qu+Drb1FIc6ON6dG2P5f4hRRMkLiIKeWK7iFtdznDUrnuPQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.0.1.tgz",
+      "integrity": "sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -24190,6 +25479,14 @@
         }
       }
     },
+    "delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "requires": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -26175,6 +27472,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.1.tgz",
+      "integrity": "sha512-Ujwccrj9FkGqjbY3iVoxD1VV+KdZZeENx0rphrtzmRXbFvkFO88L80BL/zeSIguX/7T+y8k04xqtgWgS5vxwxw=="
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -30769,6 +32071,11 @@
         "glob": "^7.1.3"
       }
     },
+    "robust-predicates": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
+      "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -30784,6 +32091,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "rxjs": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.3.0.tgz",
@@ -30817,8 +32129,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
       "version": "1.36.0",
diff --git a/package.json b/package.json
index 2b940af..af0cb25 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@babel/plugin-proposal-decorators": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
+    "@types/d3": "^7.0.0",
     "angular2-template-loader": "^0.6.2",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
@@ -45,8 +46,10 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "@angular/cdk": "^12.2.5",
     "@angular/core": "^12.1.4",
     "@angular/forms": "^12.1.4",
+    "@angular/material": "^12.2.5",
     "@angular/platform-browser": "^12.1.4",
     "@angular/platform-browser-dynamic": "^12.1.4",
     "@angular/router": "^12.2.3",
@@ -61,6 +64,7 @@
     "babel-plugin-transform-typescript-metadata": "^0.3.2",
     "bulma": "^0.9.3",
     "core-js": "^3.16.0",
+    "d3": "^7.0.1",
     "leaflet": "^1.7.1",
     "rxjs": "^7.3.0",
     "zone.js": "^0.11.4"
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index e372a0e..ac35431 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { BarComponent } from './components/bar/bar.component';
 
 //neu
 import { DashboardComponent } from './dashboard/dashboard.component';
@@ -12,7 +13,8 @@ const routes: Routes = [
   { path: '', redirectTo: '/map', pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
 //   { path: 'detail/:id', component: HeroDetailComponent },
-  { path: 'map', component: MapViewComponent }
+  { path: 'map', component: MapViewComponent },
+  { path: 'bar', component: BarComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bdc151c..b64f282 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -27,6 +27,9 @@
             <a class="navbar-item"  routerLink="/map"  routerLinkActive="is-active">
                 Map
             </a>
+            <a class="navbar-item"  routerLink="/bar"  routerLinkActive="is-active">
+                Bar
+            </a>
         </div>
         <div class="navbar-end">
             <!-- <div class="navbar-item">
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9f8384a..4554073 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,27 +19,30 @@ import { StationService } from "./services/station.service";
 import { MessagesComponent } from './messages/messages.component';
 import { MessageService } from "./services/message.service";
 import { MapService } from '../common/components/services/map.service';
+import { BarComponent } from './components/bar/bar.component';
 // import { LocateService } from '@helgoland/map';
 // import { MapCache } from '@helgoland/map';
 
+
 // siehe https://52north.github.io/helgoland-toolbox/additional-documentation/how-tos/integrate-a-map-component.html
 // https://52north.github.io/helgoland-toolbox/components/LocateControlComponent.html#source
 
-// import {
-//   DatasetApiInterface, ApiV3InterfaceService, SplittedDataDatasetApiInterface, DatasetApiV3Connector, HelgolandServicesConnector
-// } from '@helgoland/core';
-// import { HelgolandCoreModule } from "@helgoland/core";
-// import { HelgolandMapModule } from '@helgoland/map';
-
-// import 'core-js';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialogModule } from '@angular/material/dialog';
+import { DatasetByStationSelectorComponent } from './components/dataset-by-station-selector/dataset-by-station-selector.component';
+// import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';
 
 @NgModule({
   // declarations: The components, directives, and pipes that belong to this NgModule.
-  declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent],
+  declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent, BarComponent, DatasetByStationSelectorComponent],
+  entryComponents: [
+    DatasetByStationSelectorComponent
+  ],
   // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule],
+  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule, BrowserAnimationsModule, MatDialogModule],
   providers: [
-    MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService
+    MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService,
+ 
     // {
     //   provide: DatasetApiInterface,
     //   useClass: SplittedDataDatasetApiInterface,
diff --git a/src/app/components/bar/bar.component.css b/src/app/components/bar/bar.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/bar/bar.component.html b/src/app/components/bar/bar.component.html
new file mode 100644
index 0000000..40082c7
--- /dev/null
+++ b/src/app/components/bar/bar.component.html
@@ -0,0 +1,2 @@
+<h2>Bar Chart</h2>
+<figure id="bar"></figure>
diff --git a/src/app/components/bar/bar.component.ts b/src/app/components/bar/bar.component.ts
new file mode 100644
index 0000000..fa352f1
--- /dev/null
+++ b/src/app/components/bar/bar.component.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import * as d3 from 'd3';
+
+@Component({
+    selector: 'app-bar',
+    templateUrl: './bar.component.html',
+    styleUrls: ['./bar.component.css']
+})
+export class BarComponent implements OnInit {
+
+    private data = [
+        { "Framework": "Vue", "Stars": "166443", "Released": "2014" },
+        { "Framework": "React", "Stars": "150793", "Released": "2013" },
+        { "Framework": "Angular", "Stars": "62342", "Released": "2016" },
+        { "Framework": "Backbone", "Stars": "27647", "Released": "2010" },
+        { "Framework": "Ember", "Stars": "21471", "Released": "2011" },
+    ];
+    private svg: any;
+    private margin = 50;
+    private width = 750 - (this.margin * 2);
+    private height = 400 - (this.margin * 2);
+
+    constructor() { }
+
+    ngOnInit(): void {
+        this.createSvg();
+        this.drawBars(this.data);
+    }
+
+    private createSvg(): void {
+        this.svg = d3.select("figure#bar")
+            .append("svg")
+            .attr("width", this.width + (this.margin * 2))
+            .attr("height", this.height + (this.margin * 2))
+            .append("g")
+            .attr("transform", "translate(" + this.margin + "," + this.margin + ")");
+    }
+
+    private drawBars(data: any[]): void {
+        // Create the X-axis band scale
+        const x = d3.scaleBand()
+            .range([0, this.width])
+            .domain(data.map(d => d.Framework))
+            .padding(0.2);
+
+        // Draw the X-axis on the DOM
+        this.svg.append("g")
+            .attr("transform", "translate(0," + this.height + ")")
+            .call(d3.axisBottom(x))
+            .selectAll("text")
+            .attr("transform", "translate(-10,0)rotate(-45)")
+            .style("text-anchor", "end");
+
+        // Create the Y-axis band scale
+        const y = d3.scaleLinear()
+            .domain([0, 200000])
+            .range([this.height, 0]);
+
+        // Draw the Y-axis on the DOM
+        this.svg.append("g")
+            .call(d3.axisLeft(y));
+
+        // Create and fill the bars
+        this.svg.selectAll("bars")
+            .data(data)
+            .enter()
+            .append("rect")
+            .attr("x", (d: any) => x(d.Framework))
+            .attr("y", (d: any) => y(d.Stars))
+            .attr("width", x.bandwidth())
+            .attr("height",(d: any) => this.height - y(d.Stars))
+            .attr("fill", "#d04a35");
+    }
+
+}
diff --git a/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.html b/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.html
new file mode 100644
index 0000000..4658e62
--- /dev/null
+++ b/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.html
@@ -0,0 +1,48 @@
+<!-- <div class="item" *ngFor="let timeseries of phenomenonMatchedList" (click)="toggle(timeseries)">
+    <div *ngIf="counter">
+        {{counter}} timeseries are loading...
+    </div>
+    <div>
+        <span
+            *ngIf="timeseries.parameters.category.label && timeseries.parameters.category.label != timeseries.parameters.phenomenon.label">({{timeseries.parameters.category.label}})</span>
+        <div class="additionalInfo" *ngIf="timeseries.lastValue">
+            <span>{{timeseries.lastValue.value}}</span>
+            <span>{{timeseries.uom}}</span>
+          
+        </div>
+    </div>
+</div> -->
+
+<!-- <h1 mat-dialog-title>{{platform?.label}}</h1>
+<mat-dialog-content>
+<span>test</span>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    
+    <button mat-raised-button mat-dialog-close>close</button>
+  </mat-dialog-actions> -->
+
+
+
+
+
+  <h2 mat-dialog-title>{{platform?.label}}</h2>
+
+<mat-dialog-content >
+  
+  
+        <input matInput
+                placeholder="Course Description"
+               formControlName="description">
+    
+ 
+</mat-dialog-content>
+
+<mat-dialog-actions>
+    <button class="mat-raised-button"
+            (click)="close()">
+        Close
+    </button>
+    <button class="mat-raised-button mat-primary">Save</button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.scss b/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.scss
new file mode 100644
index 0000000..6fa1fd7
--- /dev/null
+++ b/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.scss
@@ -0,0 +1,13 @@
+:host {
+    .item {
+        &+.item {
+            padding-top: 10px;
+        }
+        &.error {
+            display: none;
+        }
+        label {
+            margin-bottom: 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts b/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts
new file mode 100644
index 0000000..ebc3ec4
--- /dev/null
+++ b/src/app/components/dataset-by-station-selector/dataset-by-station-selector.component.ts
@@ -0,0 +1,101 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GeomonPlatform } from './../../../shared/models/platform';
+import { DatasetApiService } from './../../services/dataset-api.service';
+// https://github.com/52North/helgoland-toolbox/blob/fe6af1b9df0e5d78eeec236e4690aeb7dc92119b/libs/selector/src/lib/dataset-by-station-selector/dataset-by-station-selector.component.ts#L20
+import { GeomonTimeseries, GeomonDataset } from './../../../shared/models/dataset';
+import { Station } from './../../../shared/models/station';
+
+import { MatDialogRef } from '@angular/material/dialog';
+
+// https://material.angular.io/components/dialog/overview
+// https://blog.angular-university.io/angular-material-dialog/
+// https://github.com/angular-university/angular-material-course/blob/3-dialog-finished/src/app/course-dialog/course-dialog.component.html
+
+export class SelectableDataset extends GeomonTimeseries {
+    public selected: boolean;
+}
+
+@Component({
+    selector: 'gba-dataset-by-station-selector',
+    templateUrl: './dataset-by-station-selector.component.html',
+    styleUrls: ['./dataset-by-station-selector.component.scss']
+})
+export class DatasetByStationSelectorComponent implements OnInit {
+
+    @Input()
+    public station: Station;//GeomonPlatform;
+
+    public platform: GeomonPlatform;
+
+    @Input()
+    public url: string;
+
+    @Input()
+    public defaultSelected = false;
+
+    @Input()
+    public phenomenonId: string;
+
+    @Output()
+    public onSelectionChanged: EventEmitter<SelectableDataset[]> = new EventEmitter<SelectableDataset[]>();
+
+    public phenomenonMatchedList: SelectableDataset[] = [];
+    public othersList: SelectableDataset[] = [];
+
+    public counter: number;
+
+    constructor(
+        protected datasetApiService: DatasetApiService,
+        private dialogRef: MatDialogRef<DatasetByStationSelectorComponent>,
+    ) { }
+
+    public ngOnInit() {
+        this.datasetApiService.getPlatform(this.station.id, 'https://geomon.geologie.ac.at/52n-sos-webapp/api/')
+            .subscribe((platform) => {
+                this.platform = platform;
+                this.counter = 0;
+
+                this.platform.datasetIds.forEach(id => {
+                    this.counter++;
+                    this.datasetApiService.getDataset( id, this.url, { type: 'timeseries' })
+                        .subscribe((result) => {
+                            this.prepareResult(result as SelectableDataset, this.defaultSelected);
+                            this.counter--;
+                        }, (error) => {
+                            this.counter--;
+                        });
+                });
+
+
+            });
+    }
+
+    public toggle(timeseriesDataset: SelectableDataset) {
+        timeseriesDataset.selected = !timeseriesDataset.selected;
+        this.updateSelection();
+    }
+
+    protected prepareResult(result: SelectableDataset, selection: boolean) {
+        result.selected = selection;
+        if (this.phenomenonId) {
+            if (result.parameters.phenomenon.id === this.phenomenonId) {
+                this.phenomenonMatchedList.push(result);
+            } else {
+                this.othersList.push(result);
+            }
+        } else {
+            this.phenomenonMatchedList.push(result);
+        }
+        this.updateSelection();
+    }
+
+    private updateSelection() {
+        const selection = this.phenomenonMatchedList.filter((entry) => entry.selected);
+        this.onSelectionChanged.emit(selection);
+    }
+
+    close() {
+        this.dialogRef.close();
+    }
+
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 5994ef5..1f1d394 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -2,7 +2,7 @@
   <div class="stations-menu">
     <h2>Stations</h2>
     <a class="station" *ngFor="let station of stations" routerLink="/detail/{{station.id}}">
-      {{ station.properties.label }}
+      {{ station.label }}
     </a>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index c5d65d0..0a0cbe8 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 // import { StationService } from '../services/station.service';
 import { DatasetApiService } from '../services/dataset-api.service';
 import { Station } from '../../shared/models/station';
+import { GeomonPlatform } from '../../shared/models/platform';
 
 @Component({
 	selector: 'app-dashboard',
@@ -10,7 +11,7 @@ import { Station } from '../../shared/models/station';
 })
 export class DashboardComponent implements OnInit {
 
-	public stations: Station[] = [];
+	public stations: GeomonPlatform[] = [];
 
 	constructor(private datasetApiService: DatasetApiService) { }
 
@@ -21,9 +22,9 @@ export class DashboardComponent implements OnInit {
 	getStations(): void {
 		// this.stationService.getStations()
 		// 	.subscribe(stations => this.stations = stations);
-		this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
+		this.datasetApiService.getPlatforms('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
 		.subscribe((stations) => {
-			this.stations = stations
+			this.stations = stations;
 		});
 	}
 
diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index a4d44a0..318b750 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -6,5 +6,4 @@
 <div  [attr.id]="mapId" class="map-container mapDesktop">
     <gba-locate-button [mapId]="mapId"></gba-locate-button>
     <gba-zoom-control [mapId]="mapId"></gba-zoom-control>
-
 </div>
\ No newline at end of file
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index f836890..c4d617b 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -1,11 +1,12 @@
 // https://github.com/52North/helgoland-toolbox/blob/c2c2eda20353c469a7aa4a6a118a810723af6622/libs/map/src/lib/selector/station-map-selector/station-map-selector.component.ts
-import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output } from '@angular/core';
+import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, LatLngBoundsExpression } from 'leaflet';
 import { MarkerService } from '../services/marker.service';
 import { DatasetApiService } from '../services/dataset-api.service';
 import { BaseMapComponent } from './base-map.component';
 import { PopupService } from '../services/popup.service';
 import { MapService } from '../../common/components/services/map.service';
+import { ZoomControlComponent } from '../../common/components/zoom-control/zoom.component';
 
 @Component({
 	selector: 'app-map',
@@ -17,6 +18,8 @@ export class MapComponent
 	extends BaseMapComponent
 	implements OnChanges, AfterViewInit {
 
+	@ViewChild(ZoomControlComponent) zoom:ZoomControlComponent;
+
 	
 	/**
 	* @input The serviceUrl, where the selection should be loaded.
@@ -54,6 +57,7 @@ export class MapComponent
 
 	ngAfterViewInit(): void {
 		this.initMap();
+		this.map.on("zoomend zoomlevelschange", this.zoom._updateDisabled, this.zoom);
 		// this.markerService.makeCapitalMarkers(this.map);
 		// this.markerService.makeCapitalCircleMarkers(this.map);
 		this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
@@ -74,7 +78,7 @@ export class MapComponent
 							marker.on('click', () => {
 								this.onSelected.emit(station);
 							});
-							marker.bindPopup(this.popupService.makeCapitalPopup(station.properties));
+							// marker.bindPopup(this.popupService.makeCapitalPopup(station.properties));
 						}
 					});
 					this.markerFeatureGroup.addTo(this.map);
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index ec34e0c..cd39dc4 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -2,19 +2,19 @@ import { Component, OnInit } from '@angular/core';
 import { MessageService } from '../services/message.service';
 
 @Component({
-  selector: 'app-messages',
-  templateUrl: './messages.component.html',
-  styleUrls: ['./messages.component.css']
+    selector: 'app-messages',
+    templateUrl: './messages.component.html',
+    styleUrls: ['./messages.component.css']
 })
 export class MessagesComponent implements OnInit {
 
-  public messageService;
+    public messageService;
 
-  constructor(messageService: MessageService) {
-    this.messageService = messageService;
-  }
+    constructor(messageService: MessageService) {
+        this.messageService = messageService;
+    }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }
diff --git a/src/app/services/dataset-api.service.ts b/src/app/services/dataset-api.service.ts
index 34e5bac..bcc37f3 100644
--- a/src/app/services/dataset-api.service.ts
+++ b/src/app/services/dataset-api.service.ts
@@ -11,7 +11,10 @@ import { HttpService } from './http.service';
 import { HttpRequestOptions } from '../../shared/models/http-requests';
 import { HttpParams } from '@angular/common/http';
 import { MessageService } from './message.service';
+import { GeomonPlatform } from '../../shared/models/platform';
+import { Dataset, GeomonTimeseries } from '../../shared/models/dataset';
 
+import {  map } from 'rxjs/operators';
 
 // @Injectable({
 //   providedIn: 'root'
@@ -33,12 +36,60 @@ export class DatasetApiService {
     }
 
     public getStations(apiUrl: string, params?: any, options?: HttpRequestOptions): Observable<Station[]> {
-        const url = this.createRequestUrl(apiUrl, 'features');
+        const url = this.createRequestUrl(apiUrl, 'features'); //https://geomon.geologie.ac.at/52n-sos-webapp/api/features
         let stations = this.requestApi<Station[]>(url, params, options);
         this.messageService.add('StationService: fetched stations');
         return stations;
     }
 
+    public getFeature(
+        id: string,
+        apiUrl: string,
+        params?: any,
+        options?: HttpRequestOptions
+    ): Observable<Station> {
+        const url = this.createRequestUrl(apiUrl, 'features', id);
+        return this.requestApi<Station>(url, params, options);
+    }
+
+    public getPlatforms(apiUrl: string, params?: any, options?: HttpRequestOptions): Observable<GeomonPlatform[]> {
+        // const url = this.createRequestUrl(apiUrl, 'platforms');
+        // return this.requestApi<GeomonPlatform[]>(url, params, options);
+        return this.getStations(apiUrl, params, options).pipe(map(res => res.map(f => this.createGeomonPlatform(f))));
+    }
+
+    
+
+    public getPlatform(
+        id: string,
+        apiUrl: string,
+        params?: any,
+        options?: HttpRequestOptions
+    ): Observable<GeomonPlatform> {
+        // const url = this.createRequestUrl(apiUrl, 'platforms', id);
+        // return this.requestApi<GeomonPlatform>(url, params, options);
+        return this.getFeature(id, apiUrl,params, options).pipe(map(res => this.createGeomonPlatform(res)));
+    }
+
+    public getDataset(id: string, apiUrl: string, params?: any, options?: HttpRequestOptions): Observable<GeomonTimeseries> {
+        const url = this.createRequestUrl(apiUrl, 'datasets', id);
+        return this.requestApi<GeomonTimeseries>(url, params, options);
+        //.pipe(
+        //     map((res) => this.prepareDataset(res, apiUrl))
+        // );
+    }
+
+    //#region Helper method
+
+    protected createGeomonPlatform(feature: Station): GeomonPlatform {
+        const datasetIds = [];
+        for (const key in feature.properties.datasets) {
+          if (feature.properties.datasets.hasOwnProperty(key)) {
+            datasetIds.push(key);
+          }
+        }
+        return new GeomonPlatform(feature.id, feature.properties.label, datasetIds, feature.geometry);
+      }
 
     protected createRequestUrl(apiUrl: string, endpoint: string, id?: string) {
         // TODO Check whether apiUrl ends with slash
@@ -63,4 +114,5 @@ export class DatasetApiService {
         return headers;
     }
 
+    //#endregion
 }
diff --git a/src/app/views/map-view/map-view.component.ts b/src/app/views/map-view/map-view.component.ts
index cc91157..c3abcc3 100644
--- a/src/app/views/map-view/map-view.component.ts
+++ b/src/app/views/map-view/map-view.component.ts
@@ -1,10 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
-import { ParameterFilter, Station } from '@helgoland/core';
+import { ParameterFilter } from '@helgoland/core';
+import { GeomonPlatform } from './../../../shared/models/platform';
 import { LayerOptions } from '@helgoland/map';
 import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
-// optional, to adapt leaflet markers
 
+import { Station } from '../../../shared/models/station';
+import { DatasetByStationSelectorComponent } from './../../components/dataset-by-station-selector/dataset-by-station-selector.component';
+import { MatDialog } from '@angular/material/dialog';
+
+// optional, to adapt leaflet markers
 Marker.prototype.options.icon = icon({
     iconRetinaUrl: 'assets/img/marker-icon-2x.png',
     iconUrl: 'assets/img/marker-icon.png',
@@ -16,6 +21,8 @@ Marker.prototype.options.icon = icon({
     shadowSize: [41, 41]
 });
 
+const DIALOG_MAX_WIDTH = '95%';
+
 @Component({
     selector: 'gba-map-view',
     templateUrl: './map-view.component.html',
@@ -23,7 +30,9 @@ Marker.prototype.options.icon = icon({
 })
 export class MapViewComponent implements OnInit {
 
-    constructor() {
+    constructor(
+        private dialog: MatDialog,
+    ) {
         //
     }
 
@@ -56,7 +65,16 @@ export class MapViewComponent implements OnInit {
     };
 
     public onStationSelected(station: Station) {
-        console.log('Clicked station: ' + station.properties.label);
+        // console.log('Clicked station: ' + station.properties.label);
+        const dialogRef = this.dialog.open(DatasetByStationSelectorComponent, { 
+            height: '400px',
+            width: '600px',
+            maxWidth: DIALOG_MAX_WIDTH ,
+            hasBackdrop: true, //Here line to add
+            // panelClass: 'custom-dialog-container'
+        });
+        dialogRef.componentInstance.station = station;
+        dialogRef.componentInstance.url = this.providerUrl;
     }
 
     public onMapInitialized(newItem: string) {
diff --git a/src/common/components/zoom-control/zoom.component.html b/src/common/components/zoom-control/zoom.component.html
index bfc883e..49ea157 100644
--- a/src/common/components/zoom-control/zoom.component.html
+++ b/src/common/components/zoom-control/zoom.component.html
@@ -1,8 +1,8 @@
 <div class="gba-control-zoom btn-group-vertical map-control">
-    <button type="button" class="button is-light is-small" (click)="zoomIn()">
+    <button #inputPlus type="button" class="button is-light is-small" (click)="zoomIn()">
         <fa-icon [icon]="faPlus"></fa-icon>
     </button>
-    <button type="button" class="button is-light is-small" (click)="zoomOut()">
+    <button #inputMinus type="button" class="button is-light is-small" (click)="zoomOut()">
         <fa-icon [icon]="faMinus"></fa-icon>
     </button>
 </div>
\ No newline at end of file
diff --git a/src/common/components/zoom-control/zoom.component.ts b/src/common/components/zoom-control/zoom.component.ts
index 548b62e..907686e 100644
--- a/src/common/components/zoom-control/zoom.component.ts
+++ b/src/common/components/zoom-control/zoom.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ElementRef, ViewChild  } from '@angular/core';
 import { MapService } from '../services/map.service';
 import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
 
@@ -17,6 +17,9 @@ export class ZoomControlComponent {
      */
     @Input() public mapId: string;
 
+    @ViewChild('inputPlus') private _inputPlus:ElementRef; 
+    @ViewChild('inputMinus') private _inpuMinus:ElementRef;
+
     constructor(
         protected mapService: MapService
     ) {
@@ -31,4 +34,28 @@ export class ZoomControlComponent {
         let map = this.mapService.getMap(this.mapId);
         map.zoomOut();
     }
+
+    _updateDisabled() {
+		let map = this.mapService.getMap(this.mapId);
+		// let className = 'leaflet-disabled';
+
+        // this._inputPlus.nativeElement.classList.remove(className);
+        this._inputPlus.nativeElement.disabled = false;
+		this._inputPlus.nativeElement.setAttribute('aria-disabled', 'false');
+
+        // this._inpuMinus.nativeElement.classList.remove(className);
+        this._inpuMinus.nativeElement.disabled = false;
+		this._inpuMinus.nativeElement.setAttribute('aria-disabled', 'false');
+
+		if (map.getZoom() === map.getMinZoom()) {
+            // this._inpuMinus.nativeElement.classList.add(className);
+            this._inpuMinus.nativeElement.disabled = true;
+            this._inpuMinus.nativeElement.setAttribute('aria-disabled', 'true');           
+		}
+		if (map.getZoom() === map.getMaxZoom()) {
+            // this._inputPlus.nativeElement.classList.add(className);
+            this._inputPlus.nativeElement.disabled = true;
+			this._inputPlus.nativeElement.setAttribute('aria-disabled', 'true');
+		}
+	}
 }
\ No newline at end of file
diff --git a/src/shared/models/dataset.ts b/src/shared/models/dataset.ts
new file mode 100644
index 0000000..729fd22
--- /dev/null
+++ b/src/shared/models/dataset.ts
@@ -0,0 +1,80 @@
+import { GeomonPlatform } from "./platform";
+
+export class Dataset  {
+    public id: string;
+    public label: string;
+    public url: string;
+    public uom: string;
+    public internalId: string;
+    public firstValue: FirstLastValue;
+    public lastValue: FirstLastValue;
+    public referenceValues: ReferenceValue[];
+    public datasetType: any;
+    public platformType: any;
+    public seriesParameters?: any;
+    public renderingHints: RenderingHints;
+    public parameters: any;
+}
+
+export class GeomonDataset {
+    public internalId: string;
+
+    constructor(
+        public id: string,
+        public url: string,
+        public label: string
+    ) {
+        // this.internalId = new InternalIdHandler().createInternalId(url, id);
+    }
+}
+
+export class GeomonTimeseries extends GeomonDataset {
+
+    constructor(
+        public id: string,
+        public url: string,
+        public label: string,
+        public uom: string,
+        public platform: GeomonPlatform,
+        public firstValue: FirstLastValue,
+        public lastValue: FirstLastValue,
+        public referenceValues: ReferenceValue[],
+        public renderingHints: RenderingHints,
+        public parameters: ParameterConstellation,
+    ) {
+        super(id, url, label);
+    }
+}
+
+export class ParameterConstellation {
+    public service: Parameter;
+    public offering: Parameter;
+    public feature: Parameter; //Feature;
+    public procedure: Parameter;
+    public phenomenon: Parameter;
+    public category: Parameter;
+}
+interface Parameter  {
+    id: string;
+    label: string;
+}
+
+export class FirstLastValue {
+    public timestamp: number;
+    public value: number;
+}
+
+export class ReferenceValue {
+    public referenceValueId: string;
+    public label: string;
+    public lastValue: FirstLastValue;
+    public color?: string;
+    public visible?: boolean;
+}
+
+export interface RenderingHints {
+    chartType: string;
+    properties: {
+        color: string;
+    };
+}
\ No newline at end of file
diff --git a/src/shared/models/platform.ts b/src/shared/models/platform.ts
new file mode 100644
index 0000000..2c67b7a
--- /dev/null
+++ b/src/shared/models/platform.ts
@@ -0,0 +1,10 @@
+export class GeomonPlatform {
+
+    constructor(
+        public id: string,
+        public label: string,
+        public datasetIds: string[],
+        public geometry?: GeoJSON.GeometryObject        
+    ) { }
+
+}
\ No newline at end of file
diff --git a/src/shared/models/station.ts b/src/shared/models/station.ts
index a676b14..51d90e2 100644
--- a/src/shared/models/station.ts
+++ b/src/shared/models/station.ts
@@ -10,25 +10,32 @@ export interface Station {
 export interface StationProperties {
     id: string;
     label: string;
-//     timeseries: TimeseriesCollection | Timeseries;
+    datasets: Dataset;
 }
 
+export interface Dataset 
+{
+    id: string;
+    label: string;
+    href: string,
+    domainId: string;
+}
 // export class TimeseriesCollection {
 //     [key: string]: ParameterConstellation;
 // }
 
-interface Timeseries {
-    id: string;
-    label: string;
-    url: string;
-    uom: string;
-    internalId: string;
-    // firstValue;
-    // lastValue;
-    // referenceValues;
-    station: Station;
-    // parameters;
-    // statusIntervals?;
-    // hasData = false;
-    // public renderingHints;
-}
\ No newline at end of file
+// interface Timeseries {
+//     id: string;
+//     label: string;
+//     url: string;
+//     uom: string;
+//     internalId: string;
+//     // firstValue;
+//     // lastValue;
+//     // referenceValues;
+//     station: Station;
+//     // parameters;
+//     // statusIntervals?;
+//     // hasData = false;
+//     // public renderingHints;
+// }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 1d6675b..20d0799 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,8 @@
+// @import '~@angular/material';
+// @import '~@angular/cdk/overlay-prebuilt.css';
+
+@import '~@angular/material/prebuilt-themes/purple-green.css';
+
 .leaflet-pane {
     z-index: 28;
 }