diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8ac8f03c5..1e78846b2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,6 +12,7 @@ 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'; +import { GaugeChartComponent } from './pages/home/gauge-chart.component'; @NgModule({ declarations: [ @@ -21,7 +22,8 @@ import { CountryMapComponent } from './pages/countrypage/country-map.component'; DataViewComponent, CountriesMapOverviewComponent, CountryPageComponent, - CountryMapComponent + CountryMapComponent, + GaugeChartComponent ], imports: [ BrowserModule, diff --git a/src/app/pages/countrypage/country-map.component.ts b/src/app/pages/countrypage/country-map.component.ts index 6d049a3a4..35b1f50fa 100644 --- a/src/app/pages/countrypage/country-map.component.ts +++ b/src/app/pages/countrypage/country-map.component.ts @@ -60,41 +60,40 @@ export class CountryMapComponent implements OnInit { 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']); - // } - // } + this.series[0].data = this.series[0].data.map((el) => { + if ((el.name === countryName)) { + 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] + }); + let x, y; + for (let i = 0; i < mapCountryData.length; i++) { + if (mapCountryData[i].hasOwnProperty('name')) { + if (mapCountryData[i]['name'] === countryName) { + console.log(mapCountryData[i]); + if (mapCountryData[i].hasOwnProperty('_midX')) { + x = mapCountryData[i]['_midX']; + } + if (mapCountryData[i].hasOwnProperty('_midY')) { + y = mapCountryData[i]['_midY']; + } + break; + } + } + } + this.mapZoom(0.1, x, y); + } } }, title: { - text: 'Highmaps basic demo' + text: '' }, - // subtitle: { - // text: 'Source map: World, Miller projection, medium resolution' - // }, - // mapNavigation: { - // enabled: true, - // buttonOptions: { - // alignTo: 'spacingBox' - // } - // }, legend: { enabled: false }, @@ -102,15 +101,15 @@ export class CountryMapComponent implements OnInit { min: 0 }, series: [{ - name: 'Countries', - borderColor: '#fff', - negativeColor: 'rgba(139,151,167,0.2)', - enableMouseTracking: false, - type: 'map' - }, { + // name: 'Countries', + // borderColor: '#fff', + // negativeColor: 'rgba(139,151,167,0.2)', + // enableMouseTracking: false, + // type: 'map' + // }, { name: 'Random data', type: 'map', - joinBy: ['name', 'country'], + // joinBy: ['name', 'country'], data : mapCountryData, // data: [ // ['is', 1], diff --git a/src/app/pages/countrypage/country-page.component.html b/src/app/pages/countrypage/country-page.component.html index b0ed0d6ed..734c6151d 100644 --- a/src/app/pages/countrypage/country-page.component.html +++ b/src/app/pages/countrypage/country-page.component.html @@ -3,40 +3,187 @@
-
+
+
+
+ + + +
+
+
+ +
+
+
+
+
+
+
+ + +
+

+ 18,165 + + +

+
+
+ + Number of OA publications +
+
+ 30% are OA +
+ + + +
+
+
+
+
+
+
+
+ + +
+

+ 12,812 + + +

+
+
+ + Number of OA datasets +
+
+ 30% are OA +
+ + + +
+
+
+
+
+
+
+
+ + +
+

+ 512 + + +

+
+
+ + Number of OA repositories +
+ + + +
+
+
+
+
+
+
+
+ + +
+

+ 1356 + + +

+
+
+ + Number of OA journals +
+ + + +
+
+
+
+
+
+
+
+ + +
+

+ 798 + + +

+
+
+ + Number of organizations with OA policies +
+ + + +
+
+
+
+
+
-
+
diff --git a/src/app/pages/countrypage/country-page.component.ts b/src/app/pages/countrypage/country-page.component.ts index 1bf13089e..a86fec962 100644 --- a/src/app/pages/countrypage/country-page.component.ts +++ b/src/app/pages/countrypage/country-page.component.ts @@ -14,6 +14,8 @@ export class CountryPageComponent implements OnInit { countryName: string; + linkToCountryInOpenAIRE: string; + // overviewData: OverviewData; // countrySelectedName: string = null; @@ -24,6 +26,7 @@ export class CountryPageComponent implements OnInit { ngOnInit(): void { this.countryName = this.route.snapshot.paramMap.get('countryName'); + this.linkToCountryInOpenAIRE = 'https://www.openaire.eu/item/' + this.countryName.replace(' ', '-'); console.log('Country name: ', this.countryName); // this.dataService.getCountryData('').subscribe( // overviewData => { diff --git a/src/app/pages/home/gauge-chart.component.html b/src/app/pages/home/gauge-chart.component.html new file mode 100644 index 000000000..dd0c2ba43 --- /dev/null +++ b/src/app/pages/home/gauge-chart.component.html @@ -0,0 +1,7 @@ +
+ + +
+ diff --git a/src/app/pages/home/gauge-chart.component.ts b/src/app/pages/home/gauge-chart.component.ts new file mode 100644 index 000000000..5767f2034 --- /dev/null +++ b/src/app/pages/home/gauge-chart.component.ts @@ -0,0 +1,119 @@ +import {Component, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation} from '@angular/core'; + +import * as Highcharts from 'highcharts'; +import HighchartsMore from 'highcharts/highcharts-more.src.js'; +import solidGauge from 'highcharts/modules/solid-gauge.js'; + +HighchartsMore(Highcharts); +solidGauge(Highcharts); + +@Component({ + selector: 'app-gauge-chart', + templateUrl: './gauge-chart.component.html', + // styleUrls: ['./top-menu.component.css'], + encapsulation: ViewEncapsulation.None +}) + +export class GaugeChartComponent implements OnInit, OnChanges { + + @Input() chartData: number; + @Input() color: string; + + public chartValue = 25; + + public update = false; + + Highcharts: typeof Highcharts = Highcharts; + + // gaugeChartOptions: Highcharts.Options; + + public gaugeChartOptions = { + chart: { + type: 'solidgauge' + }, + + title: { + text: '' + }, + + pane: { + center: ['50%', '85%'], + size: '140%', + startAngle: -90, + endAngle: 90, + background: { + backgroundColor: '#fff', + innerRadius: '60%', + outerRadius: '100%', + shape: 'arc' + } + }, + + tooltip: { + enabled: true + }, + + credits: { + enabled: false + }, + + yAxis: { + stops: [[0.1, '#DF5353'], [0.5, '#DDDF0D'], [0.9, '#55BF3B']], + min: 0, + max: 100, + lineWidth: 0, + // tickAmount: 6, + // labels: { + // y: 16 + // } + }, + + plotOptions: { + solidgauge: { + dataLabels: { + y: 5, + borderWidth: 0, + useHTML: true + } + } + }, + + series: [ + { + name: 'Speed', + data: [this.chartValue], + dataLabels: { + allowOverlap: true, + format: + '
{y:.0f}%
' + + '
' + } + } + ] + }; + + constructor() {} + + private updateChart(value) { + this.chartValue = value; + + // first try - working without transition + // this.gaugeChartOptions.title.text = value; + this.gaugeChartOptions.series['0'].data[0] = value; + // this.gaugeChartOptions.series['0'].update(); + this.update = true; + } + + ngOnInit(): void { + // console.log('onInit'); + this.updateChart(this.chartData); + } + + ngOnChanges(changes: SimpleChanges): void { + // console.log('onChanges'); + // console.log('Chart data: ', this.chartData); + this.updateChart(this.chartData); + } + +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index b9e70e37b..3f91a6ff4 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -4,7 +4,7 @@
-
+
@@ -13,7 +13,7 @@
-
+

OPENAIRE MONITOR OBSERVATORY

@@ -40,30 +40,55 @@

{{countrySelectedName | uppercase}}

-
18,165
+
+ {{countrySelectedOverview.repositories.oa | number}} + -- +
+
number of OA repositories
+
+
+
+ {{countrySelectedOverview.journals.oa | number}} + -- +
number of OA journals
-
327
-
number of providers
+
+ {{countrySelectedOverview.policies.oa | number}} + -- +
+
number of organizations with OA policies
-
- 65% - -
-
Open Licences
+ + + + + + + + + + +
OA publications
-
- 43% - -
-
Restricted
+ + + + + + + + + + +
OA datasets
@@ -154,9 +179,9 @@ Number of OA repositories
-
- {{overviewData.overview.repositories.percentage | number}}% are OA -
+ + +
@@ -177,9 +202,9 @@ Number of OA journals
-
- {{overviewData.overview.journals.percentage | number}}% are OA -
+ + +
@@ -198,11 +223,11 @@
- Number of OA policies -
-
- {{overviewData.overview.policies.percentage | number}}% are OA + Number of organizations with OA policies
+ + +
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index eb60e7cdc..bd3277759 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,6 +1,6 @@ import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core'; import { DataService } from '../../services/data.service'; -import { OverviewData } from '../../domain/overview-data'; +import { CountryOverview, OverviewData } from '../../domain/overview-data'; @Component({ selector: 'app-home', @@ -14,6 +14,7 @@ export class HomeComponent implements OnInit { overviewData: OverviewData; countrySelectedName: string = null; + countrySelectedOverview: CountryOverview = null; constructor(private dataService: DataService) { } @@ -29,11 +30,14 @@ export class HomeComponent implements OnInit { } countrySelected(countryName: string) { - console.log('Country selected: ', countryName); + // console.log('Country selected: ', countryName); this.countrySelectedName = countryName; + this.countrySelectedOverview = this.overviewData.countries.filter(x => x.country === this.countrySelectedName)[0]; + // console.log('Country selected overview: ', this.countrySelectedOverview); } deselectCountry() { this.countrySelectedName = null; + this.countrySelectedOverview = null; } } diff --git a/src/assets/css/os-observatory-custom.css b/src/assets/css/os-observatory-custom.css index c8aaf707f..ecb458289 100644 --- a/src/assets/css/os-observatory-custom.css +++ b/src/assets/css/os-observatory-custom.css @@ -16,6 +16,11 @@ h1, h2, h3, h4, h5, h6 { max-width: none; } +.uk-container-center { + margin-left: auto; + margin-right: auto; +} + #sect-overview, #sect-tabs { padding: 20px 0; } @@ -79,6 +84,17 @@ h1, h2, h3, h4, h5, h6 { color: #fff; } +.dark-blue-box a, .dark-blue-box a:hover, .dark-blue-box a:focus { + color: #fff; +} + +.openaire-symbol-wrapper { + background-color: #fff; + border-radius: 50%; + padding: 12px 10px 17px 13px; +} + + .infoBox { font-weight: 300; font-size: 15px; diff --git a/src/index.html b/src/index.html index 22df4bca2..bd8643acf 100644 --- a/src/index.html +++ b/src/index.html @@ -15,7 +15,8 @@ - + +