From 37f5a487193be21f4f0189ca272d78abc25b9735 Mon Sep 17 00:00:00 2001
From: "andreas.mantas" <andreas_mantas@hotmail.com>
Date: Thu, 2 Sep 2021 12:11:34 +0000
Subject: [PATCH] test vertical switcher for country publications and datasets
 pages

---
 .../country-os-datasets.component.html        | 169 ++++++++-
 .../country-os-publications.component.html    | 333 +++++++++++++++++-
 2 files changed, 486 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/country/open-science/datasets/country-os-datasets.component.html b/src/app/pages/country/open-science/datasets/country-os-datasets.component.html
index 260ad8e65..32cb21d29 100644
--- a/src/app/pages/country/open-science/datasets/country-os-datasets.component.html
+++ b/src/app/pages/country/open-science/datasets/country-os-datasets.component.html
@@ -1,6 +1,163 @@
 <div>
 
-  <ul uk-tab class="uk-tab-large">
+  <div>
+    <div class="uk-grid">
+      <div class="uk-width-auto@m">
+        <ul class="uk-tab-left uk-tab-large" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
+          <li><a href="#">PID</a></li>
+          <li><a href="#">Licence</a></li>
+        </ul>
+      </div>
+      <div class="uk-width-expand@m">
+        <ul id="component-tab-left" class="uk-switcher">
+          <li>
+            <div class="pidIndicator">
+<!--              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">-->
+              <div class="uk-grid uk-child-width-1-1">
+
+                <div class="">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+                      <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="uk-grid-margin">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+
+                      <!--MOBILE & PAD PORTRAIT-->
+                      <div class="uk-hidden@m">
+                        <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+                          <label class="uk-margin-right">Show by: </label>
+                          <select class="md-input" #selectPIDGroupBy (change)="getDatasetsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
+                            <option value="datasource">datasource</option>
+                            <option value="organization">organization</option>
+                            <option value="funder">funder</option>
+                          </select>
+                        </div>
+
+                        <iframe *ngIf="datasetsWithPIDGroupByView==='datasource' && datasetsWithPIDByDatasourceChartURLMobile"
+                                width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURLMobile"></iframe>
+                        <iframe *ngIf="datasetsWithPIDGroupByView==='organization' && datasetsWithPIDByOrganizationChartURLMobile"
+                                width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURLMobile"></iframe>
+                        <app-treemap-highchart *ngIf="datasetsWithPIDGroupByView==='funder' && datasetsWithPIDByFunderData"
+                                               [chartTitle]="'OA Datasets with PID by funder'"
+                                               [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+                      </div>
+
+                      <!--LAPTOP & PAD LANDSCAPE-->
+                      <div class="uk-visible@m">
+                        <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                            data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
+                          <li class="uk-active"><a (click)="getDatasetsWithPIDGroupBy('datasource')">Datasource</a></li>
+                          <li><a (click)="getDatasetsWithPIDGroupBy('organization')">Organization</a></li>
+                          <li><a (click)="getDatasetsWithPIDGroupBy('funder')">Funder</a></li>
+                        </ul>
+
+                        <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
+                          <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                            <iframe *ngIf="datasetsWithPIDByDatasourceChartURL"
+                                    width="100%" height="350" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <iframe *ngIf="datasetsWithPIDByOrganizationChartURL"
+                                    width="100%" height="350" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData"
+                                                   [chartTitle]="'OA Datasets with PID by funder'"
+                                                   [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
+                          </li>
+                        </ul>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="licenceIndicator">
+<!--              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">-->
+              <div class="uk-grid uk-child-width-1-1">
+
+                <div class="">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+                      <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="uk-grid-margin">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+
+                      <!--MOBILE & PAD PORTRAIT-->
+                      <div class="uk-hidden@m">
+                        <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+                          <label class="uk-margin-right">Show by: </label>
+                          <select class="md-input" #selectLicenceGroupBy (change)="getDatasetsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
+                            <option value="datasource">datasource</option>
+                            <option value="organization">organization</option>
+                            <option value="funder">funder</option>
+                          </select>
+                        </div>
+
+                        <iframe *ngIf="datasetsWithLicenceGroupByView==='datasource' && datasetsWithLicenceByDatasourceChartURLMobile"
+                                width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURLMobile"></iframe>
+                        <iframe *ngIf="datasetsWithLicenceGroupByView==='organization' && datasetsWithLicenceByOrganizationChartURLMobile"
+                                width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURLMobile"></iframe>
+                        <app-treemap-highchart *ngIf="datasetsWithLicenceGroupByView==='funder' && datasetsWithLicenceByFunderData"
+                                               [chartTitle]="'OA Datasets with licence by funder'"
+                                               [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+                      </div>
+
+                      <!--LAPTOP & PAD LANDSCAPE-->
+                      <div class="uk-visible@m">
+                        <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                            data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
+                          <li class="uk-active"><a (click)="getDatasetsWithLicenceGroupBy('datasource')">Datasource</a></li>
+                          <li><a (click)="getDatasetsWithLicenceGroupBy('organization')">Organization</a></li>
+                          <li><a (click)="getDatasetsWithLicenceGroupBy('funder')">Funder</a></li>
+                        </ul>
+
+                        <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
+                          <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                            <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL"
+                                    width="100%" height="350" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL"
+                                    width="100%" height="350" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData"
+                                                   [chartTitle]="'OA Datasets with licence by funder'"
+                                                   [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
+                          </li>
+                        </ul>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <!--<ul uk-tab class="uk-tab-large">
     <li><a href="#">PID</a></li>
     <li><a href="#">Licence</a></li>
   </ul>
@@ -22,7 +179,7 @@
             <div class="md-card chartCard">
               <div class="md-card-content">
 
-                <!--MOBILE & PAD PORTRAIT-->
+                &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>
@@ -43,7 +200,7 @@
 
                 </div>
 
-                <!--LAPTOP & PAD LANDSCAPE-->
+                &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'}">
@@ -92,7 +249,7 @@
             <div class="md-card chartCard">
               <div class="md-card-content">
 
-                <!--MOBILE & PAD PORTRAIT-->
+                &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>
@@ -113,7 +270,7 @@
 
                 </div>
 
-                <!--LAPTOP & PAD LANDSCAPE-->
+                &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'}">
@@ -146,7 +303,7 @@
         </div>
       </div>
     </li>
-  </ul>
+  </ul>-->
 
 <!--  <div class="pidIndicator">
     <h3 class="uk-margin-remove">PID</h3>
diff --git a/src/app/pages/country/open-science/publications/country-os-publications.component.html b/src/app/pages/country/open-science/publications/country-os-publications.component.html
index 07b5e30b0..53cfb36d5 100644
--- a/src/app/pages/country/open-science/publications/country-os-publications.component.html
+++ b/src/app/pages/country/open-science/publications/country-os-publications.component.html
@@ -1,6 +1,319 @@
 <div>
 
-  <ul uk-tab class="uk-tab-large">
+  <div>
+    <div class="uk-grid">
+      <div class="uk-width-auto@m">
+        <ul class="uk-tab-left uk-tab-large" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
+          <li><a href="#">PID</a></li>
+          <li><a href="#">Licence</a></li>
+          <li><a href="#">Gold</a></li>
+          <li><a href="#">Green</a></li>
+          <li><a href="#">Green vs. Gold</a></li>
+        </ul>
+      </div>
+      <div class="uk-width-expand@m">
+        <ul id="component-tab-left" class="uk-switcher">
+          <li>
+            <div class="pidIndicator">
+              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+
+                <div class="">
+                  <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="">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+
+                      <!--MOBILE & PAD PORTRAIT-->
+                      <div class="uk-hidden@m">
+                        <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+                          <label class="uk-margin-right">Show by: </label>
+                          <select class="md-input" #selectPIDGroupBy (change)="getPublicationsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">
+                            <option value="datasource">datasource</option>
+                            <option value="organization">organization</option>
+                            <option value="funder">funder</option>
+                          </select>
+                        </div>
+
+                        <iframe *ngIf="publicationsWithPIDGroupByView==='datasource' && publicationsWithPIDByDatasourceChartURLMobile"
+                                width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURLMobile"></iframe>
+                        <iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURLMobile"
+                                width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURLMobile"></iframe>
+                        <app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
+                                               [chartTitle]="'OA Publications with PID by funder'"
+                                               [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+                      </div>
+
+                      <!--LAPTOP & PAD LANDSCAPE-->
+                      <div class="uk-visible@m">
+                        <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                            data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
+                          <li class="uk-active"><a (click)="getPublicationsWithPIDGroupBy('datasource')">Datasource</a></li>
+                          <li><a (click)="getPublicationsWithPIDGroupBy('organization')">Organization</a></li>
+                          <li><a (click)="getPublicationsWithPIDGroupBy('funder')">Funder</a></li>
+                        </ul>
+
+                        <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
+                          <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                            <iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
+                                    width="100%" height="350" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
+                                    width="100%" height="350" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
+                                                   [chartTitle]="'OA Publications with PID by funder'"
+                                                   [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
+                          </li>
+                        </ul>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="licenceIndicator">
+              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+
+                <div class="">
+                  <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="">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+
+                      <!--MOBILE & PAD PORTRAIT-->
+                      <div class="uk-hidden@m">
+                        <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+                          <label class="uk-margin-right">Show by: </label>
+                          <select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">
+                            <option value="datasource">datasource</option>
+                            <option value="organization">organization</option>
+                            <option value="funder">funder</option>
+                          </select>
+                        </div>
+
+                        <iframe *ngIf="publicationsWithLicenceGroupByView==='datasource' && publicationsWithLicenceByDatasourceChartURLMobile"
+                                width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURLMobile"></iframe>
+                        <iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURLMobile"
+                                width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURLMobile"></iframe>
+                        <app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
+                                               [chartTitle]="'OA Publications with licence by funder'"
+                                               [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+                      </div>
+
+                      <!--LAPTOP & PAD LANDSCAPE-->
+                      <div class="uk-visible@m">
+                        <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                            data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
+                          <li class="uk-active"><a (click)="getPublicationsWithLicenceGroupBy('datasource')">Datasource</a></li>
+                          <li><a (click)="getPublicationsWithLicenceGroupBy('organization')">Organization</a></li>
+                          <li><a (click)="getPublicationsWithLicenceGroupBy('funder')">Funder</a></li>
+                        </ul>
+
+                        <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
+                          <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                            <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
+                                    width="100%" height="350" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
+                                    width="100%" height="350" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
+                                                   [chartTitle]="'OA Publications with licence by funder'"
+                                                   [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
+                          </li>
+                        </ul>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="goldIndicator">
+              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+
+                <div class="">
+                  <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="">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+
+                      <!--MOBILE & PAD PORTRAIT-->
+                      <div class="uk-hidden@m">
+                        <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+                          <label class="uk-margin-right">Show by: </label>
+                          <select class="md-input" #selectGoldGroupBy (change)="getGoldPublicationsGroupByMobile(selectGoldGroupBy.value)" style="width: 230px; display: inline-block">
+                            <option value="datasource">datasource</option>
+                            <option value="organization">organization</option>
+                            <option value="funder">funder</option>
+                          </select>
+                        </div>
+
+                        <iframe *ngIf="goldPublicationsGroupByView==='datasource' && goldPublicationsByDatasourceChartURLMobile"
+                                width="100%" height="550" [src]="goldPublicationsByDatasourceChartURLMobile"></iframe>
+                        <iframe *ngIf="goldPublicationsGroupByView==='organization' && goldPublicationsByOrganizationChartURLMobile"
+                                width="100%" height="550" [src]="goldPublicationsByOrganizationChartURLMobile"></iframe>
+                        <app-treemap-highchart *ngIf="goldPublicationsGroupByView==='funder' && goldPublicationsByFunderData"
+                                               [chartTitle]="'Gold OA publications by funder'"
+                                               [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+                      </div>
+
+                      <!--LAPTOP & PAD LANDSCAPE-->
+                      <div class="uk-visible@m">
+                        <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                            data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
+                          <li class="uk-active"><a (click)="getGoldPublicationsGroupBy('datasource')">Datasource</a></li>
+                          <li><a (click)="getGoldPublicationsGroupBy('organization')">Organization</a></li>
+                          <li><a (click)="getGoldPublicationsGroupBy('funder')">Funder</a></li>
+                        </ul>
+
+                        <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
+                          <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                            <iframe *ngIf="goldPublicationsByDatasourceChartURL"
+                                    width="100%" height="350" [src]="goldPublicationsByDatasourceChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <iframe *ngIf="goldPublicationsByOrganizationChartURL"
+                                    width="100%" height="350" [src]="goldPublicationsByOrganizationChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <app-treemap-highchart *ngIf="goldPublicationsByFunderData"
+                                                   [chartTitle]="'Gold OA publications by funder'"
+                                                   [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+                          </li>
+                        </ul>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="greenIndicator">
+              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+
+                <div class="">
+                  <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="">
+                  <div class="md-card chartCard">
+                    <div class="md-card-content">
+
+                      <!--MOBILE & PAD PORTRAIT-->
+                      <div class="uk-hidden@m">
+                        <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+                          <label class="uk-margin-right">Show by: </label>
+                          <select class="md-input" #selectGreenGroupBy (change)="getGreenPublicationsGroupByMobile(selectGreenGroupBy.value)" style="width: 230px; display: inline-block">
+                            <option value="datasource">datasource</option>
+                            <option value="organization">organization</option>
+                            <option value="funder">funder</option>
+                          </select>
+                        </div>
+
+                        <iframe *ngIf="greenPublicationsGroupByView==='datasource' && greenPublicationsByDatasourceChartURLMobile"
+                                width="100%" height="550" [src]="greenPublicationsByDatasourceChartURLMobile"></iframe>
+                        <iframe *ngIf="greenPublicationsGroupByView==='organization' && greenPublicationsByOrganizationChartURLMobile"
+                                width="100%" height="550" [src]="greenPublicationsByOrganizationChartURLMobile"></iframe>
+                        <app-treemap-highchart *ngIf="greenPublicationsGroupByView==='funder' && greenPublicationsByFunderData"
+                                               [chartTitle]="'Green OA publications by funder'"
+                                               [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+                      </div>
+
+                      <!--LAPTOP & PAD LANDSCAPE-->
+                      <div class="uk-visible@m">
+                        <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                            data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
+                          <li class="uk-active"><a (click)="getGreenPublicationsGroupBy('datasource')">Datasource</a></li>
+                          <li><a (click)="getGreenPublicationsGroupBy('organization')">Organization</a></li>
+                          <li><a (click)="getGreenPublicationsGroupBy('funder')">Funder</a></li>
+                        </ul>
+
+                        <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
+                          <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                            <iframe *ngIf="greenPublicationsByDatasourceChartURL"
+                                    width="100%" height="350" [src]="greenPublicationsByDatasourceChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <iframe *ngIf="greenPublicationsByOrganizationChartURL"
+                                    width="100%" height="350" [src]="greenPublicationsByOrganizationChartURL"></iframe>
+                          </li>
+                          <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                            <app-treemap-highchart *ngIf="greenPublicationsByFunderData"
+                                                   [chartTitle]="'Green OA publications by funder'"
+                                                   [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+                          </li>
+                        </ul>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="greenVsGoldIndicator">
+              <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+
+                <div class="">
+                  <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>
+      </div>
+    </div>
+  </div>
+
+  <!--<ul uk-tab class="uk-tab-large">
     <li><a href="#">PID</a></li>
     <li><a href="#">Licence</a></li>
     <li><a href="#">Gold</a></li>
@@ -25,7 +338,7 @@
             <div class="md-card chartCard">
               <div class="md-card-content">
 
-                <!--MOBILE & PAD PORTRAIT-->
+                &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>
@@ -46,7 +359,7 @@
 
                 </div>
 
-                <!--LAPTOP & PAD LANDSCAPE-->
+                &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'}">
@@ -95,7 +408,7 @@
             <div class="md-card chartCard">
               <div class="md-card-content">
 
-                <!--MOBILE & PAD PORTRAIT-->
+                &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>
@@ -116,7 +429,7 @@
 
                 </div>
 
-                <!--LAPTOP & PAD LANDSCAPE-->
+                &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'}">
@@ -165,7 +478,7 @@
             <div class="md-card chartCard">
               <div class="md-card-content">
 
-                <!--MOBILE & PAD PORTRAIT-->
+                &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>
@@ -186,7 +499,7 @@
 
                 </div>
 
-                <!--LAPTOP & PAD LANDSCAPE-->
+                &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'}">
@@ -235,7 +548,7 @@
             <div class="md-card chartCard">
               <div class="md-card-content">
 
-                <!--MOBILE & PAD PORTRAIT-->
+                &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>
@@ -256,7 +569,7 @@
 
                 </div>
 
-                <!--LAPTOP & PAD LANDSCAPE-->
+                &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'}">
@@ -304,7 +617,7 @@
         </div>
       </div>
     </li>
-  </ul>
+  </ul>-->
 
 <!--  &lt;!&ndash;PID&ndash;&gt;
   <div class="pidIndicator">