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

test vertical switcher for country publications and datasets pages

This commit is contained in:
Andreas Mantas 2021-09-02 12:11:34 +00:00
parent d07cc59bd0
commit 37f5a48719
2 changed files with 486 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
src/app/pages/country/open-science/datasets/country-os-datasets.component.html
View File

@ -1,16 +1,21 @@
<div>
<ul uk-tab class="uk-tab-large">
<div>
<div class="uk-grid">
<div class="uk-width-auto@m">
<ul class="uk-tab-left uk-tab-large" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
<li><a href="#">PID</a></li>
<li><a href="#">Licence</a></li>
</ul>
<ul class="uk-switcher uk-margin">
</div>
<div class="uk-width-expand@m">
<ul id="component-tab-left" class="uk-switcher">
<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 uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">-->
<div class="uk-grid uk-child-width-1-1">
<div class="uk-grid-margin">
<div class="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
@ -78,9 +83,10 @@
</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 uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">-->
<div class="uk-grid uk-child-width-1-1">
<div class="uk-grid-margin">
<div class="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
@ -147,6 +153,157 @@
</div>
</li>
</ul>
</div>
</div>
</div>
<!--<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">
&lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
<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>
&lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
<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">
&lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
<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>
&lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
<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>

337
src/app/pages/country/open-science/publications/country-os-publications.component.html
View File

@ -1,19 +1,23 @@
<div>
<ul uk-tab class="uk-tab-large">
<div>
<div class="uk-grid">
<div class="uk-width-auto@m">
<ul class="uk-tab-left uk-tab-large" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
<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">
</div>
<div class="uk-width-expand@m">
<ul id="component-tab-left" class="uk-switcher">
<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="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
@ -21,7 +25,7 @@
</div>
</div>
<div class="uk-grid-margin">
<div class="">
<div class="md-card chartCard">
<div class="md-card-content">
@ -83,7 +87,7 @@
<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="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>
@ -91,7 +95,7 @@
</div>
</div>
<div class="uk-grid-margin">
<div class="">
<div class="md-card chartCard">
<div class="md-card-content">
@ -153,7 +157,7 @@
<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="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
@ -161,7 +165,7 @@
</div>
</div>
<div class="uk-grid-margin">
<div class="">
<div class="md-card chartCard">
<div class="md-card-content">
@ -223,7 +227,7 @@
<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="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
@ -231,7 +235,7 @@
</div>
</div>
<div class="uk-grid-margin">
<div class="">
<div class="md-card chartCard">
<div class="md-card-content">
@ -293,7 +297,7 @@
<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="">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
@ -305,6 +309,315 @@
</div>
</li>
</ul>
</div>
</div>
</div>
<!--<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">
&lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
<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>
&lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
<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">
&lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
<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>
&lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
<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">
&lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
<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>
&lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
<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">
&lt;!&ndash;MOBILE & PAD PORTRAIT&ndash;&gt;
<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>
&lt;!&ndash;LAPTOP & PAD LANDSCAPE&ndash;&gt;
<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>-->
<!-- &lt;!&ndash;PID&ndash;&gt;
<div class="pidIndicator">