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 @@
- Global Heat Map + Regions InvestmentTimeline 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; }