First approach to the country map in the country dashboard
This commit is contained in:
parent
c251693b18
commit
d813e9da0b
|
|
@ -11,6 +11,7 @@ import { DataViewComponent } from './pages/home/data-view.component';
|
|||
import { HighchartsChartModule } from 'highcharts-angular';
|
||||
import { CountriesMapOverviewComponent } from './pages/home/countries-map-overview.component';
|
||||
import { CountryPageComponent } from './pages/countrypage/country-page.component';
|
||||
import { CountryMapComponent } from './pages/countrypage/country-map.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -19,7 +20,8 @@ import { CountryPageComponent } from './pages/countrypage/country-page.component
|
|||
CountriesTableComponent,
|
||||
DataViewComponent,
|
||||
CountriesMapOverviewComponent,
|
||||
CountryPageComponent
|
||||
CountryPageComponent,
|
||||
CountryMapComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="">
|
||||
<highcharts-chart
|
||||
[Highcharts]="Highcharts"
|
||||
[constructorType]="'mapChart'"
|
||||
[options]="chartMapOptions"
|
||||
style="width: 100%; height: 200px; display: block;"
|
||||
></highcharts-chart>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
import { MapCountryData } from '../../domain/map-country-data';
|
||||
|
||||
declare var require: any;
|
||||
|
||||
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
import * as Highcharts from 'highcharts';
|
||||
import MapModule from 'highcharts/modules/map';
|
||||
import {CountryOverview} from '../../domain/overview-data';
|
||||
|
||||
const mapWorld = require('@highcharts/map-collection/custom/world.geo.json');
|
||||
const mapEurope = require('@highcharts/map-collection/custom/europe.geo.json');
|
||||
|
||||
MapModule(Highcharts);
|
||||
|
||||
@Component({
|
||||
selector: 'app-country-map',
|
||||
templateUrl: './country-map.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class CountryMapComponent implements OnInit {
|
||||
|
||||
@Input() country: string;
|
||||
|
||||
Highcharts: typeof Highcharts = Highcharts;
|
||||
|
||||
chartMapOptions: Highcharts.Options;
|
||||
|
||||
mapCountryData: MapCountryData[] = [];
|
||||
seriesColor: string = '#ff9800';
|
||||
seriesName: string = 'OA publications';
|
||||
|
||||
europe: string[] = [];
|
||||
countryNames: string[] = [];
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.countryNames.push(this.country);
|
||||
console.log('this.country', this.country);
|
||||
console.log('this.countryNames', this.countryNames);
|
||||
this.mapCountryData.push(this.overviewToMapData());
|
||||
this.loadMap(this.mapCountryData, this.seriesColor, this.seriesName, this.country);
|
||||
}
|
||||
|
||||
overviewToMapData(): MapCountryData {
|
||||
this.seriesColor = '#A26C0A';
|
||||
this.seriesName = 'OA policies';
|
||||
return {
|
||||
id: this.country,
|
||||
country: this.country,
|
||||
z: 5
|
||||
};
|
||||
}
|
||||
|
||||
loadMap(mapCountryData: MapCountryData[], seriesColor: string, seriesName: string, countryName: string) {
|
||||
this.chartMapOptions = {
|
||||
chart: {
|
||||
map: mapWorld,
|
||||
events: {
|
||||
load: function() {
|
||||
// this.series[0].data = this.series[0].data.map((el) => {
|
||||
// if (countryCodes.includes(el['hc-key'])) {
|
||||
// el.color = 'rgba(139,151,167,0.6)';
|
||||
// return el;
|
||||
// }
|
||||
// return el;
|
||||
// });
|
||||
// this.update({
|
||||
// series: [{
|
||||
// data: this.series[0].data as Highcharts.SeriesMapbubbleDataOptions,
|
||||
// } as Highcharts.SeriesMapbubbleOptions]
|
||||
// });
|
||||
// // this.mapZoom(0.24, 4518.24, -8188.36);
|
||||
// this.mapZoom(0.2, this.get('Germany')['x'], this.get('Germany')['y']);
|
||||
},
|
||||
// click: event => {
|
||||
// if (event.target.hasOwnProperty('point')) {
|
||||
// console.log(event.target['point']['name']);
|
||||
// // this.countrySelected(event.target['point']['name']);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Highmaps basic demo'
|
||||
},
|
||||
// subtitle: {
|
||||
// text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'
|
||||
// },
|
||||
// mapNavigation: {
|
||||
// enabled: true,
|
||||
// buttonOptions: {
|
||||
// alignTo: 'spacingBox'
|
||||
// }
|
||||
// },
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
colorAxis: {
|
||||
min: 0
|
||||
},
|
||||
series: [{
|
||||
name: 'Countries',
|
||||
borderColor: '#fff',
|
||||
negativeColor: 'rgba(139,151,167,0.2)',
|
||||
enableMouseTracking: false,
|
||||
type: 'map'
|
||||
}, {
|
||||
name: 'Random data',
|
||||
type: 'map',
|
||||
joinBy: ['name', 'country'],
|
||||
data : mapCountryData,
|
||||
// data: [
|
||||
// ['is', 1],
|
||||
// ['no', 1],
|
||||
// ['se', 1],
|
||||
// ['dk', 1],
|
||||
// ['fi', 1]
|
||||
// ],
|
||||
// states: {
|
||||
// hover: {
|
||||
// color: '#BADA55'
|
||||
// }
|
||||
// },
|
||||
// dataLabels: {
|
||||
// enabled: true,
|
||||
// format: '{point.name}'
|
||||
// },
|
||||
// allAreas: false,
|
||||
// joinBy: ['name', 'country'],
|
||||
// data : mapCountryData
|
||||
} as Highcharts.SeriesMapOptions]
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<section class="section greySection uk-padding-top-remove uk-padding-bottom-remove" id="sect-country-page">
|
||||
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
|
||||
|
||||
<div class="uk-grid uk-grid-small">
|
||||
|
||||
<div class="uk-width-large-4-5 uk-width-medium-3-4">
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="uk-width-large-1-5 uk-width-medium-1-4">
|
||||
<div id="sidebar_main" class="md-card dark-blue-box infoBox uk-sticky" uk-height-viewport="offset-bottom: 0">
|
||||
<div class="md-card-content">
|
||||
<h3 class="uk-text-center">{{countryName | uppercase}}</h3>
|
||||
|
||||
<div>
|
||||
<!--<app-map-overview></app-map-overview>-->
|
||||
<app-country-map [country]="countryName"></app-country-map>
|
||||
</div>
|
||||
|
||||
<div>This tool allows you to:</div>
|
||||
<ul>
|
||||
<li>
|
||||
better understand the European Open Data landscape
|
||||
</li>
|
||||
<li>
|
||||
find data catalogues and datasets analyse and visualise available metadata
|
||||
</li>
|
||||
<li>
|
||||
find data catalogues and datasets analyse and visualise available metadata
|
||||
</li>
|
||||
<li>
|
||||
access the raw data
|
||||
</li>
|
||||
</ul>
|
||||
<div class="uk-text-center uk-margin-medium-top">
|
||||
<button class="md-btn md-btn-primary">Learn More</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
|
||||
<!--<h2 class="heading_b">-->
|
||||
<!--Our Team-->
|
||||
<!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
|
||||
<!--</h2>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -42,13 +42,13 @@
|
|||
</li>
|
||||
</ul>
|
||||
<div class="actionButtons uk-text-right">
|
||||
<button class="md-btn md-btn-secondary" (click)="printOverviewData('table-absolute')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>
|
||||
<button class="md-btn md-btn-secondary" (click)="printOverviewData('switcher-content-a-fade')"><i class="fas fa-print uk-margin-small-right"></i>Print report in PDF</button>
|
||||
<button class="md-btn md-btn-secondary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download report</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin">
|
||||
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<!--<div class="dataContent">-->
|
||||
<!--<div class="actionButtons uk-text-right">-->
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
</div>
|
||||
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
|
||||
<div class="uk-text-center uk-margin-medium-top">
|
||||
<button class="md-btn md-btn-primary">Visit Country Page <i class="fas fa-arrow-right uk-margin-small-left"></i></button>
|
||||
<button class="md-btn md-btn-primary" [routerLink]="['/countryDashboard/' + countrySelectedName]">Visit Country Page <i class="fas fa-arrow-right uk-margin-small-left"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue