added tabs for open science views
This commit is contained in:
parent
0496236948
commit
11dce77c0c
|
|
@ -1,6 +1,225 @@
|
|||
<div>
|
||||
|
||||
<div class="pidIndicator">
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
<li class="uk-visible@m"><a href="#">More Details</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></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" #selectPIDGroupBy (change)="getDatasetsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; 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="datasetsWithPIDGroupByView==='country' && datasetsWithPIDByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithPIDByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="datasetsWithPIDGroupByView==='datasource' && datasetsWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="datasetsWithPIDGroupByView==='organization' && datasetsWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="datasetsWithPIDGroupByView==='funder' && datasetsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Datasets with PID by funder'"
|
||||
[chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getDatasetsWithPIDGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getDatasetsWithPIDGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getDatasetsWithPIDGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getDatasetsWithPIDGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="datasetsWithPIDByCountryChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithPIDByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="datasetsWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="datasetsWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="datasetsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Datasets with PID by funder'"
|
||||
[chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></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)="getDatasetsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; 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="datasetsWithLicenceGroupByView==='country' && datasetsWithLicenceByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithLicenceByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="datasetsWithLicenceGroupByView==='datasource' && datasetsWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="datasetsWithLicenceGroupByView==='organization' && datasetsWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="datasetsWithLicenceGroupByView==='funder' && datasetsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Datasets with licence by funder'"
|
||||
[chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getDatasetsWithLicenceGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getDatasetsWithLicenceGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getDatasetsWithLicenceGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getDatasetsWithLicenceGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="datasetsWithLicenceByCountryChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithLicenceByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="datasetsWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="datasetsWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Datasets with licence by funder'"
|
||||
[chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for datasets</h3>
|
||||
|
||||
<div class="uk-margin-top uk-margin-bottom">
|
||||
<label class="uk-margin-right">Show: </label>
|
||||
<select class="md-input" #selectDatasetsContent (change)="getContent('dataset', selectDatasetsContent.value)" style="width: 230px; display: inline-block">
|
||||
<option value="affiliated">affiliated</option>
|
||||
<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
|
||||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
<div class="absoluteTable">
|
||||
<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:'#data-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="data-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="datasetsAbsoluteTableData" [isPercentage]="false" [countries]="datasetsAbsoluteTableData" [view]="'openScience'" [entity]="'dataset'"></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="datasetsPercentageTableData" [isPercentage]="true" [countries]="datasetsPercentageTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--<div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
||||
|
|
@ -16,7 +235,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -40,7 +259,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -78,7 +297,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="licenceIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Licence</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -95,7 +313,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -119,7 +337,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -155,9 +373,9 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
<!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for datasets</h3>
|
||||
|
||||
|
|
@ -169,7 +387,7 @@
|
|||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
<!–<span class="md-input-bar"></span>–>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
|
|
@ -208,7 +426,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,225 @@
|
|||
<div>
|
||||
|
||||
<div class="pidIndicator">
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
<li class="uk-visible@m"><a href="#">More Details</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></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" #selectPIDGroupBy (change)="getOtherWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; 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="otherWithPIDGroupByView==='country' && otherWithPIDByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithPIDByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="otherWithPIDGroupByView==='datasource' && otherWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="otherWithPIDGroupByView==='organization' && otherWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="otherWithPIDGroupByView==='funder' && otherWithPIDByFunderData"
|
||||
[chartTitle]="'OA Other research products with PID by funder'"
|
||||
[chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getOtherWithPIDGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getOtherWithPIDGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getOtherWithPIDGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getOtherWithPIDGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="otherWithPIDByCountryChartURL"
|
||||
width="100%" height="350" [src]="otherWithPIDByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="otherWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="otherWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="otherWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="otherWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="otherWithPIDByFunderData"
|
||||
[chartTitle]="'OA Other research products with PID by funder'"
|
||||
[chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></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)="getOtherWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; 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="otherWithLicenceGroupByView==='country' && otherWithLicenceByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithLicenceByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="otherWithLicenceGroupByView==='datasource' && otherWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="otherWithLicenceGroupByView==='organization' && otherWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="otherWithLicenceGroupByView==='funder' && otherWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Other research products with licence by funder'"
|
||||
[chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getOtherWithLicenceGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getOtherWithLicenceGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getOtherWithLicenceGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getOtherWithLicenceGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="otherWithLicenceByCountryChartURL"
|
||||
width="100%" height="350" [src]="otherWithLicenceByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="otherWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="otherWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="otherWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Other research products with licence by funder'"
|
||||
[chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for other research products</h3>
|
||||
|
||||
<div class="uk-margin-top uk-margin-bottom">
|
||||
<label class="uk-margin-right">Show: </label>
|
||||
<select class="md-input" #selectOtherContent (change)="getContent('other', selectOtherContent.value)" style="width: 230px; display: inline-block">
|
||||
<option value="affiliated">affiliated</option>
|
||||
<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
|
||||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
<div class="absoluteTable">
|
||||
<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:'#other-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="other-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="otherAbsoluteTableData" [isPercentage]="false" [countries]="otherAbsoluteTableData" [view]="'openScience'" [entity]="'other'"></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="otherPercentageTableData" [isPercentage]="true" [countries]="otherPercentageTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--<div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
||||
|
|
@ -16,7 +235,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -40,7 +259,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -94,7 +313,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -118,7 +337,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -154,9 +373,9 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
<!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for other research products</h3>
|
||||
|
||||
|
|
@ -168,7 +387,7 @@
|
|||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
<!–<span class="md-input-bar"></span>–>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
|
|
@ -208,6 +427,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,399 @@
|
|||
<div>
|
||||
|
||||
<!--PID-->
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
<li><a href="#">Gold</a></li>
|
||||
<li><a href="#">Green</a></li>
|
||||
<li><a href="#">Green vs. Gold</a></li>
|
||||
<li class="uk-visible@m"><a href="#">More Details</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></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" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; 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' && publicationsWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Publications with PID by funder'"
|
||||
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', 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" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="publicationsWithPIDByCountryChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithPIDByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Publications with PID by funder'"
|
||||
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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">
|
||||
|
||||
<!--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="width: 230px; 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' && publicationsWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Publications with licence by funder'"
|
||||
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', 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" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="publicationsWithLicenceByCountryChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Publications with licence by funder'"
|
||||
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="goldIndicator">
|
||||
<div class="uk-grid 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="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></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" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; 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="goldPublicationsGroupByView==='country' && goldPublicationsByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="goldPublicationsByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
|
||||
[chartTitle]="'Gold OA publications by funder'"
|
||||
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getGoldPublicationsGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="goldPublicationsByCountryChartURL"
|
||||
width="100%" height="350" [src]="goldPublicationsByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="goldPublicationsByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="goldPublicationsByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="goldPublicationsByFunderData"
|
||||
[chartTitle]="'Gold OA publications by funder'"
|
||||
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="greenIndicator">
|
||||
<div class="uk-grid 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="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></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" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; 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="greenPublicationsGroupByView==='country' && greenPublicationsByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="greenPublicationsByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
|
||||
[chartTitle]="'Green OA publications by funder'"
|
||||
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getGreenPublicationsGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="greenPublicationsByCountryChartURL"
|
||||
width="100%" height="350" [src]="greenPublicationsByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="greenPublicationsByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="greenPublicationsByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="greenPublicationsByFunderData"
|
||||
[chartTitle]="'Green OA publications by funder'"
|
||||
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="greenVsGoldIndicator">
|
||||
<div class="uk-grid 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="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div 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="width: 230px; display: inline-block">
|
||||
<option value="affiliated">affiliated</option>
|
||||
<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
|
||||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
<div class="absoluteTable">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--<!–PID–>
|
||||
<div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -17,7 +410,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -41,7 +434,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -79,7 +472,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Licence-->
|
||||
<!–Licence–>
|
||||
<div class="licenceIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Licence</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -96,7 +489,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -120,7 +513,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -158,7 +551,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Gold-->
|
||||
<!–Gold–>
|
||||
<div class="goldIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Gold</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -175,7 +568,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -199,7 +592,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -237,7 +630,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Green-->
|
||||
<!–Green–>
|
||||
<div class="greenIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Green</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -254,7 +647,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -278,7 +671,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -329,9 +722,9 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
<!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for publications</h3>
|
||||
|
||||
|
|
@ -343,7 +736,7 @@
|
|||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
<!–<span class="md-input-bar"></span>–>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
|
|
@ -382,7 +775,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,225 @@
|
|||
<div>
|
||||
|
||||
<div class="pidIndicator">
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
<li class="uk-visible@m"><a href="#">More Details</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></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" #selectPIDGroupBy (change)="getSoftwareWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; 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="softwareWithPIDGroupByView==='country' && softwareWithPIDByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithPIDByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="softwareWithPIDGroupByView==='datasource' && softwareWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"
|
||||
[chartTitle]="'OS Software with PID by funder'"
|
||||
[chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getSoftwareWithPIDGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getSoftwareWithPIDGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getSoftwareWithPIDGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getSoftwareWithPIDGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="softwareWithPIDByCountryChartURL"
|
||||
width="100%" height="350" [src]="softwareWithPIDByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="softwareWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="softwareWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="softwareWithPIDByFunderData"
|
||||
[chartTitle]="'OS Software with PID by funder'"
|
||||
[chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></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)="getSoftwareWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; 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="softwareWithLicenceGroupByView==='country' && softwareWithLicenceByCountryChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithLicenceByCountryChartURLMobile"></iframe>
|
||||
<iframe *ngIf="softwareWithLicenceGroupByView==='datasource' && softwareWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"
|
||||
[chartTitle]="'OS Software with licence by funder'"
|
||||
[chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getSoftwareWithLicenceGroupBy('country')">Country</a></li>
|
||||
<li><a (click)="getSoftwareWithLicenceGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getSoftwareWithLicenceGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getSoftwareWithLicenceGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
|
||||
<iframe *ngIf="softwareWithLicenceByCountryChartURL"
|
||||
width="100%" height="350" [src]="softwareWithLicenceByCountryChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="softwareWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="softwareWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="softwareWithLicenceByFunderData"
|
||||
[chartTitle]="'OS Software with licence by funder'"
|
||||
[chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for software</h3>
|
||||
|
||||
<div class="uk-margin-top uk-margin-bottom">
|
||||
<label class="uk-margin-right">Show: </label>
|
||||
<select class="md-input" #selectSoftwareContent (change)="getContent('software', selectSoftwareContent.value)" style="width: 230px; display: inline-block">
|
||||
<option value="affiliated">affiliated</option>
|
||||
<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
|
||||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
<div class="absoluteTable">
|
||||
<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:'#software-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="software-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="softwareAbsoluteTableData" [isPercentage]="false" [countries]="softwareAbsoluteTableData" [view]="'openScience'" [entity]="'software'"></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="softwarePercentageTableData" [isPercentage]="true" [countries]="softwarePercentageTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--<div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
||||
|
|
@ -16,7 +235,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -40,7 +259,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -94,7 +313,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -118,7 +337,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -154,9 +373,9 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
<!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">
|
||||
|
||||
<h3 class="">More details for software</h3>
|
||||
|
||||
|
|
@ -168,7 +387,7 @@
|
|||
<option value="deposited">deposited</option>
|
||||
<option value="deposited_peer_reviewed">deposited peer reviewed</option>
|
||||
</select>
|
||||
<!--<span class="md-input-bar"></span>-->
|
||||
<!–<span class="md-input-bar"></span>–>
|
||||
</div>
|
||||
|
||||
<div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
|
||||
|
|
@ -207,7 +426,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,154 @@
|
|||
<div>
|
||||
|
||||
<div class="pidIndicator">
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></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" #selectPIDGroupBy (change)="getDatasetsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="datasetsWithPIDGroupByView==='datasource' && datasetsWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="datasetsWithPIDGroupByView==='organization' && datasetsWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="datasetsWithPIDGroupByView==='funder' && datasetsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Datasets with PID by funder'"
|
||||
[chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getDatasetsWithPIDGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getDatasetsWithPIDGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getDatasetsWithPIDGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="datasetsWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="datasetsWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="datasetsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Datasets with PID by funder'"
|
||||
[chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></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)="getDatasetsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="datasetsWithLicenceGroupByView==='datasource' && datasetsWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="datasetsWithLicenceGroupByView==='organization' && datasetsWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="datasetsWithLicenceGroupByView==='funder' && datasetsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Datasets with licence by funder'"
|
||||
[chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getDatasetsWithLicenceGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getDatasetsWithLicenceGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getDatasetsWithLicenceGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="datasetsWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="datasetsWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Datasets with licence by funder'"
|
||||
[chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
||||
|
|
@ -16,7 +164,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -37,7 +185,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -70,7 +218,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="licenceIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Licence</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -87,7 +234,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -108,7 +255,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -139,6 +286,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,154 @@
|
|||
<div>
|
||||
|
||||
<div class="pidIndicator">
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></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" #selectPIDGroupBy (change)="getOtherWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="otherWithPIDGroupByView==='datasource' && otherWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="otherWithPIDGroupByView==='organization' && otherWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="otherWithPIDGroupByView==='funder' && otherWithPIDByFunderData"
|
||||
[chartTitle]="'OA Other research products with PID by funder'"
|
||||
[chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getOtherWithPIDGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getOtherWithPIDGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getOtherWithPIDGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="otherWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="otherWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="otherWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="otherWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="otherWithPIDByFunderData"
|
||||
[chartTitle]="'OA Other research products with PID by funder'"
|
||||
[chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></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)="getOtherWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="otherWithLicenceGroupByView==='datasource' && otherWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="otherWithLicenceGroupByView==='organization' && otherWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="otherWithLicenceGroupByView==='funder' && otherWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Other research products with licence by funder'"
|
||||
[chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getOtherWithLicenceGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getOtherWithLicenceGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getOtherWithLicenceGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="otherWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="otherWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="otherWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Other research products with licence by funder'"
|
||||
[chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
||||
|
|
@ -16,7 +164,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -37,7 +185,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -86,7 +234,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -107,7 +255,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -138,6 +286,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,312 @@
|
|||
<div>
|
||||
|
||||
<!--PID-->
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
<li><a href="#">Gold</a></li>
|
||||
<li><a href="#">Green</a></li>
|
||||
<li><a href="#">Green vs. Gold</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></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" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Publications with PID by funder'"
|
||||
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><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" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
|
||||
[chartTitle]="'OA Publications with PID by funder'"
|
||||
[chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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">
|
||||
|
||||
<!--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="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Publications with licence by funder'"
|
||||
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><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" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
|
||||
[chartTitle]="'OA Publications with licence by funder'"
|
||||
[chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="goldIndicator">
|
||||
<div class="uk-grid 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="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></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" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
|
||||
[chartTitle]="'Gold OA publications by funder'"
|
||||
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="goldPublicationsByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="goldPublicationsByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="goldPublicationsByFunderData"
|
||||
[chartTitle]="'Gold OA publications by funder'"
|
||||
[chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="greenIndicator">
|
||||
<div class="uk-grid 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="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></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" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
|
||||
[chartTitle]="'Green OA publications by funder'"
|
||||
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="greenPublicationsByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="greenPublicationsByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="greenPublicationsByFunderData"
|
||||
[chartTitle]="'Green OA publications by funder'"
|
||||
[chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="greenVsGoldIndicator">
|
||||
<div class="uk-grid 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="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <!–PID–>
|
||||
<div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -17,7 +323,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -38,7 +344,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -71,7 +377,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Licence-->
|
||||
<!–Licence–>
|
||||
<div class="licenceIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Licence</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -88,7 +394,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -109,7 +415,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -142,7 +448,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Gold-->
|
||||
<!–Gold–>
|
||||
<div class="goldIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Gold</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -159,7 +465,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -180,7 +486,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -213,7 +519,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!--Green-->
|
||||
<!–Green–>
|
||||
<div class="greenIndicator uk-margin-large-top">
|
||||
<h3 class="uk-margin-remove">Green</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
|
@ -230,7 +536,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -251,7 +557,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -297,6 +603,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,154 @@
|
|||
<div>
|
||||
|
||||
<div class="pidIndicator">
|
||||
<ul uk-tab class="uk-tab-large">
|
||||
<li><a href="#">PID</a></li>
|
||||
<li><a href="#">Licence</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher uk-margin">
|
||||
<li>
|
||||
<div class="pidIndicator">
|
||||
<div class="uk-grid 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="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></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" #selectPIDGroupBy (change)="getSoftwareWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="softwareWithPIDGroupByView==='datasource' && softwareWithPIDByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"
|
||||
[chartTitle]="'OS Software with PID by funder'"
|
||||
[chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getSoftwareWithPIDGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getSoftwareWithPIDGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getSoftwareWithPIDGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="softwareWithPIDByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="softwareWithPIDByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="softwareWithPIDByFunderData"
|
||||
[chartTitle]="'OS Software with PID by funder'"
|
||||
[chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="licenceIndicator">
|
||||
<div class="uk-grid 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="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></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)="getSoftwareWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
|
||||
<option value="datasource">datasource</option>
|
||||
<option value="organization">organization</option>
|
||||
<option value="funder">funder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<iframe *ngIf="softwareWithLicenceGroupByView==='datasource' && softwareWithLicenceByDatasourceChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURLMobile"></iframe>
|
||||
<iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURLMobile"
|
||||
width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURLMobile"></iframe>
|
||||
<app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"
|
||||
[chartTitle]="'OS Software with licence by funder'"
|
||||
[chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
<li class="uk-active"><a (click)="getSoftwareWithLicenceGroupBy('datasource')">Datasource</a></li>
|
||||
<li><a (click)="getSoftwareWithLicenceGroupBy('organization')">Organization</a></li>
|
||||
<li><a (click)="getSoftwareWithLicenceGroupBy('funder')">Funder</a></li>
|
||||
</ul>
|
||||
|
||||
<ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
|
||||
<li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
|
||||
<iframe *ngIf="softwareWithLicenceByDatasourceChartURL"
|
||||
width="100%" height="350" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<iframe *ngIf="softwareWithLicenceByOrganizationChartURL"
|
||||
width="100%" height="350" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
|
||||
</li>
|
||||
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
|
||||
<app-treemap-highchart *ngIf="softwareWithLicenceByFunderData"
|
||||
[chartTitle]="'OS Software with licence by funder'"
|
||||
[chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <div class="pidIndicator">
|
||||
<h3 class="uk-margin-remove">PID</h3>
|
||||
<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
|
||||
|
||||
|
|
@ -16,7 +164,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -37,7 +185,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -86,7 +234,7 @@
|
|||
<div class="md-card chartCard">
|
||||
<div class="md-card-content">
|
||||
|
||||
<!--MOBILE & PAD PORTRAIT-->
|
||||
<!–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>
|
||||
|
|
@ -107,7 +255,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!--LAPTOP & PAD LANDSCAPE-->
|
||||
<!–LAPTOP & PAD LANDSCAPE–>
|
||||
<div class="uk-visible@m">
|
||||
<ul class="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', animation: 'fade'}">
|
||||
|
|
@ -138,6 +286,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue