mirror of https://github.com/ghostfolio/ghostfolio
Thomas
4 years ago
8 changed files with 149 additions and 17 deletions
@ -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