Thomas
4 years ago
parent
74954bc51d
commit
c12c91db14
@ -0,0 +1,17 @@
|
||||
<ngx-skeleton-loader
|
||||
*ngIf="isLoading"
|
||||
animation="pulse"
|
||||
[theme]="{
|
||||
width: '100%'
|
||||
}"
|
||||
></ngx-skeleton-loader>
|
||||
|
||||
<div
|
||||
class="align-items-center d-flex svg-map-container w-100"
|
||||
id="svgMap"
|
||||
></div>
|
||||
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v2.0.3/dist/svgMap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
@ -0,0 +1,19 @@
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.svg-map-container {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
// @import '~svgmap/dist/svgMap.min.css';
|
||||
|
||||
::ng-deep {
|
||||
.svgMap-map-wrapper {
|
||||
background: transparent;
|
||||
|
||||
.svgMap-map-controls-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnDestroy,
|
||||
OnInit
|
||||
} from '@angular/core';
|
||||
import { primaryColorHex } from '@ghostfolio/common/config';
|
||||
|
||||
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() countries: { [code: string]: { name: string; value: number } };
|
||||
|
||||
public isLoading = true;
|
||||
|
||||
public constructor() {}
|
||||
|
||||
public ngOnInit() {}
|
||||
|
||||
public ngOnChanges() {
|
||||
if (this.countries) {
|
||||
this.initialize();
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnDestroy() {}
|
||||
|
||||
private initialize() {
|
||||
new svgMap({
|
||||
colorMax: primaryColorHex,
|
||||
colorMin: '#d3f4f3',
|
||||
colorNoData: '#eeeeee',
|
||||
data: {
|
||||
applyData: 'value',
|
||||
data: {
|
||||
value: {
|
||||
format: '{0}',
|
||||
name: 'Value'
|
||||
}
|
||||
},
|
||||
values: this.countries
|
||||
},
|
||||
hideFlag: true,
|
||||
minZoom: 1.06,
|
||||
maxZoom: 1.06,
|
||||
targetElementID: 'svgMap'
|
||||
});
|
||||
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
@ -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