D-Net

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 { CountryOpenScienceRoutingModule } from './country-open-science-routing.module';

import { CountryOpenScienceComponent } from './country-open-science.component';

import { CountryOSPublicationsComponent } from './publications/country-os-publications.component';

import { CountryOSDatasetsComponent } from './datasets/country-os-datasets.component';

import { CountryOSSoftwareComponent } from './software/country-os-software.component';

import { CountryOSORPComponent } from './other-research-products/country-os-orp.component';

@NgModule ({

  imports: [

    CommonModule,

    CountryOpenScienceRoutingModule,

    ReusableComponentsModule,

  ],

  declarations: [

    CountryOpenScienceComponent,

    CountryOSPublicationsComponent,

    CountryOSDatasetsComponent,

    CountryOSSoftwareComponent,

    CountryOSORPComponent

  ],

  providers: [

    DataService,

    DataHandlerService

  ],

})

export class CountryOpenScienceModule {}

import {

  gradientStartColor,

  publicationColor,

  publicationPalette, resultsPalette

} from '../../../../chart-palettes';

import { Component, OnInit } from '@angular/core';

import { environment } from '../../../../../environments/environment';

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

import { TreemapHighchartsData } from '../../../../domain/treemap-highcharts-data';

import { DataHandlerService } from '../../../../services/data-handler.service';

import { DataService } from '../../../../services/data.service';

import { ActivatedRoute } from '@angular/router';

@Component({

  selector: 'app-country-os-publications',

  templateUrl: './country-os-publications.component.html',

})

export class CountryOSPublicationsComponent implements OnInit {

  private chartsURL = environment.API_ENDPOINT + 'chart?json=';

  private profileName = environment.profileName;

  private publicationPalette = publicationPalette;

  private resultsPalette = resultsPalette;

  publicationColor = publicationColor;

  gradientStartColor = gradientStartColor;

  countryCode: string;

  publicationsWithPIDTimeline: SafeResourceUrl;

  publicationsWithLicenceTimeline: SafeResourceUrl;

  goldPublicationsTimeline: SafeResourceUrl;

  greenPublicationsTimeline: 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;

  constructor(private dataService: DataService,

              private dataHandlerService: DataHandlerService,

              private route: ActivatedRoute,

              private sanitizer: DomSanitizer) { }

  ngOnInit(): void {

    this.route.parent.parent.parent.params.subscribe(params => {

      this.countryCode = params['countryCode'];

      // this.publicationsWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.publicationsWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["publication","${this.countryCode}"],"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.country","parameters":["${this.countryCode},"publication","${this.countryCode}","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.country","parameters":["${this.countryCode}","publication","${this.countryCode}","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.getFundersResultsByTypeForIndicatorForCountry('publication', 'pid', this.countryCode).subscribe(

        rawData => {

          this.publicationsWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);

        }, error => {

          console.log(error);

        }

      );

      this.dataService.getFundersResultsByTypeForIndicatorForCountry('publication', 'licence', this.countryCode).subscribe(

        rawData => {

          this.publicationsWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);

        }, error => {

          console.log(error);

        }

      );

      this.dataService.getFundersResultsByTypeForIndicatorForCountry('publication', 'gold', this.countryCode).subscribe(

        rawData => {

          this.goldPublicationsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);

        }, error => {

          console.log(error);

        }

      );

      this.dataService.getFundersResultsByTypeForIndicatorForCountry('publication', 'green', this.countryCode).subscribe(

        rawData => {

          this.greenPublicationsByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);

        }, error => {

          console.log(error);

        }

      );

    });

  }

}

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { ReusableComponentsModule } from '../../shared/reusablecomponents/reusable-components.module';

import { DataHandlerService } from '../../services/data-handler.service';

import { DataService } from '../../services/data.service';

import { CountryRoutingModule } from './country-routing.module';

import { CountryComponent } from './country.component';

import { CountryOverviewComponent } from './overview/country-overview.component';

@NgModule ({

  imports: [

    CommonModule,

    CountryRoutingModule,

    ReusableComponentsModule,

  ],

  declarations: [

    CountryComponent,

    CountryOverviewComponent,

  ],

  providers: [

    DataService,

    DataHandlerService

  ],

})

export class CountryModule {}

<div>

  <div class="pidIndicator">

    <h3 class="uk-margin-remove">PID</h3>

    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>

          </div>

        </div>

      </div>

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <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">

    <h3 class="uk-margin-remove">Licence</h3>

    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>

          </div>

        </div>

      </div>

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <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>

import {

  gradientStartColor,

  softwareColor, softwarePalette, resultsPalette

} from '../../../../chart-palettes';

import { Component, OnInit } from '@angular/core';

import { environment } from '../../../../../environments/environment';

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 { TreemapHighchartsData } from '../../../../domain/treemap-highcharts-data';

@Component({

  selector: 'app-country-os-software',

  templateUrl: './country-os-software.component.html',

})

export class CountryOSSoftwareComponent implements OnInit {

  private chartsURL = environment.API_ENDPOINT + 'chart?json=';

  private profileName = environment.profileName;

  private softwarePalette = softwarePalette;

  private resultsPalette = resultsPalette;

  softwareColor = softwareColor;

  gradientStartColor = gradientStartColor;

  countryCode: string;

  softwareWithPIDTimeline: SafeResourceUrl;

  softwareWithLicenceTimeline: SafeResourceUrl;

  softwareWithPIDByDatasourceChartURL: SafeResourceUrl;

  softwareWithLicenceByDatasourceChartURL: SafeResourceUrl;

  softwareWithPIDByOrganizationChartURL: SafeResourceUrl;

  softwareWithLicenceByOrganizationChartURL: SafeResourceUrl;

  softwareWithPIDByFunderData: TreemapHighchartsData[];

  softwareWithLicenceByFunderData: TreemapHighchartsData[];

  constructor(private dataService: DataService,

              private dataHandlerService: DataHandlerService,

              private route: ActivatedRoute,

              private sanitizer: DomSanitizer) { }

  ngOnInit(): void {

    this.route.parent.parent.parent.params.subscribe(params => {

      this.countryCode = params['countryCode'];

      // this.softwareWithPIDTimeline = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"OA publications","type":"column","query":{"name":"oso.results.pid_timeline.affiliated.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.softwareWithPIDByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + encodeURIComponent(`{"library":"HighCharts","chartDescription":{"queries":[{"name":"publications","type":"bar","query":{"name":"oso.results.pid.affiliated.bydatasource.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.country","parameters":["software","${this.countryCode}"],"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.getFundersResultsByTypeForIndicatorForCountry('software', 'pid', this.countryCode).subscribe(

        rawData => {

          this.softwareWithPIDByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);

        }, error => {

          console.log(error);

        }

      );

      this.dataService.getFundersResultsByTypeForIndicatorForCountry('software', 'licence', this.countryCode).subscribe(

        rawData => {

          this.softwareWithLicenceByFunderData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);

        }, error => {

          console.log(error);

        }

      );

    });

  }

}

<div>

  <div class="pidIndicator">

    <h3 class="uk-margin-remove">PID</h3>

    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <iframe *ngIf="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></iframe>

          </div>

        </div>

      </div>

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <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">

    <h3 class="uk-margin-remove">Licence</h3>

    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <iframe *ngIf="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></iframe>

          </div>

        </div>

      </div>

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <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>

<div>

  <div class="pidIndicator">

    <h3 class="uk-margin-remove">PID</h3>

    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>

          </div>

        </div>

      </div>

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <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">

    <h3 class="uk-margin-remove">Licence</h3>

    <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <iframe *ngIf="publicationsWithLicenceTimeline" width="100%" height="550" [src]="publicationsWithLicenceTimeline"></iframe>

          </div>

        </div>

      </div>

      <div class="uk-grid-margin">

        <div class="md-card chartCard">

          <div class="md-card-content">

            <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="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="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>

import { Component, OnInit } from '@angular/core';

import { DataService } from '../../services/data.service';

import { ActivatedRoute } from '@angular/router';

import { DataHandlerService } from '../../services/data-handler.service';

import { CountryPageOverviewData } from '../../domain/overview-map-data';

@Component({

  selector: 'app-country-page',

  templateUrl: './country.component.html',

})

export class CountryComponent implements OnInit {

  lastUpdateDate: string;

  countryCode: string;

  linkToCountryInOpenAIRE: string;

  countryPageOverviewData: CountryPageOverviewData;

  constructor(private dataService: DataService,

              private dataHandlerService: DataHandlerService,

              private route: ActivatedRoute) { }

  ngOnInit(): void {

    window.scroll(0, 0);

    this.dataService.getLastUpdateDate().subscribe(

      rawData => {

        this.lastUpdateDate = this.dataHandlerService.convertRawDataToLastUpdateDate(rawData);

      }, error => {

        console.log(error);

      }

    );

    this.route.params.subscribe(params => {

      this.countryCode = params['countryCode'];

      this.dataService.getCountryPageOverviewData(this.countryCode).subscribe(

        rawData => {

          this.countryPageOverviewData = this.dataHandlerService.convertRawDataToCountryPageOverviewData(rawData);

          if (this.countryPageOverviewData && this.countryPageOverviewData.name) {

            this.linkToCountryInOpenAIRE = 'https://www.openaire.eu/item/' + this.countryPageOverviewData.name.replace(' ', '-');

            // this.createChartURLs();

          }

        }, error => {

          console.log(error);

        }

      );

    });

  }

}

<div class="greySection">

  <section class="uk-padding-small" id="sect-continent-page">

    <div class="uk-container uk-container-expand uk-margin-medium-top">

      <!--LAPTOP & PAD LANDSCAPE-->

      <div class="uk-visible@m">

        <ul class="uk-breadcrumb">

          <li><a routerLink="/home">Home</a></li>

          <li><span>{{continentName | titlecase}}</span></li>

        </ul>

        <div *ngIf="continentName" class="">

          <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image" width="132" height="132">

          <div class="uk-inline uk-margin-left">

            <h1>{{continentName | titlecase}}</h1>

            <span class="lastUpdateInfo">Data Last Updated: </span>

            <span *ngIf="lastUpdateDate" class="lastUpdateInfo">{{lastUpdateDate}}</span>

          </div>

        </div>

      </div>

      <!--MOBILE & PAD PORTRAIT-->

      <div class="uk-hidden@m uk-text-center">

        <div *ngIf="continentName" class="">

          <img src="../../../assets/img/flags/{{continentName}}-flag.jpg" class="flag-image uk-display-block uk-margin-auto-left uk-margin-auto-right" width="103" height="103">

          <div class="uk-margin-top">

            <h1 class="uk-margin-small-bottom">{{continentName | titlecase}}</h1>

            <span class="lastUpdateInfo">Data Last Updated: 21 May 2020</span>

          </div>

        </div>

      </div>

    </div>

  </section>

  <section class="uk-padding-small uk-margin-top">

    <div class="uk-container uk-container-center uk-margin-medium-top">

      <!--LAPTOP & PAD LANDSCAPE-->

      <div class="uk-visible@m">

        <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">

          <!--PUBLICATIONS-->

          <ng-container *ngIf="europeOverviewData.publications?.percentage">

            <div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>

                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.publications.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 45 /100 + 'px'}">

              {{europeOverviewData.publications.percentage | number :'1.0-1'}}%

            </span>

                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.publications.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.publications.percentage * 30 /100 + 'px'}">Publications</span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">

            <div class="publicationsColumn uk-padding" style="height: 0%">

            </div>

          </ng-container>

          <!--DATASETS-->

          <ng-container *ngIf="europeOverviewData.datasets?.percentage">

            <div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>

                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.datasets.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 45 /100 + 'px'}">

              {{europeOverviewData.datasets.percentage | number :'1.0-1'}}%

            </span>

                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.datasets.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.datasets.percentage * 30 /100 + 'px'}">Datasets</span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">

            <div class="datasetsColumn" style="height: 0%">

            </div>

          </ng-container>

          <!--SOFTWARE-->

          <ng-container *ngIf="europeOverviewData.software?.percentage">

            <div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>

                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.software.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 45 /100 + 'px'}">

              {{europeOverviewData.software.percentage | number :'1.0-1'}}%

            </span>

                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.software.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.software.percentage * 30 /100 + 'px'}">Software</span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">

            <div class="softwareColumn" style="height: 0%">

            </div>

          </ng-container>

          <!--OTHER-->

          <ng-container *ngIf="europeOverviewData.other?.percentage">

            <div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>

                <span class="number" [style.font-size.px]="getNumberFontSize(europeOverviewData.other.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 45 /100 + 'px'}">

              {{europeOverviewData.other.percentage | number :'1.0-1'}}%

            </span>

                <span class="number" [style.font-size.px]="getEntityNameFontSize(europeOverviewData.other.percentage)"

                      [ngStyle]="{'margin-top' :europeOverviewData.other.percentage * 30 /100 + 'px'}">Other</span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">

            <div class="otherColumn" style="height: 0%">

            </div>

          </ng-container>

        </div>

        <hr class="entitiesDivider">

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 uk-margin-large-top">

          <div class="entityLegendContent">

            <div class="publicationsDot uk-inline"></div>

            <div class="uk-inline uk-margin-left">

              <span>

                <ng-container *ngIf="europeOverviewData.publications?.oa">OA: <span class="number">{{europeOverviewData.publications?.oa | number}}</span></ng-container><br>

                <ng-container *ngIf="europeOverviewData.publications?.total">Total: <span class="number">{{europeOverviewData.publications?.total | number}}</span></ng-container>

              </span>

            </div>

          </div>

          <div class="entityLegendContent">

            <div class="datasetsDot"></div>

            <div class="uk-inline uk-margin-left">

              <span>

                <ng-container *ngIf="europeOverviewData.datasets?.oa">OA: <span class="number">{{europeOverviewData.datasets?.oa | number}}</span></ng-container><br>

                <ng-container *ngIf="europeOverviewData.datasets?.total">Total: <span class="number">{{europeOverviewData.datasets?.total | number}}</span></ng-container>

              </span>

            </div>

          </div>

          <div class="entityLegendContent">

            <div class="softwareDot"></div>

            <div class="uk-inline uk-margin-left">

              <span>

                <ng-container *ngIf="europeOverviewData.software?.oa">OA: <span class="number">{{europeOverviewData.software?.oa | number}}</span></ng-container><br>

                <ng-container *ngIf="europeOverviewData.software?.total">Total: <span class="number">{{europeOverviewData.software?.total | number}}</span></ng-container>

              </span>

            </div>

          </div>

          <div class="entityLegendContent">

            <div class="otherDot"></div>

            <div class="uk-inline uk-margin-left">

              <span>

                <ng-container *ngIf="europeOverviewData.other?.oa">OA: <span class="number">{{europeOverviewData.other?.oa | number}}</span></ng-container><br>

                <ng-container *ngIf="europeOverviewData.other?.total">Total: <span class="number">{{europeOverviewData.other?.total | number}}</span></ng-container>

              </span>

            </div>

          </div>

        </div>

      </div>

      <!--MOBILE & PAD PORTRAIT-->

      <div class="uk-hidden@m uk-text-center">

        <div *ngIf="!europeOverviewData" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-5x loader" aria-hidden="true"></i></div>

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4 entitiesContainer">

          <!--PUBLICATIONS-->

          <ng-container *ngIf="europeOverviewData.publications?.percentage">

            <div class="publicationsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.publications.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/publications-icon-white.svg" [width]="getPublicationsIconWidth(europeOverviewData.publications.percentage)"></span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.publications || !europeOverviewData.publications.percentage">

            <div class="publicationsColumn uk-padding" style="height: 0%">

            </div>

          </ng-container>

          <!--DATASETS-->

          <ng-container *ngIf="europeOverviewData.datasets?.percentage">

            <div class="datasetsColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.datasets.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/datasets-icon-white.svg" [width]="getDatasetsIconWidth(europeOverviewData.datasets.percentage)"></span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.datasets || !europeOverviewData.datasets.percentage">

            <div class="datasetsColumn" style="height: 0%">

            </div>

          </ng-container>

          <!--SOFTWARE-->

          <ng-container *ngIf="europeOverviewData.software?.percentage">

            <div class="softwareColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.software.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/software-icon-white.svg" [width]="getSoftwareIconWidth(europeOverviewData.software.percentage)"></span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.software || !europeOverviewData.software.percentage">

            <div class="softwareColumn" style="height: 0%">

            </div>

          </ng-container>

          <!--OTHER-->

          <ng-container *ngIf="europeOverviewData.other?.percentage">

            <div class="otherColumn uk-padding" [style.height.%]="getHeight(europeOverviewData.other.percentage)">

              <div class="entityColumnContent">

                <span><img src="../../../assets/img/icons/other-icon-white.svg" [width]="getOtherIconWidth(europeOverviewData.other.percentage)"></span>

              </div>

            </div>

          </ng-container>

          <ng-container *ngIf="!europeOverviewData.other || !europeOverviewData.other.percentage">

            <div class="otherColumn" style="height: 0%">

            </div>

          </ng-container>

        </div>

        <hr class="entitiesDivider">

        <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-1 continentPageEntitiesOverview">

          <!--PUBLICATIONS-->

          <div *ngIf="europeOverviewData.publications?.percentage" style="z-index: 4;">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-flex uk-flex-space-between">

                  <div class="">

                    <img src="../../../assets/img/icons/publications-icon.svg" width="21">

                    <span class="publications entityName uk-margin-left">Publications</span>

                  </div>

                  <div class="number big">

                    {{europeOverviewData.publications.percentage | number : '1.0-1'}}%

                  </div>

                </div>

              </div>

            </div>

          </div>

          <!--DATASETS-->

          <div *ngIf="europeOverviewData.datasets?.percentage" style="z-index: 3;">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-flex uk-flex-space-between">

                  <div class="">

                    <img src="../../../assets/img/icons/datasets-icon.svg" width="17">

                    <span class="datasets entityName uk-margin-left">Datasets</span>

                  </div>

                  <div class="number big">

                    {{europeOverviewData.datasets.percentage | number : '1.0-1'}}%

                  </div>

                </div>

              </div>

            </div>

          </div>

          <!--SOFTWARE-->

          <div *ngIf="europeOverviewData.software?.percentage" style="z-index: 2;">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-flex uk-flex-space-between">

                  <div class="">

                    <img src="../../../assets/img/icons/software-icon.svg" width="19">

                    <span class="software entityName uk-margin-left">Software</span>

                  </div>

                  <div class="number big">

                    {{europeOverviewData.software.percentage | number : '1.0-1'}}%

                  </div>

                </div>

              </div>

            </div>

          </div>

          <!--OTHER-->

          <div *ngIf="europeOverviewData.other?.percentage" style="z-index: 1;">

            <div class="md-card">

              <div class="md-card-content">

                <div class="uk-flex uk-flex-space-between">

                  <div class="">

                    <img src="../../../assets/img/icons/other-icon.svg" width="20">

                    <span class="other entityName uk-margin-left">Other</span>

                  </div>

                  <div class="number big">

                    {{europeOverviewData.other.percentage | number : '1.0-1'}}%

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </section>

  <!--TABS SECTION-->

  <section class="section uk-margin-large-top" id="sect-tabs">

    <div class="uk-container uk-container-expand uk-container-center uk-scrollspy-init-inview uk-scrollspy-inview uk-animation-scale-up" data-uk-scrollspy="{cls:'uk-animation-scale-up uk-invisible',delay:300,topoffset:-100}">

      <div class="">

        <!--LAPTOP & PAD LANDSCAPE-->

        <ul class="uk-visible@m uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">

          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>

          <!--<li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['/continent/' + continentName + '/overview']">Overview</a></li>-->

          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>

          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>

          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>

          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>

          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->

        </ul>

        <!--MOBILE & PAD PORTRAIT-->

        <ul class="uk-hidden@m uk-tab" data-uk-tab="{connect:'#team_tabbed',animation: 'slide-bottom'}">

          <li [routerLinkActive]="['uk-active']" aria-expanded="true"><a [routerLink]="['./overview']">Overview</a></li>

          <li [routerLinkActive]="['uk-active']" aria-expanded="false"><a [routerLink]="['./open-science']">Open Science</a></li>

          <li class="uk-disabled" aria-expanded="false"><a href="#" data-uk-tooltip="{title: Stay tuned..; pos: top-left}">Collaboration</a></li>

          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Impact</a></li>

          <li class="uk-disabled" aria-expanded="false" data-uk-tooltip="Stay tuned.."><a href="#">Innovation</a></li>

          <!--<li class="uk-tab-responsive uk-active uk-hidden" aria-haspopup="true" aria-expanded="false"><a>Developers</a><div class="uk-dropdown uk-dropdown-small" aria-hidden="true"><ul class="uk-nav uk-nav-dropdown"></ul><div></div></div></li>-->

        </ul>

        <div class="dataContainer">

          <router-outlet></router-outlet>

        </div>

        <!--<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>

  </section>

</div>

import { RouterModule, Routes } from '@angular/router';

import { NgModule } from '@angular/core';

import { ContinentComponent } from './continent.component';

import { ContinentOverviewComponent } from './overview/continent-overview.compopnent';

const continentRoutes: Routes = [

  {

    path: ':continentName',

    component: ContinentComponent,

    children: [

      {

        path: '',

        redirectTo: 'overview',

        // pathMatch: 'full'

      },

      {

        path: 'overview',

        component: ContinentOverviewComponent

      },

      {

        path: 'open-science',

        loadChildren: () => import('./open-science/continent-open-science.module').then(m => m.ContinentOpenScienceModule),

      }

    ]

  }

];

@NgModule ({

  imports: [RouterModule.forChild(continentRoutes)],

  exports: [RouterModule]

})

export class ContinentRoutingModule {}

<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" class="uk-active">

    <a href="#" (click)="changeView('absolute')">

      <i class="fas fa-hashtag"></i>

    </a>

  </li>

  <li aria-expanded="false" class="">

    <a href="#" (click)="changeView('percentage')">

      <i class="fas fa-percentage"></i>

    </a>

  </li>

  <li aria-expanded="false" class="">

    <a href="#" (click)="changeView('graph')">

      <i class="fas fa-chart-line"></i>

    </a>

  </li>

</ul>

<div class="goToDetailedViewLink uk-text-right">

  <a class="" [routerLink]="['/continent', 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>

</div>

<hr>

<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >

  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">

    <div id="table-absolute" class="">

      <div class="uk-margin-bottom">

        <label class="uk-margin-right">Show: </label>

        <select class="md-input" #selectContentAbsolute (change)="getContentAbsolute(selectContentAbsolute.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 *ngIf="loadingAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>

      <app-countries-table *ngIf="tableAbsoluteData" [isPercentage]="false" [countries]="tableAbsoluteData" [view]="'overview'"></app-countries-table>

    </div>

  </li>

  <li aria-hidden="true" style="animation-duration: 200ms;" class="">

    <div id="table-percentage" class="">

      <div class="uk-margin-bottom">

        <label class="uk-margin-right">Show: </label>

        <select class="md-input" #selectContentPercentage (change)="getContentPercentage(selectContentPercentage.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 *ngIf="loadingPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>

      <app-countries-table *ngIf="tablePercentageData" [isPercentage]="true" [countries]="tablePercentageData" [view]="'overview'"></app-countries-table>

    </div>

  </li>

  <li aria-hidden="true" style="animation-duration: 200ms;" class="">

    <div id="graphs">

      <div *ngIf="europeOverviewData" class="uk-grid uk-child-width-1-4@m uk-child-width-1-4@l uk-child-width-1-2@s uk-grid-match">

        <div>

          <div class="md-card">

            <div class="md-card-content">

              <svg *ngIf="europeOverviewData.publications?.percentage" viewBox="0 0 36 36" class="circular-chart publications">

                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.publications.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <text x="18" y="20.35" class="percentage">{{europeOverviewData.publications.percentage | number : '1.0-1'}}%</text>

              </svg>

              <div class="uk-margin-small-top uk-text-center">OA publications</div>

            </div>

          </div>

        </div>

        <div>

          <div class="md-card">

            <div class="md-card-content">

              <svg *ngIf="europeOverviewData.datasets?.percentage" viewBox="0 0 36 36" class="circular-chart datasets">

                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.datasets.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <text x="18" y="20.35" class="percentage">{{europeOverviewData.datasets.percentage | number : '1.0-1'}}%</text>

              </svg>

              <div class="uk-margin-small-top uk-text-center">OA datasets</div>

            </div>

          </div>

        </div>

        <div>

          <div class="md-card">

            <div class="md-card-content">

              <svg *ngIf="europeOverviewData.software?.percentage" viewBox="0 0 36 36" class="circular-chart software">

                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.software.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <text x="18" y="20.35" class="percentage">{{europeOverviewData.software.percentage | number : '1.0-1'}}%</text>

              </svg>

              <div class="uk-margin-small-top uk-text-center">OS software</div>

            </div>

          </div>

        </div>

        <div>

          <div class="md-card">

            <div class="md-card-content">

              <svg *ngIf="europeOverviewData.other?.percentage" viewBox="0 0 36 36" class="circular-chart other">

                <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <path class="circle" attr.stroke-dasharray="{{europeOverviewData.other.percentage}}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>

                <text x="18" y="20.35" class="percentage">{{europeOverviewData.other.percentage | number : '1.0-1'}}%</text>

              </svg>

              <div class="uk-margin-small-top uk-text-center">OA other research products</div>

            </div>

          </div>

        </div>

      </div>

      <div class="uk-grid uk-grid-row-medium uk-margin-small-top 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="oaNoaPublicationsTimelineURL" width="100%" height="350" [src]="oaNoaPublicationsTimelineURL"></iframe>

            </div>

          </div>

        </div>

        <div class="uk-grid-margin">

          <div class="md-card chartCard">

            <div class="md-card-content">

              <iframe *ngIf="oaNoaDatasetsTimelineURL" width="100%" height="350" [src]="oaNoaDatasetsTimelineURL"></iframe>

            </div>

          </div>

        </div>

        <div class="uk-grid-margin">

          <div class="md-card chartCard">

            <div class="md-card-content">

              <iframe *ngIf="oaNoaSoftwareTimelineURL" width="100%" height="350" [src]="oaNoaSoftwareTimelineURL"></iframe>

            </div>

          </div>

        </div>

        <div class="uk-grid-margin">

          <div class="md-card chartCard">

            <div class="md-card-content">

              <iframe *ngIf="oaNoaOtherTimelineURL" width="100%" height="350" [src]="oaNoaOtherTimelineURL"></iframe>

            </div>

          </div>

        </div>

      </div>

      <div class="uk-grid uk-grid-row-medium uk-margin-small-top uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@s">

        <div class="uk-grid-margin">

          <div class="md-card chartCard">

            <div class="md-card-content">

              <app-treemap-highchart *ngIf="fundersResultsData" [chartTitle]="'Research results by funder'"

                                     [chartData]="fundersResultsData" [color]="resultColor"></app-treemap-highchart>

            </div>

          </div>

        </div>

      </div>

    </div>

  </li>

</ul>

<div class="uk-margin tabContent">

  <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]="publicationsByTypeChartURL"></iframe>

        </div>

      </div>

    </div>

  </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">

      <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">

      <div class="md-card chartCard">

        <div class="md-card-content">

          <iframe width="100%" height="550" [src]="publicationsByDatasourceChartURL"></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]="publicationsByOrganizationChartURL"></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]="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">

      <div class="md-card chartCard">

        <div class="md-card-content">

          <iframe width="100%" height="550" [src]="datasetsByOrganizationChartURL"></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]="softwareByCountryChartURL"></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]="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">

    <div class="uk-grid-margin">

      <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>

        </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>

  <!--<app-countries-table [isPercentage]="false" [type]="'overview'" [countries]="overviewData.countries"></app-countries-table>-->

</div>

import {Component, OnInit} from '@angular/core';

import { datasetPalette, otherResearchProductsPalette, publicationColor, publicationPalette,

  softwarePalette, datasetColor, softwareColor, otherResearchProductsColor, gradientStartColor } from '../../../chart-palettes';

import {environment} from '../../../../environments/environment';

import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

import {TreemapHighchartsData} from '../../../domain/treemap-highcharts-data';

import {DataHandlerService} from '../../../services/data-handler.service';

import {DataService} from '../../../services/data.service';

import {ActivatedRoute} from '@angular/router';

@Component({

  selector: 'app-continent-overview',