From c12c91db14b464e90c77191458438a547e2e6eb8 Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Mon, 7 Jun 2021 21:40:51 +0200 Subject: [PATCH] Add world map --- .../world-map-chart.component.html | 17 ++++++ .../world-map-chart.component.scss | 19 ++++++ .../world-map-chart.component.ts | 59 +++++++++++++++++++ .../world-map-chart/world-map-chart.module.ts | 13 ++++ .../pages/tools/analysis/analysis-page.html | 43 ++++++++------ .../tools/analysis/analysis-page.module.ts | 2 + package.json | 1 + yarn.lock | 12 ++++ 8 files changed, 149 insertions(+), 17 deletions(-) create mode 100644 apps/client/src/app/components/world-map-chart/world-map-chart.component.html create mode 100644 apps/client/src/app/components/world-map-chart/world-map-chart.component.scss create mode 100644 apps/client/src/app/components/world-map-chart/world-map-chart.component.ts create mode 100644 apps/client/src/app/components/world-map-chart/world-map-chart.module.ts diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.component.html b/apps/client/src/app/components/world-map-chart/world-map-chart.component.html new file mode 100644 index 000000000..85aa38aef --- /dev/null +++ b/apps/client/src/app/components/world-map-chart/world-map-chart.component.html @@ -0,0 +1,17 @@ + + +
+ + diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss b/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss new file mode 100644 index 000000000..59c0e6d7a --- /dev/null +++ b/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss @@ -0,0 +1,19 @@ +:host { + display: block; + + .svg-map-container { + aspect-ratio: 16 / 9; + } + + // @import '~svgmap/dist/svgMap.min.css'; + + ::ng-deep { + .svgMap-map-wrapper { + background: transparent; + + .svgMap-map-controls-wrapper { + display: none; + } + } + } +} diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts b/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts new file mode 100644 index 000000000..08cff3543 --- /dev/null +++ b/apps/client/src/app/components/world-map-chart/world-map-chart.component.ts @@ -0,0 +1,59 @@ +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges, + OnDestroy, + OnInit +} from '@angular/core'; +import { primaryColorHex } from '@ghostfolio/common/config'; + +import svgMap from 'svgmap'; + +@Component({ + selector: 'gf-world-map-chart', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './world-map-chart.component.html', + styleUrls: ['./world-map-chart.component.scss'] +}) +export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit { + @Input() countries: { [code: string]: { name: string; value: number } }; + + public isLoading = true; + + public constructor() {} + + public ngOnInit() {} + + public ngOnChanges() { + if (this.countries) { + this.initialize(); + } + } + + public ngOnDestroy() {} + + private initialize() { + new svgMap({ + colorMax: primaryColorHex, + colorMin: '#d3f4f3', + colorNoData: '#eeeeee', + data: { + applyData: 'value', + data: { + value: { + format: '{0}', + name: 'Value' + } + }, + values: this.countries + }, + hideFlag: true, + minZoom: 1.06, + maxZoom: 1.06, + targetElementID: 'svgMap' + }); + + this.isLoading = false; + } +} diff --git a/apps/client/src/app/components/world-map-chart/world-map-chart.module.ts b/apps/client/src/app/components/world-map-chart/world-map-chart.module.ts new file mode 100644 index 000000000..823a9620c --- /dev/null +++ b/apps/client/src/app/components/world-map-chart/world-map-chart.module.ts @@ -0,0 +1,13 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; + +import { WorldMapChartComponent } from './world-map-chart.component'; + +@NgModule({ + declarations: [WorldMapChartComponent], + exports: [WorldMapChartComponent], + imports: [CommonModule, NgxSkeletonLoaderModule], + providers: [] +}) +export class GfWorldMapChartModule {} diff --git a/apps/client/src/app/pages/tools/analysis/analysis-page.html b/apps/client/src/app/pages/tools/analysis/analysis-page.html index 0b0ff2310..a0f5d0e30 100644 --- a/apps/client/src/app/pages/tools/analysis/analysis-page.html +++ b/apps/client/src/app/pages/tools/analysis/analysis-page.html @@ -105,7 +105,7 @@
- By Continent + By Currency @@ -127,7 +127,7 @@
- By Country + By Exchange @@ -149,7 +149,7 @@
- By Currency + By Continent @@ -171,7 +171,7 @@
- By Exchange + By Country @@ -211,7 +211,16 @@
-
+
+
+ + + + + +
+
+
diff --git a/apps/client/src/app/pages/tools/analysis/analysis-page.module.ts b/apps/client/src/app/pages/tools/analysis/analysis-page.module.ts index c3081dc9e..3c714a320 100644 --- a/apps/client/src/app/pages/tools/analysis/analysis-page.module.ts +++ b/apps/client/src/app/pages/tools/analysis/analysis-page.module.ts @@ -6,6 +6,7 @@ import { PortfolioPositionsChartModule } from '@ghostfolio/client/components/por import { PortfolioProportionChartModule } from '@ghostfolio/client/components/portfolio-proportion-chart/portfolio-proportion-chart.module'; import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-table/positions-table.module'; import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module'; +import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; import { AnalysisPageRoutingModule } from './analysis-page-routing.module'; import { AnalysisPageComponent } from './analysis-page.component'; @@ -19,6 +20,7 @@ import { AnalysisPageComponent } from './analysis-page.component'; GfInvestmentChartModule, GfPositionsTableModule, GfToggleModule, + GfWorldMapChartModule, MatCardModule, PortfolioPositionsChartModule, PortfolioProportionChartModule diff --git a/package.json b/package.json index de9bd674e..46bb6ec3c 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "reflect-metadata": "0.1.13", "round-to": "5.0.0", "rxjs": "6.6.7", + "svgmap": "2.1.1", "uuid": "8.3.2", "yahoo-finance": "0.3.6", "zone.js": "0.11.4" diff --git a/yarn.lock b/yarn.lock index 99efb34ef..42a354e51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12382,6 +12382,18 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +svg-pan-zoom@^3.6.1: + version "3.6.1" + resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.1.tgz#f880a1bb32d18e9c625d7715350bebc269b450cf" + integrity sha512-JaKkGHHfGvRrcMPdJWkssLBeWqM+Isg/a09H7kgNNajT1cX5AztDTNs+C8UzpCxjCTRrG34WbquwaovZbmSk9g== + +svgmap@2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/svgmap/-/svgmap-2.1.1.tgz#355c259cf4e04b20d2d39bab05d0e718ade942ff" + integrity sha512-1blZYMYDXq8H3xykzgBJRh5q+XPd5JLOJ8K7UuZI6ab2D3hngiVcr+Z1olfy7DH9Xf9AOCTpt4Id7iVD8cKD0A== + dependencies: + svg-pan-zoom "^3.6.1" + svgo@^1.0.0: version "1.3.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"