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

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

@ -1,142 +1,306 @@
<div class="greySection">
<section class="uk-padding-small" id="sect-continent-page">
<div class="uk-container uk-container-expand uk-margin-medium-top">
<ul class="uk-breadcrumb">
<li><a [routerLink]="['/home']">Home</a></li>
<li><span>{{continentName | titlecase}}</span></li>
</ul>
<!--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>
</ul>
<div *ngIf="continentName" class="">
<img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">
<div class="uk-inline uk-margin-left">
<h1>{{continentName | titlecase}}</h1>
<span class="lastUpdateInfo">Info Last Updated: 21 May 2020</span>
<div *ngIf="continentName" class="">
<img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">
<div class="uk-inline uk-margin-left">
<h1>{{continentName | titlecase}}</h1>
<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">
<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">
<!--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">
<!--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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.publications.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 45 /100 + 'px'}">
<!--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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.publications.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 45 /100 + 'px'}">
{{europeOverviewData.publications.percentage | number :'1.0-1'}}%
</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.publications.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">Publications</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.publications.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">Publications</span>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
<div class="publicationsColumn uk-padding" style="height: 0%">
</ng-container>
<ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
<div class="publicationsColumn uk-padding" style="height: 0%">
</div>
</ng-container>
</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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.datasets.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 45 /100 + 'px'}">
<!--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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.datasets.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 45 /100 + 'px'}">
{{europeOverviewData.datasets.percentage | number :'1.0-1'}}%
</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.datasets.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">Datasets</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.datasets.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">Datasets</span>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
<div class="datasetsColumn" style="height: 0%">
</ng-container>
<ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
<div class="datasetsColumn" style="height: 0%">
</div>
</ng-container>
</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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.software.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 45 /100 + 'px'}">
<!--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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.software.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 45 /100 + 'px'}">
{{europeOverviewData.software.percentage | number :'1.0-1'}}%
</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.software.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">Software</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.software.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">Software</span>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
<div class="softwareColumn" style="height: 0%">
</ng-container>
<ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
<div class="softwareColumn" style="height: 0%">
</div>
</ng-container>
</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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.other.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 45 /100 + 'px'}">
<!--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>
<span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.other.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 45 /100 + 'px'}">
{{europeOverviewData.other.percentage | number :'1.0-1'}}%
</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.other.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">Other</span>
<span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.other.percentage)"
[ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">Other</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 class="uk-grid uk-child-width-1-4 uk-margin-large-top">
<div class="entityLegendContent">
<div class="publicationsDot uk-inline"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
<div class="otherColumn" style="height: 0%">
<div class="entityLegendContent">
<div class="datasetsDot"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
<div class="entityLegendContent">
<div class="softwareDot"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
<div class="entityLegendContent">
<div class="otherDot"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
</ng-container>
</div>
</div>
<hr class="entitiesDivider">
<!--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 class="uk-grid uk-child-width-1-4 uk-margin-large-top">
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
<div class="entityLegendContent">
<div class="publicationsDot uk-inline"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
<div class="entityLegendContent">
<div class="datasetsDot"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
<div class="entityLegendContent">
<div class="softwareDot"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
<div class="entityLegendContent">
<div class="otherDot"></div>
<div class="uk-inline uk-margin-left">
<span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</div>
</div>
<!--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>
@ -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(

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

File diff suppressed because it is too large Load Diff

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

@ -1,331 +1,473 @@
<!--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}">
<!--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">
<div class="uk-grid uk-grid-small uk-margin-bottom uk-grid-match" uk-height-viewport="offset-bottom: 25">
<div class="uk-width-4-5">
<div class="uk-width-4-5">
<!--Map Container-->
<app-europe-map-overview (emitSelectedCountry)="countrySelected($event)"></app-europe-map-overview>
<!--<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="selectedCountry($event)"></app-map-overview>-->
<!--Map Container-->
<app-europe-map-overview (emitSelectedCountry)="countrySelected($event)"></app-europe-map-overview>
<!--<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="selectedCountry($event)"></app-map-overview>-->
</div>
</div>
<div class="uk-width-1-5">
<div class="md-card infoBox">
<ng-container *ngIf="!selectedCountry">
<div class="md-card-toolbar">
<h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
</div>
<div *ngIf="!selectedCountry" class="md-card-content">
<div>An OpenAIRE service to:</div>
<ul>
<li>
Better understand the European open research landscape
</li>
<li>
Track trends for open access to publications, data, software
</li>
<li>
Reveal hidden potential on existing resources
</li>
<li>
View open collaboration patterns
</li>
</ul>
<div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
<button class="md-btn md-btn-primary">Learn More</button>
<div class="uk-width-1-5">
<div class="md-card infoBox">
<ng-container *ngIf="!selectedCountry">
<div class="md-card-toolbar">
<h3 class="uk-text-center">OPENAIRE MONITOR OBSERVATORY</h3>
</div>
<div *ngIf="!selectedCountry" class="md-card-content">
<div>An OpenAIRE service to:</div>
<ul>
<li>
Better understand the European open research landscape
</li>
<li>
Track trends for open access to publications, data, software
</li>
<li>
Reveal hidden potential on existing resources
</li>
<li>
View open collaboration patterns
</li>
</ul>
<div class="uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
<button class="md-btn md-btn-primary">Learn More</button>
</div>
</div>
<div></div>
</ng-container>
</div>
<div></div>
</ng-container>
<ng-container *ngIf="selectedCountry">
<div class="md-card-toolbar">
<h3 class="uk-text-center uk-margin-small-top">
<a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
<img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
<span>{{selectedCountry.name | uppercase}}</span>
</h3>
</div>
<div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
<!--<div *ngIf="!selectedCountryData" class="loading-big">-->
<ng-container *ngIf="selectedCountry">
<div class="md-card-toolbar">
<h3 class="uk-text-center uk-margin-small-top">
<a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
<img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
<span>{{selectedCountry.name | uppercase}}</span>
</h3>
</div>
<div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
<!--<div *ngIf="!selectedCountryData" class="loading-big">-->
<!--<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>-->
<!--&lt;!&ndash;<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">&ndash;&gt;-->
<!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
<!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<div class="transparentFilm"></div>-->
<!--</div>-->
<div *ngIf="selectedCountryData" class="md-card-content">
<div class="numbers">
<div class="uk-margin-small-top">
<!--</div>-->
<div *ngIf="selectedCountryData" class="md-card-content">
<div class="numbers">
<div class="uk-margin-small-top">
<div class="indicator">
<span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
<span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
<span><i>OA publications</i> affiliated to an organization in the country</span>
</div>
<div class="indicator">
<span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
<span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
<span><i>OA publications</i> affiliated to an organization in the country</span>
</div>
<div class="indicator uk-margin-small-top">
<span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
<span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
<span><i>OA publications</i> from institutional repositories</span>
</div>
<div class="indicator uk-margin-small-top">
<span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
<span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
<span><i>OA publications</i> from institutional repositories</span>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
<span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
<span><i>OA datasets</i> affiliated to an organization in the country</span>
</div>
<div class="indicator">
<span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
<span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
<span><i>OA datasets</i> affiliated to an organization in the country</span>
</div>
<div class="indicator uk-margin-small-top">
<span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
<span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
<span><i>OA datasets</i> from institutional repositories</span>
</div>
<div class="indicator uk-margin-small-top">
<span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
<span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
<span><i>OA datasets</i> from institutional repositories</span>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
<span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
<span><i>repositories</i> from openDOAR & re3data</span>
</div>
<div class="indicator">
<span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
<span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
<span><i>repositories</i> from openDOAR & re3data</span>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
<span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
<span><i>journals</i> from DOAJ</span>
</div>
<div class="indicator">
<span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
<span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
<span><i>journals</i> from DOAJ</span>
</div>
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<hr class="greyBoldDivider uk-margin-medium-top uk-margin-medium-bottom">
<div class="indicator">
<span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>
<span class="number policies" *ngIf="selectedCountryData.policies===null">--</span>
<span>organisations with <i>OA policies</i></span>
</div>
<div class="indicator">
<span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>
<span class="number policies" *ngIf="selectedCountryData.policies===null">--</span>
<span>organisations with <i>OA policies</i></span>
</div>
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<!--<button [routerLink]="['/countryDashboard/' + countrySelectedName]" class="md-btn md-btn-primary">View Details</button>-->
<button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
<!--<a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>-->
</div>
<div class="uk-text-center uk-margin-medium-top">
<!--<button [routerLink]="['/countryDashboard/' + countrySelectedName]" class="md-btn md-btn-primary">View Details</button>-->
<button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
<!--<a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>-->
</div>
</div>
<div></div>
</ng-container>
<div></div>
</ng-container>
</div>
</div>
</div>
<!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
<!--<div class="uk-width-large-3-5 uk-container-center uk-text-center">-->
<!--<h2 class="heading_b">-->
<!--Our Team-->
<!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
<!--Our Team-->
<!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
<!--</h2>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<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>
<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="">
<!--Overview cards-->
<div *ngIf="europeOverviewData" class="uk-width-1-1 indicatorCards">
<div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l 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">
<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
<div class="">
<!--Overview cards-->
<div *ngIf="europeOverviewData" class="uk-width-1-1 indicatorCards">
<div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l 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">
<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.publications?.oa" class="number">{{europeOverviewData.publications.oa | number}}</span>
<span *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.oa" class="number">--</span>
</h3>
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.publications?.oa" class="number">{{europeOverviewData.publications.oa | number}}</span>
<span *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.oa" class="number">--</span>
</h3>
</div>
<div class="uk-margin-top">
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
<span class=""><i>OA publications</i></span>
</div>
<div *ngIf="europeOverviewData.publications?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.publications.percentage | number :'1.0-1'}}%</span> OA
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
<div class="uk-margin-top">
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
<span class=""><i>OA publications</i></span>
</div>
<div *ngIf="europeOverviewData.publications?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.publications.percentage | number :'1.0-1'}}%</span> OA
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>
</div>
</div>
</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">
<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
<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">
<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.datasets?.oa" class="number">{{europeOverviewData.datasets.oa | number}}</span>
<span *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.oa" class="number">--</span>
</h3>
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.datasets?.oa" class="number">{{europeOverviewData.datasets.oa | number}}</span>
<span *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.oa" class="number">--</span>
</h3>
</div>
<div class="uk-margin-top">
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
<span class=""><i>OA datasets</i></span>
</div>
<div *ngIf="europeOverviewData.datasets?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.datasets.percentage | number :'1.0-1'}}%</span> OA
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
<div class="uk-margin-top">
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
<span class=""><i>OA datasets</i></span>
</div>
<div *ngIf="europeOverviewData.datasets?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.datasets.percentage | number :'1.0-1'}}%</span> OA
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.datasets.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>
</div>
</div>
</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">
<img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
<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">
<img src="../../../assets/img/icons/repositories-icon.svg" width="43" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.repositories?.oa" class="number">{{europeOverviewData.repositories.oa | number}}</span>
<span *ngIf="!europeOverviewData.repositories || !europeOverviewData.repositories.oa" class="number">--</span>
</h3>
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.repositories?.oa" class="number">{{europeOverviewData.repositories.oa | number}}</span>
<span *ngIf="!europeOverviewData.repositories || !europeOverviewData.repositories.oa" class="number">--</span>
</h3>
</div>
<div class="uk-margin-top">
<span class="">validated <i>repositories</i></span>
</div>
<div *ngIf="europeOverviewData.repositories?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.repositories.percentage | number : '1.0-1'}}%</span> Validated
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
<div class="uk-margin-top">
<span class="">validated <i>repositories</i></span>
</div>
<div *ngIf="europeOverviewData.repositories?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.repositories.percentage | number : '1.0-1'}}%</span> Validated
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>
</div>
</div>
</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">
<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
<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">
<img src="../../../assets/img/icons/journals-icon.svg" width="43" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.journals?.oa" class="number">{{europeOverviewData.journals.oa | number}}</span>
<span *ngIf="!europeOverviewData.journals || !europeOverviewData.journals.oa" class="number">--</span>
</h3>
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.journals?.oa" class="number">{{europeOverviewData.journals.oa | number}}</span>
<span *ngIf="!europeOverviewData.journals || !europeOverviewData.journals.oa" class="number">--</span>
</h3>
</div>
<div class="uk-margin-top">
<span class="">validated <i>OA journals</i></span>
</div>
<div *ngIf="europeOverviewData.journals?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
<div class="uk-margin-top">
<span class="">validated <i>OA journals</i></span>
</div>
<div *ngIf="europeOverviewData.journals?.percentage" class="uk-margin-top">
<span class="number">{{europeOverviewData.journals.percentage | number : '1.0-1'}}%</span> Validated
<div class="progress uk-margin-small-top">
<div [ngStyle]="{'width': europeOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>
</div>
</div>
</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">
<img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
<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">
<img src="../../../assets/img/icons/policies-icon.svg" width="36" height="40">
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.policies?.oa" class="number">{{europeOverviewData.policies.oa | number}}</span>
<span *ngIf="!europeOverviewData.policies || !europeOverviewData.policies.oa" class="number">--</span>
</h3>
</div>
<h3 class="uk-margin-remove">
<span *ngIf="europeOverviewData.policies?.oa" class="number">{{europeOverviewData.policies.oa | number}}</span>
<span *ngIf="!europeOverviewData.policies || !europeOverviewData.policies.oa" class="number">--</span>
</h3>
</div>
<div class="uk-margin-top">
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
<span class="">organizations with <i>OA policies</i></span>
</div>
<!--<div *ngIf="overviewData.overview.policies?.percentage" class="uk-margin-top">-->
<div class="uk-margin-top">
<!--<span class="uk-text-muted uk-text-small">Number of OA publications</span>-->
<span class="">organizations with <i>OA policies</i></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>
</div>
</section>
</section>
<!--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}">
<!--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>
<h3>OA in Europe</h3>
<div class="dataContainer">
<div class="uk-margin tabContent">
<app-data-view></app-data-view>
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
<div class="dataContainer">
<div class="uk-margin tabContent">
<app-data-view></app-data-view>
<!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
</div>
</div>
</div>
</section>
</div>
<!--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 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>
<!--<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>-->
<!--<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>-->
<!--</div>-->
</div>
</section>

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);
}

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

@ -1,68 +1,70 @@
<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>
<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>
<!--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 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">
<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 class="uk-margin-medium-left" style="margin-top: 7px;">
<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;">
@ -70,7 +72,58 @@
</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">
<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 class="uk-margin-medium-left" style="margin-top: 7px;">
<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>
</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">

204
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="">
<div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon">
</div>
</a>
</div>
<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"
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">
<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>
</ul>
</div>
<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_Vertical.svg" alt="Open Science Observatory" width="161"
class="uk-responsive-height"> </a>
</div>
</nav>
</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>
</div>
<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>
</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

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

@ -21,8 +21,8 @@
<g i:extraneous="self">
<g>
<rect id="_x31_4" x="744.5" y="921.5" fill="#FFFFFF" width="299.843" height="149.983"/>
<polygon id="_x31_3" fill="#CF142B" points="879.428,1011.444 879.428,1071.483 909.416,1071.483 909.416,1011.444
1044.344,1011.444 1044.344,981.46 909.416,981.46 909.416,921.5 879.428,921.5 879.428,981.46 744.5,981.46 744.5,1011.444
<polygon id="_x31_3" fill="#CF142B" points="879.428,1011.444 879.428,1071.483 909.416,1071.483 909.416,1011.444
1044.344,1011.444 1044.344,981.46 909.416,981.46 909.416,921.5 879.428,921.5 879.428,981.46 744.5,981.46 744.5,1011.444
"/>
<polygon id="_x31_2" fill="#00247D" points="919.415,970.049 919.415,921.5 1016.495,921.5 "/>
<polygon id="_x31_1" fill="#00247D" points="919.415,1022.933 919.415,1071.483 1016.495,1071.483 "/>
@ -33,7 +33,7 @@
<polygon id="_x36_" fill="#00247D" points="1044.343,1057.541 1044.343,1021.49 972.256,1021.49 "/>
<polygon id="_x35_" fill="#00247D" points="744.501,1057.541 744.501,1021.49 816.588,1021.49 "/>
<polyline id="_x34_" fill="#CF142B" points="1044.343,921.5 1027.689,921.5 927.9,971.493 944.554,971.493 1044.5,921.5 "/>
<polyline id="_x33_" fill="#CF142B" points="860.943,1021.487 844.289,1021.487 744.5,1071.48 761.154,1071.48 861.1,1021.487
<polyline id="_x33_" fill="#CF142B" points="860.943,1021.487 844.289,1021.487 744.5,1071.48 761.154,1071.48 861.1,1021.487
"/>
<polygon id="_x32_" fill="#CF142B" points="827.768,971.532 844.421,971.532 744.5,921.5 744.5,929.885 "/>
<polygon id="_x31_" fill="#CF142B" points="961.023,1021.468 944.369,1021.468 1044.29,1071.5 1044.29,1063.115 "/>
@ -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