open-science-observatory-ui/src/app/pages/continent/continent.component.html

519 lines
27 KiB
HTML

<div class="greySection">
<section class="uk-padding-small" id="sect-continent-page">
<div class="uk-container uk-container-expand uk-margin-medium-top">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="uk-breadcrumb">
<li><a routerLink="/home">Home</a></li>
<li><span>{{continentName | titlecase}}</span></li>
</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">Data Last Updated: </span>
<span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</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">Data Last Updated: </span>
<span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
</div>
</div>
</div>
</div>
</section>
<section class="uk-padding-small">
<!--<div class="uk-container uk-container-center uk-margin-medium-top" [ngClass]="{'uk-container-expand': mapViewActive}">-->
<div class="uk-container uk-container-center uk-margin-medium-top">
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<div class="uk-flex uk-flex-right uk-margin-bottom">
<mat-slide-toggle (change)="toggleView($event)">Map</mat-slide-toggle>
</div>
</div>
<div *ngIf="!mapViewActive" 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'}">
{{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'}">OA Publications</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>
<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'}">OA Datasets</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>
<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'}">OS Software</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>
<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'}">OA 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 *ngIf="europeOverviewData" 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>
<ng-container *ngIf="europeOverviewData.publications?.oa">OA: <span class="number">{{europeOverviewData.publications?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.publications?.total">Total: <span class="number">{{europeOverviewData.publications?.total | number}}</span></ng-container>
</span>
</div>
</div>
<div class="entityLegendContent">
<div class="datasetsDot"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.datasets?.oa">OA: <span class="number">{{europeOverviewData.datasets?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.datasets?.total">Total: <span class="number">{{europeOverviewData.datasets?.total | number}}</span></ng-container>
</span>
</div>
</div>
<div class="entityLegendContent">
<div class="softwareDot"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.software?.oa">OA: <span class="number">{{europeOverviewData.software?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.software?.total">Total: <span class="number">{{europeOverviewData.software?.total | number}}</span></ng-container>
</span>
</div>
</div>
<div class="entityLegendContent">
<div class="otherDot"></div>
<div class="uk-inline uk-margin-left">
<span>
<ng-container *ngIf="europeOverviewData.other?.oa">OA: <span class="number">{{europeOverviewData.other?.oa | number}}</span></ng-container><br>
<ng-container *ngIf="europeOverviewData.other?.total">Total: <span class="number">{{europeOverviewData.other?.total | number}}</span></ng-container>
</span>
</div>
</div>
</div>
</div>
<!-- Europe Map -->
<div *ngIf="mapViewActive" class="uk-visible@m">
<div class="uk-grid uk-grid-small">
<div class="uk-width-3-4@m">
<!--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 class="uk-width-1-4@m">
<div class="md-card infoBox">
<ng-container *ngIf="!selectedCountry">
<div class="md-card-toolbar">
<h3 class="uk-text-center">EUROPE</h3>
</div>
<div class="md-card-content">
<div *ngIf="europeOverviewMapData" class="numbers">
<div class="uk-margin-small-top">
<div class="indicator">
<span class="number publications" *ngIf="europeOverviewMapData.publications?.oa!=null">{{europeOverviewMapData.publications?.oa | number}}</span>
<span class="number publications" *ngIf="europeOverviewMapData.publications?.oa===null">--</span>
<span><i>Open Access publications</i></span>
</div>
<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
<div class="indicator">
<span class="number datasets" *ngIf="europeOverviewMapData.datasets?.oa!=null">{{europeOverviewMapData.datasets?.oa | number}}</span>
<span class="number datasets" *ngIf="europeOverviewMapData.datasets?.oa===null">--</span>
<span><i>Open Access datasets</i></span>
</div>
<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
<div class="indicator">
<span class="number repositories" *ngIf="europeOverviewMapData.repositories?.total!=null">{{europeOverviewMapData.repositories?.total | number}}</span>
<span class="number repositories" *ngIf="europeOverviewMapData.repositories?.total===null">--</span>
<span><i>repositories</i> in OpenDOAR and Re3data</span>
</div>
<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
<div class="indicator">
<span class="number journals" *ngIf="europeOverviewMapData.journals?.total!=null">{{europeOverviewMapData.journals?.total | number}}</span>
<span class="number journals" *ngIf="europeOverviewMapData.journals?.total===null">--</span>
<span><i>Open Access journals</i> in DOAJ</span>
</div>
</div>
</div>
</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">-->
<!--<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;</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 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> in the country's institutional repositories</span>
</div>
<hr class="greyBoldDivider uk-margin-top uk-margin-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 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> in the country's repositories</span>
</div>
<hr class="greyBoldDivider uk-margin-top uk-margin-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> in openDOAR & re3data</span>
</div>
<hr class="greyBoldDivider uk-margin-top uk-margin-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> in DOAJ</span>
</div>
<!--<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">-->
<!--<div class="indicator">-->
<!--<span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>-->
<!--<span class="number policies" *ngIf="selectedCountryData.policies===null">&#45;&#45;</span>-->
<!--<span>organisations with <i>OA policies</i></span>-->
<!--</div>-->
</div>
</div>
<div class="uk-text-center uk-margin-medium-top">
<!--<button [routerLink]="['/country/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>-->
<button [routerLink]="['/country' , selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
</div>
</div>
<div></div>
</ng-container>
</div>
</div>
</div>
</div>
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m uk-text-center">
<div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
<!--PUBLICATIONS-->
<ng-container *ngIf="europeOverviewData.publications?.percentage">
<div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
<div class="publicationsColumn uk-padding" style="height: 0%">
</div>
</ng-container>
<!--DATASETS-->
<ng-container *ngIf="europeOverviewData.datasets?.percentage">
<div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
<div class="datasetsColumn" style="height: 0%">
</div>
</ng-container>
<!--SOFTWARE-->
<ng-container *ngIf="europeOverviewData.software?.percentage">
<div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
<div class="softwareColumn" style="height: 0%">
</div>
</ng-container>
<!--OTHER-->
<ng-container *ngIf="europeOverviewData.other?.percentage">
<div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">
<div class="entityColumnContent">
<span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>
</div>
</div>
</ng-container>
<ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
<div class="otherColumn" style="height: 0%">
</div>
</ng-container>
</div>
<hr class="entitiesDivider">
<div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-1 continentPageEntitiesOverview">
<!--PUBLICATIONS-->
<div *ngIf="europeOverviewData.publications?.percentage" style="z-index: 4;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/publications-icon.svg" width="21">
<span class="publications entityName uk-margin-left">Publications</span>
</div>
<div class="number big">
{{europeOverviewData.publications.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
<!--DATASETS-->
<div *ngIf="europeOverviewData.datasets?.percentage" style="z-index: 3;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/datasets-icon.svg" width="17">
<span class="datasets entityName uk-margin-left">Datasets</span>
</div>
<div class="number big">
{{europeOverviewData.datasets.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
<!--SOFTWARE-->
<div *ngIf="europeOverviewData.software?.percentage" style="z-index: 2;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/software-icon.svg" width="19">
<span class="software entityName uk-margin-left">Software</span>
</div>
<div class="number big">
{{europeOverviewData.software.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
<!--OTHER-->
<div *ngIf="europeOverviewData.other?.percentage" style="z-index: 1;">
<div class="md-card">
<div class="md-card-content">
<div class="uk-flex uk-flex-space-between">
<div class="">
<img src="../../../assets/img/icons/other-icon.svg" width="20">
<span class="other entityName uk-margin-left">Other</span>
</div>
<div class="number big">
{{europeOverviewData.other.percentage | number : '1.0-1'}}%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--TABS SECTION-->
<section class="section uk-margin-large-top" id="sect-tabs">
<div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
<div class="">
<!--LAPTOP & PAD LANDSCAPE-->
<ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
<!--<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['/continent/' + continentName + '/overview']">Overview</a></li>-->
<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
<li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
<!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
</ul>
<!--MOBILE & PAD PORTRAIT-->
<ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
<li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">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>
<div class="dataContainer">
<router-outlet></router-outlet>
</div>
</div>
</div>
</section>
</div>