open-science-observatory-ui/src/app/pages/continent/open-science/publications/continent-os-publications-i...

439 lines
25 KiB
HTML

<div *ngIf="indicator && indicator=='gold-green'" class="goldGreenIndicator">
<div class="uk-grid uk-grid-margin">
<div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="publicationsWithGoldGreenTimeline" width="100%" height="550" [src]="publicationsWithGoldGreenTimeline"></iframe>
</div>
</div>
</div>
</div>
<div class="uk-grid uk-grid-margin">
<div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
<div class="md-card chartCard">
<div class="md-card-content">
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
<label class="uk-margin-right">Show by: </label>
<select class="md-input" #selectGoldGreenGroupBy (change)="getPublicationsWithGoldGreenGroupByMobile(selectGoldGreenGroupBy.value)" style="display: inline-block">
<option value="country">country</option>
<option value="datasource">datasource</option>
<option value="organization">organization</option>
<option value="funder">funder</option>
</select>
</div>
<iframe *ngIf="publicationsWithGoldGreenGroupByView==='country' && publicationsWithGoldGreenByCountryChartURLMobile"
width="100%" height="550" [src]="publicationsWithGoldGreenByCountryChartURLMobile"></iframe>
<iframe *ngIf="publicationsWithGoldGreenGroupByView==='datasource' && publicationsWithGoldGreenByDatasourceChartURL"
width="100%" height="550" [src]="publicationsWithGoldGreenByDatasourceChartURL"></iframe>
<iframe *ngIf="publicationsWithGoldGreenGroupByView==='organization' && publicationsWithGoldGreenByOrganizationChartURL"
width="100%" height="550" [src]="publicationsWithGoldGreenByOrganizationChartURL"></iframe>
<iframe *ngIf="publicationsWithGoldGreenGroupByView==='funder' && publicationsWithGoldGreenByFunderChartURL"
width="100%" height="550" [src]="publicationsWithGoldGreenByFunderChartURL"></iframe>
</div>
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
data-uk-switcher="{connect:'#switcher-content-a-fade-publications-gold-green', animation: 'fade'}">
<li class="uk-active"><a (click)="getPublicationsWithGoldGreenGroupBy('country')">Country</a></li>
<li><a (click)="getPublicationsWithGoldGreenGroupBy('datasource')">Datasource</a></li>
<li><a (click)="getPublicationsWithGoldGreenGroupBy('organization')">Organization</a></li>
<li><a (click)="getPublicationsWithGoldGreenGroupBy('funder')">Funder</a></li>
</ul>
<ul id="switcher-content-a-fade-publications-gold-green" class="uk-switcher uk-margin">
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<iframe *ngIf="publicationsWithGoldGreenByCountryChartURL"
width="100%" height="650" [src]="publicationsWithGoldGreenByCountryChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithGoldGreenByDatasourceChartURL"
width="100%" height="650" [src]="publicationsWithGoldGreenByDatasourceChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithGoldGreenByOrganizationChartURL"
width="100%" height="650" [src]="publicationsWithGoldGreenByOrganizationChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithGoldGreenByFunderChartURL"
width="100%" height="650" [src]="publicationsWithGoldGreenByFunderChartURL" [height]="650"></iframe>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="indicator && indicator=='abstract'" class="abstractIndicator">
<div class="uk-grid uk-grid-margin">
<div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="publicationsWithAbstractTimeline" width="100%" height="550" [src]="publicationsWithAbstractTimeline"></iframe>
</div>
</div>
</div>
</div>
<div class="uk-grid uk-grid-margin">
<div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
<div class="md-card chartCard">
<div class="md-card-content">
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
<label class="uk-margin-right">Show by: </label>
<select class="md-input" #selectAbstractGroupBy (change)="getPublicationsWithAbstractGroupByMobile(selectAbstractGroupBy.value)" style="display: inline-block">
<option value="country">country</option>
<option value="datasource">datasource</option>
<option value="organization">organization</option>
<option value="funder">funder</option>
</select>
</div>
<iframe *ngIf="publicationsWithAbstractGroupByView==='country' && publicationsWithAbstractByCountryChartURLMobile"
width="100%" height="550" [src]="publicationsWithAbstractByCountryChartURLMobile"></iframe>
<iframe *ngIf="publicationsWithAbstractGroupByView==='datasource' && publicationsWithAbstractByDatasourceChartURL"
width="100%" height="550" [src]="publicationsWithAbstractByDatasourceChartURL"></iframe>
<iframe *ngIf="publicationsWithAbstractGroupByView==='organization' && publicationsWithAbstractByOrganizationChartURL"
width="100%" height="550" [src]="publicationsWithAbstractByOrganizationChartURL"></iframe>
<app-treemap-highchart *ngIf="publicationsWithAbstractGroupByView==='funder' && publicationsWithAbstractByFunderData"
[chartTitle]="'Open Access publications with abstract'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithAbstractByFunderData" [color]="publicationColor"></app-treemap-highchart>
</div>
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
data-uk-switcher="{connect:'#switcher-content-a-fade-publications-abstract', animation: 'fade'}">
<li class="uk-active"><a (click)="getPublicationsWithAbstractGroupBy('country')">Country</a></li>
<li><a (click)="getPublicationsWithAbstractGroupBy('datasource')">Datasource</a></li>
<li><a (click)="getPublicationsWithAbstractGroupBy('organization')">Organization</a></li>
<li><a (click)="getPublicationsWithAbstractGroupBy('funder')">Funder</a></li>
</ul>
<ul id="switcher-content-a-fade-publications-abstract" class="uk-switcher uk-margin">
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<iframe *ngIf="publicationsWithAbstractByCountryChartURL"
width="100%" height="650" [src]="publicationsWithAbstractByCountryChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithAbstractByDatasourceChartURL"
width="100%" height="650" [src]="publicationsWithAbstractByDatasourceChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithAbstractByOrganizationChartURL"
width="100%" height="650" [src]="publicationsWithAbstractByOrganizationChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<app-treemap-highchart *ngIf="publicationsWithAbstractByFunderData"
[chartTitle]="'Open Access publications with abstract'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithAbstractByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="indicator && indicator=='licence'" class="licenceIndicator">
<div class="uk-grid uk-grid-match 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 *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
</div>
</div>
</div>
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="publicationsWithCCLicenceTimeline" width="100%" height="550" [src]="publicationsWithCCLicenceTimeline"></iframe>
</div>
</div>
</div>
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
<label class="uk-margin-right">Show by: </label>
<select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="display: inline-block">
<option value="country">country</option>
<option value="datasource">datasource</option>
<option value="organization">organization</option>
<option value="funder">funder</option>
</select>
</div>
<iframe *ngIf="publicationsWithLicenceGroupByView==='country' && publicationsWithLicenceByCountryChartURLMobile"
width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURLMobile"></iframe>
<iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURL"
width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
<iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURL"
width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
<app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
[chartTitle]="'Open Access publications with licence'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
</div>
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
data-uk-switcher="{connect:'#switcher-content-a-fade-publications-licence', animation: 'fade'}">
<li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('country')">Country</a></li>
<li><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
<li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
<li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
</ul>
<ul id="switcher-content-a-fade-publications-licence" class="uk-switcher uk-margin">
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<iframe *ngIf="publicationsWithLicenceByCountryChartURL"
width="100%" height="650" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
width="100%" height="650" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
width="100%" height="650" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
[chartTitle]="'Open Access publications with licence'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
<label class="uk-margin-right">Show by: </label>
<select class="md-input" #selectCCLicenceGroupBy (change)="getPublicationsWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="display: inline-block">
<option value="country">country</option>
<option value="datasource">datasource</option>
<option value="organization">organization</option>
<option value="funder">funder</option>
</select>
</div>
<iframe *ngIf="publicationsWithCCLicenceGroupByView==='country' && publicationsWithCCLicenceByCountryChartURLMobile"
width="100%" height="550" [src]="publicationsWithCCLicenceByCountryChartURLMobile"></iframe>
<iframe *ngIf="publicationsWithCCLicenceGroupByView==='datasource' && publicationsWithCCLicenceByDatasourceChartURL"
width="100%" height="550" [src]="publicationsWithCCLicenceByDatasourceChartURL"></iframe>
<iframe *ngIf="publicationsWithCCLicenceGroupByView==='organization' && publicationsWithCCLicenceByOrganizationChartURL"
width="100%" height="550" [src]="publicationsWithCCLicenceByOrganizationChartURL"></iframe>
<app-treemap-highchart *ngIf="publicationsWithCCLicenceGroupByView==='funder' && publicationsWithCCLicenceByFunderData"
[chartTitle]="'Open Access publications with CC licence'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithCCLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
</div>
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
data-uk-switcher="{connect:'#switcher-content-a-fade-publications-cc-licence', animation: 'fade'}">
<li class="uk-active"><a (click)="getPublicationsWithCCLicenceGroupBy('country')">Country</a></li>
<li><a (click)="getPublicationsWithCCLicenceGroupBy('datasource')">Datasource</a></li>
<li><a (click)="getPublicationsWithCCLicenceGroupBy('organization')">Organization</a></li>
<li><a (click)="getPublicationsWithCCLicenceGroupBy('funder')">Funder</a></li>
</ul>
<ul id="switcher-content-a-fade-publications-cc-licence" class="uk-switcher uk-margin">
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<iframe *ngIf="publicationsWithCCLicenceByCountryChartURL"
width="100%" height="650" [src]="publicationsWithCCLicenceByCountryChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithCCLicenceByDatasourceChartURL"
width="100%" height="650" [src]="publicationsWithCCLicenceByDatasourceChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithCCLicenceByOrganizationChartURL"
width="100%" height="650" [src]="publicationsWithCCLicenceByOrganizationChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<app-treemap-highchart *ngIf="publicationsWithCCLicenceByFunderData"
[chartTitle]="'Open Access publications with CC licence'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithCCLicenceByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
<div class="uk-grid uk-grid-margin">
<div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
</div>
</div>
</div>
</div>
<div class="uk-grid uk-grid-margin">
<div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
<div class="md-card chartCard">
<div class="md-card-content">
<!--MOBILE & PAD PORTRAIT-->
<div class="uk-hidden@m">
<div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
<label class="uk-margin-right">Show by: </label>
<select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="display: inline-block">
<option value="country">country</option>
<option value="datasource">datasource</option>
<option value="organization">organization</option>
<option value="funder">funder</option>
</select>
</div>
<iframe *ngIf="publicationsWithPIDGroupByView==='country' && publicationsWithPIDByCountryChartURLMobile"
width="100%" height="550" [src]="publicationsWithPIDByCountryChartURLMobile"></iframe>
<iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURL"
width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
<iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURL"
width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
<app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
[chartTitle]="'Open Access publications with PID'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
</div>
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
data-uk-switcher="{connect:'#switcher-content-a-fade-publications-pid', animation: 'fade'}">
<li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('country')">Country</a></li>
<li><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
<li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
<li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
</ul>
<ul id="switcher-content-a-fade-publications-pid" class="uk-switcher uk-margin">
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<iframe *ngIf="publicationsWithPIDByCountryChartURL"
width="100%" height="650" [src]="publicationsWithPIDByCountryChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
width="100%" height="650" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
width="100%" height="650" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
[chartTitle]="'Open Access publications with PID'" [chartSubtitle]="'by funder (top funders)'"
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="indicator && indicator=='more-details'" class="indicatorsTable uk-visible@m uk-margin-large-top">
<!--<h3 class="">More details for publications</h3>-->
<div class="uk-margin-top uk-margin-bottom">
<label class="uk-margin-right">Show: </label>
<select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="display: inline-block">
<option value="affiliated_peer_reviewed">affiliated</option>
<option value="affiliated">affiliated (incl. non-peer reviewed publications)</option>
<option value="deposited_peer_reviewed">deposited</option>
<option value="deposited">deposited (incl. non-peer reviewed publications)</option>
</select>
<!--<span class="md-input-bar"></span>-->
</div>
<div class="uk-grid">
<div class="absoluteTable uk-width-3-4@l uk-width-3-4@m">
<div class="md-card chartCard">
<div class="md-card-content">
<ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#pubs-indicators-content-a-fade', animation: 'fade'}">
<li aria-expanded="true" class="uk-active">
<a href="#">
<i class="fas fa-hashtag"></i>
</a>
</li>
<li aria-expanded="false" class="">
<a href="#">
<i class="fas fa-percentage"></i>
</a>
</li>
</ul>
<ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
<app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
<app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>