MaDgIK
/
open-science-observatory-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working on the new version of the oso - almost done with tha mobile version of the pages

This commit is contained in:
Stefania Martziou 2020-06-12 13:45:47 +00:00
parent 976fe73964
commit fe0704eda9
17 changed files with 1733 additions and 1087 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

259
src/app/pages/continentoverview/continent-overview.component.html
View File

@ -1,7 +1,10 @@
<div class="greySection">
<section class="uk-padding-small" id="sect-continent-page">
<div class="uk-container uk-container-expand uk-margin-medium-top">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="uk-breadcrumb">
<li><a [routerLink]="['/home']">Home</a></li>
<li><span>{{continentName | titlecase}}</span></li>
@ -15,13 +18,29 @@
<span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
</div>
</div>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center">
<div *ngIf="continentName" class="">
<img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
<div class="uk-margin-top">
<h1 class="uk-margin-small-bottom">{{continentName | titlecase}}</h1>
<span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
</div>
</div>
</div>
</div>
</section>
<section class="uk-padding-small">
<section class="uk-padding-small uk-margin-top">
<div class="uk-container uk-container-center uk-margin-medium-top">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
@ -138,6 +157,151 @@
</div>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center">
<div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
<!--PUBLICATIONS-->
<ng-container *ngIf="europeOverviewData.publications?.percentage">
<div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
<div class="publicationsColumn uk-padding" style="height: 0%">
</div>
</ng-container>
<!--DATASETS-->
<ng-container *ngIf="europeOverviewData.datasets?.percentage">
<div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
<div class="datasetsColumn" style="height: 0%">
</div>
</ng-container>
<!--SOFTWARE-->
<ng-container *ngIf="europeOverviewData.software?.percentage">
<div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
<div class="softwareColumn" style="height: 0%">
</div>
</ng-container>
<!--OTHER-->
<ng-container *ngIf="europeOverviewData.other?.percentage">
<div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
<div class="otherColumn" style="height: 0%">
</div>
</ng-container>
</div>
<hr class="entitiesDivider">
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-1 continentPageEntitiesOverview">
<!--PUBLICATIONS-->
<div *ngIf="europeOverviewData.publications?.percentage" style="z-index: 4;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/publications-icon.svg" width="21">
<span class="publications entityName uk-margin-left">Publications</span>
</div>
<div class="number big">
{{europeOverviewData.publications.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
<!--DATASETS-->
<div *ngIf="europeOverviewData.datasets?.percentage" style="z-index: 3;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/datasets-icon.svg" width="17">
<span class="datasets entityName uk-margin-left">Datasets</span>
</div>
<div class="number big">
{{europeOverviewData.datasets.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
<!--SOFTWARE-->
<div *ngIf="europeOverviewData.software?.percentage" style="z-index: 2;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/software-icon.svg" width="19">
<span class="software entityName uk-margin-left">Software</span>
</div>
<div class="number big">
{{europeOverviewData.software.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
<!--OTHER-->
<div *ngIf="europeOverviewData.other?.percentage" style="z-index: 1;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/other-icon.svg" width="20">
<span class="other entityName uk-margin-left">Other</span>
</div>
<div class="number big">
{{europeOverviewData.other.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--TABS SECTION-->
@ -145,7 +309,9 @@
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<div class="">
<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<!--LAPTOP & PAD LANDSCAPE-->
<ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
<li aria-expanded="false"><a href="#">Open Science</a></li>
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
@ -154,11 +320,96 @@
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher dataContainer">
<!--MOBILE & PAD PORTRAIT-->
<ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
<li aria-expanded="false"><a href="#">Open Science</a></li>
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<ul id="team_tabbed" class="uk-switcher dataContainer">
<!--OVERVIEW tab-->
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<div class="uk-margin tabContent">
<app-data-view></app-data-view>
<!--<div class="uk-grid uk-child-width-1-4 uk-grid-match">-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--22.888-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--30% open access-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--18.165 closed access-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--22.888-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="uk-grid uk-child-width-1-1">
<div>
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="550" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22select%22%3A%5B%7B%22field%22%3A%22publication%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.organization.country.continent%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Europe%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220041%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220043%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220044%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22Unknown%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22publication%22%2C%22profile%22%3A%22OpenAIRE%20All-inclusive%22%2C%22limit%22%3A%2230%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20by%20type%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22type%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Afalse%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
</div>
</div>
</div>
</div>
<div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications%22%7D%7D%2C%7B%22name%22%3A%22OA%20Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
</div>
</div>
</div>
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets%22%7D%7D%2C%7B%22name%22%3A%22OA%20Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Datasets%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22datasets%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
</div>
</div>
</div>
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software%22%7D%7D%2C%7B%22name%22%3A%22OA%20Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Software%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22software%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
</div>
</div>
</div>
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other%22%7D%7D%2C%7B%22name%22%3A%22OA%20Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Other%20research%20products%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22other%20research%20products%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
</div>
</div>
</div>
</div>
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
</div>
</li>

3
src/app/pages/continentoverview/continent-overview.component.ts
View File

@ -22,6 +22,9 @@ export class ContinentOverviewComponent implements OnInit {
private sanitizer: DomSanitizer) { }
ngOnInit(): void {
window.scroll(0, 0);
this.continentName = this.route.snapshot.paramMap.get('continentName');
this.dataService.getEuropeOAPercentages().subscribe(

646
src/app/pages/countrypage/country-page.component.html
View File

@ -1,16 +1,19 @@
<section class="greySection uk-padding-small" id="sect-country-page">
<div class="greySection">
<section class="uk-padding-small" id="sect-country-page">
<div class="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-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-grid uk-grid-match uk-grid-small">
<div class="uk-width-4-5 uk-margin-medium-bottom">
<div class="uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s">
<div class="uk-container uk-container-expand uk-margin-medium-top">
<ul class="uk-breadcrumb">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
<li><a [routerLink]="['/home']">Home</a></li>
<li><span>{{countryName}}</span></li>
<li><span>{{countryPageOverviewData.name}}</span></li>
</ul>
@ -29,12 +32,29 @@
<a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>
</div>
</div>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center">
<div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">
<img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
<div class="uk-margin-top">
<h1 class="uk-margin-small-bottom">{{countryPageOverviewData.name}}</h1>
<span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-expand uk-margin-top">
<div class="uk-container uk-container-expand uk-margin-large-top">
<!--Overview cards-->
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<div class="uk-width-1-1 indicatorCards">
<div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m uk-child-width-1-4@l uk-margin-top uk-grid-match" data-uk-grid-margin="">
<!--<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="">-->
@ -243,274 +263,148 @@
</div>
</div>
<!--GREEN VS. GOLD-->
<div class="uk-container uk-container-expand contentSectionContainer uk-margin-large-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
Green vs. Gold
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center uk-margin-medium-top">
<div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
<div class="md-card-content">
<iframe *ngIf="greenGoldLineChartURL" width="100%" height="350" [src]="greenGoldLineChartURL"></iframe>
<!--<img src="../../../assets/img/mocks/monthly-average-temperat.png">-->
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="goldOrganisationsChartURL" width="100%" height="350" [src]="goldOrganisationsChartURL"></iframe>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="greenOrganisationsChartURL" width="100%" height="350" [src]="greenOrganisationsChartURL"></iframe>
</div>
</div>
</div>
</div>
</div>
<!--EU FUNDED OPEN SCIENCE-->
<div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
EU funded Open Science
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="publicationsDataSetsSoftwareByYearGraphURL" width="100%" height="350" [src]="publicationsDataSetsSoftwareByYearGraphURL"></iframe>
</div>
</div>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-2">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
Organisations
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="publicationsDataSetsSoftwareByOrganisationTableURL" width="100%" height="730" [src]="publicationsDataSetsSoftwareByOrganisationTableURL"></iframe>
<!--<table class="uk-table uk-table-small uk-table-divider">-->
<!--<thead>-->
<!--<tr>-->
<!--<th>Table Heading</th>-->
<!--<th>Table Heading</th>-->
<!--<th>Table Heading</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
</div>
</div>
</div>
<div class="uk-width-1-2">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
Repositories
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="publicationsDataSetsSoftwareByRepoTableURL" width="100%" height="730" [src]="publicationsDataSetsSoftwareByRepoTableURL"></iframe>
<!--<table class="uk-table uk-table-small uk-table-divider">-->
<!--<thead>-->
<!--<tr>-->
<!--<th>Table Heading</th>-->
<!--<th>Table Heading</th>-->
<!--<th>Table Heading</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--<td>Table Data</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
</div>
</div>
</div>
</div>
</div>
<!--FUNDING SOURCES-->
<div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
Funding sources
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-1">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="publicationsDataSetsSoftwareByFunderGraphURL" width="100%" height="450" [src]="publicationsDataSetsSoftwareByFunderGraphURL"></iframe>
</div>
</div>
</div>
</div>
</div>
<!--PROJECT PERFORMANCE-->
<div class="uk-container uk-container-expand contentSectionContainer uk-margin-medium-top">
<h2 class="heading_c uk-margin-medium-bottom uk-text-center-medium">
Project performance
<!--<span class="sub-heading">The Best Images From Around The World</span>-->
</h2>
<div class="uk-grid">
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="topProjectsByPublicationsGraphURL" width="100%" height="350" [src]="topProjectsByPublicationsGraphURL"></iframe>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="topProjectsByDatasetsGraphURL" width="100%" height="350" [src]="topProjectsByDatasetsGraphURL"></iframe>
</div>
</div>
</div>
<div class="uk-width-1-3">
<div class="md-card">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions">
<i class="fas fa-lg fa-info-circle"></i>
<i class="fas fa-lg fa-download uk-margin-left"></i>
<i class="fas fa-lg fa-file-pdf uk-margin-left"></i>
</div>
<h3 class="md-card-toolbar-heading-text">
<!--Card Heading-->
</h3>
</div>
<div class="md-card-content">
<iframe *ngIf="topProjectsBySoftwareGraphURL" width="100%" height="350" [src]="topProjectsBySoftwareGraphURL"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.publicationsAffiliated?.oa" class="number big">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA PUBLICATIONS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
</div>
<div *ngIf="countryPageOverviewData.publicationsAffiliated?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-5">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.publicationsDeposited?.oa" class="number big">{{countryPageOverviewData.publicationsDeposited.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA PUBLICATIONS FROM INSTITUTIONAL REPOSITORIES</div>
</div>
<div *ngIf="countryPageOverviewData.publicationsDeposited?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.datasetsAffiliated?.oa" class="number big">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA DATASETS AFFILIATED TO AN ORGANIZATION IN THE COUNTRY</div>
</div>
<div *ngIf="countryPageOverviewData.datasetsAffiliated?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.datasetsDeposited?.oa" class="number big">{{countryPageOverviewData.datasetsDeposited.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA DATASETS FROM INSTITUTIONAL REPOSITORIES</div>
</div>
<div *ngIf="countryPageOverviewData.datasetsDeposited?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.repositories?.oa" class="number big">{{countryPageOverviewData.repositories.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number big">--</div>
<div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
</div>
<div *ngIf="countryPageOverviewData.repositories?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.journals?.oa" class="number big">{{countryPageOverviewData.journals.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number big">--</div>
<div class="uk-margin-small-top">VALIDATED JOURNALS</div>
</div>
<div *ngIf="countryPageOverviewData.journals?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{countryPageOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top uk-margin-bottom">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="countryPageOverviewData.policies?.oa" class="number big">{{countryPageOverviewData.policies.oa | number}}</div>
<div *ngIf="!countryPageOverviewData.policies || !countryPageOverviewData.policies.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA POLICIES</div>
</div>
<div class="uk-width-2-5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Research Overview-->
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m uk-width-1-5@m uk-width-1-5@l">
<div class="md-card infoBox">
<div class="md-card-toolbar">
@ -568,53 +462,197 @@
</div>
</div>
<!--<aside class="uk-width-1-5 uk-padding-remove">-->
<!--<div id="sidebar_main" class="md-card dark-grey-box infoBox">-->
<!--Research Overview-->
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-width-1-1@s uk-margin-medium-top">
<div class="uk-container uk-container-expand">
<div *ngIf="countryPageOverviewData" class="md-card chartCard overviewMobile">
<div class="md-card-content">
<div class="numbers">
<div class="">
<div class="number big primary">--</div>
<div class="uk-margin-small-top">R&D EXPENDITURE</div>
</div>
<div class="uk-margin-medium-top">
<div class="number big primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</div>
<div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</div>
<div class="uk-margin-small-top">FUNDING SOURCES</div>
</div>
<div class="uk-margin-medium-top">
<div class="number big primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</div>
<div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</div>
<div class="uk-margin-small-top">FUNDING ORGANIZATIONS</div>
</div>
<div class=" uk-margin-medium-top">
<div class="number big primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</div>
<div class="number big primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</div>
<div class="uk-margin-small-top">ORGANIZATIONS FUNDED BY THE EUROPEAN COMMISSION SINCE 2013</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--TABS SECTION-->
<section class="section uk-margin-large-top" id="sect-tabs">
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<div class="">
<!--LAPTOP & PAD LANDSCAPE-->
<ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
<li aria-expanded="false"><a href="#">Open Science</a></li>
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<!--MOBILE & PAD PORTRAIT-->
<ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
<li aria-expanded="false"><a href="#">Open Science</a></li>
<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<ul id="team_tabbed" class="uk-switcher dataContainer">
<!--OVERVIEW tab-->
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<div class="uk-margin tabContent">
<!--<div class="uk-grid uk-child-width-1-4 uk-grid-match">-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--<h3 class="uk-text-center">{{countryName | uppercase}}</h3>-->
<!--22.888-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--30% open access-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--18.165 closed access-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--22.888-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="uk-grid uk-child-width-1-1">-->
<!--<div>-->
<!--<app-country-map [country]="countryName"></app-country-map>-->
<!--<div class="md-card chartCard">-->
<!--<div class="md-card-content">-->
<!--<iframe width="100%" height="550" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22select%22%3A%5B%7B%22field%22%3A%22publication%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.organization.country.continent%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Europe%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220041%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220043%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220044%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22Unknown%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22publication%22%2C%22profile%22%3A%22OpenAIRE%20All-inclusive%22%2C%22limit%22%3A%2230%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20by%20type%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22type%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Afalse%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>-->
<!--</div>-->
<!--<div class="numbers">-->
<!--<div class="uk-margin-medium-top">-->
<!--<div class="number">&#45;&#45;</div>-->
<!--<div class="uk-margin-top">R&D expenditure</div>-->
<!--</div>-->
<!--<div class="uk-margin-medium-top">-->
<!--<div *ngIf="!countryData || !countryData.funders || !countryData.funders.oa" class="number">&#45;&#45;</div>-->
<!--<div *ngIf="countryData?.funders?.oa" class="number">{{countryData.funders.oa}}</div>-->
<!--<div class="uk-margin-top">funding sources</div>-->
<!--</div>-->
<!--<div class="uk-margin-medium-top">-->
<!--<div *ngIf="!countryData || !countryData.funders || !countryData.funders.total" class="number">&#45;&#45;</div>-->
<!--<div *ngIf="countryData?.funders?.total" class="number">{{countryData.funders.total}}</div>-->
<!--<div class="uk-margin-top">funding organizations</div>-->
<!--</div>-->
<!--<div class="uk-margin-medium-top">-->
<!--<div *ngIf="!countryData || !countryData.ecFundedOrganizations || !countryData.ecFundedOrganizations.oa" class="number">&#45;&#45;</div>-->
<!--<div *ngIf="countryData?.ecFundedOrganizations?.oa" class="number">{{countryData.ecFundedOrganizations.oa}}</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>-->
<!--<div class="uk-text-center uk-margin-medium-top">-->
<!--<div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">-->
<!--<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 class="uk-grid-margin">-->
<!--<div class="md-card chartCard">-->
<!--<div class="md-card-content">-->
<!--<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications%22%7D%7D%2C%7B%22name%22%3A%22OA%20Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</aside>-->
<!--<div class="uk-grid-margin">-->
<!--<div class="md-card chartCard">-->
<!--<div class="md-card-content">-->
<!--<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets%22%7D%7D%2C%7B%22name%22%3A%22OA%20Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Datasets%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22datasets%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="uk-grid-margin">-->
<!--<div class="md-card chartCard">-->
<!--<div class="md-card-content">-->
<!--<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software%22%7D%7D%2C%7B%22name%22%3A%22OA%20Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Software%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22software%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="uk-grid-margin">-->
<!--<div class="md-card chartCard">-->
<!--<div class="md-card-content">-->
<!--<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other%22%7D%7D%2C%7B%22name%22%3A%22OA%20Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Other%20research%20products%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22other%20research%20products%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
</div>
</li>
<!--OPEN SCIENCE tab-->
<li aria-hidden="true" style="animation-duration: 200ms;">
<div class="uk-margin tabContent">
<app-data-view></app-data-view>
<!--<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>-->
</div>
</li>
<li aria-hidden="true">
<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
</div>
</li>
<li aria-hidden="true">
<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
</div>
</li>
<li aria-hidden="true">
<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">
</div>
</li>
</ul>
</div>
</div>
</section>
</section>
<!--link to OpenAIRE page-->
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-text-center uk-margin-xlarge-top uk-margin-large-bottom">
<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 primary" 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>

228
src/app/pages/home/home.component.html
View File

@ -1,5 +1,7 @@
<!--MAP AND OVERVIEW NUMBERS SECTION-->
<section class="section greySection" id="sect-overview">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<!--MAP AND OVERVIEW NUMBERS SECTION-->
<section class="section greySection" id="sect-overview">
<div class="uk-container uk-container-large uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up uk-padding-remove uk-margin-bottom" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25">
@ -271,11 +273,11 @@
</div>
</div>
</section>
</section>
<!--OA IN EUROPE SECTION-->
<section class="section greySection" id="sect-tabs">
<!--OA IN EUROPE SECTION-->
<section class="section greySection" id="sect-tabs">
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<h3>OA in Europe</h3>
@ -287,45 +289,185 @@
</div>
</div>
<!--<div class="">-->
<!--<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">-->
<!--<li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>-->
<!--<li aria-expanded="false"><a href="#">Open Science</a></li>-->
<!--<li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>-->
<!--<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>-->
<!--<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>-->
<!--&lt;!&ndash;<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>&ndash;&gt;-->
<!--</ul>-->
</div>
</section>
</div>
<!--<ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher dataContainer">-->
<!--&lt;!&ndash;OVERVIEW tab&ndash;&gt;-->
<!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">-->
<!--<div class="uk-margin tabContent">-->
<!--<app-data-view [type]="'overview'" [countries]="overviewData.countries"></app-data-view>-->
<!--&lt;!&ndash;<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>&ndash;&gt;-->
<!--</div>-->
<!--</li>-->
<!--&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;-->
<!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
<!--<div class="uk-margin tabContent">-->
<!--<app-data-view [type]="'openScience'" [countries]="overviewData.countries"></app-data-view>-->
<!--&lt;!&ndash;<app-countries-table [isPercentage]="false" [type]="'openScience'" [countries]="overviewData.countries"></app-countries-table>&ndash;&gt;-->
<!--</div>-->
<!--</li>-->
<!--<li aria-hidden="true">-->
<!--<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">-->
<!--</div>-->
<!--</li>-->
<!--<li aria-hidden="true">-->
<!--<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">-->
<!--</div>-->
<!--</li>-->
<!--<li aria-hidden="true">-->
<!--<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">-->
<!--</div>-->
<!--</li>-->
<!--</ul>-->
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<section class="section">
<div class="uk-container uk-container-expand uk-container-center ">
<!--<div class="uk-margin-top">-->
<!--<form class="uk-search uk-search-default searchForCountry">-->
<!--<span uk-search-icon></span>-->
<!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->
<!--</form>-->
<!--</div>-->
<div class="uk-margin-top">
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Search for a country...">
<!--<input type="text">-->
</div>
</div>
</div>
</section>
</section>
<section class="section">
<div class="uk-container uk-container-expand uk-container-center ">
<h3>OA in Europe</h3>
<div *ngIf="europeOverviewData" class="md-card chartCard overviewMobile">
<div class="md-card-content">
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/publications-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="europeOverviewData.publications?.oa" class="number big">{{europeOverviewData.publications.oa | number}}</div>
<div *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA PUBLICATIONS</div>
</div>
<div *ngIf="europeOverviewData.publications?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': europeOverviewData.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{europeOverviewData.publications.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/datasets-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="europeOverviewData.datasets?.oa" class="number big">{{europeOverviewData.datasets.oa | number}}</div>
<div *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA DATASETS</div>
</div>
<div *ngIf="europeOverviewData.datasets?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': europeOverviewData.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{europeOverviewData.datasets.percentage | number :'1.0-1'}}%</span> OA
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/repositories-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="europeOverviewData.repositories?.oa" class="number big">{{europeOverviewData.repositories.oa | number}}</div>
<div *ngIf="!europeOverviewData.repositories || !europeOverviewData.repositories.oa" class="number big">--</div>
<div class="uk-margin-small-top">VALIDATED REPOSITORIES</div>
</div>
<div *ngIf="europeOverviewData.repositories?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': europeOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{europeOverviewData.repositories.percentage | number :'1.0-1'}}%</span> VALIDATED
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/journals-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="europeOverviewData.journals?.oa" class="number big">{{europeOverviewData.journals.oa | number}}</div>
<div *ngIf="!europeOverviewData.journals || !europeOverviewData.journals.oa" class="number big">--</div>
<div class="uk-margin-small-top">VALIDATED JOURNALS</div>
</div>
<div *ngIf="europeOverviewData.journals?.percentage" class="uk-width-2-5">
<div class="progress">
<div [ngStyle]="{'width': europeOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
</div>
<div class="uk-margin-small-top">
<span class="number">{{europeOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
</div>
</div>
</div>
<div class="uk-grid uk-margin-medium-top uk-margin-bottom">
<div class="uk-width-1-5">
<img src="../../../assets/img/icons/policies-icon.svg" width="30" height="30">
</div>
<div class="uk-width-2-5">
<div *ngIf="europeOverviewData.policies?.oa" class="number big">{{europeOverviewData.policies.oa | number}}</div>
<div *ngIf="!europeOverviewData.policies || !europeOverviewData.policies.oa" class="number big">--</div>
<div class="uk-margin-small-top">OA POLICIES</div>
</div>
<div class="uk-width-2-5">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="uk-container uk-container-expand uk-container-center ">
<h3>Leading Open Science</h3>
<div *ngIf="leadingOpenScienceData" class="uk-grid uk-grid-small uk-grid-match uk-child-width-1-2">
<div *ngFor="let data of leadingOpenScienceData" class="uk-margin-small-top">
<div class="md-card leadingOpenScienceCard">
<a [routerLink]="['/countryDashboard/' + data.code]" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
<div class="md-card-content">
<div class="uk-flex">
<img src="../../../assets/img/flags/{{data.code | lowercase}}-flag.svg" width="15">
<span class="countryName uk-margin-small-left">{{data.name}}</span>
</div>
<div class="indicator uk-margin-top">
<!--<span class="number publications">18,165</span>-->
<span class="number publications" *ngIf="data.publicationsAffiliated!=null">{{data.publicationsAffiliated | number}}</span>
<span class="number publications" *ngIf="data.publicationsAffiliated===null">--</span>
<span><i>OA publications</i> affiliated to an organization in the country</span>
</div>
<div class="indicator uk-margin-top">
<!--<span class="number publications">18,165</span>-->
<span class="number publications" *ngIf="data.publicationsDeposited!=null">{{data.publicationsDeposited | number}}</span>
<span class="number publications" *ngIf="data.publicationsDeposited===null">--</span>
<span><i>OA publications</i> from institutional repositories</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="uk-container uk-container-expand uk-container-center ">
<div class="goToDetailedViewLink">
<a class="" [routerLink]="['/overview/' + 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
</div>
</div>
</section>
</div>

31
src/app/pages/home/home.component.ts
View File

@ -1,6 +1,5 @@
import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { CountryOverview, OverviewData } from '../../domain/overview-data';
import {CountryOverviewData, EuropeData, SelectedCountry} from '../../domain/overview-map-data';
import {DataHandlerService} from '../../services/data-handler.service';
@ -11,15 +10,12 @@ import {DataHandlerService} from '../../services/data-handler.service';
export class HomeComponent implements OnInit {
// overviewData: OverviewData;
europeOverviewData: EuropeData;
selectedCountry: SelectedCountry = null;
selectedCountryData: CountryOverviewData = null;
// countrySelectedName: string = null;
// countrySelectedOverview: CountryOverview = null;
leadingOpenScienceData: CountryOverviewData[];
constructor(private dataService: DataService,
private dataHandlerService: DataHandlerService) { }
@ -36,14 +32,13 @@ export class HomeComponent implements OnInit {
}
);
// this.dataService.getOverviewData().subscribe(
// overviewData => {
// this.overviewData = overviewData;
// },
// error => {
// console.log(error);
// }
// );
this.dataService.getLeadingOpenScienceMobileData().subscribe(
rawData => {
this.leadingOpenScienceData = this.dataHandlerService.convertRawDataToLeadingOpenScienceData(rawData);
}, error => {
console.log(error);
}
);
}
countrySelected(selectedCountry: SelectedCountry) {
@ -57,18 +52,10 @@ export class HomeComponent implements OnInit {
console.log(error);
}
);
// this.countrySelectedOverview = this.overviewData.countries.filter(x => x.country === this.selectedCountry.name)[0];
// console.log('Country selected overview: ', this.countrySelectedOverview);
}
deselectCountry() {
this.selectedCountry = null;
this.selectedCountryData = null;
// this.countrySelectedName = null;
// this.countrySelectedOverview = null;
}
}

22
src/app/services/data-handler.service.ts
View File

@ -580,6 +580,28 @@ export class DataHandlerService {
return tableData;
}
public convertRawDataToLeadingOpenScienceData(rawData: RawData) {
const leadingOpenScienceData: CountryOverviewData[] = [];
for (const series of rawData.datasets) {
if (series.series.query.name === 'new.oso.mobile.overview') {
for (const rowResult of series.series.result) {
const countryOverviewData: CountryOverviewData = new CountryOverviewData();
countryOverviewData.name = rowResult.row[1];
countryOverviewData.code = rowResult.row[0];
countryOverviewData.publicationsAffiliated = Number(rowResult.row[2]);
countryOverviewData.publicationsDeposited = Number(rowResult.row[3]);
leadingOpenScienceData.push(countryOverviewData);
}
}
}
return leadingOpenScienceData;
}
public convertRawDataToCountryPageOverviewData(rawData: RawData) {
const countryPageOverviewData: CountryPageOverviewData = new CountryPageOverviewData();

7
src/app/services/data.service.ts
View File

@ -63,13 +63,18 @@ export class DataService {
return this.httpClient.get<RawData>(this.apiURL + overviewTablePercentageDataQuery, headerOptions);
}
public getLeadingOpenScienceMobileData(): Observable<RawData> {
const leadingOpenScienceMobileDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.mobile.overview%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';
return this.httpClient.get<RawData>(this.apiURL + leadingOpenScienceMobileDataQuery, headerOptions);
}
public getEuropeOAPercentages(): Observable<RawData> {
const europeOAPercentagesQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.publications.oa_percentage%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.datasets.oa_percentage%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.software.oa_percentage%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.other.oa_percentage%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';
return this.httpClient.get<RawData>(this.apiURL + europeOAPercentagesQuery, headerOptions);
}
public getCountryPageOverviewData(countryCode: string): Observable<RawData> {
const countryPageOverviewDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.country%22%2C%20%22parameters%22%3A%5B%22publication%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.country%22%2C%20%22parameters%22%3A%5B%22publication%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.country%22%2C%20%22parameters%22%3A%5B%22dataset%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.country%22%2C%20%22parameters%22%3A%5B%22dataset%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.oa_policies.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funder.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funding_organizations.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.ec_funded_organizations.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%5D%2C%22verbose%22%3Atrue%7D';
const countryPageOverviewDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.country%22%2C%20%22parameters%22%3A%5B%22publication%22%2C%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.country%22%2C%20%22parameters%22%3A%5B%22publication%22%2C%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.country%22%2C%20%22parameters%22%3A%5B%22dataset%22%2C%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.country%22%2C%20%22parameters%22%3A%5B%22dataset%22%2C%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.country%22%2C%20%22parameters%22%3A%5B%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.country%22%2C%20%22parameters%22%3A%5B%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.oa_policies.country%22%2C%20%22parameters%22%3A%5B%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funder.country%22%2C%20%22parameters%22%3A%5B%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funding_organizations.country%22%2C%20%22parameters%22%3A%5B%22' + countryCode + '%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.ec_funded_organizations.country%22%2C%20%22parameters%22%3A%5B%22' + countryCode + '%22%5D%7D%7D%5D%2C%22verbose%22%3Atrue%7D';
return this.httpClient.get<RawData>(this.apiURL + countryPageOverviewDataQuery, headerOptions);
}

67
src/app/shared/footer/footer.component.html
View File

@ -1,35 +1,87 @@
<div class="uk-section">
<div class="uk-section footerSection">
<div class="uk-container uk-container-small uk-container-center">
<div class="uk-grid">
<div class="uk-width-1-4">
<div class="uk-width-1-4@m uk-width-1-4@l uk-width-1-1@s">
<div>
<img src="../../../assets/img/Logo_Horizontal_white_small.png">
</div>
<div class="uk-text-meta uk-text-small uk-margin-top">
<span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">
<span class="uk-margin-right footerImage">
<img src="../../../assets/img/Open_Research_Graph.svg">
</span>
<span>Powered by <a target="_blank" href="" style="text-decoration: underline">OpenAIRE Open Research Graph</a></span>
</div>
</div>
<div class="uk-width-3-4">
<div class="uk-width-3-4@m uk-width-3-4@l uk-width-1-1@s uk-margin">
<div class="">
<span class="uk-margin-right" style="opacity: 0.8; float: left; margin-top: 7px;">
<span class="uk-margin-right footerImage">
<img src="../../../assets/img/EU_footer_flag.png">
</span>
<span>OpenAIRE-Advance receives funding from the European Union’s Horizon 2020 Research and Innovation programme
under Grant Agreement No. 777541.</span>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-margin-top">
<a class="footerLink uk-display-block">Terms of use & privacy policy</a>
<a class="footerLink uk-display-block uk-margin-small-top">Sources and methodology</a>
</div>
<div class="uk-margin-medium-top uk-text-left@s uk-text-center">
<div class="uk-child-width-auto uk-grid-small uk-flex-left@s uk-flex-center uk-grid" uk-grid="">
<div class="uk-first-column">
<a href="http://www.facebook.com/groups/openaire/" target="_blank" class="el-link uk-icon-button uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M11,10h2.6l0.4-3H11V5.3c0-0.9,0.2-1.5,1.5-1.5H14V1.1c-0.3,0-1-0.1-2.1-0.1C9.6,1,8,2.4,8,5v2H5.5v3H8v8h3V10z"></path>
</svg>
</a>
</div>
<div>
<a href="http://www.twitter.com/OpenAIRE_eu" target="_blank" class="el-link uk-icon-button uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M19,4.74 C18.339,5.029 17.626,5.229 16.881,5.32 C17.644,4.86 18.227,4.139 18.503,3.28 C17.79,3.7 17.001,4.009 16.159,4.17 C15.485,3.45 14.526,3 13.464,3 C11.423,3 9.771,4.66 9.771,6.7 C9.771,6.99 9.804,7.269 9.868,7.539 C6.795,7.38 4.076,5.919 2.254,3.679 C1.936,4.219 1.754,4.86 1.754,5.539 C1.754,6.82 2.405,7.95 3.397,8.61 C2.79,8.589 2.22,8.429 1.723,8.149 L1.723,8.189 C1.723,9.978 2.997,11.478 4.686,11.82 C4.376,11.899 4.049,11.939 3.713,11.939 C3.475,11.939 3.245,11.919 3.018,11.88 C3.49,13.349 4.852,14.419 6.469,14.449 C5.205,15.429 3.612,16.019 1.882,16.019 C1.583,16.019 1.29,16.009 1,15.969 C2.635,17.019 4.576,17.629 6.662,17.629 C13.454,17.629 17.17,12 17.17,7.129 C17.17,6.969 17.166,6.809 17.157,6.649 C17.879,6.129 18.504,5.478 19,4.74"></path>
</svg>
</a>
</div>
<div class="">
<a href="http://www.linkedin.com/groups/OpenAIRE-3893548" target="_blank" class="el-link uk-icon-button uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M5.77,17.89 L5.77,7.17 L2.21,7.17 L2.21,17.89 L5.77,17.89 L5.77,17.89 Z M3.99,5.71 C5.23,5.71 6.01,4.89 6.01,3.86 C5.99,2.8 5.24,2 4.02,2 C2.8,2 2,2.8 2,3.85 C2,4.88 2.77,5.7 3.97,5.7 L3.99,5.7 L3.99,5.71 L3.99,5.71 Z"></path>
<path d="M7.75,17.89 L11.31,17.89 L11.31,11.9 C11.31,11.58 11.33,11.26 11.43,11.03 C11.69,10.39 12.27,9.73 13.26,9.73 C14.55,9.73 15.06,10.71 15.06,12.15 L15.06,17.89 L18.62,17.89 L18.62,11.74 C18.62,8.45 16.86,6.92 14.52,6.92 C12.6,6.92 11.75,7.99 11.28,8.73 L11.3,8.73 L11.3,7.17 L7.75,7.17 C7.79,8.17 7.75,17.89 7.75,17.89 L7.75,17.89 L7.75,17.89 Z"></path>
</svg>
</a>
</div>
<div class="">
<a href="https://www.youtube.com/channel/UChFYqizc-S6asNjQSoWuwjw" target="_blank" class="el-link uk-icon-button uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M15,4.1c1,0.1,2.3,0,3,0.8c0.8,0.8,0.9,2.1,0.9,3.1C19,9.2,19,10.9,19,12c-0.1,1.1,0,2.4-0.5,3.4c-0.5,1.1-1.4,1.5-2.5,1.6 c-1.2,0.1-8.6,0.1-11,0c-1.1-0.1-2.4-0.1-3.2-1c-0.7-0.8-0.7-2-0.8-3C1,11.8,1,10.1,1,8.9c0-1.1,0-2.4,0.5-3.4C2,4.5,3,4.3,4.1,4.2 C5.3,4.1,12.6,4,15,4.1z M8,7.5v6l5.5-3L8,7.5z"></path>
</svg>
</a>
</div>
</div>
<div class="uk-margin-medium-top">
<h5 class="el-title uk-margin-medium-right uk-h5 uk-inline uk-margin-remove">Newsletter</h5>
<a class="el-link footerLink" href="/newsletter/listing">
<span class="el-image uk-icon" uk-icon="icon: rss; ratio: 1;">
</span>
</a>
</div>
</div>
</div>
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<div class="uk-margin-top">
<a class="footerLink uk-margin-medium-right">Terms of use & privacy policy</a>
<a class="footerLink">Sources and methodology</a>
</div>
<div class="uk-margin-top uk-text-left@s uk-text-center">
<div class="uk-child-width-auto uk-grid-small uk-flex-left@s uk-flex-center uk-grid" uk-grid="">
<div class="uk-first-column">
@ -73,6 +125,7 @@
</div>
</div>
</div>
</div>
@ -80,7 +133,7 @@
</div>
<div class="uk-grid" uk-grid="">
<div class="uk-width-expand@m">
<div class="uk-width-expand@m uk-width-expand@l uk-width-expand@s">
<div id="footer#22" class=" uk-text-small uk-margin uk-margin-remove-bottom uk-text-center@m uk-text-center uk-text-lead">
<a href="http://creativecommons.org/licenses/by/4.0/" rel="license">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class=" uk-svg uk-margin-small-right">

182
src/app/shared/topmenu/top-menu.component.html
View File

@ -1,134 +1,91 @@
<!--<header id="header_main">-->
<!--<nav class="uk-navbar">-->
<!--<div class="uk-container uk-container-large uk-container-center">-->
<!--<a href="#" class="uk-float-left" id="mobile_navigation_toggle" data-uk-offcanvas="{target:'#mobile_navigation'}"><i class="material-icons">&#xE5D2;</i></a>-->
<!--<a href="/" class="uk-navbar-brand">-->
<!--<img src="../../../assets/img/Logo-COLOR.svg" alt="" width="152" height="30">-->
<!--</a>-->
<!--<div class="uk-navbar-flip">-->
<!--<ul class="uk-navbar-nav" id="main_navigation">-->
<!--<li>-->
<!--<a href="#sect-overview">-->
<!--About-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-features">-->
<!--Help-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-gallery">-->
<!--Sign In-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</nav>-->
<!--</header>-->
<!--<div id="mobile_navigation" class="uk-offcanvas">-->
<!--<div class="uk-offcanvas-bar">-->
<!--<ul>-->
<!--<li>-->
<!--<a href="#sect-overview" data-uk-smooth-scroll="{offset: 48}">-->
<!--<span class="menu_icon"><i class="material-icons">&#xE417;</i></span>-->
<!--<span class="menu_title">About</span>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-features" data-uk-smooth-scroll="{offset: 48}">-->
<!--<span class="menu_icon"><i class="material-icons">&#xE896;</i></span>-->
<!--<span class="menu_title">Help</span>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a href="#sect-gallery" data-uk-smooth-scroll="{offset: 48}">-->
<!--<span class="menu_icon"><i class="material-icons">&#xE410;</i></span>-->
<!--<span class="menu_title">Sign In</span>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<div>
<div class="uk-offcanvas-content">
<!--MOBILE-->
<!--MOBILE & PAD PORTRAIT-->
<div class="tm-header-mobile uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle="">
<ng-container *ngIf="isHomeRoute() ; else smallHeader">
<nav class="uk-navbar-container uk-navbar" uk-navbar>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="" href="#">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
</div>
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a [routerLink]="['/home']">Home</a></li>
<li class="uk-active"><a [routerLink]="['/overview/' + 'europe']">OA in Europe</a></li>
<!--<li class="uk-active"><a href="#">About</a></li>-->
<li class="uk-active"><a [routerLink]="['/methodology']">Methodology</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a [routerLink]="['home']">Sign In</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" [routerLink]="['/home']">
<img src="../../../assets/img/OS_Logo_Horizontal.svg" alt="Open Science Observatory"
<img src="../../../assets/img/OS_Logo_Vertical.svg" alt="Open Science Observatory" width="161"
class="uk-responsive-height"> </a>
</div>
</nav>
<div id="tm-mobile" uk-offcanvas="" mode="slide" overlay="" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
<div class="uk-child-width-1-1 uk-grid" uk-grid="">
<div>
<div>
<a>Sign in| Register</a>
<!--<span *ngIf="getIsUserLoggedIn()">{{getUserName()}}</span>-->
<ul class="uk-list uk-margin-top">
</ng-container>
<ng-template #smallHeader>
<nav class="uk-navbar-container uk-navbar smallHeader" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" [routerLink]="['/home']">
<img src="../../../assets/img/OS_Logo_small.svg" alt="Open Science Observatory" width="36"
class="uk-responsive-height"> </a>
</div>
<div class="uk-navbar-center">
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Search for a country...">
<!--<input type="text">-->
</div>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="uk-search-input" [routerLink]="['/home']" [routerLinkActive]="['uk-active']">About</a>
</li>
<li>
<a class="uk-search-input" [routerLink]="['/methodology']" [routerLinkActive]="['uk-active']">Methodology</a>
</li>
<a class="" href="#">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
</div>
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a [routerLink]="['/home']">Home</a></li>
<li class="uk-active"><a [routerLink]="['/overview/' + 'europe']">OA in Europe</a></li>
<!--<li class="uk-active"><a href="#">About</a></li>-->
<li class="uk-active"><a [routerLink]="['/methodology']">Methodology</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a [routerLink]="['home']">Sign In</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</ng-template>
</div>
<!--LAPTOP-->
<!--<div class="tm-toolbar uk-visible@m">-->
<!--<div class="uk-container uk-flex uk-flex-middle uk-container-expand">-->
<!--<div class="uk-margin-auto-left">-->
<!--<div class="uk-grid-medium uk-child-width-auto uk-flex-middle uk-grid uk-grid-stack"-->
<!--uk-grid="margin: uk-margin-small-top">-->
<!--<div class="uk-first-column">-->
<!--<div class="uk-panel inner">-->
<!--<ul class="uk-subnav uk-subnav-line">-->
<!--<li><a class="home-icon" href="https://{{ inBeta ? 'beta.' : '' }}openaire.eu" target="_blank">-->
<!--<span class="uk-responsive-height">-->
<!--<svg xml:space="preserve" enable-background="new 0 0 20 20" height="20px" id="Layer_1" version="1.1" viewBox="0 0 48 48" width="20px" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M44.715,23.711c-0.381,0.382-1,0.382-1.381,0l-8.939-8.938 c-0.064-0.051-0.119-0.106-0.17-0.171l-3.83-3.829c-0.064-0.051-0.119-0.106-0.17-0.171L24,4.377L4.667,23.711 c-0.381,0.382-1,0.382-1.381,0c-0.381-0.381-0.381-1,0-1.381L23.191,2.425c0.031-0.047,0.053-0.101,0.094-0.144 C23.482,2.085,23.742,1.994,24,2c0.258-0.006,0.518,0.084,0.715,0.281c0.043,0.042,0.062,0.096,0.096,0.144L30,7.616V4.997 c0,0,0,0,0,0c0-0.552,0.447-1,1-1h4c0.277,0,0.527,0.112,0.707,0.293C35.889,4.471,36,4.721,36,4.997v8.619l8.715,8.714 C45.096,22.711,45.096,23.33,44.715,23.711z M34,5.997h-2v3.619l2,2V5.997z M10,21.997c0.552,0,1,0.448,1,1v19c0,1.105,0.896,2,2,2 h6l0,0v-13c0-0.553,0.447-1,1-1h8c0.553,0,1,0.447,1,1v13l0,0h6c1.105,0,2-0.895,2-2v-19c0-0.552,0.447-1,1-1s1,0.448,1,1v19 c0,2.209-1.791,4-4,4H13c-2.209,0-4-1.791-4-4v-19C9,22.444,9.448,21.997,10,21.997z M27,43.996v-12h-6v12l0,0H27L27,43.996z" fill="#fff" fill-rule="evenodd" id="home"></path></svg>-->
<!--</span></a></li>-->
<!--<li uk-tooltip="title: Search in OA. Link your research; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://{{ inBeta ? 'beta.' : '' }}explore.openaire.eu" target="_blank">Explore</a></li>-->
<!--<li uk-tooltip="title: Content Provider Dashboard; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto" class="custom-provide-li">-->
<!--<a href="https://{{ inBeta ? 'beta.' : '' }}provide.openaire.eu/" target="_blank">Provide</a></li>-->
<!--<li uk-tooltip="title: Research Community Dashboard; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://{{ inBeta ? 'beta.' : '' }}connect.openaire.eu" target="_blank">Connect</a></li>-->
<!--<li uk-tooltip="title: Monitoring Dashboard; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://monitor.openaire.eu" target="_blank">Monitor</a></li>-->
<!--<li uk-tooltip="title: APIs; pos: bottom-left; cls: uk-active tooltipStyling uk-width-auto">-->
<!--<a href="https://develop.openaire.eu" target="_blank">Develop</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--LAPTOP & PAD LANDSCAPE-->
<div class="tm-header uk-visible@m tm-header-transparent" uk-header="">
<div class="uk-navbar-container uk-sticky uk-navbar-transparent" uk-sticky="top:0" media="768"
cls-active="uk-active uk-navbar-sticky" style="" animation="uk-animation-slide-top"
@ -146,7 +103,12 @@
<ul class="uk-navbar-nav" >
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['home']" [routerLinkActive]="['uk-active']">
About
Home
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['/overview/' + 'europe']" [routerLinkActive]="['uk-active']">
OA in Europe
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">

12
src/app/shared/topmenu/top-menu.component.ts
View File

@ -1,11 +1,17 @@
import { Component, DoCheck, OnInit, ViewEncapsulation } from '@angular/core';
import { Component } from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-top-menu',
templateUrl: './top-menu.component.html',
// styleUrls: ['./top-menu.component.css'],
encapsulation: ViewEncapsulation.None
})
export class TopmenuComponent {
constructor(private router: Router) {
}
isHomeRoute() {
return (this.router.url === '/home');
}
}

169
src/assets/css/os-observatory-custom.css
View File

@ -17,6 +17,10 @@ h3 {
font-size: 24px;
}
.uk-flex-space-between {
justify-content: space-between;
}
.uk-container-large {
max-width: 1600px;
}
@ -205,6 +209,14 @@ div.indicator span {
color: #A98BD4;
}
.software {
color: #C2155A;
}
.other {
color: #00CCCC;
}
.repositories {
color: #708AA5;
}
@ -316,6 +328,10 @@ div.indicator span {
border-bottom-color: #CA4D9A;
}
.uk-tab::before {
border-bottom: none;
}
.dataContainer {
background: #F9fbfc 0% 0% no-repeat padding-box;
border: 1px solid #E0E0E0;
@ -447,6 +463,12 @@ div.indicator span {
text-decoration: underline;
}
.footerImage {
opacity: 0.8;
float: left;
margin-top: 7px;
}
/********************************************/
@ -698,7 +720,8 @@ div.indicator span {
.demo-chart {
height: 600px;
/*max-height: 600px;*/
height: 65vh;
}
/********* LOADERS *********/
@ -835,3 +858,147 @@ hr.entitiesDivider {
display: flex;
justify-content: space-between;
}
.chartCard.md-card {
box-shadow: 1px 10px 12 px #00000026;
border: 1px solid #E0E0E0;
border-radius: 5px;
}
/********* MOBILE ********/
@media only screen and (max-width: 960px) {
body {
background: #F9FBFC;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
.uk-navbar-container:not(.uk-navbar-transparent) {
background: #F9FBFC;
}
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
min-height: 60px;
}
.uk-logo > img {
max-height: 125px;
}
.uk-navbar-toggle-icon {
color: #EC4386;
}
.searchForCountry.uk-search.uk-search-default {
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #C7C7C7;
border-radius: 4px;
}
.searchForCountry.uk-search .uk-search-icon {
color: #4687f4;
}
.progress {
width: 100%;
}
.overviewMobile .number.big {
font-size: 24px;
}
.overviewMobile {
font-size: 12px;
}
.goToDetailedViewLink {
text-align: center;
margin-top: 0px;
}
.leadingOpenScienceCard {
font-size: 10px;
}
.leadingOpenScienceCard .number {
font-size: 14px;
}
.leadingOpenScienceCard .countryName {
font-size: 16px;
font-weight: bold;
}
.footerSection {
text-align: center;
background-color: #fff;
}
.footerImage {
opacity: 0.8;
float: none;
margin-top: 0px;
}
[class*="uk-navbar-dropdown-bottom"] {
margin-top: -5px;
left: 200px !important;
}
.tm-header-mobile .uk-nav-divider {
margin: 15px 0;
}
.tm-header-mobile .smallHeader {
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;
}
.continentPageEntitiesOverview .number.big {
font-size: 24px;
}
.continentPageEntitiesOverview .entityName {
font-size: 16px;
font-weight: 600;
}
.uk-tab {
flex-wrap: nowrap;
overflow-x: auto;
background: #fff;
padding-bottom: 15px;
padding-top: 10px;
margin-right: -20px;
}
.entitiesContainer {
margin-left: 0px;
height: 200px;
}
hr.entitiesDivider {
margin-left: -15px;
margin-right: -15px;
}
.dataContainer {
border: none;
}
.tabContent {
padding: 30px 0px;
}
}

1
src/assets/img/OS_Logo_Vertical.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

1
src/assets/img/OS_Logo_small.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.688" height="35" viewBox="0 0 35.688 35"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.01" y1="0.5" x2="0.99" y2="0.5" gradientUnits="objectBoundingBox"><stop offset="0.06" stop-color="#ca4d9a"/><stop offset="0.09" stop-color="#cc4c99"/><stop offset="0.37" stop-color="#de478e"/><stop offset="0.66" stop-color="#e94488"/><stop offset="1" stop-color="#ec4386"/></linearGradient></defs><g transform="translate(-46.85)"><g transform="translate(46.85)"><path class="a" d="M98.878,0H98.19a17.5,17.5,0,0,0,0,35h.688a17.5,17.5,0,1,0,0-35ZM87.4,27.137a14.721,14.721,0,0,1,0-19.287A11.82,11.82,0,0,0,107.029,20.03a9.06,9.06,0,0,1-7.982,12.186h-.513A14.712,14.712,0,0,1,87.4,27.143ZM91.488,17.5a9.039,9.039,0,0,1,14.092,0,9.039,9.039,0,0,1-14.092,0Zm18.185,9.643A11.82,11.82,0,0,0,90.039,14.964,9.06,9.06,0,0,1,98.021,2.779c.169,0,.341-.015.513-.015a14.737,14.737,0,0,1,11.139,24.38Z" transform="translate(-80.69)"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/assets/img/flags/es-flag.svg
View File

@ -3941,4 +3941,3 @@ cOHixj4v1i/L4qes5nO4MLsrVuVDVby9l9V0stoWX2VWrNebXbErP6EpW1Xldrepymz7uvnGK3jT
]]>
</i:pgf>
</svg>
353369
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 345 KiB

After

Width:  |  Height:  |  Size: 345 KiB

1
src/assets/img/flags/gb-flag.svg
View File

@ -514,4 +514,3 @@ dOUChsEzSAEiFYQD15yKE8IpxP9yS1bpr74X8xyvr/loYzM6+bi+1t0rt3MP8n7YzN2mM5BH75JB
]]>
</i:pgf>
</svg>
38722
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

1
src/assets/img/icons/other-icon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="44.894" height="14.351" viewBox="0 0 44.894 14.351"><defs><style>.a{fill:#fff;stroke:#00CCCC;stroke-miterlimit:10;stroke-width:3px;}.b{fill:#00a1c2;opacity:0.2;}</style></defs><g transform="translate(-1 -0.968)"><g transform="translate(2.5 2.468)"><g transform="translate(0 0)"><circle class="a" cx="5.675" cy="5.675" r="5.675"/><circle class="a" cx="5.675" cy="5.675" r="5.675" transform="translate(15.271)"/><circle class="a" cx="5.675" cy="5.675" r="5.675" transform="translate(30.543)"/><ellipse class="b" cx="3.594" cy="3.594" rx="3.594" ry="3.594" transform="translate(2.095 2.092)"/><ellipse class="b" cx="3.594" cy="3.594" rx="3.594" ry="3.594" transform="translate(17.344 2.092)"/><ellipse class="b" cx="3.594" cy="3.594" rx="3.594" ry="3.594" transform="translate(32.593 2.092)"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 856 B

9
src/assets/img/icons/software-icon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="66.951" height="57.217" viewBox="0 0 66.951 57.217">
<g id="noun_coding_2149135" transform="translate(-15.05 -50.066)">
<g id="Group_2435" data-name="Group 2435" transform="translate(15.05 50.066)">
<path id="Path_15618" data-name="Path 15618" d="M31.1,148.159a2.353,2.353,0,0,0-3.334.083L15.7,160.955a2.368,2.368,0,0,0,0,3.251l12.073,12.712a2.347,2.347,0,0,0,1.709.736,2.362,2.362,0,0,0,1.709-3.987L20.656,162.58l10.531-11.087A2.353,2.353,0,0,0,31.1,148.159Z" transform="translate(-15.05 -133.969)" fill="#C2155A"/>
<path id="Path_15619" data-name="Path 15619" d="M380.177,148.242a2.359,2.359,0,1,0-3.418,3.251L387.29,162.58l-10.531,11.087a2.359,2.359,0,1,0,3.418,3.251l12.073-12.712a2.368,2.368,0,0,0,0-3.251Z" transform="translate(-325.944 -133.969)" fill="#C2155A"/>
<path id="Path_15620" data-name="Path 15620" d="M198.091,50.182a2.359,2.359,0,0,0-2.973,1.528L178.182,104.2a2.359,2.359,0,0,0,1.528,2.973,2.177,2.177,0,0,0,.722.111,2.364,2.364,0,0,0,2.251-1.639l16.922-52.489A2.363,2.363,0,0,0,198.091,50.182Z" transform="translate(-155.418 -50.066)" fill="#C2155A"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB