Browse Source
Feature/configure thousand separator in world map chart (#1588)
* Set thousandSeparator
* Update changelog
pull/1590/head
Thomas Kaul
2 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with
6 additions and
3 deletions
-
CHANGELOG.md
-
apps/client/src/app/components/world-map-chart/world-map-chart.component.ts
-
apps/client/src/app/pages/landing/landing-page.module.ts
-
apps/client/src/app/pages/portfolio/allocations/allocations-page.html
|
@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 |
|
|
### Added |
|
|
### Added |
|
|
|
|
|
|
|
|
- Extended the landing page by a global heat map of subscribers |
|
|
- Extended the landing page by a global heat map of subscribers |
|
|
|
|
|
- Added support for the thousand separator in the global heat map component |
|
|
|
|
|
|
|
|
### Changed |
|
|
### Changed |
|
|
|
|
|
|
|
|
|
@ -7,6 +7,7 @@ import { |
|
|
OnDestroy, |
|
|
OnDestroy, |
|
|
OnInit |
|
|
OnInit |
|
|
} from '@angular/core'; |
|
|
} from '@angular/core'; |
|
|
|
|
|
import { getNumberFormatGroup } from '@ghostfolio/common/helper'; |
|
|
import svgMap from 'svgmap'; |
|
|
import svgMap from 'svgmap'; |
|
|
|
|
|
|
|
|
@Component({ |
|
|
@Component({ |
|
@ -19,6 +20,7 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit { |
|
|
@Input() countries: { [code: string]: { name?: string; value: number } }; |
|
|
@Input() countries: { [code: string]: { name?: string; value: number } }; |
|
|
@Input() format: string; |
|
|
@Input() format: string; |
|
|
@Input() isInPercent = false; |
|
|
@Input() isInPercent = false; |
|
|
|
|
|
@Input() locale: string; |
|
|
|
|
|
|
|
|
public isLoading = true; |
|
|
public isLoading = true; |
|
|
public svgMapElement; |
|
|
public svgMapElement; |
|
@ -71,7 +73,8 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit { |
|
|
applyData: 'value', |
|
|
applyData: 'value', |
|
|
data: { |
|
|
data: { |
|
|
value: { |
|
|
value: { |
|
|
format: this.format |
|
|
format: this.format, |
|
|
|
|
|
thousandSeparator: getNumberFormatGroup(this.locale) |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
values: this.countries |
|
|
values: this.countries |
|
|
|
@ -5,7 +5,6 @@ import { MatCardModule } from '@angular/material/card'; |
|
|
import { RouterModule } from '@angular/router'; |
|
|
import { RouterModule } from '@angular/router'; |
|
|
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; |
|
|
import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; |
|
|
import { GfLogoModule } from '@ghostfolio/ui/logo'; |
|
|
import { GfLogoModule } from '@ghostfolio/ui/logo'; |
|
|
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator'; |
|
|
|
|
|
import { GfValueModule } from '@ghostfolio/ui/value'; |
|
|
import { GfValueModule } from '@ghostfolio/ui/value'; |
|
|
|
|
|
|
|
|
import { LandingPageRoutingModule } from './landing-page-routing.module'; |
|
|
import { LandingPageRoutingModule } from './landing-page-routing.module'; |
|
@ -16,7 +15,6 @@ import { LandingPageComponent } from './landing-page.component'; |
|
|
imports: [ |
|
|
imports: [ |
|
|
CommonModule, |
|
|
CommonModule, |
|
|
GfLogoModule, |
|
|
GfLogoModule, |
|
|
GfPremiumIndicatorModule, |
|
|
|
|
|
GfValueModule, |
|
|
GfValueModule, |
|
|
GfWorldMapChartModule, |
|
|
GfWorldMapChartModule, |
|
|
LandingPageRoutingModule, |
|
|
LandingPageRoutingModule, |
|
|
|
@ -260,6 +260,7 @@ |
|
|
[countries]="countries" |
|
|
[countries]="countries" |
|
|
[format]="worldMapChartFormat" |
|
|
[format]="worldMapChartFormat" |
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView" |
|
|
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView" |
|
|
|
|
|
[locale]="user?.settings?.locale" |
|
|
></gf-world-map-chart> |
|
|
></gf-world-map-chart> |
|
|
<div class="row"> |
|
|
<div class="row"> |
|
|
<div class="col-xs-12 col-md-4 my-2"> |
|
|
<div class="col-xs-12 col-md-4 my-2"> |
|
|