Improvements

apps/client/src/app/components/world-map-chart/world-map-chart.component.html

@@ -1,15 +1,13 @@
 <ngx-skeleton-loader
   *ngIf="isLoading"
   animation="pulse"
+  class="h-100"
   [theme]="{
     width: '100%'
   }"
 ></ngx-skeleton-loader>
 
-<div
+<div class="align-items-center d-flex w-100" id="svgMap"></div>
-  class="align-items-center d-flex svg-map-container w-100"
-  id="svgMap"
-></div>
 
 <link
   href="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v2.0.3/dist/svgMap.min.css"

apps/client/src/app/components/world-map-chart/world-map-chart.component.scss

@@ -1,13 +1,14 @@
 :host {
   display: block;
-
+  height: 100%;
-  .svg-map-container {
-    aspect-ratio: 16 / 9;
-  }
 
   // @import '~svgmap/dist/svgMap.min.css';
 
   ::ng-deep {
+    .loader {
+      height: 100% !important;
+    }
+
     .svgMap-map-wrapper {
       background: transparent;
 

apps/client/src/app/components/world-map-chart/world-map-chart.component.ts

@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
   OnChanges,
@@ -7,6 +8,8 @@ import {
   OnInit
 } from '@angular/core';
 import { primaryColorHex } from '@ghostfolio/common/config';
+import { getCssVariable, getTextColor } from '@ghostfolio/common/helper';
+import { Currency } from '@prisma/client';
 import svgMap from 'svgmap';
 
 @Component({
@@ -16,33 +19,40 @@ import svgMap from 'svgmap';
   styleUrls: ['./world-map-chart.component.scss']
 })
 export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
+  @Input() baseCurrency: Currency;
   @Input() countries: { [code: string]: { name: string; value: number } };
 
   public isLoading = true;
+  public svgMapElement;
 
-  public constructor() {}
+  public constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   public ngOnInit() {}
 
   public ngOnChanges() {
     if (this.countries) {
+      this.destroySvgMap();
+
       this.initialize();
     }
   }
 
-  public ngOnDestroy() {}
+  public ngOnDestroy() {
+    this.destroySvgMap();
+  }
 
   private initialize() {
-    new svgMap({
+    this.svgMapElement = new svgMap({
       colorMax: primaryColorHex,
       colorMin: '#d3f4f3',
-      colorNoData: '#eeeeee',
+      colorNoData: `rgba(${getTextColor()}, ${getCssVariable(
+        '--palette-foreground-divider-alpha'
+      )})`,
       data: {
         applyData: 'value',
         data: {
           value: {
-            format: '{0}',
+            format: `{0} ${this.baseCurrency}`
-            name: 'Value'
           }
         },
         values: this.countries
@@ -53,6 +63,17 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
       targetElementID: 'svgMap'
     });
 
+    setTimeout(() => {
       this.isLoading = false;
+
+      this.changeDetectorRef.markForCheck();
+    }, 500);
+  }
+
+  private destroySvgMap() {
+    this.svgMapElement?.mapWrapper?.remove();
+    this.svgMapElement?.tooltip?.remove();
+
+    this.svgMapElement = null;
   }
 }

apps/client/src/app/pages/tools/analysis/analysis-page.html

@@ -211,11 +211,14 @@
       </mat-card>
     </div>
   </div>
-  <div class="row">
+  <div class="row world-map-chart">
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-content>
-          <gf-world-map-chart [countries]="countries"></gf-world-map-chart>
+          <gf-world-map-chart
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [countries]="countries"
+          ></gf-world-map-chart>
         </mat-card-content>
       </mat-card>
     </div>

apps/client/src/app/pages/tools/analysis/analysis-page.scss

@@ -7,6 +7,14 @@
     }
   }
 
+  .world-map-chart {
+    .mat-card {
+      .mat-card-content {
+        aspect-ratio: 16 / 9;
+      }
+    }
+  }
+
   .mat-card {
     .mat-card-header {
       ::ng-deep {