mirror of https://github.com/ghostfolio/ghostfolio
Thomas
4 years ago
committed by
GitHub
GitHub
11 changed files with 193 additions and 17 deletions
@ -0,0 +1,10 @@ |
|||||
|
<ngx-skeleton-loader |
||||
|
*ngIf="isLoading" |
||||
|
animation="pulse" |
||||
|
class="h-100" |
||||
|
[theme]="{ |
||||
|
width: '100%' |
||||
|
}" |
||||
|
></ngx-skeleton-loader> |
||||
|
|
||||
|
<div class="align-items-center d-flex h-100 w-100" id="svgMap"></div> |
||||
@ -0,0 +1,24 @@ |
|||||
|
:host { |
||||
|
display: block; |
||||
|
height: 100%; |
||||
|
|
||||
|
::ng-deep { |
||||
|
.loader { |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.svgMap-map-wrapper { |
||||
|
background: transparent; |
||||
|
|
||||
|
.svgMap-map-controls-wrapper { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host-context(.is-dark-theme) { |
||||
|
.svgMap-tooltip { |
||||
|
background: var(--dark-background); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,79 @@ |
|||||
|
import { |
||||
|
ChangeDetectionStrategy, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
Input, |
||||
|
OnChanges, |
||||
|
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'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'gf-world-map-chart', |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush, |
||||
|
templateUrl: './world-map-chart.component.html', |
||||
|
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(private changeDetectorRef: ChangeDetectorRef) {} |
||||
|
|
||||
|
public ngOnInit() {} |
||||
|
|
||||
|
public ngOnChanges() { |
||||
|
if (this.countries) { |
||||
|
this.destroySvgMap(); |
||||
|
|
||||
|
this.initialize(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.destroySvgMap(); |
||||
|
} |
||||
|
|
||||
|
private initialize() { |
||||
|
this.svgMapElement = new svgMap({ |
||||
|
colorMax: primaryColorHex, |
||||
|
colorMin: '#d3f4f3', |
||||
|
colorNoData: `rgba(${getTextColor()}, ${getCssVariable( |
||||
|
'--palette-foreground-divider-alpha' |
||||
|
)})`,
|
||||
|
data: { |
||||
|
applyData: 'value', |
||||
|
data: { |
||||
|
value: { |
||||
|
format: `{0} ${this.baseCurrency}` |
||||
|
} |
||||
|
}, |
||||
|
values: this.countries |
||||
|
}, |
||||
|
hideFlag: true, |
||||
|
minZoom: 1.06, |
||||
|
maxZoom: 1.06, |
||||
|
targetElementID: 'svgMap' |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.isLoading = false; |
||||
|
|
||||
|
this.changeDetectorRef.markForCheck(); |
||||
|
}, 500); |
||||
|
} |
||||
|
|
||||
|
private destroySvgMap() { |
||||
|
this.svgMapElement?.mapWrapper?.remove(); |
||||
|
this.svgMapElement?.tooltip?.remove(); |
||||
|
|
||||
|
this.svgMapElement = null; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { NgModule } from '@angular/core'; |
||||
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
||||
|
|
||||
|
import { WorldMapChartComponent } from './world-map-chart.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [WorldMapChartComponent], |
||||
|
exports: [WorldMapChartComponent], |
||||
|
imports: [CommonModule, NgxSkeletonLoaderModule], |
||||
|
providers: [] |
||||
|
}) |
||||
|
export class GfWorldMapChartModule {} |
||||
Loading…
Reference in new issue