From f74b00446c6e12d07253d004ec885255996a2eb4 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 9 Jun 2021 20:32:39 +0200
Subject: [PATCH] Feature/improve world map chart (#152)

* Improve world map chart

* Update changelog
---
 CHANGELOG.md                                     |  8 ++++++++
 .../world-map-chart.component.scss               | 12 ++++++++++--
 .../world-map-chart/world-map-chart.component.ts | 12 +++++-------
 .../app/pages/tools/analysis/analysis-page.html  |  4 ++--
 apps/client/src/styles.scss                      | 16 ++++++++++++++++
 5 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b56f5ba87..bd5deaf0b 100644
--- a/CHANGELOG.md
+++ b/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
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
index e43cac3e9..b317294ef 100644
--- 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
@@ -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 {
-    background: var(--dark-background);
+  ::ng-deep {
+    .svgMap-map-wrapper {
+      .svgMap-country {
+        stroke: #414141;
+      }
+    }
   }
 }
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
index 0ab6e36d3..70f201d27 100644
--- 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
@@ -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,
-      colorMin: '#d3f4f3',
-      colorNoData: `rgba(${getTextColor()}, ${getCssVariable(
-        '--palette-foreground-divider-alpha'
-      )})`,
+      colorMax: '#22bdb9',
+      colorMin: '#c3f1f0',
+      colorNoData: 'transparent',
       data: {
         applyData: 'value',
         data: {
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 de4a75a1d..8aa1783a4 100644
--- a/apps/client/src/app/pages/tools/analysis/analysis-page.html
+++ b/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>
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 52c9d1f22..160916f9d 100644
--- a/apps/client/src/styles.scss
+++ b/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;
 }