added tabs for open science views

src/app/pages/continent/open-science/datasets/continent-os-datasets.component.html

@@ -1,7 +1,14 @@
 <div>
 
+  <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -77,10 +84,9 @@
 
         </div>
       </div>
-
+    </li>
-
+    <li>
-  <div class="licenceIndicator uk-margin-large-top">
+      <div class="licenceIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -156,7 +162,8 @@
 
         </div>
       </div>
-
+    </li>
+    <li>
       <div class="indicatorsTable uk-visible@m uk-margin-large-top">
 
         <h3 class="">More details for datasets</h3>
@@ -208,7 +215,217 @@
 
         </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">
+
+      <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="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>
 
+            &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('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>
+
+  <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">
+
+      <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="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>
+
+            &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('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>-->
+
+  <!--<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>
+      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;
+    </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>-->
+
 </div>

src/app/pages/continent/open-science/other-research-products/continent-os-orp.component.html

@@ -1,7 +1,14 @@
 <div>
 
+  <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -77,9 +84,9 @@
 
         </div>
       </div>
-
+    </li>
-  <div class="licenceIndicator uk-margin-large-top">
+    <li>
-    <h3 class="uk-margin-remove">Licence</h3>
+      <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">
@@ -155,7 +162,8 @@
 
         </div>
       </div>
-
+    </li>
+    <li>
       <div class="indicatorsTable uk-visible@m uk-margin-large-top">
 
         <h3 class="">More details for other research products</h3>
@@ -207,7 +215,218 @@
 
         </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">
+
+      <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">
+
+            &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)="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>
 
+            &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)="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>
+
+  <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">
+
+      <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">
+
+            &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)="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>
+
+            &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)="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>-->
+
+  <!--<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>
+      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;
+    </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>-->
+
 </div>

src/app/pages/continent/open-science/publications/continent-os-publications.component.html

@@ -1,8 +1,17 @@
 <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -78,10 +87,9 @@
 
         </div>
       </div>
-
+    </li>
-  <!--Licence-->
+    <li>
-  <div class="licenceIndicator uk-margin-large-top">
+      <div class="licenceIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -157,10 +165,9 @@
 
         </div>
       </div>
-
+    </li>
-  <!--Gold-->
+    <li>
-  <div class="goldIndicator uk-margin-large-top">
+      <div class="goldIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -236,10 +243,9 @@
 
         </div>
       </div>
-
+    </li>
-  <!--Green-->
+    <li>
-  <div class="greenIndicator uk-margin-large-top">
+      <div class="greenIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -315,9 +321,9 @@
 
         </div>
       </div>
-
+    </li>
-  <div class="greenVsGoldIndicator uk-margin-large-top">
+    <li>
-    <h3 class="uk-margin-remove">Green vs. Gold</h3>
+      <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">
@@ -330,7 +336,8 @@
 
         </div>
       </div>
-
+    </li>
+    <li>
       <div class="indicatorsTable uk-visible@m uk-margin-large-top">
 
         <h3 class="">More details for publications</h3>
@@ -382,7 +389,392 @@
 
         </div>
 
+      </div>
+    </li>
+  </ul>
+
+  <!--&lt;!&ndash;PID&ndash;&gt;
+  <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">
+
+      <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="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>
 
+            &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('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>
+
+  &lt;!&ndash;Licence&ndash;&gt;
+  <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">
+
+      <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="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>
+
+            &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('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>
+
+  &lt;!&ndash;Gold&ndash;&gt;
+  <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">
+
+      <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="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>
+
+            &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('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>
+
+  &lt;!&ndash;Green&ndash;&gt;
+  <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">
+
+      <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="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>
+
+            &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('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>
+
+  <div class="greenVsGoldIndicator uk-margin-large-top">
+    <h3 class="uk-margin-remove">Green vs. Gold</h3>
+    <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>-->
+
+  <!--<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>
+      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;
+    </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>-->
+
 </div>

src/app/pages/continent/open-science/software/continent-os-software.component.html

@@ -1,7 +1,14 @@
 <div>
 
+  <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -77,9 +84,9 @@
 
         </div>
       </div>
-
+    </li>
-  <div class="licenceIndicator uk-margin-large-top">
+    <li>
-    <h3 class="uk-margin-remove">Licence</h3>
+      <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">
@@ -155,7 +162,8 @@
 
         </div>
       </div>
-
+    </li>
+    <li>
       <div class="indicatorsTable uk-visible@m uk-margin-large-top">
 
         <h3 class="">More details for software</h3>
@@ -207,7 +215,217 @@
 
         </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">
+
+      <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">
+
+            &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)="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>
 
+            &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)="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>
+
+  <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">
+
+      <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">
+
+            &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)="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>
+
+            &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)="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>-->
+
+  <!--<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>
+      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;
+    </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>-->
+
 </div>

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

@@ -1,7 +1,13 @@
 <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -69,10 +75,9 @@
 
         </div>
       </div>
-
+    </li>
-
+    <li>
-  <div class="licenceIndicator uk-margin-large-top">
+      <div class="licenceIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -140,5 +145,147 @@
 
         </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">
+
+      <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>
+
+  <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">
+
+      <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>-->
 
 </div>

src/app/pages/country/open-science/other-research-products/country-os-orp.component.html

@@ -1,7 +1,13 @@
 <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -69,9 +75,9 @@
 
         </div>
       </div>
-
+    </li>
-  <div class="licenceIndicator uk-margin-large-top">
+    <li>
-    <h3 class="uk-margin-remove">Licence</h3>
+      <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">
@@ -139,5 +145,147 @@
 
         </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">
+
+      <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">
+
+            &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)="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>
+
+            &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)="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>
+
+  <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">
+
+      <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">
+
+            &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)="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>
+
+            &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)="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>-->
 
 </div>

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

@@ -1,8 +1,16 @@
 <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -70,10 +78,9 @@
 
         </div>
       </div>
-
+    </li>
-  <!--Licence-->
+    <li>
-  <div class="licenceIndicator uk-margin-large-top">
+      <div class="licenceIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -141,10 +148,9 @@
 
         </div>
       </div>
-
+    </li>
-  <!--Gold-->
+    <li>
-  <div class="goldIndicator uk-margin-large-top">
+      <div class="goldIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -212,10 +218,9 @@
 
         </div>
       </div>
-
+    </li>
-  <!--Green-->
+    <li>
-  <div class="greenIndicator uk-margin-large-top">
+      <div class="greenIndicator">
-    <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">
 
           <div class="uk-grid-margin">
@@ -283,6 +288,307 @@
 
         </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">
+    <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">
+
+      <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>
+
+  &lt;!&ndash;Licence&ndash;&gt;
+  <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">
+
+      <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>
+
+  &lt;!&ndash;Gold&ndash;&gt;
+  <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">
+
+      <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>
+
+  &lt;!&ndash;Green&ndash;&gt;
+  <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">
+
+      <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>
 
   <div class="greenVsGoldIndicator uk-margin-large-top">
     <h3 class="uk-margin-remove">Green vs. Gold</h3>
@@ -297,6 +603,6 @@
       </div>
 
     </div>
-  </div>
+  </div>-->
 
 </div>

src/app/pages/country/open-science/software/country-os-software.component.html

@@ -1,7 +1,13 @@
 <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">
-    <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">
 
           <div class="uk-grid-margin">
@@ -69,9 +75,9 @@
 
         </div>
       </div>
-
+    </li>
-  <div class="licenceIndicator uk-margin-large-top">
+    <li>
-    <h3 class="uk-margin-remove">Licence</h3>
+      <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">
@@ -139,5 +145,147 @@
 
         </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">
+
+      <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">
+
+            &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)="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>
+
+            &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)="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>
+
+  <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">
+
+      <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">
+
+            &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)="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>
+
+            &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)="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>-->
 
 </div>