Functionality for the country box in the home page
This commit is contained in:
parent
d813e9da0b
commit
c85d745c23
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: <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
|
||||
},
|
||||
|
|
@ -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],
|
||||
|
|
|
|||
|
|
@ -3,40 +3,187 @@
|
|||
|
||||
<div class="uk-grid uk-grid-small">
|
||||
|
||||
<div class="uk-width-large-4-5 uk-width-medium-3-4">
|
||||
<div class="uk-width-4-5">
|
||||
|
||||
<div class="uk-container uk-container-expand uk-margin-medium-top">
|
||||
<div class="uk-text-right">
|
||||
<button class="md-btn md-btn-primary"><i class="fas fa-code uk-margin-small-right"></i>Embed</button>
|
||||
<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Data catalogues</button>
|
||||
<button class="md-btn md-btn-primary uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-container uk-container-expand uk-margin-top">
|
||||
<!--Overview cards-->
|
||||
<div class="uk-width-1-1 indicatorCards">
|
||||
<div class="uk-grid uk-grid-small uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-margin-top uk-grid-match" data-uk-grid-margin="">
|
||||
<div class="uk-row-first">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content">
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-float-right uk-margin-small-right">
|
||||
<span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span>
|
||||
<svg class="peity" height="28" width="48"><rect data-value="5" fill="#5086BA" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#5086BA" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#5086BA" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#5086BA" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#5086BA" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#5086BA" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#5086BA" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg>
|
||||
</div>
|
||||
<h2 class="uk-margin-remove">
|
||||
<span class="number">18,165</span>
|
||||
<!--<span *ngIf="overviewData.overview.publications?.oa" class="number">{{overviewData.overview.publications.oa | number}}</span>-->
|
||||
<!--<span *ngIf="!overviewData.overview.publications || !overviewData.overview.publications.oa" class="number">--</span>-->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA publications</span>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<span class="number">30%</span> are OA
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.publications?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.publications.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content">
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-float-right uk-margin-small-right">
|
||||
<span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span>
|
||||
<svg class="peity" height="28" width="64"><polygon fill="#44653D" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#44653D" stroke-width="1" stroke-linecap="square"></polyline></svg>
|
||||
</div>
|
||||
<h2 class="uk-margin-remove">
|
||||
<span class="number">12,812</span>
|
||||
<!--<span *ngIf="overviewData.overview.datasets?.oa" class="number">{{overviewData.overview.datasets.oa | number}}</span>-->
|
||||
<!--<span *ngIf="!overviewData.overview.datasets || !overviewData.overview.datasets.oa" class="number">--</span>-->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA datasets</span>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<span class="number">30%</span> are OA
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.datasets?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.datasets.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content">
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-float-right uk-margin-small-right">
|
||||
<span class="peity_orders peity_data" style="display: none;">64/100</span>
|
||||
<svg class="peity" height="24" width="24"><path d="M 12 0 A 12 12 0 1 1 2.7538410866905263 19.649087876984275 L 7.376920543345263 15.824543938492138 A 6 6 0 1 0 12 6" data-value="64" fill="#A33C3C"></path><path d="M 2.7538410866905263 19.649087876984275 A 12 12 0 0 1 11.999999999999998 0 L 11.999999999999998 6 A 6 6 0 0 0 7.376920543345263 15.824543938492138" data-value="36" fill="#eee"></path></svg>
|
||||
</div>
|
||||
<h2 class="uk-margin-remove">
|
||||
<span class="number">512</span>
|
||||
<!--<span *ngIf="overviewData.overview.repositories?.oa" class="number">{{overviewData.overview.repositories.oa | number}}</span>-->
|
||||
<!--<span *ngIf="!overviewData.overview.repositories || !overviewData.overview.repositories.oa" class="number">--</span>-->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA repositories</span>
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content">
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-float-right uk-margin-small-right">
|
||||
<span class="peity_sale peity_data" style="display: none;">5,3,9,6,5,9,7,3,5,2</span>
|
||||
<svg class="peity" height="28" width="64"><polygon fill="#7056AF" points="0 27.5 0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5 64 27.5"></polygon><polyline fill="none" points="0 12.5 7.111111111111111 18.5 14.222222222222221 0.5 21.333333333333332 9.5 28.444444444444443 12.5 35.55555555555556 0.5 42.666666666666664 6.5 49.77777777777777 18.5 56.888888888888886 12.5 64 21.5" stroke="#7056AF" stroke-width="1" stroke-linecap="square"></polyline></svg>
|
||||
</div>
|
||||
<h2 class="uk-margin-remove">
|
||||
<span class="number">1356</span>
|
||||
<!--<span *ngIf="overviewData.overview.journals?.oa" class="number">{{overviewData.overview.journals.oa | number}}</span>-->
|
||||
<!--<span *ngIf="!overviewData.overview.journals || !overviewData.overview.journals.oa" class="number">--</span>-->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA journals</span>
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="md-card">
|
||||
<div class="md-card-content">
|
||||
<div class="uk-margin-top">
|
||||
<div class="uk-float-right uk-margin-small-right">
|
||||
<span class="peity_visitors peity_data" style="display: none;">5,3,9,6,5,9,7</span>
|
||||
<svg class="peity" height="28" width="48"><rect data-value="5" fill="#A26C0A" x="1.3714285714285717" y="12.444444444444443" width="4.114285714285715" height="15.555555555555557"></rect><rect data-value="3" fill="#A26C0A" x="8.228571428571428" y="18.666666666666668" width="4.114285714285716" height="9.333333333333332"></rect><rect data-value="9" fill="#A26C0A" x="15.085714285714287" y="0" width="4.1142857142857086" height="28"></rect><rect data-value="6" fill="#A26C0A" x="21.942857142857147" y="9.333333333333336" width="4.114285714285707" height="18.666666666666664"></rect><rect data-value="5" fill="#A26C0A" x="28.800000000000004" y="12.444444444444443" width="4.114285714285707" height="15.555555555555557"></rect><rect data-value="9" fill="#A26C0A" x="35.65714285714286" y="0" width="4.114285714285707" height="28"></rect><rect data-value="7" fill="#A26C0A" x="42.51428571428572" y="6.222222222222221" width="4.114285714285707" height="21.77777777777778"></rect></svg>
|
||||
</div>
|
||||
<h2 class="uk-margin-remove">
|
||||
<span class="number">798</span>
|
||||
<!--<span *ngIf="overviewData.overview.policies?.oa" class="number">{{overviewData.overview.policies.oa | number}}</span>-->
|
||||
<!--<span *ngIf="!overviewData.overview.policies || !overviewData.overview.policies.oa" class="number">--</span>-->
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of organizations with OA policies</span>
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="uk-width-large-1-5 uk-width-medium-1-4">
|
||||
<div class="uk-width-1-5 uk-padding-remove">
|
||||
<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="numbers">
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="number">18,165</div>
|
||||
<div class="uk-margin-top">R&D expenditure</div>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="number">327</div>
|
||||
<div class="uk-margin-top">funding organizations</div>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="number">18,165</div>
|
||||
<div class="uk-margin-top">organizations funded by the European commission since 2013</div>
|
||||
</div>
|
||||
</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">Learn More</button>
|
||||
|
||||
<div class="uk-text-center uk-margin-medium-bottom">
|
||||
<span class="openaire-symbol-wrapper">
|
||||
<img class="" src="https://www.openaire.eu/images/OpenAIRE_branding/Symbol.png" height="30px" width="30px">
|
||||
</span>
|
||||
</div>
|
||||
<a class="uk-link" href="{{linkToCountryInOpenAIRE}}" target="_blank">Country page in <strong>OpenAIRE</strong><i class="fas fa-long-arrow-alt-right uk-margin-left"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<div>
|
||||
<highcharts-chart #chart [Highcharts]="Highcharts"
|
||||
[options]="gaugeChartOptions" [(update)]="update"
|
||||
style="width: 100%; height: 100px; display: block;">
|
||||
</highcharts-chart>
|
||||
</div>
|
||||
|
||||
|
|
@ -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:
|
||||
'<div style="text-align:center"><span style="font-size:20px;color:black' +
|
||||
'">{y:.0f}%</span><br/>' +
|
||||
'<span style="font-size:12px;color:silver"> </span></div>'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25">
|
||||
|
||||
<div class="uk-width-large-4-5 uk-width-medium-3-4">
|
||||
<div class="uk-width-4-5">
|
||||
|
||||
<!--Map Container-->
|
||||
<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="countrySelected($event)"></app-map-overview>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="uk-width-large-1-5 uk-width-medium-1-4">
|
||||
<div class="uk-width-1-5">
|
||||
<div class="md-card dark-blue-box infoBox">
|
||||
<div *ngIf="!countrySelectedName" class="md-card-content">
|
||||
<h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
|
||||
|
|
@ -40,30 +40,55 @@
|
|||
<h3 class="uk-text-center"><a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>{{countrySelectedName | uppercase}}</h3>
|
||||
<div class="numbers">
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="number">18,165</div>
|
||||
<div class="number">
|
||||
<ng-container *ngIf="countrySelectedOverview.repositories?.oa !=null">{{countrySelectedOverview.repositories.oa | number}}</ng-container>
|
||||
<ng-container *ngIf="countrySelectedOverview.repositories===null || countrySelectedOverview.repositories.oa===null">--</ng-container>
|
||||
</div>
|
||||
<div class="uk-margin-top">number of OA repositories</div>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="number">
|
||||
<ng-container *ngIf="countrySelectedOverview.journals?.oa !=null">{{countrySelectedOverview.journals.oa | number}}</ng-container>
|
||||
<ng-container *ngIf="countrySelectedOverview.journals===null || countrySelectedOverview.journals.oa===null">--</ng-container>
|
||||
</div>
|
||||
<div class="uk-margin-top">number of OA journals</div>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<div class="number">327</div>
|
||||
<div class="uk-margin-top">number of providers</div>
|
||||
<div class="number">
|
||||
<ng-container *ngIf="countrySelectedOverview.policies?.oa !=null">{{countrySelectedOverview.policies.oa | number}}</ng-container>
|
||||
<ng-container *ngIf="countrySelectedOverview.policies===null || countrySelectedOverview.policies.oa===null">--</ng-container>
|
||||
</div>
|
||||
<div class="uk-margin-top">number of organizations with OA policies</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
|
||||
<div class="graphs">
|
||||
<div class="uk-grid">
|
||||
<div class="uk-width-1-2">
|
||||
<div class="epc_chart" data-percent="65" data-bar-color="#009688">
|
||||
<span class="epc_chart_text"><span class="countUpMe">65</span>%</span>
|
||||
<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
|
||||
</div>
|
||||
<div class="uk-text-center">Open Licences</div>
|
||||
<ng-container *ngIf="countrySelectedOverview.publications?.percentage !=null">
|
||||
<app-gauge-chart [chartData]="countrySelectedOverview.publications.percentage" [color]="'#5086BA'"></app-gauge-chart>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="countrySelectedOverview.publications===null || countrySelectedOverview.publications.percentage===null">
|
||||
<app-gauge-chart [chartData]="0" [color]="'#5086BA'"></app-gauge-chart>
|
||||
</ng-container>
|
||||
<!--<div class="epc_chart" data-percent="65" data-bar-color="#009688">-->
|
||||
<!--<span class="epc_chart_text"><span class="countUpMe">65</span>%</span>-->
|
||||
<!--<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>-->
|
||||
<!--</div>-->
|
||||
<div class="uk-text-center">OA publications</div>
|
||||
</div>
|
||||
<div class="uk-width-1-2">
|
||||
<div class="epc_chart" data-percent="43" data-bar-color="#009688">
|
||||
<span class="epc_chart_text"><span class="countUpMe">43</span>%</span>
|
||||
<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>
|
||||
</div>
|
||||
<div class="uk-text-center">Restricted</div>
|
||||
<ng-container *ngIf="countrySelectedOverview.datasets?.percentage !=null">
|
||||
<app-gauge-chart [chartData]="countrySelectedOverview.datasets.percentage" [color]="'#44653D'"></app-gauge-chart>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="countrySelectedOverview.datasets===null || countrySelectedOverview.datasets.percentage===null">
|
||||
<app-gauge-chart [chartData]="0" [color]="'#44653D'"></app-gauge-chart>
|
||||
</ng-container>
|
||||
<!--<div class="epc_chart" data-percent="43" data-bar-color="#009688">-->
|
||||
<!--<span class="epc_chart_text"><span class="countUpMe">43</span>%</span>-->
|
||||
<!--<canvas height="220" width="220" style="height: 110px; width: 110px;"></canvas>-->
|
||||
<!--</div>-->
|
||||
<div class="uk-text-center">OA datasets</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -154,9 +179,9 @@
|
|||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA repositories</span>
|
||||
</div>
|
||||
<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">
|
||||
<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.repositories?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.repositories.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,9 +202,9 @@
|
|||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA journals</span>
|
||||
</div>
|
||||
<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">
|
||||
<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.journals?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.journals.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -198,11 +223,11 @@
|
|||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
|
||||
<span class="">Number of OA policies</span>
|
||||
</div>
|
||||
<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">
|
||||
<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA
|
||||
<span class="">Number of organizations with OA policies</span>
|
||||
</div>
|
||||
<!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
|
||||
<!--<span class="number">{{overviewData.overview.policies.percentage | number}}%</span> are OA-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
|
||||
<!-- uikit -->
|
||||
<link rel="stylesheet" href="assets/css/uikit.almost-flat.min.css" media="all">
|
||||
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.css" />-->
|
||||
<!-- UIkit CSS -->
|
||||
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.3/dist/css/uikit.min.css" />-->
|
||||
|
||||
<!-- altair landing page -->
|
||||
<link rel="stylesheet" href="assets/css/main.css" media="all">
|
||||
|
|
|
|||
Loading…
Reference in New Issue