deleted .idea folder

2. set fixed ngx-matomo version

.github/dependabot.yml

@@ -0,0 +1,7 @@
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

angular.json

@@ -23,8 +23,10 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css",
-              "node_modules/font-awesome/css/font-awesome.css"
+              "node_modules/font-awesome/css/font-awesome.css",
+              "src/assets/css/material.scss"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
@@ -85,6 +87,29 @@
                   "maximumError": "5mb"
                 }
               ]
+            },
+            "madgik": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.madgik.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
             }
           },
           "defaultConfiguration": ""
@@ -114,6 +139,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.css"
             ],
             "scripts": [],

package.json

@@ -11,15 +11,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.1.1",
+    "@angular/animations": "~12.2.17",
-    "@angular/common": "~12.1.1",
+    "@angular/cdk": "^12.2.5",
-    "@angular/compiler": "~12.1.1",
+    "@angular/common": "~12.2.17",
-    "@angular/core": "~12.1.1",
+    "@angular/compiler": "~12.2.17",
-    "@angular/forms": "~12.1.1",
+    "@angular/core": "~12.2.17",
+    "@angular/forms": "~12.2.17",
     "@angular/localize": "^12.1.1",
-    "@angular/platform-browser": "~12.1.1",
+    "@angular/material": "^12.2.5",
-    "@angular/platform-browser-dynamic": "~12.1.1",
+    "@angular/platform-browser": "~12.2.17",
-    "@angular/router": "~12.1.1",
+    "@angular/platform-browser-dynamic": "~12.2.17",
+    "@angular/router": "~12.2.17",
     "@highcharts/map-collection": "^1.1.2",
     "angular-ng-autocomplete": "^2.0.5",
     "core-js": "^2.6.12",
@@ -29,8 +31,9 @@
     "highcharts": "^7.2.0",
     "highcharts-angular": "^2.4.0",
     "jquery": "^3.4.1",
-    "jspdf": "^1.5.3",
+    "jspdf": "^2.5.1",
     "ngx-echarts": "^4.2.2",
+    "ngx-matomo": "1.0.0-rc.1",
     "proj4": "^2.5.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.0.0",
@@ -38,13 +41,14 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.1.1",
+    "@angular-devkit/build-angular": "~12.2.18",
-    "@angular/cli": "~12.1.1",
+    "@angular/cli": "~12.2.18",
-    "@angular/compiler-cli": "~12.1.1",
+    "@angular/compiler-cli": "~12.2.17",
-    "@angular/language-service": "~12.1.1",
+    "@angular/language-service": "~12.2.17",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "codelyzer": "^6.0.0",
+    "eslint": "^7.30.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.4",
@@ -53,7 +57,6 @@
     "karma-jasmine": "~4.0.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
-    "eslint": "^7.30.0",
     "typescript": "~4.3.5"
   }
 }

src/app/app-routing.module.ts

@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './pages/home/home.component';
 import { CountriesMapOverviewComponent } from './pages/home/countries-map-overview.component';
-import { CountryPageComponent } from './pages/countrypage/country-page.component';
+import { CountryComponent } from './pages/country/country.component';
 import { MethodologyPageComponent } from './pages/methodology/methodology.component';
-import { ContinentOverviewComponent } from './pages/continentoverview/continent-overview.component';
+import { ContinentComponent } from './pages/continent/continent.component';
 
 const routes: Routes = [
   {
@@ -21,13 +21,21 @@ const routes: Routes = [
     component: CountriesMapOverviewComponent
   },
   {
-    path: 'overview/:continentName',
+    path: 'continent',
-    component: ContinentOverviewComponent
+    loadChildren: () => import('./pages/continent/continent.module').then(m => m.ContinentModule),
   },
   {
-    path: 'countryDashboard/:countryCode',
+    path: 'country',
-    component: CountryPageComponent
+    loadChildren: () => import('./pages/country/country.module').then(m => m.CountryModule),
   },
+  // {
+  //   path: 'overview/:continentName',
+  //   component: ContinentComponent
+  // },
+  // {
+  //   path: 'country/:countryCode',
+  //   component: CountryComponent
+  // },
   {
     path: 'methodology',
     component: MethodologyPageComponent
@@ -37,8 +45,8 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     // preloadingStrategy: PreloadAllModules,
-    // scrollPositionRestoration: 'top',
+    scrollPositionRestoration: 'disabled',
-    onSameUrlNavigation: 'reload',
+    // onSameUrlNavigation: 'reload',
     // relativeLinkResolution: 'corrected'
   })],
   exports: [RouterModule]

src/app/app.component.html

@@ -10,3 +10,10 @@
     <router-outlet></router-outlet>
   </div>
 </ng-template>
+
+<div class="uk-float-right" style="z-index: 100; top: 300px; position: fixed; right: 0px;">
+  <a href="mailto:feedback@openaire.eu" class="uk-flex uk-flex-middle md-btn md-btn-primary feedback-button ">
+    <i class="fa fa-envelope"></i>
+    <span class="uk-margin-small-left">Give us feedback</span>
+  </a>
+</div>

src/app/app.module.ts

@@ -10,11 +10,11 @@ import { CountriesTableComponent } from './pages/home/countries-table.component'
 import { DataViewComponent } from './pages/home/data-view.component';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { CountriesMapOverviewComponent } from './pages/home/countries-map-overview.component';
-import { CountryPageComponent } from './pages/countrypage/country-page.component';
+import { CountryComponent } from './pages/country/country.component';
-import { CountryMapComponent } from './pages/countrypage/country-map.component';
+import { CountryMapComponent } from './pages/country/country-map.component';
 import { GaugeChartComponent } from './pages/home/gauge-chart.component';
 import { MethodologyPageComponent } from './pages/methodology/methodology.component';
-import { ContinentOverviewComponent } from './pages/continentoverview/continent-overview.component';
+import { ContinentComponent } from './pages/continent/continent.component';
 import { EuropeMapOverviewComponent } from './pages/home/europe-map-overview.component';
 import { DataHandlerService } from './services/data-handler.service';
 
@@ -23,22 +23,25 @@ import * as echarts from 'echarts';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { TopmenuComponent } from './shared/topmenu/top-menu.component';
 import { TreemapHighchartsComponent } from './chart-components/treemap-highcharts/treemap-highcharts.component';
+import { MatomoModule } from 'ngx-matomo';
+import {environment} from '../environments/environment';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    ContinentOverviewComponent,
+    // ContinentComponent,
-    CountriesTableComponent,
+    // CountriesTableComponent,
     DataViewComponent,
     CountriesMapOverviewComponent,
-    EuropeMapOverviewComponent,
+    // EuropeMapOverviewComponent,
-    CountryPageComponent,
+    // CountryComponent,
     CountryMapComponent,
     GaugeChartComponent,
     MethodologyPageComponent,
     TopmenuComponent,
-    TreemapHighchartsComponent
+    // TreemapHighchartsComponent
   ],
   imports: [
     BrowserModule,
@@ -47,9 +50,22 @@ import { TreemapHighchartsComponent } from './chart-components/treemap-highchart
     // NgxEchartsModule.forRoot({
     //   echarts
     // }),
-    NgxEchartsModule,
+    // NgxEchartsModule,
     HighchartsChartModule,
-    AutocompleteLibModule
+    AutocompleteLibModule,
+    MatomoModule.forRoot({
+      scriptUrl: environment.MATOMO_URL + 'matomo.js',
+      trackers: [
+        {
+          trackerUrl: environment.MATOMO_URL + 'matomo.php',
+          siteId: environment.MATOMO_SITE_ID
+        }
+      ],
+      routeTracking: {
+        enable: true
+      }
+    }),
+    BrowserAnimationsModule,
   ],
   providers: [
     DataService,

src/app/chart-components/treemap-highcharts/treemap-highcharts.component.html

@@ -1,7 +1,8 @@
 <div>
   <highcharts-chart #chart [Highcharts]="Highcharts"
                     [options]="treeMapChartOptions"
-                    style="width: 100%; height: 550px; display: block;">
+                    [ngStyle]="height?{'height': height+'px'} : {'height': '550px'}"
+                    style="width: 100%; display: block;">
   </highcharts-chart>
 </div>
 

src/app/chart-components/treemap-highcharts/treemap-highcharts.component.ts

@@ -4,11 +4,15 @@ import * as  Highcharts from 'highcharts';
 import More from 'highcharts/highcharts-more';
 import Tree from 'highcharts/modules/treemap';
 import Heatmap from 'highcharts/modules/heatmap';
+import Exporting from 'highcharts/modules/exporting';
+import ExportData from 'highcharts/modules/export-data';
 import { TreemapHighchartsData } from '../../domain/treemap-highcharts-data';
 
 More(Highcharts);
 Tree(Highcharts);
 Heatmap(Highcharts);
+Exporting(Highcharts);
+ExportData(Highcharts);
 
 @Component({
   selector: 'app-treemap-highchart',
@@ -18,9 +22,12 @@ Heatmap(Highcharts);
 export class TreemapHighchartsComponent implements OnInit {
 
   @Input() chartTitle: string;
+  @Input() chartSubtitle: string = '';
   @Input() chartData: TreemapHighchartsData[];
   @Input() color: string;
 
+  @Input() height: number;
+
   Highcharts: typeof Highcharts = Highcharts;
 
   treeMapChartOptions = {};
@@ -31,7 +38,8 @@ export class TreemapHighchartsComponent implements OnInit {
 
     this.treeMapChartOptions = {
       chart: {
-        type: 'treemap'
+        type: 'treemap',
+        height: this.height
       },
       title: {
         text: this.chartTitle,
@@ -42,6 +50,15 @@ export class TreemapHighchartsComponent implements OnInit {
         //   fontSize: '18px'
         // }
       },
+      subtitle: {
+        text: this.chartSubtitle,
+        align: 'left',
+        margin: 25,
+        // style: {
+        //   color: '#7A7A7A',
+        //   fontSize: '18px'
+        // }
+      },
       tooltip: {
         enabled: true
       },

src/app/chart-palettes.ts

@@ -1,8 +1,10 @@
 // export const publicationColor = '#F181AE';
 // export const publicationTooltipColor = '#a52e5d';
 // export const publicationBackgroundColor = '#f8d5e3';
-export const publicationColor = '#381565';
+// export const publicationColor = '#381565';
-export const publicationTooltipColor = '#250e44';
+export const publicationColor = '#6f38b1';
+// export const publicationTooltipColor = '#250e44';
+export const publicationTooltipColor = '#4e277c';
 export const publicationBackgroundColor = '#e9ddf8';
 
 // export const datasetColor = '#A98BD4';
@@ -37,7 +39,9 @@ export const softwareColor = '#009DE0';
 // export const otherResearchProductsColor = '#00b8d0';
 export const otherResearchProductsColor = '#00B086';
 
-export const nonOAColor = '#787878';
+// export const nonOAColor = '#787878';
+export const nonOAColor = '#c3cad2';
+export const noIndicatorColor = '#c3cad2';
 
 // export const resultColor = '#072AE6';
 export const resultColor = '#EC4386';
@@ -45,19 +49,36 @@ export const resultColor = '#EC4386';
 // export const gradientStartColor = '#A1AAB8';
 export const gradientStartColor = '#c3cad2';
 
+export const goldColor = '#ffc000';
+export const greenColor = '#70ad47';
+export const goldGreenColor = '#BFD200';
+
 export const publicationPalette = [publicationColor, nonOAColor,
   '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
+export const publicationIndicatorsPalette = [publicationColor, noIndicatorColor,
+  '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
 
 export const datasetPalette = [datasetColor, nonOAColor,
   '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
+export const datasetIndicatorsPalette = [datasetColor, noIndicatorColor,
+  '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
 
 export const softwarePalette = [softwareColor, nonOAColor,
   '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
+export const softwareIndicatorsPalette = [softwareColor, noIndicatorColor,
+  '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
+export const softwareIndicatorsPaletteReversed = [noIndicatorColor, softwareColor,
+  '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
 
 export const otherResearchProductsPalette = [otherResearchProductsColor, nonOAColor,
   '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
+export const otherIndicatorsPalette = [otherResearchProductsColor, noIndicatorColor,
+  '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
 
 export const resultsPalette = [resultColor, nonOAColor,
   '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
 
+export const goldGreenIndicatorsPalette = [goldColor, goldGreenColor, greenColor, noIndicatorColor,
+  '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'];
+
 

src/app/domain/countries.ts

@@ -1,6 +1,7 @@
 export const countries = [
-  {id : 'AL', name : 'Albania'},
   {id : 'AD', name : 'Andorra'},
+  {id : 'AL', name : 'Albania'},
+  {id : 'AM', name : 'Armenia'},
   {id : 'AT', name : 'Austria'},
   {id : 'BY', name : 'Belarus'},
   {id : 'BE', name : 'Belgium'},
@@ -8,6 +9,7 @@ export const countries = [
   {id : 'BG', name : 'Bulgaria'},
   {id : 'HR', name : 'Croatia'},
   {id : 'CZ', name : 'Czech Republic'},
+  {id : 'CY', name : 'Cyprus'},
   {id : 'DK', name : 'Denmark'},
   {id : 'EE', name : 'Estonia'},
   // {id : 'FO', name : 'Faroe Islands'},
@@ -21,6 +23,7 @@ export const countries = [
   {id : 'HU', name : 'Hungary'},
   {id : 'IS', name : 'Iceland'},
   {id : 'IE', name : 'Ireland'},
+  {id : 'IL', name : 'Israel'},
   // {id : 'IM', name : 'Isle of Man'},
   {id : 'IT', name : 'Italy'},
   // {id : 'JE', name : 'Jersey'},

src/app/domain/overview-map-data.ts

@@ -65,6 +65,11 @@ export class CountryTableData {
   licence: Indicator;
   gold: Indicator;
   green: Indicator;
+  cc_licence: Indicator;
+  abstract: Indicator;
+  funders_collab: Indicator;
+  projects_collab: Indicator;
+  authors_collab: Indicator;
 }
 
 export class CountryPageOverviewData {
@@ -83,6 +88,7 @@ export class CountryPageOverviewData {
   funders: number = null;
   fundingOrganizations: number = null;
   ec_fundedOrganizations: number = null;
+  ec_fundedProjects: number = null;
 }
 
 export class RnDExpenditure {

src/app/pages/continent/collaboration/continent-collaboration-routing.module.ts

@@ -0,0 +1,41 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentCollaborationComponent } from './continent-collaboration.component';
+
+
+const continentCollaborationRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentCollaborationComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'publications',
+        pathMatch: 'full',
+      },
+      {
+        path: 'publications',
+        loadChildren: () => import('./publications/continent-collaboration-publications.module').then(m => m.ContinentCollaborationPublicationsModule),
+      },
+      {
+        path: 'datasets',
+        loadChildren: () => import('./datasets/continent-collaboration-datasets.module').then(m => m.ContinentCollaborationDatasetsModule),
+      },
+      {
+        path: 'software',
+        loadChildren: () => import('./software/continent-collaboration-software.module').then(m => m.ContinentCollaborationSoftwareModule),
+      },
+      {
+        path: 'other-research-products',
+        loadChildren: () => import('./other-research-products/continent-collaboration-orp.module').then(m => m.ContinentCollaborationORPModule),
+      },
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentCollaborationRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentCollaborationRoutingModule {}

src/app/pages/continent/collaboration/continent-collaboration.component.html

@@ -0,0 +1,31 @@
+<div class="uk-margin tabContent">
+
+
+  <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
+    <li aria-expanded="true" [routerLinkActive]="['uk-active']">
+      <a class="publicationsSubnav" [routerLink]="['./publications']" uk-tooltip="title: Publications; duration: 2000">
+        <img src="../../../../assets/img/icons/publications-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="datasetsSubnav" [routerLink]="['./datasets']" uk-tooltip="title: Datasets; duration: 2000">
+        <img src="../../../../assets/img/icons/datasets-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="softwareSubnav" [routerLink]="['./software']" uk-tooltip="title: Software; duration: 2000">
+        <img src="../../../../assets/img/icons/software-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="otherSubnav" [routerLink]="['./other-research-products']" uk-tooltip="title: Other research products; duration: 2000">
+        <img src="../../../../assets/img/icons/other-icon.svg" width="15">
+      </a>
+    </li>
+  </ul>
+
+  <hr class="uk-visible@m">
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/continent/collaboration/continent-collaboration.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-collaboration',
+  templateUrl: './continent-collaboration.component.html',
+})
+
+export class ContinentCollaborationComponent {}
+

src/app/pages/continent/collaboration/continent-collaboration.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../services/data.service';
+import { DataHandlerService } from '../../../services/data-handler.service';
+import { ContinentCollaborationComponent } from './continent-collaboration.component';
+import { ContinentCollaborationRoutingModule } from './continent-collaboration-routing.module';
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentCollaborationRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentCollaborationComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentCollaborationModule {}

src/app/pages/continent/collaboration/datasets/continent-collaboration-datasets-indicators.component.html

@@ -0,0 +1,196 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  <div class="uk-grid uk-grid-match 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="datasetsCoFundedFundersTimeline" width="100%" height="550" [src]="datasetsCoFundedFundersTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="datasetsCoFundedProjectsTimeline" width="100%" height="550" [src]="datasetsCoFundedProjectsTimeline"></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" #selectCoFundedFundersGroupBy (change)="getDatasetsCoFundedFundersGroupByMobile(selectCoFundedFundersGroupBy.value)" style="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="datasetsCoFundedFundersGroupByView==='country' && datasetsCoFundedFundersByCountryChartURLMobile"
+                    width="100%" height="550" [src]="datasetsCoFundedFundersByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="datasetsCoFundedFundersGroupByView==='datasource' && datasetsCoFundedFundersByDatasourceChartURL"
+                    width="100%" height="550" [src]="datasetsCoFundedFundersByDatasourceChartURL"></iframe>
+            <iframe *ngIf="datasetsCoFundedFundersGroupByView==='organization' && datasetsCoFundedFundersByOrganizationChartURL"
+                    width="100%" height="550" [src]="datasetsCoFundedFundersByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="datasetsCoFundedFundersGroupByView==='funder' && datasetsCoFundedFundersByFunderData"
+                                   [chartTitle]="'Open access datasets with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="datasetsCoFundedFundersByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getDatasetsCoFundedFundersGroupBy('country')">Country</a></li>
+              <li><a (click)="getDatasetsCoFundedFundersGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getDatasetsCoFundedFundersGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getDatasetsCoFundedFundersGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-datasets-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="datasetsCoFundedFundersByCountryChartURL"
+                        width="100%" height="650" [src]="datasetsCoFundedFundersByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsCoFundedFundersByDatasourceChartURL"
+                        width="100%" height="650" [src]="datasetsCoFundedFundersByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsCoFundedFundersByOrganizationChartURL"
+                        width="100%" height="650" [src]="datasetsCoFundedFundersByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="datasetsCoFundedFundersByFunderData"
+                                       [chartTitle]="'Open access datasets with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="datasetsCoFundedFundersByFunderData" [color]="datasetColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getDatasetsCoFundedProjectsGroupByMobile(selectCCLicenceGroupBy.value)" style="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="datasetsCoFundedProjectsGroupByView==='country' && datasetsCoFundedProjectsByCountryChartURLMobile"
+                    width="100%" height="550" [src]="datasetsCoFundedProjectsByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="datasetsCoFundedProjectsGroupByView==='datasource' && datasetsCoFundedProjectsByDatasourceChartURL"
+                    width="100%" height="550" [src]="datasetsCoFundedProjectsByDatasourceChartURL"></iframe>
+            <iframe *ngIf="datasetsCoFundedProjectsGroupByView==='organization' && datasetsCoFundedProjectsByOrganizationChartURL"
+                    width="100%" height="550" [src]="datasetsCoFundedProjectsByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="datasetsCoFundedProjectsGroupByView==='funder' && datasetsCoFundedProjectsByFunderData"
+                                   [chartTitle]="'Open access datasets linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="datasetsCoFundedProjectsByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getDatasetsCoFundedProjectsGroupBy('country')">Country</a></li>
+              <li><a (click)="getDatasetsCoFundedProjectsGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getDatasetsCoFundedProjectsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getDatasetsCoFundedProjectsGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-datasets-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="datasetsCoFundedProjectsByCountryChartURL"
+                        width="100%" height="650" [src]="datasetsCoFundedProjectsByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsCoFundedProjectsByDatasourceChartURL"
+                        width="100%" height="650" [src]="datasetsCoFundedProjectsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsCoFundedProjectsByOrganizationChartURL"
+                        width="100%" height="650" [src]="datasetsCoFundedProjectsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="datasetsCoFundedProjectsByFunderData"
+                                       [chartTitle]="'Open access datasets linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="datasetsCoFundedProjectsByFunderData" [color]="datasetColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='more-details'" class="indicatorsTable uk-visible@m uk-margin-large-top">
+
+  <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="display: inline-block">
+      <option value="affiliated">affiliated</option>
+      <option value="deposited">deposited</option>
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid">
+    <div class="absoluteTable uk-width-3-4@l uk-width-3-4@m">
+      <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="loadingDatasetsAbsoluteTable" 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]="'collaboration'" [entity]="'dataset'"></app-countries-table>
+            </li>
+            <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+              <div *ngIf="loadingDatasetsPercentageTable" 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]="'collaboration'" [entity]="'dataset'"></app-countries-table>
+            </li>
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/app/pages/continent/collaboration/datasets/continent-collaboration-datasets-indicators.component.ts

@@ -0,0 +1,161 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  datasetColor,
+  datasetPalette, datasetIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-collaboration-datasets-indicators',
+  templateUrl: './continent-collaboration-datasets-indicators.component.html',
+})
+
+export class ContinentCollaborationDatasetsIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private datasetIndicatorsPalette = datasetIndicatorsPalette;
+  datasetColor = datasetColor;
+
+  datasetsCoFundedFundersTimeline: SafeResourceUrl;
+  datasetsCoFundedProjectsTimeline: SafeResourceUrl;
+
+  datasetsCoFundedFundersGroupByView = 'country';
+  datasetsCoFundedFundersByCountryChartURL: SafeResourceUrl;
+  datasetsCoFundedFundersByDatasourceChartURL: SafeResourceUrl;
+  datasetsCoFundedFundersByOrganizationChartURL: SafeResourceUrl;
+  datasetsCoFundedFundersByCountryChartURLMobile: SafeResourceUrl;
+
+  datasetsCoFundedProjectsGroupByView = 'country';
+  datasetsCoFundedProjectsByCountryChartURL: SafeResourceUrl;
+  datasetsCoFundedProjectsByDatasourceChartURL: SafeResourceUrl;
+  datasetsCoFundedProjectsByOrganizationChartURL: SafeResourceUrl;
+  datasetsCoFundedProjectsByCountryChartURLMobile: SafeResourceUrl;
+
+  datasetsCoFundedFundersByFunderData: TreemapHighchartsData[];
+  datasetsCoFundedProjectsByFunderData: TreemapHighchartsData[];
+
+  loadingDatasetsAbsoluteTable: boolean = true;
+  loadingDatasetsPercentageTable: boolean = true;
+  datasetsTableContentSelection: string = 'affiliated';
+  datasetsAbsoluteTableData: CountryTableData[];
+  datasetsPercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.datasetsCoFundedFundersTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab_timeline.affiliated","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab_timeline.affiliated","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsCoFundedProjectsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab_timeline.affiliated","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab_timeline.affiliated","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+    this.datasetsCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+    this.datasetsCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.dataService.getFundersResultsByTypeForCollaborationIndicatorForCountry('dataset', 'funders').subscribe(
+      rawData => {
+        this.datasetsCoFundedFundersByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCollaborationIndicatorForCountry('dataset', 'projects').subscribe(
+      rawData => {
+        this.datasetsCoFundedProjectsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getDatasetsTableData(this.datasetsTableContentSelection);
+  }
+
+  getDatasetsTableData(contentSelection: string) {
+
+    this.loadingDatasetsAbsoluteTable = true;
+    this.loadingDatasetsPercentageTable = true;
+    this.dataService.getCollaborationIndicatorsTableData('dataset', contentSelection).subscribe(
+      rawData => {
+        this.datasetsAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.datasetsPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingDatasetsAbsoluteTable = false;
+        this.loadingDatasetsPercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingDatasetsAbsoluteTable = false;
+        this.loadingDatasetsPercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+    this.datasetsTableContentSelection = contentSelection;
+    this.getDatasetsTableData(this.datasetsTableContentSelection);
+  }
+
+  getDatasetsCoFundedFundersGroupBy(contentSelection: string): void {
+    this.datasetsCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsCoFundedFundersByCountryChartURL) {
+      this.datasetsCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsCoFundedFundersByDatasourceChartURL) {
+      this.datasetsCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsCoFundedFundersByOrganizationChartURL) {
+      this.datasetsCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsCoFundedFundersGroupByMobile(contentSelection: string): void {
+    this.datasetsCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsCoFundedFundersByCountryChartURLMobile) {
+      this.datasetsCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsCoFundedFundersByDatasourceChartURL) {
+      this.datasetsCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsCoFundedFundersByOrganizationChartURL) {
+      this.datasetsCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access datasets with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsCoFundedProjectsGroupBy(contentSelection: string): void {
+    this.datasetsCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsCoFundedProjectsByCountryChartURL) {
+      this.datasetsCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsCoFundedProjectsByDatasourceChartURL) {
+      this.datasetsCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsCoFundedProjectsByOrganizationChartURL) {
+      this.datasetsCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsCoFundedProjectsGroupByMobile(contentSelection: string): void {
+    this.datasetsCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsCoFundedProjectsByCountryChartURLMobile) {
+      this.datasetsCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsCoFundedProjectsByDatasourceChartURL) {
+      this.datasetsCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsCoFundedProjectsByOrganizationChartURL) {
+      this.datasetsCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+}

src/app/pages/continent/collaboration/datasets/continent-collaboration-datasets-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentCollaborationDatasetsIndicatorsComponent } from './continent-collaboration-datasets-indicators.component';
+import { ContinentCollaborationDatasetsComponent } from './continent-collaboration-datasets.component';
+
+const continentCollaborationDatasetsRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentCollaborationDatasetsComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentCollaborationDatasetsIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentCollaborationDatasetsRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentCollaborationDatasetsRoutingModule {}

src/app/pages/continent/collaboration/datasets/continent-collaboration-datasets.component.html

@@ -0,0 +1,14 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Datasets</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/continent/collaboration/datasets/continent-collaboration-datasets.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-collaboration-datasets',
+  templateUrl: './continent-collaboration-datasets.component.html',
+})
+
+export class ContinentCollaborationDatasetsComponent {}

src/app/pages/continent/collaboration/datasets/continent-collaboration-datasets.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { ContinentCollaborationDatasetsRoutingModule } from './continent-collaboration-datasets-routing.module';
+import { ContinentCollaborationDatasetsComponent } from './continent-collaboration-datasets.component';
+import { ContinentCollaborationDatasetsIndicatorsComponent } from './continent-collaboration-datasets-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentCollaborationDatasetsRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentCollaborationDatasetsComponent,
+    ContinentCollaborationDatasetsIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentCollaborationDatasetsModule {}

src/app/pages/continent/collaboration/other-research-products/continent-collaboration-orp-indicators.component.html

@@ -0,0 +1,196 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  <div class="uk-grid uk-grid-match 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="otherCoFundedFundersTimeline" width="100%" height="550" [src]="otherCoFundedFundersTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="otherCoFundedProjectsTimeline" width="100%" height="550" [src]="otherCoFundedProjectsTimeline"></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" #selectCoFundedFundersGroupBy (change)="getOtherCoFundedFundersGroupByMobile(selectCoFundedFundersGroupBy.value)" style="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="otherCoFundedFundersGroupByView==='country' && otherCoFundedFundersByCountryChartURLMobile"
+                    width="100%" height="550" [src]="otherCoFundedFundersByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="otherCoFundedFundersGroupByView==='datasource' && otherCoFundedFundersByDatasourceChartURL"
+                    width="100%" height="550" [src]="otherCoFundedFundersByDatasourceChartURL"></iframe>
+            <iframe *ngIf="otherCoFundedFundersGroupByView==='organization' && otherCoFundedFundersByOrganizationChartURL"
+                    width="100%" height="550" [src]="otherCoFundedFundersByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="otherCoFundedFundersGroupByView==='funder' && otherCoFundedFundersByFunderData"
+                                   [chartTitle]="'Open Access ORPs with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="otherCoFundedFundersByFunderData" [color]="otherColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-other-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getOtherCoFundedFundersGroupBy('country')">Country</a></li>
+              <li><a (click)="getOtherCoFundedFundersGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getOtherCoFundedFundersGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getOtherCoFundedFundersGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-other-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="otherCoFundedFundersByCountryChartURL"
+                        width="100%" height="650" [src]="otherCoFundedFundersByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherCoFundedFundersByDatasourceChartURL"
+                        width="100%" height="650" [src]="otherCoFundedFundersByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherCoFundedFundersByOrganizationChartURL"
+                        width="100%" height="650" [src]="otherCoFundedFundersByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherCoFundedFundersByFunderData"
+                                       [chartTitle]="'Open Access ORPs with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="otherCoFundedFundersByFunderData" [color]="otherColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getOtherCoFundedProjectsGroupByMobile(selectCCLicenceGroupBy.value)" style="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="otherCoFundedProjectsGroupByView==='country' && otherCoFundedProjectsByCountryChartURLMobile"
+                    width="100%" height="550" [src]="otherCoFundedProjectsByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="otherCoFundedProjectsGroupByView==='datasource' && otherCoFundedProjectsByDatasourceChartURL"
+                    width="100%" height="550" [src]="otherCoFundedProjectsByDatasourceChartURL"></iframe>
+            <iframe *ngIf="otherCoFundedProjectsGroupByView==='organization' && otherCoFundedProjectsByOrganizationChartURL"
+                    width="100%" height="550" [src]="otherCoFundedProjectsByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="otherCoFundedProjectsGroupByView==='funder' && otherCoFundedProjectsByFunderData"
+                                   [chartTitle]="'Open Access ORPs linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="otherCoFundedProjectsByFunderData" [color]="otherColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-other-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getOtherCoFundedProjectsGroupBy('country')">Country</a></li>
+              <li><a (click)="getOtherCoFundedProjectsGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getOtherCoFundedProjectsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getOtherCoFundedProjectsGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-other-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="otherCoFundedProjectsByCountryChartURL"
+                        width="100%" height="650" [src]="otherCoFundedProjectsByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherCoFundedProjectsByDatasourceChartURL"
+                        width="100%" height="650" [src]="otherCoFundedProjectsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherCoFundedProjectsByOrganizationChartURL"
+                        width="100%" height="650" [src]="otherCoFundedProjectsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherCoFundedProjectsByFunderData"
+                                       [chartTitle]="'Open Access ORPs linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="otherCoFundedProjectsByFunderData" [color]="otherColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='more-details'" class="indicatorsTable uk-visible@m uk-margin-large-top">
+
+  <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="display: inline-block">
+      <option value="affiliated">affiliated</option>
+      <option value="deposited">deposited</option>
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid">
+    <div class="absoluteTable uk-width-3-4@l uk-width-3-4@m">
+      <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="loadingOtherAbsoluteTable" 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]="'collaboration'" [entity]="'other'"></app-countries-table>
+            </li>
+            <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+              <div *ngIf="loadingOtherPercentageTable" 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]="'collaboration'" [entity]="'other'"></app-countries-table>
+            </li>
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/app/pages/continent/collaboration/other-research-products/continent-collaboration-orp-indicators.component.ts

@@ -0,0 +1,161 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  otherResearchProductsColor,
+  otherResearchProductsPalette, otherIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-collaboration-orp-indicators',
+  templateUrl: './continent-collaboration-orp-indicators.component.html',
+})
+
+export class ContinentCollaborationORPIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private otherIndicatorsPalette = otherIndicatorsPalette;
+  otherColor = otherResearchProductsColor;
+
+  otherCoFundedFundersTimeline: SafeResourceUrl;
+  otherCoFundedProjectsTimeline: SafeResourceUrl;
+
+  otherCoFundedFundersGroupByView = 'country';
+  otherCoFundedFundersByCountryChartURL: SafeResourceUrl;
+  otherCoFundedFundersByDatasourceChartURL: SafeResourceUrl;
+  otherCoFundedFundersByOrganizationChartURL: SafeResourceUrl;
+  otherCoFundedFundersByCountryChartURLMobile: SafeResourceUrl;
+
+  otherCoFundedProjectsGroupByView = 'country';
+  otherCoFundedProjectsByCountryChartURL: SafeResourceUrl;
+  otherCoFundedProjectsByDatasourceChartURL: SafeResourceUrl;
+  otherCoFundedProjectsByOrganizationChartURL: SafeResourceUrl;
+  otherCoFundedProjectsByCountryChartURLMobile: SafeResourceUrl;
+
+  otherCoFundedFundersByFunderData: TreemapHighchartsData[];
+  otherCoFundedProjectsByFunderData: TreemapHighchartsData[];
+
+  loadingOtherAbsoluteTable: boolean = true;
+  loadingOtherPercentageTable: boolean = true;
+  otherTableContentSelection: string = 'affiliated';
+  otherAbsoluteTableData: CountryTableData[];
+  otherPercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.otherCoFundedFundersTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab_timeline.affiliated","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab_timeline.affiliated","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherCoFundedProjectsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab_timeline.affiliated","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab_timeline.affiliated","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+    this.otherCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+    this.otherCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.dataService.getFundersResultsByTypeForCollaborationIndicatorForCountry('other', 'funders').subscribe(
+      rawData => {
+        this.otherCoFundedFundersByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCollaborationIndicatorForCountry('other', 'projects').subscribe(
+      rawData => {
+        this.otherCoFundedProjectsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getOtherTableData(this.otherTableContentSelection);
+  }
+
+  getOtherTableData(contentSelection: string) {
+
+    this.loadingOtherAbsoluteTable = true;
+    this.loadingOtherPercentageTable = true;
+    this.dataService.getCollaborationIndicatorsTableData('other', contentSelection).subscribe(
+      rawData => {
+        this.otherAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.otherPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingOtherAbsoluteTable = false;
+        this.loadingOtherPercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingOtherAbsoluteTable = false;
+        this.loadingOtherPercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+    this.otherTableContentSelection = contentSelection;
+    this.getOtherTableData(this.otherTableContentSelection);
+  }
+
+  getOtherCoFundedFundersGroupBy(contentSelection: string): void {
+    this.otherCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherCoFundedFundersByCountryChartURL) {
+      this.otherCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherCoFundedFundersByDatasourceChartURL) {
+      this.otherCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherCoFundedFundersByOrganizationChartURL) {
+      this.otherCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherCoFundedFundersGroupByMobile(contentSelection: string): void {
+    this.otherCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherCoFundedFundersByCountryChartURLMobile) {
+      this.otherCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherCoFundedFundersByDatasourceChartURL) {
+      this.otherCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherCoFundedFundersByOrganizationChartURL) {
+      this.otherCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherCoFundedProjectsGroupBy(contentSelection: string): void {
+    this.otherCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherCoFundedProjectsByCountryChartURL) {
+      this.otherCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherCoFundedProjectsByDatasourceChartURL) {
+      this.otherCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherCoFundedProjectsByOrganizationChartURL) {
+      this.otherCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherCoFundedProjectsGroupByMobile(contentSelection: string): void {
+    this.otherCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherCoFundedProjectsByCountryChartURLMobile) {
+      this.otherCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherCoFundedProjectsByDatasourceChartURL) {
+      this.otherCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherCoFundedProjectsByOrganizationChartURL) {
+      this.otherCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+}

src/app/pages/continent/collaboration/other-research-products/continent-collaboration-orp-routing.module.ts

@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentCollaborationORPComponent } from './continent-collaboration-orp.component';
+import { ContinentCollaborationORPIndicatorsComponent } from './continent-collaboration-orp-indicators.component';
+
+
+const continentCollaborationORPRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentCollaborationORPComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentCollaborationORPIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentCollaborationORPRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentCollaborationORPRoutingModule {}

src/app/pages/continent/collaboration/other-research-products/continent-collaboration-orp.component.html

@@ -0,0 +1,14 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Other research products (ORPs)</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/continent/collaboration/other-research-products/continent-collaboration-orp.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-collaboration-orp',
+  templateUrl: './continent-collaboration-orp.component.html',
+})
+
+export class ContinentCollaborationORPComponent {}

src/app/pages/continent/collaboration/other-research-products/continent-collaboration-orp.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { ContinentCollaborationORPRoutingModule } from './continent-collaboration-orp-routing.module';
+import { ContinentCollaborationORPComponent } from './continent-collaboration-orp.component';
+import { ContinentCollaborationORPIndicatorsComponent } from './continent-collaboration-orp-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentCollaborationORPRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentCollaborationORPComponent,
+    ContinentCollaborationORPIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentCollaborationORPModule {}

src/app/pages/continent/collaboration/publications/continent-collaboration-publications-indicators.component.html

@@ -0,0 +1,276 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  <div class="uk-grid uk-grid-match 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="publicationsCoFundedFundersTimeline" width="100%" height="550" [src]="publicationsCoFundedFundersTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="publicationsCoFundedProjectsTimeline" width="100%" height="550" [src]="publicationsCoFundedProjectsTimeline"></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" #selectCoFundedFundersGroupBy (change)="getPublicationsCoFundedFundersGroupByMobile(selectCoFundedFundersGroupBy.value)" style="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="publicationsCoFundedFundersGroupByView==='country' && publicationsCoFundedFundersByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsCoFundedFundersByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="publicationsCoFundedFundersGroupByView==='datasource' && publicationsCoFundedFundersByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsCoFundedFundersByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsCoFundedFundersGroupByView==='organization' && publicationsCoFundedFundersByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsCoFundedFundersByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsCoFundedFundersGroupByView==='funder' && publicationsCoFundedFundersByFunderData"
+                                   [chartTitle]="'Open access publications with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsCoFundedFundersByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getPublicationsCoFundedFundersGroupBy('country')">Country</a></li>
+              <li><a (click)="getPublicationsCoFundedFundersGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsCoFundedFundersGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsCoFundedFundersGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-publications-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsCoFundedFundersByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsCoFundedFundersByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsCoFundedFundersByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsCoFundedFundersByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsCoFundedFundersByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsCoFundedFundersByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsCoFundedFundersByFunderData"
+                                       [chartTitle]="'Open access publications with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsCoFundedFundersByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getPublicationsCoFundedProjectsGroupByMobile(selectCCLicenceGroupBy.value)" style="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="publicationsCoFundedProjectsGroupByView==='country' && publicationsCoFundedProjectsByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsCoFundedProjectsByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="publicationsCoFundedProjectsGroupByView==='datasource' && publicationsCoFundedProjectsByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsCoFundedProjectsByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsCoFundedProjectsGroupByView==='organization' && publicationsCoFundedProjectsByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsCoFundedProjectsByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsCoFundedProjectsGroupByView==='funder' && publicationsCoFundedProjectsByFunderData"
+                                   [chartTitle]="'Open access publications linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsCoFundedProjectsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getPublicationsCoFundedProjectsGroupBy('country')">Country</a></li>
+              <li><a (click)="getPublicationsCoFundedProjectsGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsCoFundedProjectsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsCoFundedProjectsGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-publications-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsCoFundedProjectsByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsCoFundedProjectsByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsCoFundedProjectsByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsCoFundedProjectsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsCoFundedProjectsByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsCoFundedProjectsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsCoFundedProjectsByFunderData"
+                                       [chartTitle]="'Open access publications linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsCoFundedProjectsByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='co-authored'" class="coAuthoredIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="publicationsCoAuthoredTimeline" width="100%" height="550" [src]="publicationsCoAuthoredTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <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" #selectCoAuthoredGroupBy (change)="getPublicationsCoAuthoredGroupByMobile(selectCoAuthoredGroupBy.value)" style="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="publicationsCoAuthoredGroupByView==='country' && publicationsCoAuthoredByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsCoAuthoredByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="publicationsCoAuthoredGroupByView==='datasource' && publicationsCoAuthoredByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsCoAuthoredByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsCoAuthoredGroupByView==='organization' && publicationsCoAuthoredByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsCoAuthoredByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsCoAuthoredGroupByView==='funder' && publicationsCoAuthoredByFunderData"
+                                   [chartTitle]="'Co-authored Open Access publications'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsCoAuthoredByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-pid', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getPublicationsCoAuthoredGroupBy('country')">Country</a></li>
+              <li><a (click)="getPublicationsCoAuthoredGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsCoAuthoredGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsCoAuthoredGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-publications-pid" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsCoAuthoredByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsCoAuthoredByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsCoAuthoredByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsCoAuthoredByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsCoAuthoredByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsCoAuthoredByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsCoAuthoredByFunderData"
+                                       [chartTitle]="'Co-authored Open Access publications'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsCoAuthoredByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='more-details'" class="indicatorsTable uk-visible@m uk-margin-large-top">
+
+  <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="display: inline-block">
+      <option value="affiliated_peer_reviewed">affiliated</option>
+      <option value="affiliated">affiliated (incl. non-peer reviewed publications)</option>
+      <option value="deposited_peer_reviewed">deposited</option>
+      <option value="deposited">deposited (incl. non-peer reviewed publications)</option>
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid">
+    <div class="absoluteTable uk-width-3-4@l uk-width-3-4@m">
+      <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]="'collaboration'" [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]="'collaboration'" [entity]="'publication'"></app-countries-table>
+            </li>
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/app/pages/continent/collaboration/publications/continent-collaboration-publications-indicators.component.ts

@@ -0,0 +1,202 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  publicationColor,
+  publicationPalette, publicationIndicatorsPalette, goldGreenIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-collaboration-publications-indicators',
+  templateUrl: './continent-collaboration-publications-indicators.component.html',
+})
+
+export class ContinentCollaborationPublicationsIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private publicationIndicatorsPalette = publicationIndicatorsPalette;
+  publicationColor = publicationColor;
+
+  publicationsCoFundedFundersTimeline: SafeResourceUrl;
+  publicationsCoFundedProjectsTimeline: SafeResourceUrl;
+  publicationsCoAuthoredTimeline: SafeResourceUrl;
+
+  publicationsCoFundedFundersGroupByView = 'country';
+  publicationsCoFundedFundersByCountryChartURL: SafeResourceUrl;
+  publicationsCoFundedFundersByDatasourceChartURL: SafeResourceUrl;
+  publicationsCoFundedFundersByOrganizationChartURL: SafeResourceUrl;
+  publicationsCoFundedFundersByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsCoFundedProjectsGroupByView = 'country';
+  publicationsCoFundedProjectsByCountryChartURL: SafeResourceUrl;
+  publicationsCoFundedProjectsByDatasourceChartURL: SafeResourceUrl;
+  publicationsCoFundedProjectsByOrganizationChartURL: SafeResourceUrl;
+  publicationsCoFundedProjectsByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsCoAuthoredGroupByView = 'country';
+  publicationsCoAuthoredByCountryChartURL: SafeResourceUrl;
+  publicationsCoAuthoredByDatasourceChartURL: SafeResourceUrl;
+  publicationsCoAuthoredByOrganizationChartURL: SafeResourceUrl;
+  publicationsCoAuthoredByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsCoFundedFundersByFunderData: TreemapHighchartsData[];
+  publicationsCoFundedProjectsByFunderData: TreemapHighchartsData[];
+  publicationsCoAuthoredByFunderData: TreemapHighchartsData[];
+
+  loadingPublicationsAbsoluteTable: boolean = true;
+  loadingPublicationsPercentageTable: boolean = true;
+  publicationsTableContentSelection: string = 'affiliated_peer_reviewed';
+  publicationsAbsoluteTableData: CountryTableData[];
+  publicationsPercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.publicationsCoFundedFundersTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.publications.peer_reviewed.funders_collab_timeline.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.publications.peer_reviewed.funders_collab_timeline.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsCoFundedProjectsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.publications.peer_reviewed.projects_collab_timeline.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.publications.peer_reviewed.projects_collab_timeline.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsCoAuthoredTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"column","query":{"name":"new.oso.publications.peer_reviewed.authors_collab_timeline.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"column","query":{"name":"new.oso.publications.peer_reviewed.authors_collab_timeline.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsCoAuthoredByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"column","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"column","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsCoAuthoredByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.dataService.getFundersResultsByPublicationForCollaborationIndicatorForCountry('funders').subscribe(
+      rawData => {
+        this.publicationsCoFundedFundersByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByPublicationForCollaborationIndicatorForCountry('projects').subscribe(
+      rawData => {
+        this.publicationsCoFundedProjectsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByPublicationForCollaborationIndicatorForCountry('authors').subscribe(
+      rawData => {
+        this.publicationsCoAuthoredByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getPublicationsTableData(this.publicationsTableContentSelection);
+  }
+
+  getPublicationsTableData(contentSelection: string) {
+
+    this.loadingPublicationsAbsoluteTable = true;
+    this.loadingPublicationsPercentageTable = true;
+    this.dataService.getCollaborationIndicatorsTableData('publication', contentSelection).subscribe(
+      rawData => {
+        this.publicationsAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.publicationsPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingPublicationsAbsoluteTable = false;
+        this.loadingPublicationsPercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingPublicationsAbsoluteTable = false;
+        this.loadingPublicationsPercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+    this.publicationsTableContentSelection = contentSelection;
+    this.getPublicationsTableData(this.publicationsTableContentSelection);
+  }
+
+  getPublicationsCoFundedFundersGroupBy(contentSelection: string): void {
+    this.publicationsCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsCoFundedFundersByCountryChartURL) {
+      this.publicationsCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsCoFundedFundersByDatasourceChartURL) {
+      this.publicationsCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsCoFundedFundersByOrganizationChartURL) {
+      this.publicationsCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsCoFundedFundersGroupByMobile(contentSelection: string): void {
+    this.publicationsCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsCoFundedFundersByCountryChartURLMobile) {
+      this.publicationsCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsCoFundedFundersByDatasourceChartURL) {
+      this.publicationsCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsCoFundedFundersByOrganizationChartURL) {
+      this.publicationsCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.funders_collab.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open access publications with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsCoFundedProjectsGroupBy(contentSelection: string): void {
+    this.publicationsCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsCoFundedProjectsByCountryChartURL) {
+      this.publicationsCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsCoFundedProjectsByDatasourceChartURL) {
+      this.publicationsCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsCoFundedProjectsByOrganizationChartURL) {
+      this.publicationsCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsCoFundedProjectsGroupByMobile(contentSelection: string): void {
+    this.publicationsCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsCoFundedProjectsByCountryChartURLMobile) {
+      this.publicationsCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsCoFundedProjectsByDatasourceChartURL) {
+      this.publicationsCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsCoFundedProjectsByOrganizationChartURL) {
+      this.publicationsCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.projects_collab.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsCoAuthoredGroupBy(contentSelection: string): void {
+    this.publicationsCoAuthoredGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsCoAuthoredByCountryChartURL) {
+      this.publicationsCoAuthoredByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"column","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"column","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsCoAuthoredByDatasourceChartURL) {
+      this.publicationsCoAuthoredByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsCoAuthoredByOrganizationChartURL) {
+      this.publicationsCoAuthoredByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsCoAuthoredGroupByMobile(contentSelection: string): void {
+    this.publicationsCoAuthoredGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsCoAuthoredByCountryChartURLMobile) {
+      this.publicationsCoAuthoredByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsCoAuthoredByDatasourceChartURL) {
+      this.publicationsCoAuthoredByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsCoAuthoredByOrganizationChartURL) {
+      this.publicationsCoAuthoredByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"co-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"single-authored","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.authors_collab.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Co-authored Open Access publications","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+}

src/app/pages/continent/collaboration/publications/continent-collaboration-publications-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentCollaborationPublicationsComponent } from './continent-collaboration-publications.component';
+import { ContinentCollaborationPublicationsIndicatorsComponent } from './continent-collaboration-publications-indicators.component';
+
+const continentCollaborationPublicationsRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentCollaborationPublicationsComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentCollaborationPublicationsIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentCollaborationPublicationsRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentCollaborationPublicationsRoutingModule {}

src/app/pages/continent/collaboration/publications/continent-collaboration-publications.component.html

@@ -0,0 +1,15 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Publications</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-authored']">Co-authored</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/continent/collaboration/publications/continent-collaboration-publications.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-collaboration-publications',
+  templateUrl: './continent-collaboration-publications.component.html',
+})
+
+export class ContinentCollaborationPublicationsComponent {}

src/app/pages/continent/collaboration/publications/continent-collaboration-publications.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { ContinentCollaborationPublicationsRoutingModule } from './continent-collaboration-publications-routing.module';
+import { ContinentCollaborationPublicationsComponent } from './continent-collaboration-publications.component';
+import { ContinentCollaborationPublicationsIndicatorsComponent } from './continent-collaboration-publications-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentCollaborationPublicationsRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentCollaborationPublicationsComponent,
+    ContinentCollaborationPublicationsIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentCollaborationPublicationsModule {}

src/app/pages/continent/collaboration/software/continent-collaboration-software-indicators.component.html

@@ -0,0 +1,196 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  <div class="uk-grid uk-grid-match 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="softwareCoFundedFundersTimeline" width="100%" height="550" [src]="softwareCoFundedFundersTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="softwareCoFundedProjectsTimeline" width="100%" height="550" [src]="softwareCoFundedProjectsTimeline"></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" #selectCoFundedFundersGroupBy (change)="getSoftwareCoFundedFundersGroupByMobile(selectCoFundedFundersGroupBy.value)" style="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="softwareCoFundedFundersGroupByView==='country' && softwareCoFundedFundersByCountryChartURLMobile"
+                    width="100%" height="550" [src]="softwareCoFundedFundersByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="softwareCoFundedFundersGroupByView==='datasource' && softwareCoFundedFundersByDatasourceChartURL"
+                    width="100%" height="550" [src]="softwareCoFundedFundersByDatasourceChartURL"></iframe>
+            <iframe *ngIf="softwareCoFundedFundersGroupByView==='organization' && softwareCoFundedFundersByOrganizationChartURL"
+                    width="100%" height="550" [src]="softwareCoFundedFundersByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="softwareCoFundedFundersGroupByView==='funder' && softwareCoFundedFundersByFunderData"
+                                   [chartTitle]="'Open Source software with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="softwareCoFundedFundersByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getSoftwareCoFundedFundersGroupBy('country')">Country</a></li>
+              <li><a (click)="getSoftwareCoFundedFundersGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getSoftwareCoFundedFundersGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getSoftwareCoFundedFundersGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-software-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="softwareCoFundedFundersByCountryChartURL"
+                        width="100%" height="650" [src]="softwareCoFundedFundersByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareCoFundedFundersByDatasourceChartURL"
+                        width="100%" height="650" [src]="softwareCoFundedFundersByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareCoFundedFundersByOrganizationChartURL"
+                        width="100%" height="650" [src]="softwareCoFundedFundersByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareCoFundedFundersByFunderData"
+                                       [chartTitle]="'Open Source software with multiple funders'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="softwareCoFundedFundersByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getSoftwareCoFundedProjectsGroupByMobile(selectCCLicenceGroupBy.value)" style="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="softwareCoFundedProjectsGroupByView==='country' && softwareCoFundedProjectsByCountryChartURLMobile"
+                    width="100%" height="550" [src]="softwareCoFundedProjectsByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="softwareCoFundedProjectsGroupByView==='datasource' && softwareCoFundedProjectsByDatasourceChartURL"
+                    width="100%" height="550" [src]="softwareCoFundedProjectsByDatasourceChartURL"></iframe>
+            <iframe *ngIf="softwareCoFundedProjectsGroupByView==='organization' && softwareCoFundedProjectsByOrganizationChartURL"
+                    width="100%" height="550" [src]="softwareCoFundedProjectsByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="softwareCoFundedProjectsGroupByView==='funder' && softwareCoFundedProjectsByFunderData"
+                                   [chartTitle]="'Open Source software linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="softwareCoFundedProjectsByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getSoftwareCoFundedProjectsGroupBy('country')">Country</a></li>
+              <li><a (click)="getSoftwareCoFundedProjectsGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getSoftwareCoFundedProjectsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getSoftwareCoFundedProjectsGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-software-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="softwareCoFundedProjectsByCountryChartURL"
+                        width="100%" height="650" [src]="softwareCoFundedProjectsByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareCoFundedProjectsByDatasourceChartURL"
+                        width="100%" height="650" [src]="softwareCoFundedProjectsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareCoFundedProjectsByOrganizationChartURL"
+                        width="100%" height="650" [src]="softwareCoFundedProjectsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareCoFundedProjectsByFunderData"
+                                       [chartTitle]="'Open Source software linked to multiple projects'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="softwareCoFundedProjectsByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='more-details'" class="indicatorsTable uk-visible@m uk-margin-large-top">
+
+  <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="display: inline-block">
+      <option value="affiliated">affiliated</option>
+      <option value="deposited">deposited</option>
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid">
+    <div class="absoluteTable uk-width-3-4@l uk-width-3-4@m">
+      <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="loadingSoftwareAbsoluteTable" 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]="'collaboration'" [entity]="'software'"></app-countries-table>
+            </li>
+            <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+              <div *ngIf="loadingSoftwarePercentageTable" 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]="'collaboration'" [entity]="'software'"></app-countries-table>
+            </li>
+          </ul>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/app/pages/continent/collaboration/software/continent-collaboration-software-indicators.component.ts

@@ -0,0 +1,162 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  softwareColor,
+  softwarePalette, softwareIndicatorsPalette, softwareIndicatorsPaletteReversed
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-collaboration-software-indicators',
+  templateUrl: './continent-collaboration-software-indicators.component.html',
+})
+
+export class ContinentCollaborationSoftwareIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private softwareIndicatorsPalette = softwareIndicatorsPalette;
+  private softwareIndicatorsPaletteReversed = softwareIndicatorsPaletteReversed;
+  softwareColor = softwareColor;
+
+  softwareCoFundedFundersTimeline: SafeResourceUrl;
+  softwareCoFundedProjectsTimeline: SafeResourceUrl;
+
+  softwareCoFundedFundersGroupByView = 'country';
+  softwareCoFundedFundersByCountryChartURL: SafeResourceUrl;
+  softwareCoFundedFundersByDatasourceChartURL: SafeResourceUrl;
+  softwareCoFundedFundersByOrganizationChartURL: SafeResourceUrl;
+  softwareCoFundedFundersByCountryChartURLMobile: SafeResourceUrl;
+
+  softwareCoFundedProjectsGroupByView = 'country';
+  softwareCoFundedProjectsByCountryChartURL: SafeResourceUrl;
+  softwareCoFundedProjectsByDatasourceChartURL: SafeResourceUrl;
+  softwareCoFundedProjectsByOrganizationChartURL: SafeResourceUrl;
+  softwareCoFundedProjectsByCountryChartURLMobile: SafeResourceUrl;
+
+  softwareCoFundedFundersByFunderData: TreemapHighchartsData[];
+  softwareCoFundedProjectsByFunderData: TreemapHighchartsData[];
+
+  loadingSoftwareAbsoluteTable: boolean = true;
+  loadingSoftwarePercentageTable: boolean = true;
+  softwareTableContentSelection: string = 'affiliated';
+  softwareAbsoluteTableData: CountryTableData[];
+  softwarePercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.softwareCoFundedFundersTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab_timeline.affiliated","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab_timeline.affiliated","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    this.softwareCoFundedProjectsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab_timeline.affiliated","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab_timeline.affiliated","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+
+    this.softwareCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    this.softwareCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+
+    this.softwareCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    this.softwareCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.dataService.getFundersResultsByTypeForCollaborationIndicatorForCountry('software', 'funders').subscribe(
+      rawData => {
+        this.softwareCoFundedFundersByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCollaborationIndicatorForCountry('software', 'projects').subscribe(
+      rawData => {
+        this.softwareCoFundedProjectsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getSoftwareTableData(this.softwareTableContentSelection);
+  }
+
+  getSoftwareTableData(contentSelection: string) {
+
+    this.loadingSoftwareAbsoluteTable = true;
+    this.loadingSoftwarePercentageTable = true;
+    this.dataService.getCollaborationIndicatorsTableData('software', contentSelection).subscribe(
+      rawData => {
+        this.softwareAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.softwarePercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingSoftwareAbsoluteTable = false;
+        this.loadingSoftwarePercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingSoftwareAbsoluteTable = false;
+        this.loadingSoftwarePercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+    this.softwareTableContentSelection = contentSelection;
+    this.getSoftwareTableData(this.softwareTableContentSelection);
+  }
+
+  getSoftwareCoFundedFundersGroupBy(contentSelection: string): void {
+    this.softwareCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareCoFundedFundersByCountryChartURL) {
+      this.softwareCoFundedFundersByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"{0,1} funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}},{"name":"> 1 funders","type":"column","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareCoFundedFundersByDatasourceChartURL) {
+      this.softwareCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}},{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareCoFundedFundersByOrganizationChartURL) {
+      this.softwareCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}},{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareCoFundedFundersGroupByMobile(contentSelection: string): void {
+    this.softwareCoFundedFundersGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareCoFundedFundersByCountryChartURLMobile) {
+      this.softwareCoFundedFundersByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}},{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareCoFundedFundersByDatasourceChartURL) {
+      this.softwareCoFundedFundersByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}},{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareCoFundedFundersByOrganizationChartURL) {
+      this.softwareCoFundedFundersByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"{0,1} funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}},{"name":"> 1 funders","type":"bar","query":{"name":"new.oso.results.funders_collab.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with multiple funders","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPaletteReversed.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareCoFundedProjectsGroupBy(contentSelection: string): void {
+    this.softwareCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareCoFundedProjectsByCountryChartURL) {
+      this.softwareCoFundedProjectsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"column","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareCoFundedProjectsByDatasourceChartURL) {
+      this.softwareCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareCoFundedProjectsByOrganizationChartURL) {
+      this.softwareCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareCoFundedProjectsGroupByMobile(contentSelection: string): void {
+    this.softwareCoFundedProjectsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareCoFundedProjectsByCountryChartURLMobile) {
+      this.softwareCoFundedProjectsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareCoFundedProjectsByDatasourceChartURL) {
+      this.softwareCoFundedProjectsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareCoFundedProjectsByOrganizationChartURL) {
+      this.softwareCoFundedProjectsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"> 1 projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"{0,1} projects","type":"bar","query":{"name":"new.oso.results.projects_collab.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software linked to multiple projects","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+}

src/app/pages/continent/collaboration/software/continent-collaboration-software-routing.module.ts

@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentCollaborationSoftwareComponent } from './continent-collaboration-software.component';
+import { ContinentCollaborationSoftwareIndicatorsComponent } from './continent-collaboration-software-indicators.component';
+
+
+const continentCollaborationSoftwareRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentCollaborationSoftwareComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentCollaborationSoftwareIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentCollaborationSoftwareRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentCollaborationSoftwareRoutingModule {}

src/app/pages/continent/collaboration/software/continent-collaboration-software.component.html

@@ -0,0 +1,14 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Software</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/continent/collaboration/software/continent-collaboration-software.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-collaboration-software',
+  templateUrl: './continent-collaboration-software.component.html',
+})
+
+export class ContinentCollaborationSoftwareComponent {}

src/app/pages/continent/collaboration/software/continent-collaboration-software.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { ContinentCollaborationSoftwareRoutingModule } from './continent-collaboration-software-routing.module';
+import { ContinentCollaborationSoftwareComponent } from './continent-collaboration-software.component';
+import { ContinentCollaborationSoftwareIndicatorsComponent } from './continent-collaboration-software-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentCollaborationSoftwareRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentCollaborationSoftwareComponent,
+    ContinentCollaborationSoftwareIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentCollaborationSoftwareModule {}

src/app/pages/continent/continent-routing.module.ts

@@ -0,0 +1,37 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentComponent } from './continent.component';
+import { ContinentOverviewComponent } from './overview/continent-overview.compopnent';
+
+const continentRoutes: Routes = [
+  {
+    path: ':continentName',
+    component: ContinentComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'overview',
+        // pathMatch: 'full'
+      },
+      {
+        path: 'overview',
+        component: ContinentOverviewComponent
+      },
+      {
+        path: 'open-science',
+        loadChildren: () => import('./open-science/continent-open-science.module').then(m => m.ContinentOpenScienceModule),
+      },
+      {
+        path: 'collaboration',
+        loadChildren: () => import('./collaboration/continent-collaboration.module').then(m => m.ContinentCollaborationModule),
+      }
+    ]
+  }
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentRoutingModule {}

src/app/pages/continent/continent.component.html

@@ -0,0 +1,518 @@
+<div class="greySection">
+
+  <section class="uk-padding-small" id="sect-continent-page">
+    <div class="uk-container uk-container-expand uk-margin-medium-top">
+
+      <!--LAPTOP & PAD LANDSCAPE-->
+      <div class="uk-visible@m">
+        <ul class="uk-breadcrumb">
+          <li><a routerLink="/home">Home</a></li>
+          <li><span>{{continentName | titlecase}}</span></li>
+        </ul>
+
+        <div *ngIf="continentName" class="">
+          <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">
+          <div class="uk-inline uk-margin-left">
+            <h1>{{continentName | titlecase}}</h1>
+            <span class="lastUpdateInfo">Data Last Updated: </span>
+            <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
+          </div>
+        </div>
+      </div>
+
+      <!--MOBILE & PAD PORTRAIT-->
+      <div class="uk-hidden@m uk-text-center">
+        <div *ngIf="continentName" class="">
+          <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">
+          <div class="uk-margin-top">
+            <h1 class="uk-margin-small-bottom">{{continentName | titlecase}}</h1>
+            <span class="lastUpdateInfo">Data Last Updated: </span>
+            <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+
+
+  <section class="uk-padding-small">
+    <!--<div class="uk-container uk-container-center uk-margin-medium-top" [ngClass]="{'uk-container-expand': mapViewActive}">-->
+    <div class="uk-container uk-container-center uk-margin-medium-top">
+
+      <!--LAPTOP & PAD LANDSCAPE-->
+      <div class="uk-visible@m">
+        <div class="uk-flex uk-flex-right uk-margin-bottom">
+
+          <mat-slide-toggle (change)="toggleView($event)">Map</mat-slide-toggle>
+
+        </div>
+      </div>
+
+      <div *ngIf="!mapViewActive" class="uk-visible@m">
+        <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
+        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
+
+          <!--PUBLICATIONS-->
+          <ng-container *ngIf="europeOverviewData.publications?.percentage">
+            <div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>
+                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.publications.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 45 /100 + 'px'}">
+              {{europeOverviewData.publications.percentage | number :'1.0-1'}}%
+            </span>
+                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.publications.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">OA Publications</span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
+            <div class="publicationsColumn uk-padding" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+          <!--DATASETS-->
+          <ng-container *ngIf="europeOverviewData.datasets?.percentage">
+            <div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>
+                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.datasets.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 45 /100 + 'px'}">
+              {{europeOverviewData.datasets.percentage | number :'1.0-1'}}%
+            </span>
+                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.datasets.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">OA Datasets</span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
+            <div class="datasetsColumn" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+          <!--SOFTWARE-->
+          <ng-container *ngIf="europeOverviewData.software?.percentage">
+            <div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>
+                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.software.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 45 /100 + 'px'}">
+              {{europeOverviewData.software.percentage | number :'1.0-1'}}%
+            </span>
+                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.software.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">OS Software</span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
+            <div class="softwareColumn" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+          <!--OTHER-->
+          <ng-container *ngIf="europeOverviewData.other?.percentage">
+            <div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>
+                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.other.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 45 /100 + 'px'}">
+              {{europeOverviewData.other.percentage | number :'1.0-1'}}%
+            </span>
+                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.other.percentage)"
+                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">OA Other</span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
+            <div class="otherColumn" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+        </div>
+
+        <hr class="entitiesDivider">
+
+        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 uk-margin-large-top">
+
+          <div class="entityLegendContent">
+            <div class="publicationsDot uk-inline"></div>
+            <div class="uk-inline uk-margin-left">
+              <span>
+                <ng-container *ngIf="europeOverviewData.publications?.oa">OA: <span class="number">{{europeOverviewData.publications?.oa | number}}</span></ng-container><br>
+                <ng-container *ngIf="europeOverviewData.publications?.total">Total: <span class="number">{{europeOverviewData.publications?.total | number}}</span></ng-container>
+              </span>
+            </div>
+          </div>
+          <div class="entityLegendContent">
+            <div class="datasetsDot"></div>
+            <div class="uk-inline uk-margin-left">
+              <span>
+                <ng-container *ngIf="europeOverviewData.datasets?.oa">OA: <span class="number">{{europeOverviewData.datasets?.oa | number}}</span></ng-container><br>
+                <ng-container *ngIf="europeOverviewData.datasets?.total">Total: <span class="number">{{europeOverviewData.datasets?.total | number}}</span></ng-container>
+              </span>
+            </div>
+          </div>
+          <div class="entityLegendContent">
+            <div class="softwareDot"></div>
+            <div class="uk-inline uk-margin-left">
+              <span>
+                <ng-container *ngIf="europeOverviewData.software?.oa">OA: <span class="number">{{europeOverviewData.software?.oa | number}}</span></ng-container><br>
+                <ng-container *ngIf="europeOverviewData.software?.total">Total: <span class="number">{{europeOverviewData.software?.total | number}}</span></ng-container>
+              </span>
+            </div>
+          </div>
+          <div class="entityLegendContent">
+            <div class="otherDot"></div>
+            <div class="uk-inline uk-margin-left">
+              <span>
+                <ng-container *ngIf="europeOverviewData.other?.oa">OA: <span class="number">{{europeOverviewData.other?.oa | number}}</span></ng-container><br>
+                <ng-container *ngIf="europeOverviewData.other?.total">Total: <span class="number">{{europeOverviewData.other?.total | number}}</span></ng-container>
+              </span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Europe Map -->
+      <div *ngIf="mapViewActive" class="uk-visible@m">
+        <div class="uk-grid uk-grid-small">
+
+          <div class="uk-width-3-4@m">
+
+            <!--Map Container-->
+            <app-europe-map-overview (emitSelectedCountry)="countrySelected($event)"></app-europe-map-overview>
+            <!--<app-map-overview *ngIf="overviewData?.countries" (emitSelectedCountry)="selectedCountry($event)"></app-map-overview>-->
+
+          </div>
+
+          <div class="uk-width-1-4@m">
+            <div class="md-card infoBox">
+              <ng-container *ngIf="!selectedCountry">
+                <div class="md-card-toolbar">
+                  <h3 class="uk-text-center">EUROPE</h3>
+                </div>
+                <div class="md-card-content">
+
+                  <div *ngIf="europeOverviewMapData" class="numbers">
+                    <div class="uk-margin-small-top">
+
+                      <div class="indicator">
+                        <span class="number publications" *ngIf="europeOverviewMapData.publications?.oa!=null">{{europeOverviewMapData.publications?.oa | number}}</span>
+                        <span class="number publications" *ngIf="europeOverviewMapData.publications?.oa===null">--</span>
+                        <span><i>Open Access publications</i></span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number datasets" *ngIf="europeOverviewMapData.datasets?.oa!=null">{{europeOverviewMapData.datasets?.oa | number}}</span>
+                        <span class="number datasets" *ngIf="europeOverviewMapData.datasets?.oa===null">--</span>
+                        <span><i>Open Access datasets</i></span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number repositories" *ngIf="europeOverviewMapData.repositories?.total!=null">{{europeOverviewMapData.repositories?.total | number}}</span>
+                        <span class="number repositories" *ngIf="europeOverviewMapData.repositories?.total===null">--</span>
+                        <span><i>repositories</i> in OpenDOAR and Re3data</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number journals" *ngIf="europeOverviewMapData.journals?.total!=null">{{europeOverviewMapData.journals?.total | number}}</span>
+                        <span class="number journals" *ngIf="europeOverviewMapData.journals?.total===null">--</span>
+                        <span><i>Open Access journals</i> in DOAJ</span>
+                      </div>
+
+                    </div>
+
+                  </div>
+
+                </div>
+                <div></div>
+              </ng-container>
+
+              <ng-container *ngIf="selectedCountry">
+                <div class="md-card-toolbar">
+                  <h3 class="uk-text-center uk-margin-small-top">
+                    <a class="backToOriginalInfoBox uk-float-left" (click)="deselectCountry()"><i class="fas fa-angle-left"></i></a>
+                    <img src="../../../assets/img/flags/{{selectedCountry.code | lowercase}}-flag-round.png" class="small-flag-image uk-margin-small-right" width="24" style="margin-top: -3px">
+                    <span>{{selectedCountry.name | uppercase}}</span>
+                  </h3>
+                </div>
+                <div *ngIf="!selectedCountryData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
+                <!--<div *ngIf="!selectedCountryData" class="loading-big">-->
+                <!--<div uk-spinner="ratio: 2" class="uk-overlay uk-position-center uk-dark" style="margin: auto"></div>-->
+                <!--&lt;!&ndash;<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">&ndash;&gt;-->
+                <!--&lt;!&ndash;{{ loadingMessage }}&ndash;&gt;-->
+                <!--&lt;!&ndash;</div>&ndash;&gt;-->
+                <!--<div class="transparentFilm"></div>-->
+                <!--</div>-->
+                <div *ngIf="selectedCountryData" class="md-card-content">
+                  <div class="numbers">
+                    <div class="uk-margin-small-top">
+
+                      <div class="indicator">
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated!=null">{{selectedCountryData.publicationsAffiliated | number}}</span>
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsAffiliated===null">--</span>
+                        <span><i>OA publications</i> affiliated to an organization in the country</span>
+                      </div>
+
+                      <div class="indicator uk-margin-small-top">
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited!=null">{{selectedCountryData.publicationsDeposited | number}}</span>
+                        <span class="number publications" *ngIf="selectedCountryData.publicationsDeposited===null">--</span>
+                        <span><i>OA publications</i> in the country's institutional repositories</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated!=null">{{selectedCountryData.datasetsAffiliated | number}}</span>
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsAffiliated===null">--</span>
+                        <span><i>OA datasets</i> affiliated to an organization in the country</span>
+                      </div>
+
+                      <div class="indicator uk-margin-small-top">
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited!=null">{{selectedCountryData.datasetsDeposited | number}}</span>
+                        <span class="number datasets" *ngIf="selectedCountryData.datasetsDeposited===null">--</span>
+                        <span><i>OA datasets</i> in the country's repositories</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number repositories" *ngIf="selectedCountryData.repositories!=null">{{selectedCountryData.repositories | number}}</span>
+                        <span class="number repositories" *ngIf="selectedCountryData.repositories===null">--</span>
+                        <span><i>repositories</i> in openDOAR & re3data</span>
+                      </div>
+
+                      <hr class="greyBoldDivider uk-margin-top uk-margin-bottom">
+
+                      <div class="indicator">
+                        <span class="number journals" *ngIf="selectedCountryData.journals!=null">{{selectedCountryData.journals | number}}</span>
+                        <span class="number journals" *ngIf="selectedCountryData.journals===null">--</span>
+                        <span><i>journals</i> in DOAJ</span>
+                      </div>
+
+                      <!--<hr class="greyBoldDivider uk-margin-top uk-margin-bottom">-->
+
+                      <!--<div class="indicator">-->
+                      <!--<span class="number policies" *ngIf="selectedCountryData.policies!=null">{{selectedCountryData.policies | number}}</span>-->
+                      <!--<span class="number policies" *ngIf="selectedCountryData.policies===null">&#45;&#45;</span>-->
+                      <!--<span>organisations with <i>OA policies</i></span>-->
+                      <!--</div>-->
+
+                    </div>
+
+                  </div>
+
+                  <div class="uk-text-center uk-margin-medium-top">
+                    <!--<button [routerLink]="['/country/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>-->
+                    <button [routerLink]="['/country' , selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
+                  </div>
+
+                </div>
+                <div></div>
+              </ng-container>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+
+      <!--MOBILE & PAD PORTRAIT-->
+      <div class="uk-hidden@m uk-text-center">
+        <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>
+
+        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">
+
+          <!--PUBLICATIONS-->
+          <ng-container *ngIf="europeOverviewData.publications?.percentage">
+            <div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">
+            <div class="publicationsColumn uk-padding" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+          <!--DATASETS-->
+          <ng-container *ngIf="europeOverviewData.datasets?.percentage">
+            <div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">
+            <div class="datasetsColumn" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+          <!--SOFTWARE-->
+          <ng-container *ngIf="europeOverviewData.software?.percentage">
+            <div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">
+            <div class="softwareColumn" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+          <!--OTHER-->
+          <ng-container *ngIf="europeOverviewData.other?.percentage">
+            <div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">
+              <div class="entityColumnContent">
+                <span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>
+              </div>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">
+            <div class="otherColumn" style="height: 0%">
+
+            </div>
+          </ng-container>
+
+        </div>
+        <hr class="entitiesDivider">
+
+        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-1 continentPageEntitiesOverview">
+
+          <!--PUBLICATIONS-->
+          <div *ngIf="europeOverviewData.publications?.percentage" style="z-index: 4;">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-flex uk-flex-space-between">
+                  <div class="">
+                    <img src="../../../assets/img/icons/publications-icon.svg" width="21">
+                    <span class="publications entityName uk-margin-left">Publications</span>
+                  </div>
+                  <div class="number big">
+                    {{europeOverviewData.publications.percentage | number : '1.0-1'}}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <!--DATASETS-->
+          <div *ngIf="europeOverviewData.datasets?.percentage" style="z-index: 3;">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-flex uk-flex-space-between">
+                  <div class="">
+                    <img src="../../../assets/img/icons/datasets-icon.svg" width="17">
+                    <span class="datasets entityName uk-margin-left">Datasets</span>
+                  </div>
+                  <div class="number big">
+                    {{europeOverviewData.datasets.percentage | number : '1.0-1'}}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <!--SOFTWARE-->
+          <div *ngIf="europeOverviewData.software?.percentage" style="z-index: 2;">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-flex uk-flex-space-between">
+                  <div class="">
+                    <img src="../../../assets/img/icons/software-icon.svg" width="19">
+                    <span class="software entityName uk-margin-left">Software</span>
+                  </div>
+                  <div class="number big">
+                    {{europeOverviewData.software.percentage | number : '1.0-1'}}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <!--OTHER-->
+          <div *ngIf="europeOverviewData.other?.percentage" style="z-index: 1;">
+            <div class="md-card">
+              <div class="md-card-content">
+                <div class="uk-flex uk-flex-space-between">
+                  <div class="">
+                    <img src="../../../assets/img/icons/other-icon.svg" width="20">
+                    <span class="other entityName uk-margin-left">Other</span>
+                  </div>
+                  <div class="number big">
+                    {{europeOverviewData.other.percentage | number : '1.0-1'}}%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+
+
+    </div>
+  </section>
+
+  <!--TABS SECTION-->
+  <section class="section uk-margin-large-top" id="sect-tabs">
+    <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">
+
+      <div class="">
+
+        <!--LAPTOP & PAD LANDSCAPE-->
+        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
+          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
+          <!--<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['/continent/' + continentName + '/overview']">Overview</a></li>-->
+          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
+          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>
+          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
+          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
+          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
+        </ul>
+
+        <!--MOBILE & PAD PORTRAIT-->
+        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">
+          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>
+          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>
+          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./collaboration']">Collaboration</a></li>
+          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>
+          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>
+          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->
+        </ul>
+
+        <div class="dataContainer">
+          <router-outlet></router-outlet>
+        </div>
+
+      </div>
+
+    </div>
+  </section>
+</div>
+
+
+
+

src/app/pages/continent/continent.component.ts

@@ -0,0 +1,159 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
+import { DataService } from '../../services/data.service';
+import { DataHandlerService } from '../../services/data-handler.service';
+import { CountryOverviewData, EuropeData, SelectedCountry } from '../../domain/overview-map-data';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+
+@Component({
+  selector: 'app-continent',
+  templateUrl: './continent.component.html',
+})
+
+export class ContinentComponent implements OnInit {
+
+  lastUpdateDate: string;
+
+  continentName: string;
+
+  europeOverviewData: EuropeData;
+  europeOverviewMapData: EuropeData;
+
+  mapViewActive = false;
+  selectedCountry: SelectedCountry = null;
+  selectedCountryData: CountryOverviewData = null;
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    // window.scroll(0, 0);
+
+    // this.continentName = this.route.snapshot.paramMap.get('continentName');
+    this.continentName = 'europe';
+
+    console.log('continentName: ', this.continentName);
+
+    this.dataService.getLastUpdateDate().subscribe(
+      rawData => {
+        this.lastUpdateDate = this.dataHandlerService.convertRawDataToLastUpdateDate(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getEuropeOAPercentages().subscribe(
+      rawData => {
+        this.europeOverviewData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getEuropeOverviewData().subscribe(
+      rawData => {
+        this.europeOverviewMapData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    // this.createOverviewContent();
+  }
+
+  getHeight(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage) * 1.5;
+    } else {
+      return Math.round(percentage);
+    }
+  }
+
+  getNumberFontSize(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage * 45 / 100) * 1.5;
+    } else {
+      return Math.round(percentage * 45 / 100);
+    }
+  }
+
+  getEntityNameFontSize(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage * 30 / 100) * 1.5;
+    } else {
+      return Math.round(percentage * 30 / 100);
+    }
+  }
+
+  getPublicationsIconWidth(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage * 60 / 100) * 1.5;
+    } else {
+      return Math.round(percentage * 60 / 100);
+    }
+  }
+
+  getDatasetsIconWidth(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage * 45 / 100) * 1.5;
+    } else {
+      return Math.round(percentage * 45 / 100);
+    }
+  }
+
+  getSoftwareIconWidth(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage * 50 / 100) * 1.5;
+    } else {
+      return Math.round(percentage * 50 / 100);
+    }
+  }
+
+  getOtherIconWidth(percentage: number) {
+    if (percentage < 50) {
+      return Math.round(percentage * 45 / 100) * 1.5;
+    } else {
+      return Math.round(percentage * 45 / 100);
+    }
+  }
+
+  /** Europe Map  --> **/
+  // toggleView(show: string) {
+  //   if (show === 'map') {
+  //     this.mapViewActive = true;
+  //   } else if (show === 'columns') {
+  //     this.mapViewActive = false;
+  //   }
+  // }
+
+  toggleView(ob: MatSlideToggleChange) {
+    if (ob.checked) {
+      this.mapViewActive = true;
+    } else {
+      this.mapViewActive = false;
+    }
+  }
+
+  countrySelected(selectedCountry: SelectedCountry) {
+    this.selectedCountry = selectedCountry;
+    this.selectedCountryData = null;
+    this.dataService.getCountryOverviewData(this.selectedCountry.code).subscribe(
+      rawData => {
+        this.selectedCountryData = this.dataHandlerService.convertRawDataToCountryOverviewData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+  }
+
+  deselectCountry() {
+    this.selectedCountry = null;
+    this.selectedCountryData = null;
+  }
+  /** <-- Europe Map **/
+
+}

src/app/pages/continent/continent.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';
+import { ContinentRoutingModule } from './continent-routing.module';
+import { ContinentComponent } from './continent.component';
+import { ContinentOverviewComponent } from './overview/continent-overview.compopnent';
+import { DataHandlerService } from '../../services/data-handler.service';
+import { DataService } from '../../services/data.service';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentRoutingModule,
+    ReusableComponentsModule,
+    MatSlideToggleModule
+  ],
+  declarations: [
+    ContinentComponent,
+    ContinentOverviewComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentModule {}

src/app/pages/continent/open-science/continent-open-science-routing.module.ts

@@ -0,0 +1,40 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentOpenScienceComponent } from './continent-open-science.component';
+
+const continentOpenScienceRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentOpenScienceComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'publications',
+        pathMatch: 'full',
+      },
+      {
+        path: 'publications',
+        loadChildren: () => import('./publications/continent-os-publications.module').then(m => m.ContinentOpenSciencePublicationsModule),
+      },
+      {
+        path: 'datasets',
+        loadChildren: () => import('./datasets/continent-os-datasets.module').then(m => m.ContinentOpenScienceDatasetsModule),
+      },
+      {
+        path: 'software',
+        loadChildren: () => import('./software/continent-os-software.module').then(m => m.ContinentOpenScienceSoftwareModule),
+      },
+      {
+        path: 'other-research-products',
+        loadChildren: () => import('./other-research-products/continent-os-orp.module').then(m => m.ContinentOpenScienceORPModule),
+      },
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentOpenScienceRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentOpenScienceRoutingModule {}

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

@@ -0,0 +1,31 @@
+<div class="uk-margin tabContent">
+
+
+  <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
+    <li aria-expanded="true" [routerLinkActive]="['uk-active']">
+      <a class="publicationsSubnav" [routerLink]="['./publications']" uk-tooltip="title: Publications; duration: 2000">
+        <img src="../../../../assets/img/icons/publications-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="datasetsSubnav" [routerLink]="['./datasets']" uk-tooltip="title: Datasets; duration: 2000">
+        <img src="../../../../assets/img/icons/datasets-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="softwareSubnav" [routerLink]="['./software']" uk-tooltip="title: Software; duration: 2000">
+        <img src="../../../../assets/img/icons/software-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="otherSubnav" [routerLink]="['./other-research-products']" uk-tooltip="title: Other research products; duration: 2000">
+        <img src="../../../../assets/img/icons/other-icon.svg" width="15">
+      </a>
+    </li>
+  </ul>
+
+  <hr class="uk-visible@m">
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/continent/open-science/continent-open-science.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-open-science',
+  templateUrl: './continent-open-science.component.html',
+})
+
+export class ContinentOpenScienceComponent {}
+

src/app/pages/continent/open-science/continent-open-science.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContinentOpenScienceRoutingModule } from './continent-open-science-routing.module';
+import { ReusableComponentsModule } from '../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../services/data.service';
+import { DataHandlerService } from '../../../services/data-handler.service';
+import { ContinentOpenScienceComponent } from './continent-open-science.component';
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentOpenScienceRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentOpenScienceComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentOpenScienceModule {}

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

@@ -0,0 +1,279 @@
+<div *ngIf="indicator && indicator=='licence'" class="licenceIndicator">
+  <div class="uk-grid uk-grid-match 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">
+          <iframe *ngIf="datasetsWithCCLicenceTimeline" width="100%" height="550" [src]="datasetsWithCCLicenceTimeline"></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="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' && datasetsWithLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="datasetsWithLicenceGroupByView==='organization' && datasetsWithLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="datasetsWithLicenceGroupByView==='funder' && datasetsWithLicenceByFunderData"
+                                   [chartTitle]="'OA Datasets with licence by funder (top funders)'"
+                                   [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-licence', 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-datasets-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="datasetsWithLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="datasetsWithLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL"
+                        width="100%" height="650" [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 (top funders)'"
+                                       [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getDatasetsWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="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="datasetsWithCCLicenceGroupByView==='country' && datasetsWithCCLicenceByCountryChartURLMobile"
+                    width="100%" height="550" [src]="datasetsWithCCLicenceByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="datasetsWithCCLicenceGroupByView==='datasource' && datasetsWithCCLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="datasetsWithCCLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="datasetsWithCCLicenceGroupByView==='organization' && datasetsWithCCLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="datasetsWithCCLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="datasetsWithCCLicenceGroupByView==='funder' && datasetsWithCCLicenceByFunderData"
+                                   [chartTitle]="'Open Access datasets with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="datasetsWithCCLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getDatasetsWithCCLicenceGroupBy('country')">Country</a></li>
+              <li><a (click)="getDatasetsWithCCLicenceGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getDatasetsWithCCLicenceGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getDatasetsWithCCLicenceGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-datasets-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="datasetsWithCCLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="datasetsWithCCLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsWithCCLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="datasetsWithCCLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsWithCCLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="datasetsWithCCLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="datasetsWithCCLicenceByFunderData"
+                                       [chartTitle]="'Open Access datasets with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="datasetsWithCCLicenceByFunderData" [color]="datasetColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <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="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' && datasetsWithPIDByDatasourceChartURL"
+                    width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
+            <iframe *ngIf="datasetsWithPIDGroupByView==='organization' && datasetsWithPIDByOrganizationChartURL"
+                    width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="datasetsWithPIDGroupByView==='funder' && datasetsWithPIDByFunderData"
+                                   [chartTitle]="'OA Datasets with PID by funder (top funders)'"
+                                   [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-pid', 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-datasets-pid" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="datasetsWithPIDByCountryChartURL"
+                        width="100%" height="650" [src]="datasetsWithPIDByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsWithPIDByDatasourceChartURL"
+                        width="100%" height="650" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsWithPIDByOrganizationChartURL"
+                        width="100%" height="650" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData"
+                                       [chartTitle]="'Open Access datasets with PID'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<div *ngIf="indicator && indicator=='more-details'" 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="display: inline-block">
+      <option value="affiliated">affiliated</option>
+      <!--<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>-->
+      <option value="deposited">deposited</option>
+      <!--<option value="deposited_peer_reviewed">deposited peer reviewed</option>-->
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
+    <div class="absoluteTable">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#data-indicators-content-a-fade', animation: 'fade'}">
+            <li aria-expanded="true" class="uk-active">
+              <a href="#">
+                <i class="fas fa-hashtag"></i>
+              </a>
+            </li>
+            <li aria-expanded="false" class="">
+              <a href="#">
+                <i class="fas fa-percentage"></i>
+              </a>
+            </li>
+          </ul>
+
+          <ul id="data-indicators-content-a-fade" class="uk-switcher uk-margin" >
+            <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+              <div *ngIf="loadingDatasetsAbsoluteTable" 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="loadingDatasetsPercentageTable" 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>

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

@@ -0,0 +1,207 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  datasetColor,
+  datasetPalette,
+  datasetIndicatorsPalette,
+  gradientStartColor,
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-os-datasets-indicators',
+  templateUrl: './continent-os-datasets-indicators.component.html',
+})
+
+export class ContinentOSDatasetsIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private datasetPalette = datasetPalette;
+  private datasetIndicatorsPalette = datasetIndicatorsPalette;
+
+  datasetColor = datasetColor;
+  gradientStartColor = gradientStartColor;
+
+
+  datasetsWithPIDTimeline: SafeResourceUrl;
+  datasetsWithLicenceTimeline: SafeResourceUrl;
+  datasetsWithCCLicenceTimeline: SafeResourceUrl;
+
+  datasetsWithPIDGroupByView = 'country';
+  datasetsWithPIDByCountryChartURL: SafeResourceUrl;
+  datasetsWithPIDByDatasourceChartURL: SafeResourceUrl;
+  datasetsWithPIDByOrganizationChartURL: SafeResourceUrl;
+  datasetsWithPIDByCountryChartURLMobile: SafeResourceUrl;
+
+  datasetsWithLicenceGroupByView = 'country';
+  datasetsWithLicenceByCountryChartURL: SafeResourceUrl;
+  datasetsWithLicenceByDatasourceChartURL: SafeResourceUrl;
+  datasetsWithLicenceByOrganizationChartURL: SafeResourceUrl;
+  datasetsWithLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  datasetsWithCCLicenceGroupByView = 'country';
+  datasetsWithCCLicenceByCountryChartURL: SafeResourceUrl;
+  datasetsWithCCLicenceByDatasourceChartURL: SafeResourceUrl;
+  datasetsWithCCLicenceByOrganizationChartURL: SafeResourceUrl;
+  datasetsWithCCLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  datasetsWithPIDByFunderData: TreemapHighchartsData[];
+  datasetsWithLicenceByFunderData: TreemapHighchartsData[];
+  datasetsWithCCLicenceByFunderData: TreemapHighchartsData[];
+
+  loadingDatasetsAbsoluteTable: boolean = true;
+  loadingDatasetsPercentageTable: boolean = true;
+  datasetsTableContentSelection: string = 'affiliated';
+  datasetsAbsoluteTableData: CountryTableData[];
+  datasetsPercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.datasetsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid_timeline.affiliated","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid_timeline.affiliated","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence_timeline.affiliated","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence_timeline.affiliated","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsWithCCLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence_timeline.affiliated","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence_timeline.affiliated","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+    this.datasetsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+    this.datasetsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+    this.datasetsWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    this.datasetsWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+
+    this.dataService.getFundersResultsByTypeForPID('dataset').subscribe(
+      rawData => {
+        this.datasetsWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForLicence('dataset').subscribe(
+      rawData => {
+        this.datasetsWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCCLicence('dataset').subscribe(
+      rawData => {
+        this.datasetsWithCCLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getDatasetsTableData(this.datasetsTableContentSelection);
+  }
+
+  getDatasetsTableData(contentSelection: string) {
+    this.loadingDatasetsAbsoluteTable = true;
+    this.loadingDatasetsPercentageTable = true;
+    this.dataService.getOpenScienceIndicatorsTableData('dataset', contentSelection).subscribe(
+      rawData => {
+        this.datasetsAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.datasetsPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingDatasetsAbsoluteTable = false;
+        this.loadingDatasetsPercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingDatasetsAbsoluteTable = false;
+        this.loadingDatasetsPercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+
+    this.datasetsTableContentSelection = contentSelection;
+    this.getDatasetsTableData(this.datasetsTableContentSelection);
+  }
+
+  getDatasetsWithPIDGroupBy(contentSelection: string): void {
+    this.datasetsWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsWithPIDByCountryChartURL) {
+      this.datasetsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsWithPIDByDatasourceChartURL) {
+      this.datasetsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsWithPIDByOrganizationChartURL) {
+      this.datasetsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsWithPIDGroupByMobile(contentSelection: string): void {
+    this.datasetsWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsWithPIDByCountryChartURLMobile) {
+      this.datasetsWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsWithPIDByDatasourceChartURL) {
+      this.datasetsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsWithPIDByOrganizationChartURL) {
+      this.datasetsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsWithLicenceGroupBy(contentSelection: string): void {
+    this.datasetsWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsWithLicenceByCountryChartURL) {
+      this.datasetsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsWithLicenceByDatasourceChartURL) {
+      this.datasetsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsWithLicenceByOrganizationChartURL) {
+      this.datasetsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsWithLicenceGroupByMobile(contentSelection: string): void {
+    this.datasetsWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsWithLicenceByCountryChartURLMobile) {
+      this.datasetsWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsWithLicenceByDatasourceChartURL) {
+      this.datasetsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsWithLicenceByOrganizationChartURL) {
+      this.datasetsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsWithCCLicenceGroupBy(contentSelection: string): void {
+    this.datasetsWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsWithCCLicenceByCountryChartURL) {
+      this.datasetsWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsWithCCLicenceByDatasourceChartURL) {
+      this.datasetsWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsWithCCLicenceByOrganizationChartURL) {
+      this.datasetsWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsWithCCLicenceGroupByMobile(contentSelection: string): void {
+    this.datasetsWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsWithCCLicenceByCountryChartURLMobile) {
+      this.datasetsWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsWithCCLicenceByDatasourceChartURL) {
+      this.datasetsWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsWithCCLicenceByOrganizationChartURL) {
+      this.datasetsWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[1,"dataset"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[0,"dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+}

src/app/pages/continent/open-science/datasets/continent-os-datasets-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentOSDatasetsComponent } from './continent-os-datasets.component';
+import { ContinentOSDatasetsIndicatorsComponent } from './continent-os-datasets-indicators.component';
+
+const continentOpenScienceDatasetsRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentOSDatasetsComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'licence',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentOSDatasetsIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentOpenScienceDatasetsRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentOpenScienceDatasetsRoutingModule {}

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

@@ -0,0 +1,15 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Datasets</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./pid']">PID</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-os-datasets',
+  templateUrl: './continent-os-datasets.component.html',
+})
+
+export class ContinentOSDatasetsComponent {}

src/app/pages/continent/open-science/datasets/continent-os-datasets.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContinentOpenScienceDatasetsRoutingModule } from './continent-os-datasets-routing.module';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { ContinentOSDatasetsComponent } from './continent-os-datasets.component';
+import { ContinentOSDatasetsIndicatorsComponent } from './continent-os-datasets-indicators.component';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentOpenScienceDatasetsRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentOSDatasetsComponent,
+    ContinentOSDatasetsIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentOpenScienceDatasetsModule {}

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

@@ -0,0 +1,280 @@
+<div *ngIf="indicator && indicator=='licence'" class="licenceIndicator">
+  <div class="uk-grid uk-grid-match 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">
+          <iframe *ngIf="otherWithCCLicenceTimeline" width="100%" height="550" [src]="otherWithCCLicenceTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <!--MOBILE & PAD PORTRAIT-->
+          <div class="uk-hidden@m">
+            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+              <label class="uk-margin-right">Show by: </label>
+              <select class="md-input" #selectLicenceGroupBy (change)="getOtherWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="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' && otherWithLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="otherWithLicenceGroupByView==='organization' && otherWithLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="otherWithLicenceGroupByView==='funder' && otherWithLicenceByFunderData"
+                                   [chartTitle]="'Open Access ORPs with licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="otherWithLicenceByFunderData" [color]="otherColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-other-licence', 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-other-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="otherWithLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="otherWithLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherWithLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherWithLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherWithLicenceByFunderData"
+                                       [chartTitle]="'Open Access ORPs with licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="otherWithLicenceByFunderData" [color]="otherColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getOtherWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="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="otherWithCCLicenceGroupByView==='country' && otherWithCCLicenceByCountryChartURLMobile"
+                    width="100%" height="550" [src]="otherWithCCLicenceByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="otherWithCCLicenceGroupByView==='datasource' && otherWithCCLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="otherWithCCLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="otherWithCCLicenceGroupByView==='organization' && otherWithCCLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="otherWithCCLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="otherWithCCLicenceGroupByView==='funder' && otherWithCCLicenceByFunderData"
+                                   [chartTitle]="'Open Access ORPs with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="otherWithCCLicenceByFunderData" [color]="otherColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-other-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getOtherWithCCLicenceGroupBy('country')">Country</a></li>
+              <li><a (click)="getOtherWithCCLicenceGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getOtherWithCCLicenceGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getOtherWithCCLicenceGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-other-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="otherWithCCLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="otherWithCCLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherWithCCLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="otherWithCCLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherWithCCLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="otherWithCCLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherWithCCLicenceByFunderData"
+                                       [chartTitle]="'Open Access ORPs with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="otherWithCCLicenceByFunderData" [color]="otherColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <!--MOBILE & PAD PORTRAIT-->
+          <div class="uk-hidden@m">
+            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+              <label class="uk-margin-right">Show by: </label>
+              <select class="md-input" #selectPIDGroupBy (change)="getOtherWithPIDGroupByMobile(selectPIDGroupBy.value)" style="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' && otherWithPIDByDatasourceChartURL"
+                    width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
+            <iframe *ngIf="otherWithPIDGroupByView==='organization' && otherWithPIDByOrganizationChartURL"
+                    width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="otherWithPIDGroupByView==='funder' && otherWithPIDByFunderData"
+                                   [chartTitle]="'Open Access ORPs with PID'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="otherWithPIDByFunderData" [color]="otherColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-other-pid', 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-other-pid" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="otherWithPIDByCountryChartURL"
+                        width="100%" height="650" [src]="otherWithPIDByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherWithPIDByDatasourceChartURL"
+                        width="100%" height="650" [src]="otherWithPIDByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherWithPIDByOrganizationChartURL"
+                        width="100%" height="650" [src]="otherWithPIDByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherWithPIDByFunderData"
+                                       [chartTitle]="'Open Access ORPs with PID'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="otherWithPIDByFunderData" [color]="otherColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+
+<div *ngIf="indicator && indicator=='more-details'" 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="display: inline-block">
+      <option value="affiliated">affiliated</option>
+      <!--<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>-->
+      <option value="deposited">deposited</option>
+      <!--<option value="deposited_peer_reviewed">deposited peer reviewed</option>-->
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
+    <div class="absoluteTable">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#other-indicators-content-a-fade', animation: 'fade'}">
+            <li aria-expanded="true" class="uk-active">
+              <a href="#">
+                <i class="fas fa-hashtag"></i>
+              </a>
+            </li>
+            <li aria-expanded="false" class="">
+              <a href="#">
+                <i class="fas fa-percentage"></i>
+              </a>
+            </li>
+          </ul>
+
+          <ul id="other-indicators-content-a-fade" class="uk-switcher uk-margin" >
+            <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+              <div *ngIf="loadingOtherAbsoluteTable" 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="loadingOtherPercentageTable" 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>

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

@@ -0,0 +1,206 @@
+import {Component, OnInit} from '@angular/core';
+import {environment} from '../../../../../environments/environment';
+import {
+  gradientStartColor,
+  otherResearchProductsColor, otherResearchProductsPalette, otherIndicatorsPalette
+} from '../../../../chart-palettes';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+
+@Component({
+  selector: 'app-continent-os-orp-indicators',
+  templateUrl: './continent-os-orp-indicators.component.html',
+})
+
+export class ContinentOSORPIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private otherResearchProductsPalette = otherResearchProductsPalette;
+  private otherIndicatorsPalette = otherIndicatorsPalette;
+
+  otherColor = otherResearchProductsColor;
+  gradientStartColor = gradientStartColor;
+
+  otherWithPIDTimeline: SafeResourceUrl;
+  otherWithLicenceTimeline: SafeResourceUrl;
+  otherWithCCLicenceTimeline: SafeResourceUrl;
+
+  otherWithPIDGroupByView = 'country';
+  otherWithPIDByCountryChartURL: SafeResourceUrl;
+  otherWithPIDByDatasourceChartURL: SafeResourceUrl;
+  otherWithPIDByOrganizationChartURL: SafeResourceUrl;
+  otherWithPIDByCountryChartURLMobile: SafeResourceUrl;
+
+  otherWithLicenceGroupByView = 'country';
+  otherWithLicenceByCountryChartURL: SafeResourceUrl;
+  otherWithLicenceByDatasourceChartURL: SafeResourceUrl;
+  otherWithLicenceByOrganizationChartURL: SafeResourceUrl;
+  otherWithLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  otherWithCCLicenceGroupByView = 'country';
+  otherWithCCLicenceByCountryChartURL: SafeResourceUrl;
+  otherWithCCLicenceByDatasourceChartURL: SafeResourceUrl;
+  otherWithCCLicenceByOrganizationChartURL: SafeResourceUrl;
+  otherWithCCLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  otherWithPIDByFunderData: TreemapHighchartsData[];
+  otherWithLicenceByFunderData: TreemapHighchartsData[];
+  otherWithCCLicenceByFunderData: TreemapHighchartsData[];
+
+  loadingOtherAbsoluteTable: boolean = true;
+  loadingOtherPercentageTable: boolean = true;
+  otherTableContentSelection: string = 'affiliated';
+  otherAbsoluteTableData: CountryTableData[];
+  otherPercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.otherWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid_timeline.affiliated","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid_timeline.affiliated","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence_timeline.affiliated","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence_timeline.affiliated","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherWithCCLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence_timeline.affiliated","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence_timeline.affiliated","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+    this.otherWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+    this.otherWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+    this.otherWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    this.otherWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.dataService.getFundersResultsByTypeForPID('other').subscribe(
+      rawData => {
+        this.otherWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForLicence('other').subscribe(
+      rawData => {
+        this.otherWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCCLicence('other').subscribe(
+      rawData => {
+        this.otherWithCCLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getOtherTableData(this.otherTableContentSelection);
+  }
+
+  getOtherTableData(contentSelection: string) {
+    this.loadingOtherAbsoluteTable = true;
+    this.loadingOtherPercentageTable = true;
+    this.dataService.getOpenScienceIndicatorsTableData('other', contentSelection).subscribe(
+      rawData => {
+        this.otherAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.otherPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingOtherAbsoluteTable = false;
+        this.loadingOtherPercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingOtherAbsoluteTable = false;
+        this.loadingOtherPercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+
+    this.otherTableContentSelection = contentSelection;
+    this.getOtherTableData(this.otherTableContentSelection);
+  }
+
+  getOtherWithPIDGroupBy(contentSelection: string): void {
+    this.otherWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherWithPIDByCountryChartURL) {
+      this.otherWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherWithPIDByDatasourceChartURL) {
+      this.otherWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherWithPIDByOrganizationChartURL) {
+      this.otherWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherWithPIDGroupByMobile(contentSelection: string): void {
+    this.otherWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherWithPIDByCountryChartURLMobile) {
+      this.otherWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherWithPIDByDatasourceChartURL) {
+      this.otherWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherWithPIDByOrganizationChartURL) {
+      this.otherWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherWithLicenceGroupBy(contentSelection: string): void {
+    this.otherWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherWithLicenceByCountryChartURL) {
+      this.otherWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherWithLicenceByDatasourceChartURL) {
+      this.otherWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherWithLicenceByOrganizationChartURL) {
+      this.otherWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherWithLicenceGroupByMobile(contentSelection: string): void {
+    this.otherWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherWithLicenceByCountryChartURLMobile) {
+      this.otherWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherWithLicenceByDatasourceChartURL) {
+      this.otherWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherWithLicenceByOrganizationChartURL) {
+      this.otherWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherWithCCLicenceGroupBy(contentSelection: string): void {
+    this.otherWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherWithCCLicenceByCountryChartURL) {
+      this.otherWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherWithCCLicenceByDatasourceChartURL) {
+      this.otherWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherWithCCLicenceByOrganizationChartURL) {
+      this.otherWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getOtherWithCCLicenceGroupByMobile(contentSelection: string): void {
+    this.otherWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherWithCCLicenceByCountryChartURLMobile) {
+      this.otherWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherWithCCLicenceByDatasourceChartURL) {
+      this.otherWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherWithCCLicenceByOrganizationChartURL) {
+      this.otherWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[1,"other"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[0,"other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access ORPs with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+}

src/app/pages/continent/open-science/other-research-products/continent-os-orp-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentOSORPComponent } from './continent-os-orp.component';
+import { ContinentOSORPIndicatorsComponent } from './continent-os-orp-indicators.component';
+
+const continentOpenScienceORPRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentOSORPComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'licence',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentOSORPIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentOpenScienceORPRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentOpenScienceORPRoutingModule {}

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

@@ -0,0 +1,15 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Other research products (ORPs)</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./pid']">PID</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

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

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-continent-os-orp',
+  templateUrl: './continent-os-orp.component.html',
+})
+
+export class ContinentOSORPComponent {}

src/app/pages/continent/open-science/other-research-products/continent-os-orp.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContinentOpenScienceORPRoutingModule } from './continent-os-orp-routing.module';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { ContinentOSORPComponent } from './continent-os-orp.component';
+import { ContinentOSORPIndicatorsComponent } from './continent-os-orp-indicators.component';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentOpenScienceORPRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentOSORPComponent,
+    ContinentOSORPIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentOpenScienceORPModule {}

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

@@ -0,0 +1,438 @@
+<div *ngIf="indicator && indicator=='gold-green'" class="goldGreenIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="publicationsWithGoldGreenTimeline" width="100%" height="550" [src]="publicationsWithGoldGreenTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <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" #selectGoldGreenGroupBy (change)="getPublicationsWithGoldGreenGroupByMobile(selectGoldGreenGroupBy.value)" style="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="publicationsWithGoldGreenGroupByView==='country' && publicationsWithGoldGreenByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsWithGoldGreenByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="publicationsWithGoldGreenGroupByView==='datasource' && publicationsWithGoldGreenByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsWithGoldGreenByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsWithGoldGreenGroupByView==='organization' && publicationsWithGoldGreenByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsWithGoldGreenByOrganizationChartURL"></iframe>
+            <iframe *ngIf="publicationsWithGoldGreenGroupByView==='funder' && publicationsWithGoldGreenByFunderChartURL"
+                    width="100%" height="550" [src]="publicationsWithGoldGreenByFunderChartURL"></iframe>
+
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-gold-green', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getPublicationsWithGoldGreenGroupBy('country')">Country</a></li>
+              <li><a (click)="getPublicationsWithGoldGreenGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsWithGoldGreenGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsWithGoldGreenGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-publications-gold-green" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsWithGoldGreenByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsWithGoldGreenByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithGoldGreenByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsWithGoldGreenByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithGoldGreenByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsWithGoldGreenByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithGoldGreenByFunderChartURL"
+                        width="100%" height="650" [src]="publicationsWithGoldGreenByFunderChartURL" [height]="650"></iframe>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<div *ngIf="indicator && indicator=='abstract'" class="abstractIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="publicationsWithAbstractTimeline" width="100%" height="550" [src]="publicationsWithAbstractTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <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" #selectAbstractGroupBy (change)="getPublicationsWithAbstractGroupByMobile(selectAbstractGroupBy.value)" style="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="publicationsWithAbstractGroupByView==='country' && publicationsWithAbstractByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsWithAbstractByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="publicationsWithAbstractGroupByView==='datasource' && publicationsWithAbstractByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsWithAbstractByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsWithAbstractGroupByView==='organization' && publicationsWithAbstractByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsWithAbstractByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsWithAbstractGroupByView==='funder' && publicationsWithAbstractByFunderData"
+                                   [chartTitle]="'Open Access publications with abstract'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsWithAbstractByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-abstract', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getPublicationsWithAbstractGroupBy('country')">Country</a></li>
+              <li><a (click)="getPublicationsWithAbstractGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsWithAbstractGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsWithAbstractGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-publications-abstract" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsWithAbstractByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsWithAbstractByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithAbstractByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsWithAbstractByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithAbstractByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsWithAbstractByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsWithAbstractByFunderData"
+                                       [chartTitle]="'Open Access publications with abstract'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsWithAbstractByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<div *ngIf="indicator && indicator=='licence'" class="licenceIndicator">
+  <div class="uk-grid uk-grid-match 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">
+          <iframe *ngIf="publicationsWithCCLicenceTimeline" width="100%" height="550" [src]="publicationsWithCCLicenceTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <!--MOBILE & PAD PORTRAIT-->
+          <div class="uk-hidden@m">
+            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+              <label class="uk-margin-right">Show by: </label>
+              <select class="md-input" #selectLicenceGroupBy (change)="getPublicationsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="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' && publicationsWithLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsWithLicenceGroupByView==='organization' && publicationsWithLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsWithLicenceGroupByView==='funder' && publicationsWithLicenceByFunderData"
+                                   [chartTitle]="'Open Access publications with licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-licence', 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-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsWithLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData"
+                                       [chartTitle]="'Open Access publications with licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getPublicationsWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="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="publicationsWithCCLicenceGroupByView==='country' && publicationsWithCCLicenceByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsWithCCLicenceByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="publicationsWithCCLicenceGroupByView==='datasource' && publicationsWithCCLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsWithCCLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsWithCCLicenceGroupByView==='organization' && publicationsWithCCLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsWithCCLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsWithCCLicenceGroupByView==='funder' && publicationsWithCCLicenceByFunderData"
+                                   [chartTitle]="'Open Access publications with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsWithCCLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getPublicationsWithCCLicenceGroupBy('country')">Country</a></li>
+              <li><a (click)="getPublicationsWithCCLicenceGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getPublicationsWithCCLicenceGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsWithCCLicenceGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-publications-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsWithCCLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsWithCCLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithCCLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsWithCCLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithCCLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsWithCCLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsWithCCLicenceByFunderData"
+                                       [chartTitle]="'Open Access publications with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsWithCCLicenceByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <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="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' && publicationsWithPIDByDatasourceChartURL"
+                    width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
+            <iframe *ngIf="publicationsWithPIDGroupByView==='organization' && publicationsWithPIDByOrganizationChartURL"
+                    width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="publicationsWithPIDGroupByView==='funder' && publicationsWithPIDByFunderData"
+                                   [chartTitle]="'Open Access publications with PID'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-pid', 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-pid" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsWithPIDByCountryChartURL"
+                        width="100%" height="650" [src]="publicationsWithPIDByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithPIDByDatasourceChartURL"
+                        width="100%" height="650" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsWithPIDByOrganizationChartURL"
+                        width="100%" height="650" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData"
+                                       [chartTitle]="'Open Access publications with PID'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+
+
+<div *ngIf="indicator && indicator=='more-details'" 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="display: inline-block">
+      <option value="affiliated_peer_reviewed">affiliated</option>
+      <option value="affiliated">affiliated (incl. non-peer reviewed publications)</option>
+      <option value="deposited_peer_reviewed">deposited</option>
+      <option value="deposited">deposited (incl. non-peer reviewed publications)</option>
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid">
+    <div class="absoluteTable uk-width-3-4@l uk-width-3-4@m">
+      <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>

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

@@ -0,0 +1,290 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  publicationColor,
+  publicationPalette, publicationIndicatorsPalette, goldGreenIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-os-publications-indicators',
+  templateUrl: './continent-os-publications-indicators.component.html',
+})
+
+export class ContinentOSPublicationsIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private publicationPalette = publicationPalette;
+  private publicationIndicatorsPalette = publicationIndicatorsPalette;
+  private goldGreenIndicatorsPalette = goldGreenIndicatorsPalette;
+
+  publicationColor = publicationColor;
+  gradientStartColor = gradientStartColor;
+
+  publicationsWithPIDTimeline: SafeResourceUrl;
+  publicationsWithLicenceTimeline: SafeResourceUrl;
+  publicationsWithCCLicenceTimeline: SafeResourceUrl;
+  publicationsWithGoldGreenTimeline: SafeResourceUrl;
+  publicationsWithAbstractTimeline: SafeResourceUrl;
+
+  publicationsWithPIDGroupByView = 'country';
+  publicationsWithPIDByCountryChartURL: SafeResourceUrl;
+  publicationsWithPIDByDatasourceChartURL: SafeResourceUrl;
+  publicationsWithPIDByOrganizationChartURL: SafeResourceUrl;
+  publicationsWithPIDByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsWithLicenceGroupByView = 'country';
+  publicationsWithLicenceByCountryChartURL: SafeResourceUrl;
+  publicationsWithLicenceByDatasourceChartURL: SafeResourceUrl;
+  publicationsWithLicenceByOrganizationChartURL: SafeResourceUrl;
+  publicationsWithLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsWithCCLicenceGroupByView = 'country';
+  publicationsWithCCLicenceByCountryChartURL: SafeResourceUrl;
+  publicationsWithCCLicenceByDatasourceChartURL: SafeResourceUrl;
+  publicationsWithCCLicenceByOrganizationChartURL: SafeResourceUrl;
+  publicationsWithCCLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsWithGoldGreenGroupByView = 'country';
+  publicationsWithGoldGreenByCountryChartURL: SafeResourceUrl;
+  publicationsWithGoldGreenByDatasourceChartURL: SafeResourceUrl;
+  publicationsWithGoldGreenByOrganizationChartURL: SafeResourceUrl;
+  publicationsWithGoldGreenByFunderChartURL: SafeResourceUrl;
+  publicationsWithGoldGreenByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsWithAbstractGroupByView = 'country';
+  publicationsWithAbstractByCountryChartURL: SafeResourceUrl;
+  publicationsWithAbstractByDatasourceChartURL: SafeResourceUrl;
+  publicationsWithAbstractByOrganizationChartURL: SafeResourceUrl;
+  publicationsWithAbstractByCountryChartURLMobile: SafeResourceUrl;
+
+  publicationsWithPIDByFunderData: TreemapHighchartsData[];
+  publicationsWithLicenceByFunderData: TreemapHighchartsData[];
+  publicationsWithCCLicenceByFunderData: TreemapHighchartsData[];
+  publicationsWithAbstractByFunderData: TreemapHighchartsData[];
+
+
+  loadingPublicationsAbsoluteTable: boolean = true;
+  loadingPublicationsPercentageTable: boolean = true;
+  publicationsTableContentSelection: string = 'affiliated_peer_reviewed';
+  publicationsAbsoluteTableData: CountryTableData[];
+  publicationsPercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.publicationsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.publications.pid_timeline.peer_reviewed.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.publications.pid_timeline.peer_reviewed.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.publications.licence_timeline.peer_reviewed.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.publications.licence_timeline.peer_reviewed.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithCCLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.publications.cc_licence_timeline.peer_reviewed.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.publications.cc_licence_timeline.peer_reviewed.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithGoldGreenTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"column","query":{"name":"new.oso.publications.green_gold_timeline.peer_reviewed.affiliated","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"column","query":{"name":"new.oso.publications.green_gold_timeline.peer_reviewed.affiliated","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"column","query":{"name":"new.oso.publications.green_gold_timeline.peer_reviewed.affiliated","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"column","query":{"name":"new.oso.publications.green_gold_timeline.peer_reviewed.affiliated","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithAbstractTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"column","query":{"name":"new.oso.publications.abstract_timeline.peer_reviewed.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"column","query":{"name":"new.oso.publications.abstract_timeline.peer_reviewed.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.publicationsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsWithGoldGreenByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithGoldGreenByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+
+    this.publicationsWithAbstractByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"column","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"column","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.publicationsWithAbstractByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.dataService.getFundersResultsByTypeForPID('publication').subscribe(
+      rawData => {
+        this.publicationsWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForLicence('publication').subscribe(
+      rawData => {
+        this.publicationsWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCCLicence('publication').subscribe(
+      rawData => {
+        this.publicationsWithCCLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForAbstract().subscribe(
+      rawData => {
+        this.publicationsWithAbstractByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getPublicationsTableData(this.publicationsTableContentSelection);
+  }
+
+  getPublicationsTableData(contentSelection: string) {
+
+    this.loadingPublicationsAbsoluteTable = true;
+    this.loadingPublicationsPercentageTable = true;
+    this.dataService.getOpenScienceIndicatorsTableData('publication', contentSelection).subscribe(
+      rawData => {
+        this.publicationsAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.publicationsPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingPublicationsAbsoluteTable = false;
+        this.loadingPublicationsPercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingPublicationsAbsoluteTable = false;
+        this.loadingPublicationsPercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+    this.publicationsTableContentSelection = contentSelection;
+    this.getPublicationsTableData(this.publicationsTableContentSelection);
+  }
+
+  getPublicationsWithPIDGroupBy(contentSelection: string): void {
+    this.publicationsWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithPIDByCountryChartURL) {
+      this.publicationsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithPIDByDatasourceChartURL) {
+      this.publicationsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithPIDByOrganizationChartURL) {
+      this.publicationsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithPIDGroupByMobile(contentSelection: string): void {
+    this.publicationsWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithPIDByCountryChartURLMobile) {
+      this.publicationsWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithPIDByDatasourceChartURL) {
+      this.publicationsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithPIDByOrganizationChartURL) {
+      this.publicationsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.publications.pid.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithLicenceGroupBy(contentSelection: string): void {
+    this.publicationsWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithLicenceByCountryChartURL) {
+      this.publicationsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithLicenceByDatasourceChartURL) {
+      this.publicationsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithLicenceByOrganizationChartURL) {
+      this.publicationsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithLicenceGroupByMobile(contentSelection: string): void {
+    this.publicationsWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithLicenceByCountryChartURLMobile) {
+      this.publicationsWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithLicenceByDatasourceChartURL) {
+      this.publicationsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithLicenceByOrganizationChartURL) {
+      this.publicationsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.publications.licence.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithCCLicenceGroupBy(contentSelection: string): void {
+    this.publicationsWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithCCLicenceByCountryChartURL) {
+      this.publicationsWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithCCLicenceByDatasourceChartURL) {
+      this.publicationsWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithCCLicenceByOrganizationChartURL) {
+      this.publicationsWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithCCLicenceGroupByMobile(contentSelection: string): void {
+    this.publicationsWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithCCLicenceByCountryChartURLMobile) {
+      this.publicationsWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithCCLicenceByDatasourceChartURL) {
+      this.publicationsWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithCCLicenceByOrganizationChartURL) {
+      this.publicationsWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.publications.cc_licence.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithGoldGreenGroupBy(contentSelection: string): void {
+    this.publicationsWithGoldGreenGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithGoldGreenByCountryChartURL) {
+      this.publicationsWithGoldGreenByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"column","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry.all","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithGoldGreenByDatasourceChartURL) {
+      this.publicationsWithGoldGreenByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithGoldGreenByOrganizationChartURL) {
+      this.publicationsWithGoldGreenByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'funder' && !this.publicationsWithGoldGreenByFunderChartURL) {
+      this.publicationsWithGoldGreenByFunderChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by funder (top funders)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithGoldGreenGroupByMobile(contentSelection: string): void {
+    this.publicationsWithGoldGreenGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithGoldGreenByCountryChartURLMobile) {
+      this.publicationsWithGoldGreenByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bycountry","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithGoldGreenByDatasourceChartURL) {
+      this.publicationsWithGoldGreenByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.bydatasource","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithGoldGreenByOrganizationChartURL) {
+      this.publicationsWithGoldGreenByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byorganization","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'funder' && !this.publicationsWithGoldGreenByFunderChartURL) {
+      this.publicationsWithGoldGreenByFunderChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Gold OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[0,1],"profile":"${this.profileName}"}},{"name":"both Gold & Green OA","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[1,1],"profile":"${this.profileName}"}},{"name":"Green OA only","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[1,0],"profile":"${this.profileName}"}},{"name":"neither","type":"bar","query":{"name":"new.oso.publications.green_gold.peer_reviewed.affiliated.byfunder","parameters":[0,0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold vs Green Open Access publications","align":"left","margin":50},"subtitle":{"text":"by funder (top funders)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.goldGreenIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithAbstractGroupBy(contentSelection: string): void {
+    this.publicationsWithAbstractGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithAbstractByCountryChartURL) {
+      this.publicationsWithAbstractByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"column","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry.all","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"column","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry.all","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithAbstractByDatasourceChartURL) {
+      this.publicationsWithAbstractByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithAbstractByOrganizationChartURL) {
+      this.publicationsWithAbstractByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsWithAbstractGroupByMobile(contentSelection: string): void {
+    this.publicationsWithAbstractGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsWithAbstractByCountryChartURLMobile) {
+      this.publicationsWithAbstractByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bycountry","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsWithAbstractByDatasourceChartURL) {
+      this.publicationsWithAbstractByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bydatasource","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.bydatasource","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsWithAbstractByOrganizationChartURL) {
+      this.publicationsWithAbstractByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.byorganization","parameters":[1],"profile":"${this.profileName}"}},{"name":"without abstract","type":"bar","query":{"name":"new.oso.publications.abstract.peer_reviewed.affiliated.byorganization","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications with abstract","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+}

src/app/pages/continent/open-science/publications/continent-os-publications-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentOSPublicationsComponent } from './continent-os-publications.component';
+import { ContinentOSPublicationsIndicatorsComponent } from './continent-os-publications-indicators.component';
+
+const continentOpenSciencePublicationsRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentOSPublicationsComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'gold-green',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentOSPublicationsIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentOpenSciencePublicationsRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentOpenSciencePublicationsRoutingModule {}

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

@@ -0,0 +1,17 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Publications</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./gold-green']">Gold/Green</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./abstract']">Abstract</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./pid']">PID</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-continent-os-publications',
+  templateUrl: './continent-os-publications.component.html',
+})
+
+export class ContinentOSPublicationsComponent {}

src/app/pages/continent/open-science/publications/continent-os-publications.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContinentOpenSciencePublicationsRoutingModule } from './continent-os-publications-routing.module';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { ContinentOSPublicationsComponent } from './continent-os-publications.component';
+import { ContinentOSPublicationsIndicatorsComponent } from './continent-os-publications-indicators.component';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentOpenSciencePublicationsRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentOSPublicationsComponent,
+    ContinentOSPublicationsIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentOpenSciencePublicationsModule {}

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

@@ -0,0 +1,279 @@
+<div *ngIf="indicator && indicator=='licence'" class="licenceIndicator">
+  <div class="uk-grid uk-grid-match 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">
+          <iframe *ngIf="softwareWithCCLicenceTimeline" width="100%" height="550" [src]="softwareWithCCLicenceTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div class="uk-grid-margin">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <!--MOBILE & PAD PORTRAIT-->
+          <div class="uk-hidden@m">
+            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+              <label class="uk-margin-right">Show by: </label>
+              <select class="md-input" #selectLicenceGroupBy (change)="getSoftwareWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="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' && softwareWithLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"
+                                   [chartTitle]="'Open Source software with licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-licence', 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-software-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="softwareWithLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="softwareWithLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareWithLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareWithLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData"
+                                       [chartTitle]="'Open Source software with licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </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" #selectCCLicenceGroupBy (change)="getSoftwareWithCCLicenceGroupByMobile(selectCCLicenceGroupBy.value)" style="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="softwareWithCCLicenceGroupByView==='country' && softwareWithCCLicenceByCountryChartURLMobile"
+                    width="100%" height="550" [src]="softwareWithCCLicenceByCountryChartURLMobile"></iframe>
+            <iframe *ngIf="softwareWithCCLicenceGroupByView==='datasource' && softwareWithCCLicenceByDatasourceChartURL"
+                    width="100%" height="550" [src]="softwareWithCCLicenceByDatasourceChartURL"></iframe>
+            <iframe *ngIf="softwareWithCCLicenceGroupByView==='organization' && softwareWithCCLicenceByOrganizationChartURL"
+                    width="100%" height="550" [src]="softwareWithCCLicenceByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="softwareWithCCLicenceGroupByView==='funder' && softwareWithCCLicenceByFunderData"
+                                   [chartTitle]="'Open Source software with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="softwareWithCCLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-cc-licence', animation: 'fade'}">
+              <li class="uk-active"><a (click)="getSoftwareWithCCLicenceGroupBy('country')">Country</a></li>
+              <li><a (click)="getSoftwareWithCCLicenceGroupBy('datasource')">Datasource</a></li>
+              <li><a (click)="getSoftwareWithCCLicenceGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getSoftwareWithCCLicenceGroupBy('funder')">Funder</a></li>
+            </ul>
+
+            <ul id="switcher-content-a-fade-software-cc-licence" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="softwareWithCCLicenceByCountryChartURL"
+                        width="100%" height="650" [src]="softwareWithCCLicenceByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareWithCCLicenceByDatasourceChartURL"
+                        width="100%" height="650" [src]="softwareWithCCLicenceByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareWithCCLicenceByOrganizationChartURL"
+                        width="100%" height="650" [src]="softwareWithCCLicenceByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareWithCCLicenceByFunderData"
+                                       [chartTitle]="'Open Source software with CC licence'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="softwareWithCCLicenceByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div *ngIf="indicator && indicator=='pid'" class="pidIndicator">
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="uk-grid uk-grid-margin">
+    <div class="uk-width-3-4@l uk-width-1-1@m uk-width-1-1@s">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <!--MOBILE & PAD PORTRAIT-->
+          <div class="uk-hidden@m">
+            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
+              <label class="uk-margin-right">Show by: </label>
+              <select class="md-input" #selectPIDGroupBy (change)="getSoftwareWithPIDGroupByMobile(selectPIDGroupBy.value)" style="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' && softwareWithPIDByDatasourceChartURL"
+                    width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
+            <iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURL"
+                    width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
+            <app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"
+                                   [chartTitle]="'OS Software with PID by funder (top funders)'"
+                                   [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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-pid', 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-software-pid" class="uk-switcher uk-margin">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="softwareWithPIDByCountryChartURL"
+                        width="100%" height="650" [src]="softwareWithPIDByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareWithPIDByDatasourceChartURL"
+                        width="100%" height="650" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareWithPIDByOrganizationChartURL"
+                        width="100%" height="650" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareWithPIDByFunderData"
+                                       [chartTitle]="'Open Source software with PID'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="softwareWithPIDByFunderData" [color]="softwareColor" [height]="650"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+<div *ngIf="indicator && indicator=='more-details'" 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="display: inline-block">
+      <option value="affiliated">affiliated</option>
+      <!--<option value="affiliated_peer_reviewed">affiliated peer reviewed</option>-->
+      <option value="deposited">deposited</option>
+      <!--<option value="deposited_peer_reviewed">deposited peer reviewed</option>-->
+    </select>
+    <!--<span class="md-input-bar"></span>-->
+  </div>
+
+  <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">
+    <div class="absoluteTable">
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+
+          <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#software-indicators-content-a-fade', animation: 'fade'}">
+            <li aria-expanded="true" class="uk-active">
+              <a href="#">
+                <i class="fas fa-hashtag"></i>
+              </a>
+            </li>
+            <li aria-expanded="false" class="">
+              <a href="#">
+                <i class="fas fa-percentage"></i>
+              </a>
+            </li>
+          </ul>
+
+          <ul id="software-indicators-content-a-fade" class="uk-switcher uk-margin" >
+            <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
+              <div *ngIf="loadingSoftwareAbsoluteTable" 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="loadingSoftwarePercentageTable" 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>

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

@@ -0,0 +1,205 @@
+import {Component, OnInit} from '@angular/core';
+import {
+  gradientStartColor, softwareColor, softwarePalette, softwareIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-os-software-indicators',
+  templateUrl: './continent-os-software-indicators.component.html',
+})
+
+export class ContinentOSSoftwareIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  private softwarePalette = softwarePalette;
+  private softwareIndicatorsPalette = softwareIndicatorsPalette;
+
+  softwareColor = softwareColor;
+  gradientStartColor = gradientStartColor;
+
+  softwareWithPIDTimeline: SafeResourceUrl;
+  softwareWithLicenceTimeline: SafeResourceUrl;
+  softwareWithCCLicenceTimeline: SafeResourceUrl;
+
+  softwareWithPIDGroupByView = 'country';
+  softwareWithPIDByCountryChartURL: SafeResourceUrl;
+  softwareWithPIDByDatasourceChartURL: SafeResourceUrl;
+  softwareWithPIDByOrganizationChartURL: SafeResourceUrl;
+  softwareWithPIDByCountryChartURLMobile: SafeResourceUrl;
+
+  softwareWithLicenceGroupByView = 'country';
+  softwareWithLicenceByCountryChartURL: SafeResourceUrl;
+  softwareWithLicenceByDatasourceChartURL: SafeResourceUrl;
+  softwareWithLicenceByOrganizationChartURL: SafeResourceUrl;
+  softwareWithLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  softwareWithCCLicenceGroupByView = 'country';
+  softwareWithCCLicenceByCountryChartURL: SafeResourceUrl;
+  softwareWithCCLicenceByDatasourceChartURL: SafeResourceUrl;
+  softwareWithCCLicenceByOrganizationChartURL: SafeResourceUrl;
+  softwareWithCCLicenceByCountryChartURLMobile: SafeResourceUrl;
+
+  softwareWithPIDByFunderData: TreemapHighchartsData[];
+  softwareWithLicenceByFunderData: TreemapHighchartsData[];
+  softwareWithCCLicenceByFunderData: TreemapHighchartsData[];
+
+  loadingSoftwareAbsoluteTable: boolean = true;
+  loadingSoftwarePercentageTable: boolean = true;
+  softwareTableContentSelection: string = 'affiliated';
+  softwareAbsoluteTableData: CountryTableData[];
+  softwarePercentageTableData: CountryTableData[];
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+
+    this.softwareWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid_timeline.affiliated","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid_timeline.affiliated","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    this.softwareWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence_timeline.affiliated","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence_timeline.affiliated","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    this.softwareWithCCLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence_timeline.affiliated","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence_timeline.affiliated","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+
+    this.softwareWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    this.softwareWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+
+    this.softwareWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    this.softwareWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+
+    this.softwareWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    this.softwareWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+
+
+    this.dataService.getFundersResultsByTypeForPID('software').subscribe(
+      rawData => {
+        this.softwareWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForLicence('software').subscribe(
+      rawData => {
+        this.softwareWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByTypeForCCLicence('software').subscribe(
+      rawData => {
+        this.softwareWithCCLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.getSoftwareTableData(this.softwareTableContentSelection);
+  }
+
+  getSoftwareTableData(contentSelection: string) {
+    this.loadingSoftwareAbsoluteTable = true;
+    this.loadingSoftwarePercentageTable = true;
+    this.dataService.getOpenScienceIndicatorsTableData('software', contentSelection).subscribe(
+      rawData => {
+        this.softwareAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.softwarePercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
+        this.loadingSoftwareAbsoluteTable = false;
+        this.loadingSoftwarePercentageTable = false;
+      }, error => {
+        console.log(error);
+        this.loadingSoftwareAbsoluteTable = false;
+        this.loadingSoftwarePercentageTable = false;
+      }
+    );
+  }
+
+  getContent(type: string, contentSelection: string): void {
+
+    this.softwareTableContentSelection = contentSelection;
+    this.getSoftwareTableData(this.softwareTableContentSelection);
+  }
+
+  getSoftwareWithPIDGroupBy(contentSelection: string): void {
+    this.softwareWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareWithPIDByCountryChartURL) {
+      this.softwareWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"column","query":{"name":"new.oso.results.pid.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareWithPIDByDatasourceChartURL) {
+      this.softwareWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareWithPIDByOrganizationChartURL) {
+      this.softwareWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareWithPIDGroupByMobile(contentSelection: string): void {
+    this.softwareWithPIDGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareWithPIDByCountryChartURLMobile) {
+      this.softwareWithPIDByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareWithPIDByDatasourceChartURL) {
+      this.softwareWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareWithPIDByOrganizationChartURL) {
+      this.softwareWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without PID","type":"bar","query":{"name":"new.oso.results.pid.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with PID","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareWithLicenceGroupBy(contentSelection: string): void {
+    this.softwareWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareWithLicenceByCountryChartURL) {
+      this.softwareWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"column","query":{"name":"new.oso.results.licence.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareWithLicenceByDatasourceChartURL) {
+      this.softwareWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareWithLicenceByOrganizationChartURL) {
+      this.softwareWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareWithLicenceGroupByMobile(contentSelection: string): void {
+    this.softwareWithLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareWithLicenceByCountryChartURLMobile) {
+      this.softwareWithLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareWithLicenceByDatasourceChartURL) {
+      this.softwareWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareWithLicenceByOrganizationChartURL) {
+      this.softwareWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without licence","type":"bar","query":{"name":"new.oso.results.licence.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareWithCCLicenceGroupBy(contentSelection: string): void {
+    this.softwareWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareWithCCLicenceByCountryChartURL) {
+      this.softwareWithCCLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"column","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry.all","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareWithCCLicenceByDatasourceChartURL) {
+      this.softwareWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareWithCCLicenceByOrganizationChartURL) {
+      this.softwareWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareWithCCLicenceGroupByMobile(contentSelection: string): void {
+    this.softwareWithCCLicenceGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareWithCCLicenceByCountryChartURLMobile) {
+      this.softwareWithCCLicenceByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bycountry","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by country","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareWithCCLicenceByDatasourceChartURL) {
+      this.softwareWithCCLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.bydatasource","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareWithCCLicenceByOrganizationChartURL) {
+      this.softwareWithCCLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"with CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[1,"software"],"profile":"${this.profileName}"}},{"name":"without CC licence","type":"bar","query":{"name":"new.oso.results.cc_licence.affiliated.byorganization","parameters":[0,"software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software with CC licence","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","align":"left"},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwareIndicatorsPalette.join('","')}\"]}}`));
+    }
+  }
+
+}

src/app/pages/continent/open-science/software/continent-os-software-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ContinentOSSoftwareComponent } from './continent-os-software.component';
+import { ContinentOSSoftwareIndicatorsComponent } from './continent-os-software-indicators.component';
+
+const continentOpenScienceSoftwareRoutes: Routes = [
+  {
+    path: '',
+    component: ContinentOSSoftwareComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'licence',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: ContinentOSSoftwareIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(continentOpenScienceSoftwareRoutes)],
+  exports: [RouterModule]
+})
+
+export class ContinentOpenScienceSoftwareRoutingModule {}

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

@@ -0,0 +1,15 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Software</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./pid']">PID</a></li>
+    <li [routerLinkActive]="['uk-active']" class="uk-visible@m"><a [routerLink]="['./more-details']">More Details</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

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

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-continent-os-software',
+  templateUrl: './continent-os-software.component.html',
+})
+
+export class ContinentOSSoftwareComponent {}

src/app/pages/continent/open-science/software/continent-os-software.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ContinentOpenScienceSoftwareRoutingModule } from './continent-os-software-routing.module';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { ContinentOSSoftwareComponent } from './continent-os-software.component';
+import { ContinentOSSoftwareIndicatorsComponent } from './continent-os-software-indicators.component';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    ContinentOpenScienceSoftwareRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    ContinentOSSoftwareComponent,
+    ContinentOSSoftwareIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class ContinentOpenScienceSoftwareModule {}

src/app/pages/continent/overview/continent-overview.component.html

@@ -0,0 +1,304 @@
+<div class="uk-margin tabContent">
+
+  <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m uk-child-width-1-1@s">
+
+    <div>
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe width="100%" height="550" [src]="peerReviewedPublicationsOverTimeChartURL"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div class="md-card chartCard">
+        <div class="md-card-content">
+          <iframe width="100%" height="550" [src]="publicationsByTypeChartURL"></iframe>
+        </div>
+      </div>
+    </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="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="publicationGroupByView==='country' && publicationsByCountryChartURLMobile"
+                    width="100%" height="550" [src]="publicationsByCountryChartURLMobile"></iframe>
+            <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]="'Open Access publications'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+
+          </div>
+
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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('country')">Country</a></li>
+              <li><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" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="publicationsByCountryChartURL"
+                        width="100%" height="400" [src]="publicationsByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsByDatasourceChartURL"
+                        width="100%" height="400" [src]="publicationsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="publicationsByOrganizationChartURL"
+                        width="100%" height="400" [src]="publicationsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="publicationsByFunderData"
+                                       [chartTitle]="'Open Access publications'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="publicationsByFunderData" [color]="publicationColor" [height]="400"></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="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="datasetsGroupByView==='country' && datasetsByCountryChartURLMobile"
+                    width="100%" height="550" [src]="datasetsByCountryChartURLMobile"></iframe>
+            <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]="'Open Access datasets'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
+
+          </div>
+
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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('country')">Country</a></li>
+              <li><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" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="datasetsByCountryChartURL"
+                        width="100%" height="400" [src]="datasetsByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsByDatasourceChartURL"
+                        width="100%" height="400" [src]="datasetsByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="datasetsByOrganizationChartURL"
+                        width="100%" height="400" [src]="datasetsByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="datasetsByFunderData"
+                                       [chartTitle]="'Open Access datasets'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="datasetsByFunderData" [color]="datasetColor" [height]="400"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <!--OS 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="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="softwareGroupByView==='country' && softwareByCountryChartURLMobile"
+                    width="100%" height="550" [src]="softwareByCountryChartURLMobile"></iframe>
+            <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]="'Open Source software'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
+
+          </div>
+
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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('country')">Country</a></li>
+              <li><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" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="softwareByCountryChartURL"
+                        width="100%" height="400" [src]="softwareByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareByDatasourceChartURL"
+                        width="100%" height="400" [src]="softwareByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="softwareByOrganizationChartURL"
+                        width="100%" height="400" [src]="softwareByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="softwareByFunderData"
+                                       [chartTitle]="'Open Source software'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="softwareByFunderData" [color]="softwareColor" [height]="400"></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="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="orpGroupByView==='country' && otherByCountryChartURLMobile"
+                    width="100%" height="550" [src]="otherByCountryChartURLMobile"></iframe>
+            <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]="'Open Access other research products'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
+
+          </div>
+
+
+          <!--LAPTOP & PAD LANDSCAPE-->
+          <div class="uk-visible@m">
+            <ul class="group-by-cdof 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('country')">Country</a></li>
+              <li><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" class="uk-active" style="animation-duration: 200ms;">
+                <iframe *ngIf="otherByCountryChartURL"
+                        width="100%" height="400" [src]="otherByCountryChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherByDatasourceChartURL"
+                        width="100%" height="400" [src]="otherByDatasourceChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <iframe *ngIf="otherByOrganizationChartURL"
+                        width="100%" height="400" [src]="otherByOrganizationChartURL"></iframe>
+              </li>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
+                <app-treemap-highchart *ngIf="otherByFunderData"
+                                       [chartTitle]="'Open Access other research products'" [chartSubtitle]="'by funder (top funders)'"
+                                       [chartData]="otherByFunderData" [color]="otherResearchProductsColor" [height]="400"></app-treemap-highchart>
+              </li>
+            </ul>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</div>

src/app/pages/continent/overview/continent-overview.compopnent.ts

@@ -0,0 +1,224 @@
+import {Component, OnInit} from '@angular/core';
+import { datasetPalette, otherResearchProductsPalette, publicationColor, publicationPalette, publicationIndicatorsPalette,
+  softwarePalette, datasetColor, softwareColor, otherResearchProductsColor, gradientStartColor } from '../../../chart-palettes';
+import {environment} from '../../../../environments/environment';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../services/data-handler.service';
+import {DataService} from '../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-continent-overview',
+  templateUrl: './continent-overview.component.html',
+})
+
+export class ContinentOverviewComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  private publicationPalette = publicationPalette;
+  private publicationIndicatorsPalette = publicationIndicatorsPalette;
+  private datasetPalette = datasetPalette;
+  private softwarePalette = softwarePalette;
+  private otherResearchProductsPalette = otherResearchProductsPalette;
+
+  publicationColor = publicationColor;
+  datasetColor = datasetColor;
+  softwareColor = softwareColor;
+  otherResearchProductsColor = otherResearchProductsColor;
+  gradientStartColor = gradientStartColor;
+
+  peerReviewedPublicationsOverTimeChartURL: SafeResourceUrl;
+  publicationsByTypeChartURL: SafeResourceUrl;
+
+
+  publicationsByFunderData: TreemapHighchartsData[];
+  datasetsByFunderData: TreemapHighchartsData[];
+  softwareByFunderData: TreemapHighchartsData[];
+  otherByFunderData: TreemapHighchartsData[];
+
+
+  publicationGroupByView = 'country';
+  publicationsByCountryChartURL: SafeResourceUrl;
+  publicationsByDatasourceChartURL: SafeResourceUrl;
+  publicationsByOrganizationChartURL: SafeResourceUrl;
+  publicationsByCountryChartURLMobile: SafeResourceUrl;
+  publicationsByDatasourceChartURLMobile: SafeResourceUrl;
+  publicationsByOrganizationChartURLMobile: SafeResourceUrl;
+
+  datasetsGroupByView = 'country';
+  datasetsByCountryChartURL: SafeResourceUrl;
+  datasetsByDatasourceChartURL: SafeResourceUrl;
+  datasetsByOrganizationChartURL: SafeResourceUrl;
+  datasetsByCountryChartURLMobile: SafeResourceUrl;
+  datasetsByDatasourceChartURLMobile: SafeResourceUrl;
+  datasetsByOrganizationChartURLMobile: SafeResourceUrl;
+
+  softwareGroupByView = 'country';
+  softwareByCountryChartURL: SafeResourceUrl;
+  softwareByDatasourceChartURL: SafeResourceUrl;
+  softwareByOrganizationChartURL: SafeResourceUrl;
+  softwareByCountryChartURLMobile: SafeResourceUrl;
+  softwareByDatasourceChartURLMobile: SafeResourceUrl;
+  softwareByOrganizationChartURLMobile: SafeResourceUrl;
+
+  orpGroupByView = 'country';
+  otherByCountryChartURL: SafeResourceUrl;
+  otherByDatasourceChartURL: SafeResourceUrl;
+  otherByOrganizationChartURL: SafeResourceUrl;
+  otherByCountryChartURLMobile: SafeResourceUrl;
+  otherByDatasourceChartURLMobile: SafeResourceUrl;
+  otherByOrganizationChartURLMobile: SafeResourceUrl;
+
+
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.publicationsByTypeChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.bytype","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by type","align":"left","margin":50},"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.publicationIndicatorsPalette.join('","')}\"]}}`));
+    this.peerReviewedPublicationsOverTimeChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"peer-reviewed","type":"column","query":{"name":"new.oso.publications.oa_timeline.peer_reviewed.affiliated","parameters":[1],"profile":"${this.profileName}"}},{"name":"non-peer-reviewed","type":"column","query":{"name":"new.oso.publications.oa_timeline.peer_reviewed.affiliated","parameters":[0],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by peer-review, over time","align":"left","margin":50},"yAxis":{"title":{"text":""},"reversedStacks":false},"xAxis":{"title":{"text":""}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false},"stacking":"normal"}},"legend":{"enabled":true},"credits":{"href":null,"text":"All publication indicators refer to peer-reviewed publications, unless explicitly stated otherwise.","enabled":true},"colors":[\"${this.publicationIndicatorsPalette.join('","')}\"]}}`));
+
+    // this.publicationsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.dataService.getFundersResultsByPublications().subscribe(
+      rawData => {
+        this.publicationsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByType('dataset').subscribe(
+      rawData => {
+        this.datasetsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByType('software').subscribe(
+      rawData => {
+        this.softwareByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.dataService.getFundersResultsByType('other').subscribe(
+      rawData => {
+        this.otherByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
+    this.publicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"column","query":{"name":"new.oso.publications.peer_reviewed.bycountry.all","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
+    this.publicationsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.bycountry","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
+
+    // this.publicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"column","query":{"name":"oso.results.bycountry","parameters":["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 country","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,"#745b93"]]}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false}}}`));
+    // this.publicationsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.datasetsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"column","query":{"name":"new.oso.results.bycountry.all","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetPalette.join('","')}\"]}}`));
+    this.datasetsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.bycountry","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetPalette.join('","')}\"]}}`));
+
+    this.softwareByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"column","query":{"name":"new.oso.results.bycountry.all","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by country","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.softwarePalette.join('","')}\"]}}`));
+    this.softwareByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by country","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.softwarePalette.join('","')}\"]}}`));
+
+    this.otherByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"column","query":{"name":"new.oso.results.bycountry.all","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by country","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.otherByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"bar","query":{"name":"oso.results.bycountry","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by country","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('","')}\"]}}`));
+  }
+
+  getPublicationsGroupBy(contentSelection: string): void {
+    this.publicationGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsByCountryChartURL) {
+      this.publicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"column","query":{"name":"new.oso.publications.peer_reviewed.bycountry.all","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsByDatasourceChartURL) {
+      this.publicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"column","query":{"name":"new.oso.publications.peer_reviewed.bydatasource","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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.publicationPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsByOrganizationChartURL) {
+      this.publicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"column","query":{"name":"new.oso.publication.peer_reviewed.byorganization","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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.publicationPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getPublicationsGroupByMobile(contentSelection: string): void {
+    this.publicationGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.publicationsByCountryChartURLMobile) {
+      this.publicationsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.bycountry","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.publicationsByDatasourceChartURLMobile) {
+      this.publicationsByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"new.oso.publications.peer_reviewed.bydatasource","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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.publicationPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.publicationsByOrganizationChartURLMobile) {
+      this.publicationsByOrganizationChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"new.oso.publication.peer_reviewed.byorganization","profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access publications","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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.publicationPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsGroupBy(contentSelection: string): void {
+    this.datasetsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsByCountryChartURL) {
+      this.datasetsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"column","query":{"name":"new.oso.results.bycountry.all","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsByDatasourceChartURL) {
+      this.datasetsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"column","query":{"name":"oso.results.bydatasource","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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.datasetPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.datasetsByOrganizationChartURL) {
+      this.datasetsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"column","query":{"name":"oso.results.byorganization","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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.datasetPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getDatasetsGroupByMobile(contentSelection: string): void {
+    this.datasetsGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.datasetsByCountryChartURLMobile) {
+      this.datasetsByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.bycountry","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetPalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.datasetsByDatasourceChartURLMobile) {
+      this.datasetsByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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.datasetPalette.join('","')}\"]}}`));
+    } 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.byorganization","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access datasets","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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.datasetPalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareGroupBy(contentSelection: string): void {
+    this.softwareGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareByCountryChartURL) {
+      this.softwareByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"column","query":{"name":"new.oso.results.bycountry.all","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by country","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":true},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.softwareByDatasourceChartURL) {
+      this.softwareByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"column","query":{"name":"oso.results.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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.softwarePalette.join('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.softwareByOrganizationChartURL) {
+      this.softwareByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"column","query":{"name":"oso.results.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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.softwarePalette.join('","')}\"]}}`));
+    }
+  }
+
+  getSoftwareGroupByMobile(contentSelection: string): void {
+    this.softwareGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.softwareByCountryChartURLMobile) {
+      this.softwareByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by country","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":true},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
+    } else 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.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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.softwarePalette.join('","')}\"]}}`));
+    } 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.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Source software","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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.softwarePalette.join('","')}\"]}}`));
+    }
+  }
+
+  getORPGroupBy(contentSelection: string): void {
+    this.orpGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherByCountryChartURL) {
+      this.otherByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"column","query":{"name":"new.oso.results.bycountry.all","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by country","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('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherByDatasourceChartURL) {
+      this.otherByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"column","query":{"name":"oso.results.bydatasource","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherByOrganizationChartURL) {
+      this.otherByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"column","query":{"name":"oso.results.byorganization","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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('","')}\"]}}`));
+    }
+  }
+
+  getORPGroupByMobile(contentSelection: string): void {
+    this.orpGroupByView = contentSelection;
+    if (contentSelection === 'country' && !this.otherByCountryChartURLMobile) {
+      this.otherByCountryChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"bar","query":{"name":"oso.results.bycountry","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by country","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('","')}\"]}}`));
+    } else if (contentSelection === 'datasource' && !this.otherByDatasourceChartURLMobile) {
+      this.otherByDatasourceChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by datasource (top datasources)","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('","')}\"]}}`));
+    } else if (contentSelection === 'organization' && !this.otherByOrganizationChartURLMobile) {
+      this.otherByOrganizationChartURLMobile = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other research products","type":"bar","query":{"name":"oso.results.byorganization","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Open Access other research products","align":"left","margin":50},"subtitle":{"text":"by organization (top organizations)","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('","')}\"]}}`));
+    }
+  }
+}

src/app/pages/continentoverview/continent-overview.component.ts

@@ -1,669 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { DataService } from '../../services/data.service';
-import { DataHandlerService } from '../../services/data-handler.service';
-import { CountryTableData, EuropeData } from '../../domain/overview-map-data';
-import { environment } from '../../../environments/environment';
-import { TreemapHighchartsData } from '../../domain/treemap-highcharts-data';
-import { datasetPalette, otherResearchProductsPalette, publicationColor, publicationPalette,
-  softwarePalette, datasetColor, softwareColor, otherResearchProductsColor, gradientStartColor } from '../../chart-palettes';
-
-@Component({
-  selector: 'app-continent-overview',
-  templateUrl: './continent-overview.component.html',
-})
-
-export class ContinentOverviewComponent implements OnInit {
-
-  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
-  private profileName = environment.profileName;
-
-  private publicationPalette = publicationPalette;
-  private datasetPalette = datasetPalette;
-  private softwarePalette = softwarePalette;
-  private otherResearchProductsPalette = otherResearchProductsPalette;
-
-  publicationColor = publicationColor;
-  datasetColor = datasetColor;
-  softwareColor = softwareColor;
-  otherResearchProductsColor = otherResearchProductsColor;
-  gradientStartColor = gradientStartColor;
-
-  lastUpdateDate: string;
-
-  continentName: string;
-
-  activeTopView: string = 'overview';
-  activeInnerView: string = 'publications';
-
-  europeOverviewData: EuropeData;
-
-  // Overview Tab
-  overviewTabIsInitialised: boolean = false;
-
-  publicationsByTypeChartURL: SafeResourceUrl;
-
-  publicationsByCountryChartURL: SafeResourceUrl;
-  publicationsByDatasourceChartURL: SafeResourceUrl;
-  publicationsByOrganizationChartURL: SafeResourceUrl;
-
-  datasetsByCountryChartURL: SafeResourceUrl;
-  datasetsByDatasourceChartURL: SafeResourceUrl;
-  datasetsByOrganizationChartURL: SafeResourceUrl;
-
-  softwareByCountryChartURL: SafeResourceUrl;
-  softwareByDatasourceChartURL: SafeResourceUrl;
-  softwareByOrganizationChartURL: SafeResourceUrl;
-
-  otherByCountryChartURL: SafeResourceUrl;
-  otherByDatasourceChartURL: SafeResourceUrl;
-  otherByOrganizationChartURL: SafeResourceUrl;
-
-  publicationsByFunderData: TreemapHighchartsData[];
-  datasetsByFunderData: TreemapHighchartsData[];
-  softwareByFunderData: TreemapHighchartsData[];
-  otherByFunderData: TreemapHighchartsData[];
-
-  // Open Science Tab
-  // publications subtab
-  openSciencePubsTabIsInitialised: boolean = false;
-
-  publicationsWithPIDTimeline: SafeResourceUrl;
-  publicationsWithLicenceTimeline: SafeResourceUrl;
-  goldPublicationsTimeline: SafeResourceUrl;
-  greenPublicationsTimeline: SafeResourceUrl;
-
-  publicationsWithPIDByCountryChartURL: SafeResourceUrl;
-  publicationsWithLicenceByCountryChartURL: SafeResourceUrl;
-  goldPublicationsByCountryChartURL: SafeResourceUrl;
-  greenPublicationsByCountryChartURL: SafeResourceUrl;
-
-  publicationsWithPIDByDatasourceChartURL: SafeResourceUrl;
-  publicationsWithLicenceByDatasourceChartURL: SafeResourceUrl;
-  goldPublicationsByDatasourceChartURL: SafeResourceUrl;
-  greenPublicationsByDatasourceChartURL: SafeResourceUrl;
-
-  publicationsWithPIDByOrganizationChartURL: SafeResourceUrl;
-  publicationsWithLicenceByOrganizationChartURL: SafeResourceUrl;
-  goldPublicationsByOrganizationChartURL: SafeResourceUrl;
-  greenPublicationsByOrganizationChartURL: SafeResourceUrl;
-
-  publicationsWithPIDByFunderData: TreemapHighchartsData[];
-  publicationsWithLicenceByFunderData: TreemapHighchartsData[];
-  goldPublicationsByFunderData: TreemapHighchartsData[];
-  greenPublicationsByFunderData: TreemapHighchartsData[];
-
-  greenVsGoldPublicationsChartURL: SafeResourceUrl;
-
-  loadingPublicationsAbsoluteTable: boolean = true;
-  loadingPublicationsPercentageTable: boolean = true;
-  publicationsTableContentSelection: string = 'affiliated';
-  publicationsAbsoluteTableData: CountryTableData[];
-  publicationsPercentageTableData: CountryTableData[];
-
-  // Open Science Tab
-  // datasets subtab
-  openScienceDatasetsTabIsInitialised: boolean = false;
-
-  datasetsWithPIDTimeline: SafeResourceUrl;
-  datasetsWithLicenceTimeline: SafeResourceUrl;
-
-  datasetsWithPIDByCountryChartURL: SafeResourceUrl;
-  datasetsWithLicenceByCountryChartURL: SafeResourceUrl;
-
-  datasetsWithPIDByDatasourceChartURL: SafeResourceUrl;
-  datasetsWithLicenceByDatasourceChartURL: SafeResourceUrl;
-
-  datasetsWithPIDByOrganizationChartURL: SafeResourceUrl;
-  datasetsWithLicenceByOrganizationChartURL: SafeResourceUrl;
-
-  datasetsWithPIDByFunderData: TreemapHighchartsData[];
-  datasetsWithLicenceByFunderData: TreemapHighchartsData[];
-
-  loadingDatasetsAbsoluteTable: boolean = true;
-  loadingDatasetsPercentageTable: boolean = true;
-  datasetsTableContentSelection: string = 'affiliated';
-  datasetsAbsoluteTableData: CountryTableData[];
-  datasetsPercentageTableData: CountryTableData[];
-
-  // Open Science Tab
-  // software subtab
-  openScienceSoftwareTabIsInitialised: boolean = false;
-
-  softwareWithPIDTimeline: SafeResourceUrl;
-  softwareWithLicenceTimeline: SafeResourceUrl;
-
-  softwareWithPIDByCountryChartURL: SafeResourceUrl;
-  softwareWithLicenceByCountryChartURL: SafeResourceUrl;
-
-  softwareWithPIDByDatasourceChartURL: SafeResourceUrl;
-  softwareWithLicenceByDatasourceChartURL: SafeResourceUrl;
-
-  softwareWithPIDByOrganizationChartURL: SafeResourceUrl;
-  softwareWithLicenceByOrganizationChartURL: SafeResourceUrl;
-
-  softwareWithPIDByFunderData: TreemapHighchartsData[];
-  softwareWithLicenceByFunderData: TreemapHighchartsData[];
-
-  loadingSoftwareAbsoluteTable: boolean = true;
-  loadingSoftwarePercentageTable: boolean = true;
-  softwareTableContentSelection: string = 'affiliated';
-  softwareAbsoluteTableData: CountryTableData[];
-  softwarePercentageTableData: CountryTableData[];
-
-  // Open Science Tab
-  // other research products subtab
-  openScienceOtherTabIsInitialised: boolean = false;
-
-  otherWithLicenceTimeline: SafeResourceUrl;
-  otherWithPIDTimeline: SafeResourceUrl;
-
-  otherWithPIDByCountryChartURL: SafeResourceUrl;
-  otherWithLicenceByCountryChartURL: SafeResourceUrl;
-
-  otherWithPIDByDatasourceChartURL: SafeResourceUrl;
-  otherWithLicenceByDatasourceChartURL: SafeResourceUrl;
-
-  otherWithPIDByOrganizationChartURL: SafeResourceUrl;
-  otherWithLicenceByOrganizationChartURL: SafeResourceUrl;
-
-  otherWithPIDByFunderData: TreemapHighchartsData[];
-  otherWithLicenceByFunderData: TreemapHighchartsData[];
-
-  loadingOtherAbsoluteTable: boolean = true;
-  loadingOtherPercentageTable: boolean = true;
-  otherTableContentSelection: string = 'affiliated';
-  otherAbsoluteTableData: CountryTableData[];
-  otherPercentageTableData: CountryTableData[];
-
-  constructor(private dataService: DataService,
-              private dataHandlerService: DataHandlerService,
-              private route: ActivatedRoute,
-              private sanitizer: DomSanitizer) { }
-
-  ngOnInit(): void {
-
-    window.scroll(0, 0);
-
-    this.continentName = this.route.snapshot.paramMap.get('continentName');
-
-    this.dataService.getLastUpdateDate().subscribe(
-      rawData => {
-        this.lastUpdateDate = this.dataHandlerService.convertRawDataToLastUpdateDate(rawData);
-      }, error => {
-        console.log(error);
-      }
-    );
-
-    this.dataService.getEuropeOAPercentages().subscribe(
-      rawData => {
-        this.europeOverviewData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);
-      }, error => {
-        console.log(error);
-      }
-    );
-
-    this.createOverviewContent();
-  }
-
-  getHeight(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage) * 1.5;
-    } else {
-      return Math.round(percentage);
-    }
-  }
-
-  getNumberFontSize(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage * 45 / 100) * 1.5;
-    } else {
-      return Math.round(percentage * 45 / 100);
-    }
-  }
-
-  getEntityNameFontSize(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage * 30 / 100) * 1.5;
-    } else {
-      return Math.round(percentage * 30 / 100);
-    }
-  }
-
-  getPublicationsIconWidth(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage * 60 / 100) * 1.5;
-    } else {
-      return Math.round(percentage * 60 / 100);
-    }
-  }
-
-  getDatasetsIconWidth(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage * 45 / 100) * 1.5;
-    } else {
-      return Math.round(percentage * 45 / 100);
-    }
-  }
-
-  getSoftwareIconWidth(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage * 50 / 100) * 1.5;
-    } else {
-      return Math.round(percentage * 50 / 100);
-    }
-  }
-
-  getOtherIconWidth(percentage: number) {
-    if (percentage < 50) {
-      return Math.round(percentage * 45 / 100) * 1.5;
-    } else {
-      return Math.round(percentage * 45 / 100);
-    }
-  }
-
-  changeTopView(view: string) {
-    this.activeTopView = view;
-    // console.log('top view: ', view);
-    if (view === 'overview') {
-      this.createOverviewContent();
-    } else if (view === 'openScience') {
-      this.createOpenScienceContent();
-    }
-  }
-
-  changeInnerView(view: string) {
-    this.activeInnerView = view;
-    // console.log('view: ', view);
-    if (view === 'publications') {
-      this.createPublicationsViewForOpenScience();
-    } else if (view === 'datasets') {
-      this.createDatasetsViewForOpenScience();
-    } else if (view === 'software') {
-      this.createSoftwareViewForOpenScience();
-    } else if (view === 'other') {
-      this.createOtherViewForOpenScience();
-    }
-  }
-
-  createOverviewContent() {
-
-    if (!this.overviewTabIsInitialised) {
-      // this.publicationsByTypeChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Publications","type":"bar","query":{"select":[{"field":"publication","aggregate":"count"},{"field":"publication.classification","aggregate":null}],"filters":[{"groupFilters":[{"field":"publication.organization.country.continent","type":"=","values":["Europe"]}],"op":"AND"},{"groupFilters":[{"field":"publication.classification","type":"!=","values":["0041"]},{"field":"publication.classification","type":"!=","values":["0043"]},{"field":"publication.classification","type":"!=","values":["0044"]},{"field":"publication.classification","type":"!=","values":["Unknown"]}],"op":"AND"}],"entity":"publication","profile":"${this.profileName}","limit":"30"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications 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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsByTypeChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Publications","type":"bar","query":{"select":[{"field":"publication","aggregate":"count"},{"field":"publication.classification","aggregate":null}],"filters":[{"groupFilters":[{"field":"publication.organization.country.continent","type":"=","values":["Europe"]}],"op":"AND"},{"groupFilters":[{"field":"publication.classification","type":"!=","values":["0041"]},{"field":"publication.classification","type":"!=","values":["0043"]},{"field":"publication.classification","type":"!=","values":["0044"]},{"field":"publication.classification","type":"!=","values":["Unknown"]}],"op":"AND"}],"entity":"publication","profile":"${this.profileName}","limit":"30"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications 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},"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.publicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.publicationPalette.join('","')}\"]}}`));
-      this.publicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.publicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["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.publicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.byorganization","parameters":["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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.byorganization","parameters":["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}}}`));
-
-      // this.datasetsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.datasetPalette.join('","')}\"]}}`));
-      this.datasetsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.datasetsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetPalette.join('","')}\"]}}`));
-      this.datasetsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["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.datasetsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.byorganization","parameters":["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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetPalette.join('","')}\"]}}`));
-      this.datasetsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"datasets","type":"bar","query":{"name":"oso.results.byorganization","parameters":["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}}}`));
-
-      // this.softwareByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Software","align":"left","margin":50},"subtitle":{"text":"by country","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":true},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Software","align":"left","margin":50},"subtitle":{"text":"by country","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":true}}}`));
-      // this.softwareByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA 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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA 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.softwareByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA 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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"software","type":"bar","query":{"name":"oso.results.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA 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}}}`));
-
-      // this.otherByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.otherByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.bycountry","parameters":["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 country","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.otherByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherResearchProductsPalette.join('","')}\"]}}`));
-      this.otherByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.bydatasource","parameters":["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.otherByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"other","type":"bar","query":{"name":"oso.results.byorganization","parameters":["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.byorganization","parameters":["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.dataService.getFundersResultsByType('publication').subscribe(
-        rawData => {
-          this.publicationsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByType('dataset').subscribe(
-        rawData => {
-          this.datasetsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByType('software').subscribe(
-        rawData => {
-          this.softwareByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByType('other').subscribe(
-        rawData => {
-          this.otherByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.overviewTabIsInitialised = true;
-    }
-  }
-
-  createOpenScienceContent() {
-    this.createPublicationsViewForOpenScience();
-  }
-
-  createPublicationsViewForOpenScience() {
-
-    if (!this.openSciencePubsTabIsInitialised) {
-
-      // this.publicationsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with PID","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with PID","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},"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.publicationsWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with licence","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with licence","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},"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.goldPublicationsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.gold_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold OA Publications","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.goldPublicationsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.gold_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold OA Publications","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},"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.greenPublicationsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.green_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green OA Publications","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.greenPublicationsTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.green_timeline.affiliated","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green OA Publications","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},"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.publicationsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Publications with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.goldPublicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.gold.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold Publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
-      this.goldPublicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.gold.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold Publications","align":"left","margin":50},"subtitle":{"text":"by country","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.greenPublicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.green.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green Publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationPalette.join('","')}\"]}}`));
-      this.greenPublicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.green.affiliated.bycountry","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green Publications","align":"left","margin":50},"subtitle":{"text":"by country","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.publicationsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with PID","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with PID","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.publicationsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with licence","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with licence","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.goldPublicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.gold.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold 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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.goldPublicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.gold.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold 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.greenPublicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.green.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green 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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.greenPublicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.green.affiliated.bydatasource","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green 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.publicationsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with PID","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.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with PID","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}}}`));
-      // this.publicationsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with licence","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.publicationPalette.join('","')}\"]}}`));
-      this.publicationsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications with licence","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}}}`));
-      // this.goldPublicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.gold.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold 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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.goldPublicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.gold.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Gold 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}}}`));
-      // this.greenPublicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.green.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green 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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.greenPublicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.green.affiliated.byorganization","parameters":["publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green 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}}}`));
-
-      // this.greenVsGoldPublicationsChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.greenvsgold","parameters":["publication","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green vs Gold","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.publicationPalette.join('","')}\"]}}`));
-      this.greenVsGoldPublicationsChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.greenvsgold","parameters":["publication","publication"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Green vs Gold","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},"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.dataService.getFundersResultsByTypeForPID('publication').subscribe(
-        rawData => {
-          this.publicationsWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByTypeForLicence('publication').subscribe(
-        rawData => {
-          this.publicationsWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByTypeForGold('publication').subscribe(
-        rawData => {
-          this.goldPublicationsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByTypeForGreen('publication').subscribe(
-        rawData => {
-          this.greenPublicationsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.getPublicationsTableData(this.publicationsTableContentSelection);
-
-      this.openSciencePubsTabIsInitialised = true;
-    }
-  }
-
-  createDatasetsViewForOpenScience() {
-
-    if (!this.openScienceDatasetsTabIsInitialised) {
-
-      // this.datasetsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","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},"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.datasetsWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","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},"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.datasetsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.datasetsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","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.datasetsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","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.datasetsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","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.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with PID","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}}}`));
-      // this.datasetsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","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.datasetPalette.join('","')}\"]}}`));
-      this.datasetsWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["dataset"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Datasets with licence","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}}}`));
-
-      this.dataService.getFundersResultsByTypeForPID('dataset').subscribe(
-        rawData => {
-          this.datasetsWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByTypeForLicence('dataset').subscribe(
-        rawData => {
-          this.datasetsWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.getDatasetsTableData(this.datasetsTableContentSelection);
-
-      this.openSciencePubsTabIsInitialised = true;
-    }
-  }
-
-  createSoftwareViewForOpenScience() {
-
-    if (!this.openScienceSoftwareTabIsInitialised) {
-
-      // this.softwareWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","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},"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.softwareWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","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},"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.softwareWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.softwareWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.softwareWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","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.softwareWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","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.softwareWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","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.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with PID","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}}}`));
-      // this.softwareWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","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.softwarePalette.join('","')}\"]}}`));
-      this.softwareWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["software"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OS Software with licence","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}}}`));
-
-      this.dataService.getFundersResultsByTypeForPID('software').subscribe(
-        rawData => {
-          this.softwareWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByTypeForLicence('software').subscribe(
-        rawData => {
-          this.softwareWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.getSoftwareTableData(this.softwareTableContentSelection);
-
-      this.openScienceSoftwareTabIsInitialised = true;
-    }
-  }
-
-  createOtherViewForOpenScience() {
-
-    if (!this.openScienceOtherTabIsInitialised) {
-
-      // this.otherWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherResearchProductsPalette.join('","')}\"]}}`));
-      this.otherWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","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},"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.otherWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","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":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherResearchProductsPalette.join('","')}\"]}}`));
-      this.otherWithLicenceTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.licence_timeline.affiliated","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","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},"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.otherWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.otherWithPIDByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.pid.affiliated.bycountry","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","align":"left","margin":50},"subtitle":{"text":"by country","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.otherWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.otherWithLicenceByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"Data","type":"bar","query":{"name":"oso.results.licence.affiliated.bycountry","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","align":"left","margin":50},"subtitle":{"text":"by country","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.otherWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherResearchProductsPalette.join('","')}\"]}}`));
-      this.otherWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","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.otherWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","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}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":false},"colors":[\"${this.otherResearchProductsPalette.join('","')}\"]}}`));
-      this.otherWithLicenceByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.bydatasource","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","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.otherWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","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.otherWithPIDByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.byorganization","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with PID","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.otherWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","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.otherWithLicenceByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.licence.affiliated.byorganization","parameters":["other"],"profile":"${this.profileName}"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"OA Other research products with licence","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.dataService.getFundersResultsByTypeForPID('other').subscribe(
-        rawData => {
-          this.otherWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.dataService.getFundersResultsByTypeForLicence('other').subscribe(
-        rawData => {
-          this.otherWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
-        }, error => {
-          console.log(error);
-        }
-      );
-
-      this.getOtherTableData(this.otherTableContentSelection);
-
-      this.openScienceOtherTabIsInitialised = true;
-    }
-  }
-
-  getContent(type: string, contentSelection: string): void {
-
-    if (type === 'publication') {
-      this.publicationsTableContentSelection = contentSelection;
-      this.getPublicationsTableData(this.publicationsTableContentSelection);
-    } else if (type === 'dataset') {
-      this.datasetsTableContentSelection = contentSelection;
-      this.getDatasetsTableData(this.datasetsTableContentSelection);
-    } else if (type === 'software') {
-      this.softwareTableContentSelection = contentSelection;
-      this.getSoftwareTableData(this.softwareTableContentSelection);
-    } else if (type === 'other') {
-      this.otherTableContentSelection = contentSelection;
-      this.getOtherTableData(this.otherTableContentSelection);
-    }
-  }
-
-  getPublicationsTableData(contentSelection: string) {
-
-    this.loadingPublicationsAbsoluteTable = true;
-    this.loadingPublicationsPercentageTable = true;
-    this.dataService.getIndicatorsTableData('publication', contentSelection).subscribe(
-      rawData => {
-        this.publicationsAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.publicationsPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.loadingPublicationsAbsoluteTable = false;
-        this.loadingPublicationsPercentageTable = false;
-      }, error => {
-        console.log(error);
-        this.loadingPublicationsAbsoluteTable = false;
-        this.loadingPublicationsPercentageTable = false;
-      }
-    );
-  }
-
-  getDatasetsTableData(contentSelection: string) {
-    this.loadingDatasetsAbsoluteTable = true;
-    this.loadingDatasetsPercentageTable = true;
-    this.dataService.getIndicatorsTableData('dataset', contentSelection).subscribe(
-      rawData => {
-        this.datasetsAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.datasetsPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.loadingDatasetsAbsoluteTable = false;
-        this.loadingDatasetsPercentageTable = false;
-      }, error => {
-        console.log(error);
-        this.loadingDatasetsAbsoluteTable = false;
-        this.loadingDatasetsPercentageTable = false;
-      }
-    );
-  }
-
-  getSoftwareTableData(contentSelection: string) {
-    this.loadingSoftwareAbsoluteTable = true;
-    this.loadingSoftwarePercentageTable = true;
-    this.dataService.getIndicatorsTableData('software', contentSelection).subscribe(
-      rawData => {
-        this.softwareAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.softwarePercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.loadingSoftwareAbsoluteTable = false;
-        this.loadingSoftwarePercentageTable = false;
-      }, error => {
-        console.log(error);
-        this.loadingSoftwareAbsoluteTable = false;
-        this.loadingSoftwarePercentageTable = false;
-      }
-    );
-  }
-
-  getOtherTableData(contentSelection: string) {
-    this.loadingOtherAbsoluteTable = true;
-    this.loadingOtherPercentageTable = true;
-    this.dataService.getIndicatorsTableData('other', contentSelection).subscribe(
-      rawData => {
-        this.otherAbsoluteTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.otherPercentageTableData = this.dataHandlerService.convertRawDataToIndicatorsTableData(rawData);
-        this.loadingOtherAbsoluteTable = false;
-        this.loadingOtherPercentageTable = false;
-      }, error => {
-        console.log(error);
-        this.loadingOtherAbsoluteTable = false;
-        this.loadingOtherPercentageTable = false;
-      }
-    );
-  }
-
-}

src/app/pages/country/collaboration/country-collaboration-routing.module.ts

@@ -0,0 +1,41 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CountryCollaborationComponent } from './country-collaboration.component';
+
+
+const countryCollaborationRoutes: Routes = [
+  {
+    path: '',
+    component: CountryCollaborationComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'publications',
+        pathMatch: 'full',
+      },
+      {
+        path: 'publications',
+        loadChildren: () => import('./publications/country-collaboration-publications.module').then(m => m.CountryCollaborationPublicationsModule),
+      },
+      {
+        path: 'datasets',
+        loadChildren: () => import('./datasets/country-collaboration-datasets.module').then(m => m.CountryCollaborationDatasetsModule),
+      },
+      {
+        path: 'software',
+        loadChildren: () => import('./software/country-collaboration-software.module').then(m => m.CountryCollaborationSoftwareModule),
+      },
+      {
+        path: 'other-research-products',
+        loadChildren: () => import('./other-research-products/country-collaboration-orp.module').then(m => m.CountryCollaborationORPModule),
+      },
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(countryCollaborationRoutes)],
+  exports: [RouterModule]
+})
+
+export class CountryCollaborationRoutingModule {}

src/app/pages/country/collaboration/country-collaboration.component.html

@@ -0,0 +1,31 @@
+<div class="uk-margin tabContent">
+
+
+  <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#switcher-content-a-fade', animation: 'fade'}">
+    <li aria-expanded="true" [routerLinkActive]="['uk-active']">
+      <a class="publicationsSubnav" [routerLink]="['./publications']" uk-tooltip="title: Publication; duration: 2000">
+        <img src="../../../../assets/img/icons/publications-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="datasetsSubnav" [routerLink]="['./datasets']" uk-tooltip="title: Datasets; duration: 2000">
+        <img src="../../../../assets/img/icons/datasets-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="softwareSubnav" [routerLink]="['./software']" uk-tooltip="title: Software; duration: 2000">
+        <img src="../../../../assets/img/icons/software-icon.svg" width="15">
+      </a>
+    </li>
+    <li aria-expanded="false" [routerLinkActive]="['uk-active']">
+      <a class="otherSubnav" [routerLink]="['./other-research-products']" uk-tooltip="title: Other research products; duration: 2000">
+        <img src="../../../../assets/img/icons/other-icon.svg" width="15">
+      </a>
+    </li>
+  </ul>
+
+  <hr class="uk-visible@m">
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/country/collaboration/country-collaboration.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-country-collaboration',
+  templateUrl: './country-collaboration.component.html',
+})
+
+export class CountryCollaborationComponent {}
+

src/app/pages/country/collaboration/country-collaboration.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../services/data.service';
+import { DataHandlerService } from '../../../services/data-handler.service';
+import { CountryCollaborationComponent } from './country-collaboration.component';
+import { CountryCollaborationRoutingModule } from './country-collaboration-routing.module';
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    CountryCollaborationRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    CountryCollaborationComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class CountryCollaborationModule {}

src/app/pages/country/collaboration/datasets/country-collaboration-datasets-indicators.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  Co-funded indicators coming soon...
+</div>
+
+<div *ngIf="indicator && indicator=='co-authored'" class="coAuthoredIndicator">
+  Co-authored indicators coming soon...
+</div>

src/app/pages/country/collaboration/datasets/country-collaboration-datasets-indicators.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  datasetColor,
+  datasetPalette, datasetIndicatorsPalette, goldGreenIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-country-collaboration-datasets-indicators',
+  templateUrl: './country-collaboration-datasets-indicators.component.html',
+})
+
+export class CountryCollaborationDatasetsIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+  }
+}

src/app/pages/country/collaboration/datasets/country-collaboration-datasets-routing.module.ts

@@ -0,0 +1,29 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CountryCollaborationDatasetsIndicatorsComponent } from './country-collaboration-datasets-indicators.component';
+import { CountryCollaborationDatasetsComponent } from './country-collaboration-datasets.component';
+
+const countryCollaborationDatasetsRoutes: Routes = [
+  {
+    path: '',
+    component: CountryCollaborationDatasetsComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: CountryCollaborationDatasetsIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(countryCollaborationDatasetsRoutes)],
+  exports: [RouterModule]
+})
+
+export class CountryCollaborationDatasetsRoutingModule {}

src/app/pages/country/collaboration/datasets/country-collaboration-datasets.component.html

@@ -0,0 +1,14 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Datasets</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-authored']">Co-authored</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/country/collaboration/datasets/country-collaboration-datasets.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-country-collaboration-datasets',
+  templateUrl: './country-collaboration-datasets.component.html',
+})
+
+export class CountryCollaborationDatasetsComponent {}

src/app/pages/country/collaboration/datasets/country-collaboration-datasets.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { CountryCollaborationDatasetsRoutingModule } from './country-collaboration-datasets-routing.module';
+import { CountryCollaborationDatasetsComponent } from './country-collaboration-datasets.component';
+import { CountryCollaborationDatasetsIndicatorsComponent } from './country-collaboration-datasets-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    CountryCollaborationDatasetsRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    CountryCollaborationDatasetsComponent,
+    CountryCollaborationDatasetsIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class CountryCollaborationDatasetsModule {}

src/app/pages/country/collaboration/other-research-products/country-collaboration-orp-indicators.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  Co-funded indicators coming soon...
+</div>
+
+<div *ngIf="indicator && indicator=='co-authored'" class="coAuthoredIndicator">
+  Co-authored indicators coming soon...
+</div>

src/app/pages/country/collaboration/other-research-products/country-collaboration-orp-indicators.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  otherResearchProductsColor,
+  otherResearchProductsPalette, otherIndicatorsPalette, goldGreenIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-country-collaboration-orp-indicators',
+  templateUrl: './country-collaboration-orp-indicators.component.html',
+})
+
+export class CountryCollaborationORPIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+  }
+}

src/app/pages/country/collaboration/other-research-products/country-collaboration-orp-routing.module.ts

@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CountryCollaborationORPComponent } from './country-collaboration-orp.component';
+import { CountryCollaborationORPIndicatorsComponent } from './country-collaboration-orp-indicators.component';
+
+
+const countryCollaborationORPRoutes: Routes = [
+  {
+    path: '',
+    component: CountryCollaborationORPComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: CountryCollaborationORPIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(countryCollaborationORPRoutes)],
+  exports: [RouterModule]
+})
+
+export class CountryCollaborationORPRoutingModule {}

src/app/pages/country/collaboration/other-research-products/country-collaboration-orp.component.html

@@ -0,0 +1,14 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Other research products (ORPs)</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-authored']">Co-authored</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/country/collaboration/other-research-products/country-collaboration-orp.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-country-collaboration-orp',
+  templateUrl: './country-collaboration-orp.component.html',
+})
+
+export class CountryCollaborationORPComponent {}

src/app/pages/country/collaboration/other-research-products/country-collaboration-orp.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { CountryCollaborationORPRoutingModule } from './country-collaboration-orp-routing.module';
+import { CountryCollaborationORPComponent } from './country-collaboration-orp.component';
+import { CountryCollaborationORPIndicatorsComponent } from './country-collaboration-orp-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    CountryCollaborationORPRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    CountryCollaborationORPComponent,
+    CountryCollaborationORPIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class CountryCollaborationORPModule {}

src/app/pages/country/collaboration/publications/country-collaboration-publications-indicators.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  Co-funded indicators coming soon...
+</div>
+
+<div *ngIf="indicator && indicator=='co-authored'" class="coAuthoredIndicator">
+  Co-authored indicators coming soon...
+</div>

src/app/pages/country/collaboration/publications/country-collaboration-publications-indicators.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  publicationColor,
+  publicationPalette, publicationIndicatorsPalette, goldGreenIndicatorsPalette
+} from '../../../../chart-palettes';
+import {environment} from '../../../../../environments/environment';
+import {CountryTableData} from '../../../../domain/overview-map-data';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {TreemapHighchartsData} from '../../../../domain/treemap-highcharts-data';
+import {DataHandlerService} from '../../../../services/data-handler.service';
+import {DataService} from '../../../../services/data.service';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+  selector: 'app-country-collaboration-publications-indicators',
+  templateUrl: './country-collaboration-publications-indicators.component.html',
+})
+
+export class CountryCollaborationPublicationsIndicatorsComponent implements OnInit {
+
+  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
+  private profileName = environment.profileName;
+
+  indicator: string;
+
+  constructor(private dataService: DataService,
+              private dataHandlerService: DataHandlerService,
+              private route: ActivatedRoute,
+              private sanitizer: DomSanitizer) { }
+
+  ngOnInit(): void {
+
+    this.route.params.subscribe(params => {
+
+      this.indicator = params['indicator'];
+    });
+  }
+}

src/app/pages/country/collaboration/publications/country-collaboration-publications-routing.module.ts

@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CountryCollaborationPublicationsComponent } from './country-collaboration-publications.component';
+import { CountryCollaborationPublicationsIndicatorsComponent } from './country-collaboration-publications-indicators.component';
+
+
+const countryCollaborationPublicationsRoutes: Routes = [
+  {
+    path: '',
+    component: CountryCollaborationPublicationsComponent,
+    children : [
+      {
+        path: '',
+        redirectTo: 'co-funded',
+        pathMatch: 'full',
+      },
+      {
+        path: ':indicator',
+        component: CountryCollaborationPublicationsIndicatorsComponent,
+      }
+    ]
+  },
+];
+
+@NgModule ({
+  imports: [RouterModule.forChild(countryCollaborationPublicationsRoutes)],
+  exports: [RouterModule]
+})
+
+export class CountryCollaborationPublicationsRoutingModule {}

src/app/pages/country/collaboration/publications/country-collaboration-publications.component.html

@@ -0,0 +1,14 @@
+<div>
+
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
+    <h3>Publications</h3>
+  </div>
+
+  <ul uk-tab class="uk-tab-large">
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-funded']">Co-funded</a></li>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./co-authored']">Co-authored</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

src/app/pages/country/collaboration/publications/country-collaboration-publications.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-country-collaboration-publications',
+  templateUrl: './country-collaboration-publications.component.html',
+})
+
+export class CountryCollaborationPublicationsComponent {}

src/app/pages/country/collaboration/publications/country-collaboration-publications.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReusableComponentsModule } from '../../../../shared/reusablecomponents/reusable-components.module';
+import { DataService } from '../../../../services/data.service';
+import { DataHandlerService } from '../../../../services/data-handler.service';
+import { CountryCollaborationPublicationsRoutingModule } from './country-collaboration-publications-routing.module';
+import { CountryCollaborationPublicationsComponent } from './country-collaboration-publications.component';
+import { CountryCollaborationPublicationsIndicatorsComponent } from './country-collaboration-publications-indicators.component';
+
+
+@NgModule ({
+  imports: [
+    CommonModule,
+    CountryCollaborationPublicationsRoutingModule,
+    ReusableComponentsModule,
+  ],
+  declarations: [
+    CountryCollaborationPublicationsComponent,
+    CountryCollaborationPublicationsIndicatorsComponent,
+  ],
+  providers: [
+    DataService,
+    DataHandlerService
+  ],
+})
+
+export class CountryCollaborationPublicationsModule {}

src/app/pages/country/collaboration/software/country-collaboration-software-indicators.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="indicator && indicator=='co-funded'" class="coFundedIndicator">
+  Co-funded indicators coming soon...
+</div>
+
+<div *ngIf="indicator && indicator=='co-authored'" class="coAuthoredIndicator">
+  Co-authored indicators coming soon...
+</div>