From 69afae0dd637c949be455a5314977da60f264b69 Mon Sep 17 00:00:00 2001
From: "andreas.mantas" <andreas_mantas@hotmail.com>
Date: Fri, 13 Aug 2021 10:29:49 +0000
Subject: [PATCH] grouping charts on country-overview (organization for
 landscape view not showing)

---
 .../country-os-orp.component.html             |   2 +-
 .../overview/country-overview.component.html  | 253 +++++++++++++++++-
 .../overview/country-overview.component.ts    | 123 ++++++++-
 3 files changed, 365 insertions(+), 13 deletions(-)

diff --git a/src/app/pages/country/open-science/other-research-products/country-os-orp.component.html b/src/app/pages/country/open-science/other-research-products/country-os-orp.component.html
index 670ab7efb..d7d26d48e 100644
--- a/src/app/pages/country/open-science/other-research-products/country-os-orp.component.html
+++ b/src/app/pages/country/open-science/other-research-products/country-os-orp.component.html
@@ -47,7 +47,7 @@
               </ul>
 
               <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
-                <li aria-hidden="true" style="animation-duration: 200ms;" class="uk-active">
+                <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
                   <iframe *ngIf="otherWithPIDByDatasourceChartURL"
                           width="100%" height="350" [src]="otherWithPIDByDatasourceChartURL"></iframe>
                 </li>
diff --git a/src/app/pages/country/overview/country-overview.component.html b/src/app/pages/country/overview/country-overview.component.html
index 15d20cc32..aa5bd0220 100644
--- a/src/app/pages/country/overview/country-overview.component.html
+++ b/src/app/pages/country/overview/country-overview.component.html
@@ -97,7 +97,8 @@
 
   </div>
 
-  <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
+<!--  TODO: delete this old section when grouping is completed-->
+  <!--<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
 
     <div class="uk-grid-margin">
       <div class="md-card chartCard">
@@ -213,4 +214,254 @@
 
   </div>
 
+</div>-->
+
+  <!--OA Publications-->
+  <div class="uk-grid uk-child-width-1-1">
+
+    <div>
+      <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" #selectPublicationsGroupBy (change)="getPublicationsGroupByMobile(selectPublicationsGroupBy.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="publicationGroupByView==='datasource' && publicationsByDatasourceChartURLMobile"
+                    width="100%" height="550" [src]="publicationsByDatasourceChartURLMobile"></iframe>
+            <iframe *ngIf="publicationGroupByView==='organization' && publicationsByOrganizationChartURLMobile"
+                    width="100%" height="550" [src]="publicationsByOrganizationChartURLMobile"></iframe>
+            <app-treemap-highchart *ngIf="publicationGroupByView==='funder' && publicationsByFunderData"
+                                   [chartTitle]="'OA Publications by funder'"
+                                   [chartData]="publicationsByFunderData" [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)="getPublicationsGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsGroupBy('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="publicationsByDatasourceChartURL"
+                        width="100%" height="350" [src]="publicationsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsByOrganizationChartURL"
+                        width="100%" height="350" [src]="publicationsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsByFunderData"
+                                       [chartTitle]="'OA Publications by funder'"
+                                       [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!--OA Datasets-->
+  <div class="uk-grid uk-child-width-1-1">
+
+    <div>
+      <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" #selectDatasetsGroupBy (change)="getDatasetsGroupByMobile(selectDatasetsGroupBy.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="datasetsGroupByView==='datasource' && datasetsByDatasourceChartURLMobile"
+                    width="100%" height="550" [src]="datasetsByDatasourceChartURLMobile"></iframe>
+            <iframe *ngIf="datasetsGroupByView==='organization' && datasetsByOrganizationChartURLMobile"
+                    width="100%" height="550" [src]="datasetsByOrganizationChartURLMobile"></iframe>
+            <app-treemap-highchart *ngIf="datasetsGroupByView==='funder' && datasetsByFunderData"
+                                   [chartTitle]="'OA Datasets by funder'"
+                                   [chartData]="datasetsByFunderData" [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-datasets', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getDatasetsGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getDatasetsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getDatasetsGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-datasets" class="uk-switcher uk-margin">
+              <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                <iframe *ngIf="datasetsByDatasourceChartURL"
+                        width="100%" height="350" [src]="datasetsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsByOrganizationChartURL"
+                        width="100%" height="350" [src]="datasetsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="datasetsByFunderData"
+                                       [chartTitle]="'OA Datasets by funder'"
+                                       [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!--OA Software-->
+  <div class="uk-grid uk-child-width-1-1">
+
+    <div>
+      <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" #selectSoftwareGroupBy (change)="getSoftwareGroupByMobile(selectSoftwareGroupBy.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="softwareGroupByView==='datasource' && softwareByDatasourceChartURLMobile"
+                    width="100%" height="550" [src]="softwareByDatasourceChartURLMobile"></iframe>
+            <iframe *ngIf="softwareGroupByView==='organization' && softwareByOrganizationChartURLMobile"
+                    width="100%" height="550" [src]="softwareByOrganizationChartURLMobile"></iframe>
+            <app-treemap-highchart *ngIf="softwareGroupByView==='funder' && softwareByFunderData"
+                                   [chartTitle]="'OA Software by funder'"
+                                   [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                data-uk-switcher="{connect:'#switcher-content-a-fade-software', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getSoftwareGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getSoftwareGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getSoftwareGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-software" class="uk-switcher uk-margin">
+              <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                <iframe *ngIf="softwareByDatasourceChartURL"
+                        width="100%" height="350" [src]="softwareByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareByOrganizationChartURL"
+                        width="100%" height="350" [src]="softwareByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareByFunderData"
+                                       [chartTitle]="'OA Software by funder'"
+                                       [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!--OA ORP-->
+  <div class="uk-grid uk-child-width-1-1">
+
+    <div>
+      <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" #selectORPGroupBy (change)="getORPGroupByMobile(selectORPGroupBy.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="orpGroupByView==='datasource' && otherByDatasourceChartURLMobile"
+                    width="100%" height="550" [src]="otherByDatasourceChartURLMobile"></iframe>
+            <iframe *ngIf="orpGroupByView==='organization' && otherByOrganizationChartURLMobile"
+                    width="100%" height="550" [src]="otherByOrganizationChartURLMobile"></iframe>
+            <app-treemap-highchart *ngIf="orpGroupByView==='funder' && otherByFunderData"
+                                   [chartTitle]="'OA Other research products by funder'"
+                                   [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
+
+          </div>
+
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
+                data-uk-switcher="{connect:'#switcher-content-a-fade-orp', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getORPGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getORPGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getORPGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-orp" class="uk-switcher uk-margin">
+              <li aria-hidden="false" style="animation-duration: 200ms;" class="uk-active">
+                <iframe *ngIf="otherByDatasourceChartURL"
+                        width="100%" height="350" [src]="otherByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherByOrganizationChartURL"
+                        width="100%" height="350" [src]="otherByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherByFunderData"
+                                       [chartTitle]="'OA Other research products by funder'"
+                                       [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
 </div>
diff --git a/src/app/pages/country/overview/country-overview.component.ts b/src/app/pages/country/overview/country-overview.component.ts
index be6de4c13..15ef5bd90 100644
--- a/src/app/pages/country/overview/country-overview.component.ts
+++ b/src/app/pages/country/overview/country-overview.component.ts
@@ -44,26 +44,43 @@ export class CountryOverviewComponent implements OnInit {
   resultsByTypeOANonOAChartURL: SafeResourceUrl;
 
   oaNonOAPublicationsTimelineChartURL: SafeResourceUrl;
-  publicationsByDatasourceChartURL: SafeResourceUrl;
-  publicationsByOrganizationChartURL: SafeResourceUrl;
-
   oaNonOADatasetsTimelineChartURL: SafeResourceUrl;
-  datasetsByDatasourceChartURL: SafeResourceUrl;
-  datasetsByOrganizationChartURL: SafeResourceUrl;
-
   oaNonOASoftwareTimelineChartURL: SafeResourceUrl;
-  softwareByDatasourceChartURL: SafeResourceUrl;
-  softwareByOrganizationChartURL: SafeResourceUrl;
-
   oaNonOAOtherTimelineChartURL: SafeResourceUrl;
-  otherByDatasourceChartURL: SafeResourceUrl;
-  otherByOrganizationChartURL: SafeResourceUrl;
 
   publicationsByFunderData: TreemapHighchartsData[];
   datasetsByFunderData: TreemapHighchartsData[];
   softwareByFunderData: TreemapHighchartsData[];
   otherByFunderData: TreemapHighchartsData[];
 
+  publicationGroupByView = 'datasource';
+  publicationsByDatasourceChartURL: SafeResourceUrl;
+  publicationsByOrganizationChartURL: SafeResourceUrl;
+  publicationsByCountryChartURLMobile: SafeResourceUrl;
+  publicationsByDatasourceChartURLMobile: SafeResourceUrl;
+  publicationsByOrganizationChartURLMobile: SafeResourceUrl;
+
+  datasetsGroupByView = 'datasource';
+  datasetsByDatasourceChartURL: SafeResourceUrl;
+  datasetsByOrganizationChartURL: SafeResourceUrl;
+  datasetsByCountryChartURLMobile: SafeResourceUrl;
+  datasetsByDatasourceChartURLMobile: SafeResourceUrl;
+  datasetsByOrganizationChartURLMobile: SafeResourceUrl;
+
+  softwareGroupByView = 'datasource';
+  softwareByDatasourceChartURL: SafeResourceUrl;
+  softwareByOrganizationChartURL: SafeResourceUrl;
+  softwareByCountryChartURLMobile: SafeResourceUrl;
+  softwareByDatasourceChartURLMobile: SafeResourceUrl;
+  softwareByOrganizationChartURLMobile: SafeResourceUrl;
+
+  orpGroupByView = 'datasource';
+  otherByDatasourceChartURL: SafeResourceUrl;
+  otherByOrganizationChartURL: SafeResourceUrl;
+  otherByCountryChartURLMobile: SafeResourceUrl;
+  otherByDatasourceChartURLMobile: SafeResourceUrl;
+  otherByOrganizationChartURLMobile: SafeResourceUrl;
+
   constructor(private dataService: DataService,
               private dataHandlerService: DataHandlerService,
               private route: ActivatedRoute,
@@ -109,6 +126,18 @@ export class CountryOverviewComponent implements OnInit {
       // this.otherByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherResearchProductsPalette.join('","')}\"]}}`));
       this.otherByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
 
+      this.publicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.publicationColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+      this.publicationsByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.publicationColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+
+      this.datasetsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.datasetColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+      this.datasetsByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.datasetColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+
+      this.softwareByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.softwareColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+      this.softwareByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.softwareColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+
+      this.otherByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+      this.otherByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+
       // fixme use the profileName variable when this chart is available for the same profile as the rest (in 2 places)
       // this.resultsByTypeOANonOAChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA","type":"column","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.type","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.access mode","type":"=","values":["Open Access"]},{"field":"result.access mode","type":"=","values":["Open Source"]}],"op":"OR"},{"groupFilters":[{"field":"result.organization.country.code","type":"=","values":["${this.countryCode}"]}],"op":"AND"}],"entity":"result","profile":"OpenAIRE original","limit":"30"}},{"name":"Non-OA","type":"column","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.type","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.access mode","type":"!=","values":["Open Access"]},{"field":"result.access mode","type":"!=","values":["Open Source"]}],"op":"AND"},{"groupFilters":[{"field":"result.organization.country.code","type":"=","values":["${this.countryCode}"]}],"op":"AND"}],"entity":"result","profile":"OpenAIRE original","limit":"30"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Research results by type","align":"left","margin":50},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":false},"colors":[\"${this.resultsPalette.join('","')}\"]}}`));
       this.resultsByTypeOANonOAChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA","type":"column","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.type","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.access mode","type":"=","values":["Open Access"]},{"field":"result.access mode","type":"=","values":["Open Source"]}],"op":"OR"},{"groupFilters":[{"field":"result.organization.country.code","type":"=","values":["${this.countryCode}"]}],"op":"AND"}],"entity":"result","profile":"${this.profileName}","limit":"30"}},{"name":"Non-OA","type":"column","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.type","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.access mode","type":"!=","values":["Open Access"]},{"field":"result.access mode","type":"!=","values":["Open Source"]}],"op":"AND"},{"groupFilters":[{"field":"result.organization.country.code","type":"=","values":["${this.countryCode}"]}],"op":"AND"}],"entity":"result","profile":"${this.profileName}","limit":"30"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Research results by type","align":"left","margin":50},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":false},"colors":[\"${this.resultsPalette.join('","')}\"]}}`));
@@ -147,4 +176,76 @@ export class CountryOverviewComponent implements OnInit {
       }
     );
   }
+
+  getPublicationsGroupBy(contentSelection: string): void {
+    this.publicationGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.publicationsByDatasourceChartURL) {
+      this.publicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.publicationColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsByOrganizationChartURL) {
+      this.publicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.publicationColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getPublicationsGroupByMobile(contentSelection: string): void {
+    this.publicationGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.publicationsByDatasourceChartURLMobile) {
+      this.publicationsByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.publicationColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsByOrganizationChartURLMobile) {
+      this.publicationsByOrganizationChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.publicationColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getDatasetsGroupBy(contentSelection: string): void {
+    this.datasetsGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.datasetsByDatasourceChartURL) {
+      this.datasetsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.datasetColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsByOrganizationChartURL) {
+      this.datasetsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.datasetColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getDatasetsGroupByMobile(contentSelection: string): void {
+    this.datasetsGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.datasetsByDatasourceChartURLMobile) {
+      this.datasetsByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.datasetColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsByOrganizationChartURLMobile) {
+      this.datasetsByOrganizationChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.datasetColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getSoftwareGroupBy(contentSelection: string): void {
+    this.softwareGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.softwareByDatasourceChartURL) {
+      this.softwareByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.softwareColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.softwareByOrganizationChartURL) {
+      this.softwareByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.softwareColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getSoftwareGroupByMobile(contentSelection: string): void {
+    this.softwareGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.softwareByDatasourceChartURLMobile) {
+      this.softwareByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.softwareColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.softwareByOrganizationChartURLMobile) {
+      this.softwareByOrganizationChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.softwareColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getORPGroupBy(contentSelection: string): void {
+    this.orpGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.otherByDatasourceChartURL) {
+      this.otherByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.otherByOrganizationChartURL) {
+      this.otherByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
+
+  getORPGroupByMobile(contentSelection: string): void {
+    this.orpGroupByView = contentSelection;
+    if (contentSelection === 'datasource' && !this.otherByDatasourceChartURLMobile) {
+      this.otherByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.bydatasource.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by datasource","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    } else if (contentSelection === 'organization' && !this.otherByOrganizationChartURLMobile) {
+      this.otherByOrganizationChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.affiliated.byorganization.country","parameters":["${this.countryCode}","other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products","align":"left","margin":50},"subtitle":{"text":"by organization","align":"left"},"yAxis":{"title":{"text":""}},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"color":{"linearGradient":{"x1":0,"y1":0,"x2":0,"y2":1},"stops":[[0,"${this.otherResearchProductsColor}"],[1,"${this.gradientStartColor}"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    }
+  }
 }