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,9 +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.0",
+    "ngx-matomo": "1.0.0-rc.1",
     "proj4": "^2.5.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.0.0",
@@ -39,10 +41,10 @@
     "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",

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

@@ -25,6 +25,7 @@ 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: [
@@ -34,7 +35,7 @@ import {environment} from '../environments/environment';
     // CountriesTableComponent,
     DataViewComponent,
     CountriesMapOverviewComponent,
-    EuropeMapOverviewComponent,
+    // EuropeMapOverviewComponent,
     // CountryComponent,
     CountryMapComponent,
     GaugeChartComponent,
@@ -49,7 +50,7 @@ import {environment} from '../environments/environment';
     // NgxEchartsModule.forRoot({
     //   echarts
     // }),
-    NgxEchartsModule,
+    // NgxEchartsModule,
     HighchartsChartModule,
     AutocompleteLibModule,
     MatomoModule.forRoot({
@@ -64,6 +65,7 @@ import {environment} from '../environments/environment';
         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

@@ -20,6 +20,10 @@ const continentRoutes: Routes = [
       {
         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),
       }
     ]
   }

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

@@ -10,7 +10,6 @@
           <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">
@@ -27,7 +26,8 @@
           <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: 21 May 2020</span>
+            <span class="lastUpdateInfo">Data Last Updated: </span>
+            <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>
           </div>
         </div>
       </div>
@@ -37,11 +37,20 @@
 
 
 
-  <section class="uk-padding-small uk-margin-top">
+  <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">
 
@@ -55,7 +64,7 @@
               {{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'}">Publications</span>
+                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">OA Publications</span>
               </div>
             </div>
           </ng-container>
@@ -75,7 +84,7 @@
               {{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'}">Datasets</span>
+                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">OA Datasets</span>
               </div>
             </div>
           </ng-container>
@@ -95,7 +104,7 @@
               {{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'}">Software</span>
+                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">OS Software</span>
               </div>
             </div>
           </ng-container>
@@ -115,7 +124,7 @@
               {{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'}">Other</span>
+                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">OA Other</span>
               </div>
             </div>
           </ng-container>
@@ -171,6 +180,156 @@
         </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>
@@ -328,7 +487,7 @@
           <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 class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</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>-->
@@ -338,7 +497,7 @@
         <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 class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</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>-->
@@ -348,36 +507,6 @@
           <router-outlet></router-outlet>
         </div>
 
-
-        <!--<ul id="team_tabbed" class="uk-switcher dataContainer">-->
-
-          <!--&lt;!&ndash;<router-outlet></router-outlet>&ndash;&gt;-->
-
-          <!--&lt;!&ndash;&lt;!&ndash;OVERVIEW tab&ndash;&gt;&ndash;&gt;-->
-          <!--&lt;!&ndash;<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">&ndash;&gt;-->
-            <!--&lt;!&ndash;<app-continent-overview></app-continent-overview>&ndash;&gt;-->
-          <!--&lt;!&ndash;</li>&ndash;&gt;-->
-
-          <!--&lt;!&ndash;&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;&ndash;&gt;-->
-          <!--&lt;!&ndash;<li aria-hidden="true" style="animation-duration: 200ms;">&ndash;&gt;-->
-            <!--&lt;!&ndash;<app-continent-open-science></app-continent-open-science>&ndash;&gt;-->
-          <!--&lt;!&ndash;</li>&ndash;&gt;-->
-
-          <!--&lt;!&ndash;<li aria-hidden="true">&ndash;&gt;-->
-            <!--&lt;!&ndash;<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">&ndash;&gt;-->
-            <!--&lt;!&ndash;</div>&ndash;&gt;-->
-          <!--&lt;!&ndash;</li>&ndash;&gt;-->
-
-          <!--&lt;!&ndash;<li aria-hidden="true">&ndash;&gt;-->
-            <!--&lt;!&ndash;<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">&ndash;&gt;-->
-            <!--&lt;!&ndash;</div>&ndash;&gt;-->
-          <!--&lt;!&ndash;</li>&ndash;&gt;-->
-
-          <!--&lt;!&ndash;<li aria-hidden="true">&ndash;&gt;-->
-            <!--&lt;!&ndash;<div class="uk-grid uk-grid-medium uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid-margin="">&ndash;&gt;-->
-            <!--&lt;!&ndash;</div>&ndash;&gt;-->
-          <!--&lt;!&ndash;</li>&ndash;&gt;-->
-        <!--</ul>-->
       </div>
 
     </div>

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

@@ -3,7 +3,8 @@ 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 { EuropeData } from '../../domain/overview-map-data';
+import { CountryOverviewData, EuropeData, SelectedCountry } from '../../domain/overview-map-data';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'app-continent',
@@ -17,6 +18,11 @@ export class ContinentComponent implements OnInit {
   continentName: string;
 
   europeOverviewData: EuropeData;
+  europeOverviewMapData: EuropeData;
+
+  mapViewActive = false;
+  selectedCountry: SelectedCountry = null;
+  selectedCountryData: CountryOverviewData = null;
 
   constructor(private dataService: DataService,
               private dataHandlerService: DataHandlerService,
@@ -48,6 +54,14 @@ export class ContinentComponent implements OnInit {
       }
     );
 
+    this.dataService.getEuropeOverviewData().subscribe(
+      rawData => {
+        this.europeOverviewMapData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);
+      }, error => {
+        console.log(error);
+      }
+    );
+
     // this.createOverviewContent();
   }
 
@@ -107,4 +121,39 @@ export class ContinentComponent implements OnInit {
     }
   }
 
+  /** 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

@@ -6,20 +6,18 @@ 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 { ContinentOpenScienceComponent } from './open-science/continent-open-science.component';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @NgModule ({
   imports: [
     CommonModule,
     ContinentRoutingModule,
     ReusableComponentsModule,
-    // ContinentOpenScienceComponent
+    MatSlideToggleModule
-    // SourcesModule
   ],
   declarations: [
     ContinentComponent,
     ContinentOverviewComponent,
-    // ContinentOpenScienceComponent
   ],
   providers: [
     DataService,

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

@@ -1,11 +1,6 @@
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { ContinentOSPublicationsComponent } from './publications/continent-os-publications.component';
 import { ContinentOpenScienceComponent } from './continent-open-science.component';
-import { ContinentOSDatasetsComponent } from './datasets/continent-os-datasets.component';
-import { ContinentOSSoftwareComponent } from './software/continent-os-software.component';
-import { ContinentOSORPComponent } from './other-research-products/continent-os-orp.component';
-
 
 const continentOpenScienceRoutes: Routes = [
   {
@@ -19,19 +14,19 @@ const continentOpenScienceRoutes: Routes = [
       },
       {
         path: 'publications',
-        component: ContinentOSPublicationsComponent,
+        loadChildren: () => import('./publications/continent-os-publications.module').then(m => m.ContinentOpenSciencePublicationsModule),
       },
       {
         path: 'datasets',
-        component: ContinentOSDatasetsComponent,
+        loadChildren: () => import('./datasets/continent-os-datasets.module').then(m => m.ContinentOpenScienceDatasetsModule),
       },
       {
         path: 'software',
-        component: ContinentOSSoftwareComponent,
+        loadChildren: () => import('./software/continent-os-software.module').then(m => m.ContinentOpenScienceSoftwareModule),
       },
       {
         path: 'other-research-products',
-        component: ContinentOSORPComponent,
+        loadChildren: () => import('./other-research-products/continent-os-orp.module').then(m => m.ContinentOpenScienceORPModule),
       },
     ]
   },

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

@@ -3,7 +3,7 @@
 
   <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">
+      <a class="publicationsSubnav" [routerLink]="['./publications']" uk-tooltip="title: Publications; duration: 2000">
         <img src="../../../../assets/img/icons/publications-icon.svg" width="15">
       </a>
     </li>

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

@@ -1,14 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ContinentOpenScienceRoutingModule } from './continent-open-science-routing.module';
-import { ContinentOSPublicationsComponent } from './publications/continent-os-publications.component';
 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';
-import { ContinentOSDatasetsComponent } from './datasets/continent-os-datasets.component';
-import { ContinentOSSoftwareComponent } from './software/continent-os-software.component';
-import { ContinentOSORPComponent } from './other-research-products/continent-os-orp.component';
 
 @NgModule ({
   imports: [
@@ -18,10 +14,6 @@ import { ContinentOSORPComponent } from './other-research-products/continent-os-
   ],
   declarations: [
     ContinentOpenScienceComponent,
-    ContinentOSPublicationsComponent,
-    ContinentOSDatasetsComponent,
-    ContinentOSSoftwareComponent,
-    ContinentOSORPComponent
   ],
   providers: [
     DataService,

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

@@ -1,153 +1,15 @@
 <div>
 
-  <div class="pidIndicator">
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
-    <h3 class="uk-margin-remove">PID</h3>
+    <h3>Datasets</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="datasetsWithPIDByCountryChartURL" width="100%" height="550" [src]="datasetsWithPIDByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="datasetsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="datasetsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData" [chartTitle]="'OA Datasets with PID by funder'"
-                                   [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
   </div>
 
-  <div class="licenceIndicator uk-margin-large-top">
+  <ul uk-tab class="uk-tab-large">
-    <h3 class="uk-margin-remove">Licence</h3>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+    <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>
 
-      <div class="uk-grid-margin">
+  <router-outlet></router-outlet>
-        <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="datasetsWithLicenceByCountryChartURL" width="100%" height="550" [src]="datasetsWithLicenceByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData" [chartTitle]="'OA Datasets with licence by funder'"
-                                   [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="indicatorsTable uk-visible@m uk-margin-large-top">
-
-    <h3 class="">More details for datasets</h3>
-
-    <div class="uk-margin-top uk-margin-bottom">
-      <label class="uk-margin-right">Show: </label>
-      <select class="md-input" #selectDatasetsContent (change)="getContent('dataset', selectDatasetsContent.value)" style="width: 230px; display: inline-block">
-        <option value="affiliated">affiliated</option>
-        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
-        <option value="deposited">deposited</option>
-        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
-      </select>
-      <!--<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="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="datasetsAbsoluteTableData" [isPercentage]="false" [countries]="datasetsAbsoluteTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>
-              </li>
-              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
-                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="datasetsPercentageTableData" [isPercentage]="true" [countries]="datasetsPercentageTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>
-              </li>
-            </ul>
-
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-
-  </div>
 
 </div>

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

@@ -1,120 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import {
-  datasetColor,
-  datasetPalette,
-  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',
   templateUrl: './continent-os-datasets.component.html',
 })
 
-export class ContinentOSDatasetsComponent implements OnInit {
+export class ContinentOSDatasetsComponent {}
-
-  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
-  private profileName = environment.profileName;
-
-  private datasetPalette = datasetPalette;
-
-  datasetColor = datasetColor;
-  gradientStartColor = gradientStartColor;
-
-
-  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[];
-
-  constructor(private dataService: DataService,
-              private dataHandlerService: DataHandlerService,
-              private route: ActivatedRoute,
-              private sanitizer: DomSanitizer) { }
-
-  ngOnInit(): void {
-
-    // 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);
-  }
-
-  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;
-      }
-    );
-  }
-
-  getContent(type: string, contentSelection: string): void {
-
-    this.datasetsTableContentSelection = contentSelection;
-    this.getDatasetsTableData(this.datasetsTableContentSelection);
-  }
-}

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

@@ -1,153 +1,15 @@
 <div>
 
-  <div class="pidIndicator">
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
-    <h3 class="uk-margin-remove">PID</h3>
+    <h3>Other research products (ORPs)</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="otherWithPIDByCountryChartURL" width="100%" height="550" [src]="otherWithPIDByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="otherWithPIDByDatasourceChartURL" width="100%" height="550" [src]="otherWithPIDByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="otherWithPIDByOrganizationChartURL" width="100%" height="550" [src]="otherWithPIDByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="otherWithPIDByFunderData" [chartTitle]="'OA Other research products with PID by funder'"
-                                   [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
   </div>
 
-  <div class="licenceIndicator uk-margin-large-top">
+  <ul uk-tab class="uk-tab-large">
-    <h3 class="uk-margin-remove">Licence</h3>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+    <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>
 
-      <div class="uk-grid-margin">
+  <router-outlet></router-outlet>
-        <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="otherWithLicenceByCountryChartURL" width="100%" height="550" [src]="otherWithLicenceByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="otherWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="otherWithLicenceByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="otherWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="otherWithLicenceByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="otherWithLicenceByFunderData" [chartTitle]="'OA Other research products with licence by funder'"
-                                   [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="indicatorsTable uk-visible@m uk-margin-large-top">
-
-    <h3 class="">More details for other research products</h3>
-
-    <div class="uk-margin-top uk-margin-bottom">
-      <label class="uk-margin-right">Show: </label>
-      <select class="md-input" #selectOtherContent (change)="getContent('other', selectOtherContent.value)" style="width: 230px; display: inline-block">
-        <option value="affiliated">affiliated</option>
-        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
-        <option value="deposited">deposited</option>
-        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
-      </select>
-      <!--<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="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="otherAbsoluteTableData" [isPercentage]="false" [countries]="otherAbsoluteTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
-              </li>
-              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
-                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="otherPercentageTableData" [isPercentage]="true" [countries]="otherPercentageTableData" [view]="'openScience'" [entity]="'other'"></app-countries-table>
-              </li>
-            </ul>
-
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-
-  </div>
 
 </div>

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

@@ -1,118 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
-import {environment} from '../../../../../environments/environment';
-import {
-  gradientStartColor,
-  otherResearchProductsColor, otherResearchProductsPalette,
-} 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',
   templateUrl: './continent-os-orp.component.html',
 })
 
-export class ContinentOSORPComponent implements OnInit {
+export class ContinentOSORPComponent {}
-
-  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
-  private profileName = environment.profileName;
-
-  private otherResearchProductsPalette = otherResearchProductsPalette;
-
-  otherResearchProductsColor = otherResearchProductsColor;
-  gradientStartColor = gradientStartColor;
-
-  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 {
-
-    // 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);
-  }
-
-  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;
-      }
-    );
-  }
-
-  getContent(type: string, contentSelection: string): void {
-
-    this.otherTableContentSelection = contentSelection;
-    this.getOtherTableData(this.otherTableContentSelection);
-  }
-}

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

@@ -1,264 +1,17 @@
 <div>
 
-  <div class="pidIndicator">
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
-    <h3 class="uk-margin-remove">PID</h3>
+    <h3>Publications</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="publicationsWithPIDByCountryChartURL" width="100%" height="550" [src]="publicationsWithPIDByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="publicationsWithPIDByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithPIDByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="publicationsWithPIDByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithPIDByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="publicationsWithPIDByFunderData" [chartTitle]="'OA Publications with PID by funder'"
-                                   [chartData]="publicationsWithPIDByFunderData" [color]="publicationColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
   </div>
 
-  <div class="licenceIndicator uk-margin-large-top">
+  <ul uk-tab class="uk-tab-large">
-    <h3 class="uk-margin-remove">Licence</h3>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./gold-green']">Gold/Green</a></li>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+    <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>
 
-      <div class="uk-grid-margin">
+  <router-outlet></router-outlet>
-        <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="publicationsWithLicenceByCountryChartURL" width="100%" height="550" [src]="publicationsWithLicenceByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="publicationsWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="publicationsWithLicenceByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="publicationsWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="publicationsWithLicenceByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="publicationsWithLicenceByFunderData" [chartTitle]="'OA Publications with licence by funder'"
-                                   [chartData]="publicationsWithLicenceByFunderData" [color]="publicationColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="goldIndicator uk-margin-large-top">
-    <h3 class="uk-margin-remove">Gold</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="goldPublicationsTimeline" width="100%" height="550" [src]="goldPublicationsTimeline"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="goldPublicationsByCountryChartURL" width="100%" height="550" [src]="goldPublicationsByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="goldPublicationsByDatasourceChartURL" width="100%" height="550" [src]="goldPublicationsByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="goldPublicationsByOrganizationChartURL" width="100%" height="550" [src]="goldPublicationsByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="goldPublicationsByFunderData" [chartTitle]="'Gold OA publications by funder'"
-                                   [chartData]="goldPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="greenIndicator uk-margin-large-top">
-    <h3 class="uk-margin-remove">Green</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="greenPublicationsTimeline" width="100%" height="550" [src]="greenPublicationsTimeline"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="greenPublicationsByCountryChartURL" width="100%" height="550" [src]="greenPublicationsByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="greenPublicationsByDatasourceChartURL" width="100%" height="550" [src]="greenPublicationsByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="greenPublicationsByOrganizationChartURL" width="100%" height="550" [src]="greenPublicationsByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="greenPublicationsByFunderData" [chartTitle]="'Green OA publications by funder'"
-                                   [chartData]="greenPublicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="greenVsGoldIndicator uk-margin-large-top">
-    <h3 class="uk-margin-remove">Green vs. Gold</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="greenVsGoldPublicationsChartURL" width="100%" height="550" [src]="greenVsGoldPublicationsChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="indicatorsTable uk-visible@m uk-margin-large-top">
-
-    <h3 class="">More details for publications</h3>
-
-    <div class="uk-margin-top uk-margin-bottom">
-      <label class="uk-margin-right">Show: </label>
-      <select class="md-input" #selectPublicationsContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
-        <option value="affiliated">affiliated</option>
-        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
-        <option value="deposited">deposited</option>
-        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
-      </select>
-      <!--<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:'#pubs-indicators-content-a-fade', animation: 'fade'}">
-              <li aria-expanded="true" class="uk-active">
-                <a href="#">
-                  <i class="fas fa-hashtag"></i>
-                </a>
-              </li>
-              <li aria-expanded="false" class="">
-                <a href="#">
-                  <i class="fas fa-percentage"></i>
-                </a>
-              </li>
-            </ul>
-
-            <ul id="pubs-indicators-content-a-fade" class="uk-switcher uk-margin" >
-              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
-                <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="publicationsAbsoluteTableData" [isPercentage]="false" [countries]="publicationsAbsoluteTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
-              </li>
-              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
-                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="publicationsPercentageTableData" [isPercentage]="true" [countries]="publicationsPercentageTableData" [view]="'openScience'" [entity]="'publication'"></app-countries-table>
-              </li>
-            </ul>
-
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-
-  </div>
 
 </div>

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

@@ -1,167 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import {
-  gradientStartColor,
-  publicationColor,
-  publicationPalette,
-} 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',
   templateUrl: './continent-os-publications.component.html',
 })
 
-export class ContinentOSPublicationsComponent implements OnInit {
+export class ContinentOSPublicationsComponent {}
-
-  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
-  private profileName = environment.profileName;
-
-  private publicationPalette = publicationPalette;
-
-  publicationColor = publicationColor;
-  gradientStartColor = gradientStartColor;
-
-
-  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[];
-
-  constructor(private dataService: DataService,
-              private dataHandlerService: DataHandlerService,
-              private route: ActivatedRoute,
-              private sanitizer: DomSanitizer) { }
-
-  ngOnInit(): void {
-
-    // 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);
-  }
-
-  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;
-      }
-    );
-  }
-
-  getContent(type: string, contentSelection: string): void {
-    this.publicationsTableContentSelection = contentSelection;
-    this.getPublicationsTableData(this.publicationsTableContentSelection);
-  }
-}

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

@@ -1,153 +1,15 @@
 <div>
 
-  <div class="pidIndicator">
+  <div class="uk-margin-large-top uk-margin-medium-bottom">
-    <h3 class="uk-margin-remove">PID</h3>
+    <h3>Software</h3>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="softwareWithPIDByCountryChartURL" width="100%" height="550" [src]="softwareWithPIDByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="softwareWithPIDByDatasourceChartURL" width="100%" height="550" [src]="softwareWithPIDByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="softwareWithPIDByOrganizationChartURL" width="100%" height="550" [src]="softwareWithPIDByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="softwareWithPIDByFunderData" [chartTitle]="'OS Software with PID by funder'"
-                                   [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
   </div>
 
-  <div class="licenceIndicator uk-margin-large-top">
+  <ul uk-tab class="uk-tab-large">
-    <h3 class="uk-margin-remove">Licence</h3>
+    <li [routerLinkActive]="['uk-active']"><a [routerLink]="['./licence']">Licence</a></li>
-    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+    <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>
 
-      <div class="uk-grid-margin">
+  <router-outlet></router-outlet>
-        <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="softwareWithLicenceByCountryChartURL" width="100%" height="550" [src]="softwareWithLicenceByCountryChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="softwareWithLicenceByDatasourceChartURL" width="100%" height="550" [src]="softwareWithLicenceByDatasourceChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <iframe *ngIf="softwareWithLicenceByOrganizationChartURL" width="100%" height="550" [src]="softwareWithLicenceByOrganizationChartURL"></iframe>
-          </div>
-        </div>
-      </div>
-
-      <div class="uk-grid-margin">
-        <div class="md-card chartCard">
-          <div class="md-card-content">
-            <app-treemap-highchart *ngIf="softwareWithLicenceByFunderData" [chartTitle]="'OS Software with licence by funder'"
-                                   [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <div class="indicatorsTable uk-visible@m uk-margin-large-top">
-
-    <h3 class="">More details for software</h3>
-
-    <div class="uk-margin-top uk-margin-bottom">
-      <label class="uk-margin-right">Show: </label>
-      <select class="md-input" #selectSoftwareContent (change)="getContent('software', selectSoftwareContent.value)" style="width: 230px; display: inline-block">
-        <option value="affiliated">affiliated</option>
-        <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>
-        <option value="deposited">deposited</option>
-        <option value="deposited_peer_reviewed">deposited peer reviewed</option>
-      </select>
-      <!--<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="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="softwareAbsoluteTableData" [isPercentage]="false" [countries]="softwareAbsoluteTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
-              </li>
-              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
-                <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>
-                <app-countries-table *ngIf="softwarePercentageTableData" [isPercentage]="true" [countries]="softwarePercentageTableData" [view]="'openScience'" [entity]="'software'"></app-countries-table>
-              </li>
-            </ul>
-
-          </div>
-        </div>
-
-      </div>
-
-    </div>
-
-
-  </div>
 
 </div>

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

@@ -1,118 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
-import {
-  gradientStartColor, softwareColor, softwarePalette
-} 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',
   templateUrl: './continent-os-software.component.html',
 })
 
-export class ContinentOSSoftwareComponent implements OnInit {
+export class ContinentOSSoftwareComponent {}
-
-  private chartsURL = environment.API_ENDPOINT + 'chart?json=';
-  private profileName = environment.profileName;
-
-  private softwarePalette = softwarePalette;
-
-  softwareColor = softwareColor;
-  gradientStartColor = gradientStartColor;
-
-  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[];
-
-  constructor(private dataService: DataService,
-              private dataHandlerService: DataHandlerService,
-              private route: ActivatedRoute,
-              private sanitizer: DomSanitizer) { }
-
-  ngOnInit(): void {
-
-    // 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);
-  }
-
-  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;
-      }
-    );
-  }
-
-  getContent(type: string, contentSelection: string): void {
-
-    this.softwareTableContentSelection = contentSelection;
-    this.getSoftwareTableData(this.softwareTableContentSelection);
-  }
-
-}

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

@@ -1,6 +1,14 @@
 <div class="uk-margin tabContent">
 
-  <div class="uk-grid uk-child-width-1-1">
+  <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">
@@ -12,147 +20,285 @@
 
   </div>
 
-  <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-1@s">
 
-    <div class="uk-grid-margin">
+  <!--OA Publications-->
+  <div class="uk-grid uk-child-width-1-1">
+
+    <div>
       <div class="md-card chartCard">
         <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="publicationsByCountryChartURL"></iframe>
-        </div>
-      </div>
-    </div>
 
-    <div class="uk-grid-margin">
+          <!--MOBILE & PAD PORTRAIT-->
-      <div class="md-card chartCard">
+          <div class="uk-hidden@m">
-        <div class="md-card-content">
+            <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">
-          <iframe width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
+              <label class="uk-margin-right">Show by: </label>
-        </div>
+              <select class="md-input" #selectPublicationsGroupBy (change)="getPublicationsGroupByMobile(selectPublicationsGroupBy.value)" style="display: inline-block">
-      </div>
+                <option value="country">country</option>
-    </div>
+                <option value="datasource">datasource</option>
+                <option value="organization">organization</option>
+                <option value="funder">funder</option>
+              </select>
+            </div>
 
-    <div class="uk-grid-margin">
+            <iframe *ngIf="publicationGroupByView==='country' && publicationsByCountryChartURLMobile"
-      <div class="md-card chartCard">
+                    width="100%" height="550" [src]="publicationsByCountryChartURLMobile"></iframe>
-        <div class="md-card-content">
+            <iframe *ngIf="publicationGroupByView==='datasource' && publicationsByDatasourceChartURLMobile"
-          <iframe width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
+                    width="100%" height="550" [src]="publicationsByDatasourceChartURLMobile"></iframe>
-        </div>
+            <iframe *ngIf="publicationGroupByView==='organization' && publicationsByOrganizationChartURLMobile"
-      </div>
+                    width="100%" height="550" [src]="publicationsByOrganizationChartURLMobile"></iframe>
-    </div>
+            <app-treemap-highchart *ngIf="publicationGroupByView==='funder' && publicationsByFunderData"
+                                   [chartTitle]="'Open Access publications'" [chartSubtitle]="'by funder (top funders)'"
+                                   [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
 
-    <div class="uk-grid-margin">
+          </div>
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="datasetsByCountryChartURL"></iframe>
-        </div>
-      </div>
-    </div>
 
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="datasetsByDatasourceChartURL"></iframe>
-        </div>
-      </div>
-    </div>
 
-    <div class="uk-grid-margin">
+          <!--LAPTOP & PAD LANDSCAPE-->
-      <div class="md-card chartCard">
+          <div class="uk-visible@m">
-        <div class="md-card-content">
+            <ul class="group-by-cdof uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin
-          <iframe width="100%" height="550" [src]="datasetsByOrganizationChartURL"></iframe>
+                data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">
-        </div>
+              <li class="uk-active"><a (click)="getPublicationsGroupBy('country')">Country</a></li>
-      </div>
+              <li><a (click)="getPublicationsGroupBy('datasource')">Datasource</a></li>
-    </div>
+              <li><a (click)="getPublicationsGroupBy('organization')">Organization</a></li>
+              <li><a (click)="getPublicationsGroupBy('funder')">Funder</a></li>
+            </ul>
 
-    <div class="uk-grid-margin">
+            <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">
-      <div class="md-card chartCard">
+              <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
-        <div class="md-card-content">
+                <iframe *ngIf="publicationsByCountryChartURL"
-          <iframe width="100%" height="550" [src]="softwareByCountryChartURL"></iframe>
+                        width="100%" height="400" [src]="publicationsByCountryChartURL"></iframe>
-        </div>
+              </li>
-      </div>
+              <li aria-hidden="true" style="animation-duration: 200ms;" class="">
-    </div>
+                <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 class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="softwareByDatasourceChartURL"></iframe>
-        </div>
-      </div>
-    </div>
 
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="softwareByOrganizationChartURL"></iframe>
-        </div>
-      </div>
-    </div>
-
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="otherByCountryChartURL"></iframe>
-        </div>
-      </div>
-    </div>
-
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="otherByDatasourceChartURL"></iframe>
-        </div>
-      </div>
-    </div>
-
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <iframe width="100%" height="550" [src]="otherByOrganizationChartURL"></iframe>
         </div>
       </div>
     </div>
 
   </div>
 
-  <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+  <!--OA Datasets-->
+  <div class="uk-grid uk-child-width-1-1">
 
-    <div class="uk-grid-margin">
+    <div>
       <div class="md-card chartCard">
         <div class="md-card-content">
-          <app-treemap-highchart *ngIf="publicationsByFunderData" [chartTitle]="'OA Publications by funder'"
+
-                                 [chartData]="publicationsByFunderData" [color]="publicationColor"></app-treemap-highchart>
+          <!--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 class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <app-treemap-highchart *ngIf="datasetsByFunderData" [chartTitle]="'OA Datasets by funder'"
-                                 [chartData]="datasetsByFunderData" [color]="datasetColor"></app-treemap-highchart>
-        </div>
-      </div>
-    </div>
-
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <app-treemap-highchart *ngIf="softwareByFunderData" [chartTitle]="'OS Software by funder'"
-                                 [chartData]="softwareByFunderData" [color]="softwareColor"></app-treemap-highchart>
-        </div>
-      </div>
-    </div>
-
-    <div class="uk-grid-margin">
-      <div class="md-card chartCard">
-        <div class="md-card-content">
-          <app-treemap-highchart *ngIf="otherByFunderData" [chartTitle]="'OA Other research products by funder'"
-                                 [chartData]="otherByFunderData" [color]="otherResearchProductsColor"></app-treemap-highchart>
-        </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>
 
-  <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->
 </div>

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import { datasetPalette, otherResearchProductsPalette, publicationColor, publicationPalette,
+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';
@@ -19,6 +19,7 @@ export class ContinentOverviewComponent implements OnInit {
   private profileName = environment.profileName;
 
   private publicationPalette = publicationPalette;
+  private publicationIndicatorsPalette = publicationIndicatorsPalette;
   private datasetPalette = datasetPalette;
   private softwarePalette = softwarePalette;
   private otherResearchProductsPalette = otherResearchProductsPalette;
@@ -29,32 +30,50 @@ export class ContinentOverviewComponent implements OnInit {
   otherResearchProductsColor = otherResearchProductsColor;
   gradientStartColor = gradientStartColor;
 
-
+  peerReviewedPublicationsOverTimeChartURL: SafeResourceUrl;
-  // 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[];
 
+
+  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,
@@ -62,38 +81,12 @@ export class ContinentOverviewComponent implements OnInit {
 
   ngOnInit(): void {
 
-    // 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":{"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.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.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.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.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.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.dataService.getFundersResultsByPublications().subscribe(
-    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 => {
@@ -124,5 +117,108 @@ export class ContinentOverviewComponent implements OnInit {
         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/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>

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

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  gradientStartColor,
+  softwareColor,
+  softwarePalette, softwareIndicatorsPalette, 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-software-indicators',
+  templateUrl: './country-collaboration-software-indicators.component.html',
+})
+
+export class CountryCollaborationSoftwareIndicatorsComponent 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/software/country-collaboration-software-routing.module.ts

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

src/app/pages/country/collaboration/software/country-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']"><a [routerLink]="['./co-authored']">Co-authored</a></li>
+  </ul>
+
+  <router-outlet></router-outlet>
+
+</div>

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

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