From d813e9da0b665bcfa368598850d9d9099d40e953 Mon Sep 17 00:00:00 2001 From: "stefania.martziou" Date: Fri, 22 Nov 2019 12:39:55 +0000 Subject: [PATCH] First approach to the country map in the country dashboard --- src/app/app.module.ts | 4 +- .../countrypage/country-map.component.html | 9 ++ .../countrypage/country-map.component.ts | 138 ++++++++++++++++++ .../countrypage/country-page.component.html | 55 +++++++ src/app/pages/home/data-view.component.html | 4 +- src/app/pages/home/home.component.html | 2 +- 6 files changed, 208 insertions(+), 4 deletions(-) create mode 100644 src/app/pages/countrypage/country-map.component.html create mode 100644 src/app/pages/countrypage/country-map.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ecd914b30..8ac8f03c5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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, diff --git a/src/app/pages/countrypage/country-map.component.html b/src/app/pages/countrypage/country-map.component.html new file mode 100644 index 000000000..3c780b409 --- /dev/null +++ b/src/app/pages/countrypage/country-map.component.html @@ -0,0 +1,9 @@ +
+ +
+ diff --git a/src/app/pages/countrypage/country-map.component.ts b/src/app/pages/countrypage/country-map.component.ts new file mode 100644 index 000000000..6d049a3a4 --- /dev/null +++ b/src/app/pages/countrypage/country-map.component.ts @@ -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: World, Miller projection, medium resolution' + // }, + // 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] + }; + + } +} diff --git a/src/app/pages/countrypage/country-page.component.html b/src/app/pages/countrypage/country-page.component.html index e69de29bb..b0ed0d6ed 100644 --- a/src/app/pages/countrypage/country-page.component.html +++ b/src/app/pages/countrypage/country-page.component.html @@ -0,0 +1,55 @@ +
+
+ +
+ +
+ + + + +
+ +
+ +
+ + + + + + + + +
+ +
+
diff --git a/src/app/pages/home/data-view.component.html b/src/app/pages/home/data-view.component.html index 58ac12d73..78a15fd32 100644 --- a/src/app/pages/home/data-view.component.html +++ b/src/app/pages/home/data-view.component.html @@ -42,13 +42,13 @@
- +
-