Feature/improve world map chart (#152)

* Improve world map chart

* Update changelog

CHANGELOG.md

@@ -5,8 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the global heat map to visualize investments by country
+
 ## 1.13.0 - 08.06.2021
 
+### Added
+
 - Added a global heat map to visualize investments by country
 
 ## 1.12.0 - 06.06.2021

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

@@ -10,6 +10,10 @@
     .svgMap-map-wrapper {
       background: transparent;
 
+      .svgMap-country {
+        stroke: #e5e5e5;
+      }
+
       .svgMap-map-controls-wrapper {
         display: none;
       }
@@ -18,7 +22,11 @@
 }
 
 :host-context(.is-dark-theme) {
-  .svgMap-tooltip {
+  ::ng-deep {
-    background: var(--dark-background);
+    .svgMap-map-wrapper {
+      .svgMap-country {
+        stroke: #414141;
+      }
+    }
   }
 }

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

@@ -7,8 +7,6 @@ import {
   OnDestroy,
   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';
 
@@ -31,6 +29,8 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
 
   public ngOnChanges() {
     if (this.countries) {
+      this.isLoading = true;
+
       this.destroySvgMap();
 
       this.initialize();
@@ -43,11 +43,9 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
 
   private initialize() {
     this.svgMapElement = new svgMap({
-      colorMax: primaryColorHex,
+      colorMax: '#22bdb9',
-      colorMin: '#d3f4f3',
+      colorMin: '#c3f1f0',
-      colorNoData: `rgba(${getTextColor()}, ${getCssVariable(
+      colorNoData: 'transparent',
-        '--palette-foreground-divider-alpha'
-      )})`,
       data: {
         applyData: 'value',
         data: {

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

@@ -215,7 +215,7 @@
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-header class="w-100">
-          <mat-card-title i18n>Global Heat Map</mat-card-title>
+          <mat-card-title i18n>Regions</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -237,7 +237,7 @@
       <mat-card class="mb-3">
         <mat-card-header>
           <mat-card-title class="align-items-center d-flex" i18n
-            >Investment</mat-card-title
+            >Timeline</mat-card-title
           >
         </mat-card-header>
         <mat-card-content>

apps/client/src/styles.scss

@@ -81,6 +81,14 @@ body {
         color: rgba(var(--dark-primary-text)) !important;
       }
     }
+
+    .svgMap-tooltip {
+      background: var(--dark-background);
+
+      .svgMap-tooltip-content table td span {
+        color: rgba(var(--light-primary-text));
+      }
+    }
   }
 }
 
@@ -156,6 +164,14 @@ ngx-skeleton-loader {
   min-width: unset !important;
 }
 
+.svgMap-tooltip {
+  border-bottom: none;
+
+  .svgMap-tooltip-pointer {
+    display: none;
+  }
+}
+
 .text-decoration-underline {
   text-decoration: underline !important;
 }