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