D-Net

          <div class="countryPageHeader">

            <div *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="">

              <img src="../../../assets/img/flags/{{countryCode | lowercase}}-flag-round.png" class="flag-image" width="132" height="132">

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

                <h1>{{countryPageOverviewData.name}}</h1>

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

              </div>

            </div>

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

              <a class=""><i class="fas fa-code uk-margin-small-right"></i>Embed</a>

              <!--<a class="uk-margin-left"><i class="fas fa-download uk-margin-small-right"></i>Download CSV</a>-->

              <a class="uk-margin-left"><i class="fas fa-file-pdf uk-margin-small-right"></i>Download PDF</a>

            </div>

                      <!--<div class="uk-float-right uk-margin-small-right">-->

                      <!--<img src="../../../assets/img/icons/publications-icon.svg" width="40" height="40">-->

                      <!--</div>-->

                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsAffiliated || !countryPageOverviewData.publicationsAffiliated.oa" class="number">--</span>

                        <span *ngIf="countryPageOverviewData?.publicationsAffiliated?.oa" class="number">{{countryPageOverviewData.publicationsAffiliated.oa | number}}</span>

                      <span class=""><i>OA publications affiliated to an organization in the country</i></span>

                    <div *ngIf="countryPageOverviewData?.publicationsAffiliated?.percentage" class="uk-margin-top">

                      <span class="number">{{countryPageOverviewData.publicationsAffiliated.percentage | number :'1.0-1'}}%</span> OA

                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsAffiliated.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>

                      <div class="uk-float-right uk-margin-small-right">

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

                      </div>

                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.publicationsDeposited || !countryPageOverviewData.publicationsDeposited.oa" class="number">--</span>

                        <span *ngIf="countryPageOverviewData?.publicationsDeposited?.oa" class="number">{{countryPageOverviewData.publicationsDeposited.oa | number}}</span>

                      <span class=""><i>OA publications from institutional repositories</i></span>

                    <div *ngIf="countryPageOverviewData?.publicationsDeposited?.percentage" class="uk-margin-top">

                      <span class="number">{{countryPageOverviewData.publicationsDeposited.percentage | number :'1.0-1'}}%</span> OA

                        <div [ngStyle]="{'width': countryPageOverviewData.publicationsDeposited.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>

                      <!--<div class="uk-float-right uk-margin-small-right">-->

                      <!--<img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">-->

                      <!--</div>-->

                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsAffiliated || !countryPageOverviewData.datasetsAffiliated.oa" class="number">--</span>

                        <span *ngIf="countryPageOverviewData?.datasetsAffiliated?.oa" class="number">{{countryPageOverviewData.datasetsAffiliated.oa | number}}</span>

                      <span class=""><i>OA datasets affiliated to an organization in the country</i></span>

                    <div *ngIf="countryPageOverviewData?.datasetsAffiliated?.percentage" class="uk-margin-top">

                      <span class="number">{{countryPageOverviewData.datasetsAffiliated.percentage | number :'1.0-1'}}%</span> OA

                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsAffiliated.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>

                      <div class="uk-float-right uk-margin-small-right">

                        <img src="../../../assets/img/icons/datasets-icon.svg" width="33" height="40">

                      </div>

                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.datasetsDeposited || !countryPageOverviewData.datasetsDeposited.oa" class="number">--</span>

                        <span *ngIf="countryPageOverviewData?.datasetsDeposited?.oa" class="number">{{countryPageOverviewData.datasetsDeposited.oa | number}}</span>

                      <span class=""><i>OA datasets from institutional repositories</i></span>

                    <div *ngIf="countryPageOverviewData?.datasetsDeposited?.percentage" class="uk-margin-top">

                      <span class="number">{{countryPageOverviewData.datasetsDeposited.percentage | number :'1.0-1'}}%</span> OA

                        <div [ngStyle]="{'width': countryPageOverviewData.datasetsDeposited.percentage+'%'}" class="progress-bar progress-bar-datasets animate-progress-bar"></div>

                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.repositories || !countryPageOverviewData.repositories.oa" class="number">--</span>

                        <span *ngIf="countryPageOverviewData?.repositories?.oa" class="number">{{countryPageOverviewData.repositories.oa | number}}</span>

                    <div *ngIf="countryPageOverviewData?.repositories?.percentage" class="uk-margin-top">

                      <span class="number">{{countryPageOverviewData.repositories.percentage | number :'1.0-1'}}%</span> Validated

                        <div [ngStyle]="{'width': countryPageOverviewData.repositories.percentage+'%'}" class="progress-bar progress-bar-repositories animate-progress-bar"></div>

                        <span *ngIf="!countryPageOverviewData || !countryPageOverviewData.journals || !countryPageOverviewData.journals.oa" class="number">--</span>

                        <span *ngIf="countryPageOverviewData?.journals?.oa" class="number">{{countryPageOverviewData.journals.oa | number}}</span>

                    <div *ngIf="countryPageOverviewData?.journals?.percentage" class="uk-margin-top">

                      <span class="number">{{countryPageOverviewData.journals.percentage | number :'1.0-1'}}%</span> Validated

                        <div [ngStyle]="{'width': countryPageOverviewData.journals.percentage+'%'}" class="progress-bar progress-bar-journals animate-progress-bar"></div>

              Research overview

                <span class="number primary" *ngIf="countryPageOverviewData?.funders">{{countryPageOverviewData.funders}}</span>

                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.funders">--</span>

                <span class="number primary" *ngIf="countryPageOverviewData?.fundingOrganizations">{{countryPageOverviewData.fundingOrganizations}}</span>

                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.fundingOrganizations">--</span>

                <span class="number primary" *ngIf="countryPageOverviewData?.ec_fundedOrganizations">{{countryPageOverviewData.ec_fundedOrganizations}}</span>

                <span class="number primary" *ngIf="!countryPageOverviewData || !countryPageOverviewData.ec_fundedOrganizations">--</span>

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

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

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

  countryCode: string;

  countryPageOverviewData: CountryPageOverviewData;

              private dataHandlerService: DataHandlerService,

    window.scroll(0, 0);

    this.countryCode = this.route.snapshot.paramMap.get('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 => {

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

    // this.dataService.getCountryData(this.countryName).subscribe(

    //   overviewData => {

    //     this.overviewData = overviewData;

    //     this.countryData = this.overviewData.countries.filter(x => x.country === this.countryName)[0];

    //   },

    //   error => {

    //     console.log(error);

    //   }

    // );

  }

  createChartURLs() {

    this.greenGoldLineChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Green%20OA%22%2C%22type%22%3A%22line%22%2C%22query%22%3A%7B%22name%22%3A%22oso.green.year.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%2C%7B%22name%22%3A%22Gold%20OA%22%2C%22type%22%3A%22line%22%2C%22query%22%3A%7B%22name%22%3A%22oso.gold.year.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Green%20vs%20Gold%20Publications%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22year%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%2C%22colors%22%3A%5B%22%2398A886%22%2C%22%23D3BF3B%22%2C%22%232f7ed8%22%2C%22%230d233a%22%2C%22%238bbc21%22%2C%22%23910000%22%2C%22%231aadce%22%2C%22%23492970%22%2C%22%23f28f43%22%2C%22%2377a1e5%22%2C%22%23c42525%22%2C%22%23a6c96a%22%5D%7D%7D`);

    this.goldOrganisationsChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Gold%20OA%22%2C%22type%22%3A%22bar%22%2C%22color%22%3A%22%23D3BF3B%22%2C%22query%22%3A%7B%22name%22%3A%22oso.gold.organization.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Gold%20Open%20Access%22%7D%2C%22subtitle%22%3A%7B%22text%22%3A%22Top%2015%20Organizations%22%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Organizations%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);

    this.greenOrganisationsChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Green%20OA%22%2C%22type%22%3A%22bar%22%2C%22color%22%3A%22%2398A886%22%2C%22query%22%3A%7B%22name%22%3A%22oso.green.organization.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Green%20Open%20Access%22%7D%2C%22subtitle%22%3A%7B%22text%22%3A%22Top%2015%20Organizations%22%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22Organizations%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%7D%7D`);

    this.publicationsDataSetsSoftwareByYearGraphURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22line%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oapublications.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%2C%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22line%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oadatasets.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%2C%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22line%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oasoftwares.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20vs%20Datasets%20vs%20Software%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22somethings%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%2C%22colors%22%3A%5B%22%2319647E%22%2C%22%23019A85%22%2C%22%2399B2DD%22%2C%22%232f7ed8%22%2C%22%230d233a%22%2C%22%238bbc21%22%2C%22%23910000%22%2C%22%231aadce%22%2C%22%23492970%22%2C%22%23f28f43%22%2C%22%2377a1e5%22%2C%22%23c42525%22%2C%22%23a6c96a%22%5D%7D%7D`);

    this.publicationsDataSetsSoftwareByFunderGraphURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oapublications.funder.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%2C%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oadatasets.funder.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%2C%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oasoftwares.funder.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20vs%20Datasets%20vs%20Software%22%7D%2C%22subtitle%22%3A%7B%22text%22%3A%22by%20funder%22%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22somethings%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22funder%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Atrue%2C%22align%22%3A%22center%22%2C%22verticalAlign%22%3A%22bottom%22%2C%22layout%22%3A%22horizontal%22%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%2C%22colors%22%3A%5B%22%2319647E%22%2C%22%23019A85%22%2C%22%2399B2DD%22%2C%22%232f7ed8%22%2C%22%230d233a%22%2C%22%238bbc21%22%2C%22%23910000%22%2C%22%231aadce%22%2C%22%23492970%22%2C%22%23f28f43%22%2C%22%2377a1e5%22%2C%22%23c42525%22%2C%22%23a6c96a%22%5D%7D%7D`);

    this.topProjectsByPublicationsGraphURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.top10.projects.publications.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Top%2010%20Projects%22%7D%2C%22subtitle%22%3A%7B%22text%22%3A%22by%20publications%22%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22publications%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22projects%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Afalse%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%2C%22colors%22%3A%5B%22%2319647E%22%2C%22%232f7ed8%22%2C%22%230d233a%22%2C%22%238bbc21%22%2C%22%23910000%22%2C%22%231aadce%22%2C%22%23492970%22%2C%22%23f28f43%22%2C%22%2377a1e5%22%2C%22%23c42525%22%2C%22%23a6c96a%22%5D%7D%7D`);

    this.topProjectsByDatasetsGraphURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.top10.projects.datasets.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Top%2010%20Projects%22%7D%2C%22subtitle%22%3A%7B%22text%22%3A%22by%20datasets%22%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22datasets%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22projects%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Afalse%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%2C%22colors%22%3A%5B%22%23019A85%22%2C%22%232f7ed8%22%2C%22%230d233a%22%2C%22%238bbc21%22%2C%22%23910000%22%2C%22%231aadce%22%2C%22%23492970%22%2C%22%23f28f43%22%2C%22%2377a1e5%22%2C%22%23c42525%22%2C%22%23a6c96a%22%5D%7D%7D`);

    this.topProjectsBySoftwareGraphURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.top10.projects.software.` + this.countryPageOverviewData.name.replace(' ', '') + `%22%7D%7D%5D%2C%22chart%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFFFF%22%2C%22borderColor%22%3A%22%23335cadff%22%2C%22borderRadius%22%3A0%2C%22borderWidth%22%3A0%2C%22plotBorderColor%22%3A%22%23ccccccff%22%2C%22plotBorderWidth%22%3A0%7D%2C%22title%22%3A%7B%22text%22%3A%22Top%2010%20Projects%22%7D%2C%22subtitle%22%3A%7B%22text%22%3A%22by%20software%22%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22software%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22projects%22%7D%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22exporting%22%3A%7B%22enabled%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%7D%7D%7D%2C%22legend%22%3A%7B%22enabled%22%3Afalse%7D%2C%22credits%22%3A%7B%22href%22%3Anull%2C%22enabled%22%3Atrue%2C%22text%22%3A%22Created%20by%20OpenAIRE%20via%20HighCharts%22%7D%2C%22colors%22%3A%5B%22%2399B2DD%22%2C%22%232f7ed8%22%2C%22%230d233a%22%2C%22%238bbc21%22%2C%22%23910000%22%2C%22%231aadce%22%2C%22%23492970%22%2C%22%23f28f43%22%2C%22%2377a1e5%22%2C%22%23c42525%22%2C%22%23a6c96a%22%5D%7D%7D`);

    this.publicationsDataSetsSoftwareByOrganisationTableURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/table?json=%7B%22library%22%3A%22GoogleCharts%22%2C%22tableDescription%22%3A%7B%22queriesInfo%22%3A%5B%7B%22name%22%3A%22Data%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22select%22%3A%5B%7B%22field%22%3A%22result%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22result.datasource.organization.name%22%2C%22aggregate%22%3Anull%7D%2C%7B%22field%22%3A%22result.type%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22result.datasource.organization.country.name%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22` + this.countryPageOverviewData.name + `%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22result.access%20mode%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Open%20Access%22%5D%7D%2C%7B%22field%22%3A%22result.access%20mode%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Open%20Source%22%5D%7D%5D%2C%22op%22%3A%22OR%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22result.type%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22other%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22result%22%2C%22profile%22%3A%22OpenAIRE%20original%22%2C%22limit%22%3A%220%22%7D%7D%5D%2C%22columns%22%3A%5B%5D%2C%22options%22%3A%7B%22hAxis%22%3A%7B%7D%2C%22vAxis%22%3A%7B%7D%2C%22chartArea%22%3A%7B%7D%2C%22series%22%3A%5B%5D%2C%22exporting%22%3Afalse%2C%22pageSize%22%3A30%2C%22isStacked%22%3A%22false%22%7D%7D%7D`);

    this.publicationsDataSetsSoftwareByRepoTableURL = this.sanitizer.bypassSecurityTrustResourceUrl(`http://88.197.53.71:8080/stats-api/table?json=%7B%22library%22%3A%22GoogleCharts%22%2C%22tableDescription%22%3A%7B%22queriesInfo%22%3A%5B%7B%22name%22%3A%22Data%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22select%22%3A%5B%7B%22field%22%3A%22result%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22result.datasource.name%22%2C%22aggregate%22%3Anull%7D%2C%7B%22field%22%3A%22result.type%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22result.datasource.organization.country.name%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22` + this.countryPageOverviewData.name + `%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22result.access%20mode%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Open%20Access%22%5D%7D%2C%7B%22field%22%3A%22result.access%20mode%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Open%20Source%22%5D%7D%5D%2C%22op%22%3A%22OR%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22result.type%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22other%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22result%22%2C%22profile%22%3A%22OpenAIRE%20original%22%2C%22limit%22%3A%220%22%7D%7D%5D%2C%22columns%22%3A%5B%5D%2C%22options%22%3A%7B%22hAxis%22%3A%7B%7D%2C%22vAxis%22%3A%7B%7D%2C%22chartArea%22%3A%7B%7D%2C%22series%22%3A%5B%5D%2C%22exporting%22%3Afalse%2C%22pageSize%22%3A30%2C%22isStacked%22%3A%22false%22%7D%7D%7D`);

<div class="greySection">

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

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

      <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">Info Last Updated: 21 May 2020</span>

        </div>

      </div>

  </section>

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

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

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

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

        </ng-container>

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

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

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

        </ng-container>

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

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

        </ng-container>

      </div>

      <hr class="entitiesDivider">

      <div 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>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>

          </div>

        </div>

        <div class="entityLegendContent">

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

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

            <span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>

          </div>

        </div>

        <div class="entityLegendContent">

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

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

            <span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>

          </div>

        </div>

        <div class="entityLegendContent">

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

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

            <span>Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>

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

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

          <li class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>

          <li aria-expanded="false"><a href="#">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>

        <ul *ngIf="overviewData?.countries" id="team_tabbed" class="uk-switcher dataContainer">

          <!--OVERVIEW tab-->

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

            <div class="uk-margin tabContent">

              <app-data-view></app-data-view>

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

            </div>

          </li>

          <!--OPEN SCIENCE tab-->

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

            <div class="uk-margin tabContent">

              <app-data-view></app-data-view>

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

            </div>

          </li>

          <li aria-hidden="true">

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

            </div>

          </li>

          <li aria-hidden="true">

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

            </div>

          </li>

          <li aria-hidden="true">

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

            </div>

          </li>

        </ul>

      </div>

    </div>

  </section>

</div>

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

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

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

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

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

  europeOverviewData: EuropeData;

              private dataHandlerService: DataHandlerService,

    this.dataService.getEuropeOAPercentages().subscribe(

      rawData => {

        this.europeOverviewData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);

      }, error => {

        console.log(error);

      }

    );

  getHeight(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage) * 1.5;

    } else {

      return Math.round(percentage);

    }

  }

  getNumberFontSize(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage * 45 / 100) * 1.5;

    } else {

      return Math.round(percentage * 45 / 100);

    }

  }

  getEntityNameFontSize(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage * 30 / 100) * 1.5;

    } else {

      return Math.round(percentage * 30 / 100);

    }

  }

  getPublicationsIconWidth(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage * 60 / 100) * 1.5;

    } else {

      return Math.round(percentage * 60 / 100);

    }

  }

  getDatasetsIconWidth(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage * 45 / 100) * 1.5;

    } else {

      return Math.round(percentage * 45 / 100);

    }

  }

  getSoftwareIconWidth(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage * 50 / 100) * 1.5;

    } else {

      return Math.round(percentage * 50 / 100);

    }

  }

  getOtherIconWidth(percentage: number) {

    if (percentage < 50) {

      return Math.round(percentage * 45 / 100) * 1.5;

    } else {

      return Math.round(percentage * 45 / 100);

    }

  }

          <ng-container *ngIf="isPercentage">{{countryOverview.repositories | number :'1.0-1'}}%</ng-container>

          <ng-container *ngIf="!isPercentage">{{countryOverview.repositories | number}}</ng-container>

          <ng-container *ngIf="isPercentage">{{countryOverview.journals | number :'1.0-1'}}%</ng-container>

          <ng-container *ngIf="!isPercentage">{{countryOverview.journals | number}}</ng-container>

          <ng-container *ngIf="isPercentage">{{countryOverview.publications | number :'1.0-1'}}%</ng-container>

          <ng-container *ngIf="!isPercentage">{{countryOverview.publications | number}}</ng-container>

          <ng-container *ngIf="isPercentage">{{countryOverview.datasets | number :'1.0-1'}}%</ng-container>

          <ng-container *ngIf="!isPercentage">{{countryOverview.datasets | number}}</ng-container>

          <ng-container *ngIf="isPercentage">{{countryOverview.software | number :'1.0-1'}}%</ng-container>

          <ng-container *ngIf="!isPercentage">{{countryOverview.software | number}}</ng-container>

          <ng-container *ngIf="isPercentage">{{countryOverview.other | number :'1.0-1'}}%</ng-container>

          <ng-container *ngIf="!isPercentage">{{countryOverview.other | number}}</ng-container>

  joinedRepositoriesMap: Map<string, JoinedMapData>;

  joinedJournalsMap: Map<string, JoinedMapData>;

        this.joinedRepositoriesMap = this.dataHandlerService.createJoinedRepositoriesCountryMap(rawData);

        this.joinedJournalsMap = this.dataHandlerService.createJoinedJournalsCountryMap(rawData);

      tooltip += '<div class="indicator uk-margin-small-top">' +

        '<span class="number">' + this.joinedRepositoriesMap.get(params.name).simple.toLocaleString() + '</span>' +

        '<span><i>repositories</i></span></div>';

        '<span><i>journals</i> from DOAJ</span></div>';

      tooltip += '<div class="indicator uk-margin-small-top">' +

        '<span class="number">' + this.joinedJournalsMap.get(params.name).simple.toLocaleString() + '</span>' +

        '<span><i>journals</i></span></div>';

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

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

  loadingAbsoluteTable: boolean = true;

  loadingPercentageTable: boolean = true;

    this.getPercentageData();

    this.loadingAbsoluteTable = true;

        this.loadingAbsoluteTable = false;

        this.loadingAbsoluteTable = false;

    this.loadingPercentageTable = true;

    this.dataService.getOverviewTablePercentageData(this.contentPercentageSelection).subscribe(

        this.tablePercentageData = this.dataHandlerService.convertRawDataToPercentageTableData(rawData);

        this.loadingPercentageTable = false;

        this.loadingPercentageTable = false;

import {

  CountryOverviewData,

  CountryMapData,

  EuropeData,

  OverviewMapData,

  CountryTableData,

  CountryPageOverviewData

} from '../domain/overview-map-data';

      } else if (series.series.query.name === 'new.oso.repositories.doar_re3data') {

      } else if (series.series.query.name === 'new.oso.journals.doaj') {

  public createJoinedRepositoriesCountryMap(rawData: RawData) {

    const joinedRepositoriesMap = new Map();

    for (const series of rawData.datasets) {

      if (series.series.query.name === 'new.oso.repositories.doar_re3data') {

        for (const rowResult of series.series.result) {

          if (joinedRepositoriesMap.has(rowResult.row[1])) {

            const simple = joinedRepositoriesMap.get(rowResult.row[1]).simple;

            joinedRepositoriesMap.delete(rowResult.row[1]);

            joinedRepositoriesMap.set(rowResult.row[1], {countryName: rowResult.row[1], countryCode: rowResult.row[2],

              doar_re3data: Number(rowResult.row[0]), simple: simple});

          } else {

            joinedRepositoriesMap.set(rowResult.row[1], {countryName: rowResult.row[1], countryCode: rowResult.row[2],

              doar_re3data: Number(rowResult.row[0]), simple: 0});

          }

        }

      } else if (series.series.query.name === 'new.oso.repositories') {

        for (const rowResult of series.series.result) {

          if (joinedRepositoriesMap.has(rowResult.row[1])) {

            const doar_re3data = joinedRepositoriesMap.get(rowResult.row[1]).doar_re3data;

            joinedRepositoriesMap.delete(rowResult.row[1]);

            joinedRepositoriesMap.set(rowResult.row[1], {countryName: rowResult.row[1], countryCode: rowResult.row[2],

              doar_re3data: doar_re3data, simple: Number(rowResult.row[0])});

          }

          joinedRepositoriesMap.set(rowResult.row[1], { countryName: rowResult.row[1], countryCode: rowResult.row[2],

            doar_re3data: 0, simple: Number(rowResult.row[0])});

        }

      }

    }

    return joinedRepositoriesMap;

  }

  public createJoinedJournalsCountryMap(rawData: RawData) {

    const joinedJournalsMap = new Map();

    for (const series of rawData.datasets) {

      if (series.series.query.name === 'new.oso.journals.doaj') {

        for (const rowResult of series.series.result) {

          if (joinedJournalsMap.has(rowResult.row[1])) {

            const simple = joinedJournalsMap.get(rowResult.row[1]).simple;

            joinedJournalsMap.delete(rowResult.row[1]);

            joinedJournalsMap.set(rowResult.row[1], {countryName: rowResult.row[1], countryCode: rowResult.row[2],

              doaj: Number(rowResult.row[0]), simple: simple});

          } else {

            joinedJournalsMap.set(rowResult.row[1], {countryName: rowResult.row[1], countryCode: rowResult.row[2],

              doaj: Number(rowResult.row[0]), simple: 0});

          }

        }

      } else if (series.series.query.name === 'new.oso.journals') {

        for (const rowResult of series.series.result) {

          if (joinedJournalsMap.has(rowResult.row[1])) {

            const doaj = joinedJournalsMap.get(rowResult.row[1]).doaj;

            joinedJournalsMap.delete(rowResult.row[1]);

            joinedJournalsMap.set(rowResult.row[1], {countryName: rowResult.row[1], countryCode: rowResult.row[2],

              doaj: doaj, simple: Number(rowResult.row[0])});

          }

          joinedJournalsMap.set(rowResult.row[1], { countryName: rowResult.row[1], countryCode: rowResult.row[2],

            doaj: 0, simple: Number(rowResult.row[0])});

        }

      }

    }

    return joinedJournalsMap;

  }

      } else if (series.series.query.name === 'new.oso.software.oa_percentage') {

        const softwareIndicator: Indicator = new Indicator();

        softwareIndicator.percentage = Number(series.series.result[0].row[0]);

        softwareIndicator.oa = Number(series.series.result[0].row[1]);

        softwareIndicator.total = Number(series.series.result[0].row[2]);

        europeData.software = softwareIndicator;

      } else if (series.series.query.name === 'new.oso.other.oa_percentage') {

        const otherIndicator: Indicator = new Indicator();

        otherIndicator.percentage = Number(series.series.result[0].row[0]);

        otherIndicator.oa = Number(series.series.result[0].row[1]);

        otherIndicator.total = Number(series.series.result[0].row[2]);

        europeData.other = otherIndicator;

  public convertRawDataToPercentageTableData(rawData: RawData) {

    const mapTableData: Map<string, CountryTableData> = new Map();

    for (const series of rawData.datasets) {

      if (series.series.query.name.includes('new.oso.results')

        && series.series.query.parameters && series.series.query.parameters[0] === 'publication') {

        for (const rowResult of series.series.result) {

          // remove unwanted countries

          if (this.isCountryToBeRemoved(rowResult.row[4])) {

            continue;

          }

          if (mapTableData.has(rowResult.row[4])) {

            const countryTableData = mapTableData.get(rowResult.row[4]);

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.publications = Number(rowResult.row[0]);

            }

          } else {

            const countryTableData: CountryTableData = new CountryTableData();

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.publications = Number(rowResult.row[0]);

            }

            countryTableData.name = rowResult.row[3];

            countryTableData.code = rowResult.row[4];

            mapTableData.set(rowResult.row[4], countryTableData);

          }

        }

      } else if (series.series.query.name.includes('new.oso.results')

        && series.series.query.parameters && series.series.query.parameters[0] === 'dataset') {

        for (const rowResult of series.series.result) {

          // remove unwanted countries

          if (this.isCountryToBeRemoved(rowResult.row[4])) {

            continue;

          }

          if (mapTableData.has(rowResult.row[4])) {

            const countryTableData = mapTableData.get(rowResult.row[4]);

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.datasets = Number(rowResult.row[0]);

            }

          } else {

            const countryTableData: CountryTableData = new CountryTableData();

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.datasets = Number(rowResult.row[0]);

            }

            countryTableData.name = rowResult.row[3];

            countryTableData.code = rowResult.row[4];

            mapTableData.set(rowResult.row[4], countryTableData);

          }

        }

      } else if (series.series.query.name.includes('new.oso.results')

        && series.series.query.parameters && series.series.query.parameters[0] === 'software') {

        for (const rowResult of series.series.result) {

          // remove unwanted countries

          if (this.isCountryToBeRemoved(rowResult.row[4])) {

            continue;

          }

          if (mapTableData.has(rowResult.row[4])) {

            const countryTableData = mapTableData.get(rowResult.row[4]);

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.software = Number(rowResult.row[0]);

            }

          } else {

            const countryTableData: CountryTableData = new CountryTableData();

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.software = Number(rowResult.row[0]);

            }

            countryTableData.name = rowResult.row[3];

            countryTableData.code = rowResult.row[4];

            mapTableData.set(rowResult.row[4], countryTableData);

          }

        }

      } else if (series.series.query.name.includes('new.oso.results')

        && series.series.query.parameters && series.series.query.parameters[0] === 'other') {

        for (const rowResult of series.series.result) {

          // remove unwanted countries

          if (this.isCountryToBeRemoved(rowResult.row[4])) {

            continue;

          }

          if (mapTableData.has(rowResult.row[4])) {

            const countryTableData = mapTableData.get(rowResult.row[4]);

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.other = Number(rowResult.row[0]);

            }

          } else {

            const countryTableData: CountryTableData = new CountryTableData();

            if (rowResult.row[0] !== 'NaN') {

              countryTableData.other = Number(rowResult.row[0]);

            }

            countryTableData.name = rowResult.row[3];

            countryTableData.code = rowResult.row[4];

            mapTableData.set(rowResult.row[4], countryTableData);

          }

        }

      } else if (series.series.query.name.includes('new.oso.repositories')) {

        for (const rowResult of series.series.result) {

          // remove unwanted countries

          if (this.isCountryToBeRemoved(rowResult.row[4])) {

            continue;

          }

          if (mapTableData.has(rowResult.row[4])) {

            const countryTableData = mapTableData.get(rowResult.row[4]);

            countryTableData.repositories = Number(rowResult.row[0]);

          } else {

            const countryTableData: CountryTableData = new CountryTableData();

            countryTableData.repositories = Number(rowResult.row[0]);

            countryTableData.name = rowResult.row[3];

            countryTableData.code = rowResult.row[4];

            mapTableData.set(rowResult.row[4], countryTableData);

          }

        }

      } else if (series.series.query.name.includes('new.oso.journals')) {

        for (const rowResult of series.series.result) {

          // remove unwanted countries

          if (this.isCountryToBeRemoved(rowResult.row[4])) {

            continue;

          }

          if (mapTableData.has(rowResult.row[4])) {

            const countryTableData = mapTableData.get(rowResult.row[4]);

            countryTableData.journals = Number(rowResult.row[0]);

          } else {

            const countryTableData: CountryTableData = new CountryTableData();

            countryTableData.journals = Number(rowResult.row[0]);

            countryTableData.name = rowResult.row[3];

            countryTableData.code = rowResult.row[4];

            mapTableData.set(rowResult.row[4], countryTableData);

          }

        }

      }

    }

    const tableData: CountryTableData[] = [];

    mapTableData.forEach((value: CountryTableData, key: string) => {

      // console.log(key, value);

      tableData.push(value);

    });

    return tableData;

  }

  public convertRawDataToCountryPageOverviewData(rawData: RawData) {

    const countryPageOverviewData: CountryPageOverviewData = new CountryPageOverviewData();

    for (const series of rawData.datasets) {

      if ((series.series.query.name === 'new.oso.results.oa_percentage.country')

        && series.series.query.parameters && series.series.query.parameters[0] === 'publication') {

        countryPageOverviewData.name = series.series.result[0].row[3];

        countryPageOverviewData.code = series.series.result[0].row[4];

        const publicationsAffiliatedIndicator: Indicator = new Indicator();

        publicationsAffiliatedIndicator.percentage = Number(series.series.result[0].row[0]);

        publicationsAffiliatedIndicator.oa = Number(series.series.result[0].row[1]);

        publicationsAffiliatedIndicator.total = Number(series.series.result[0].row[2]);

        countryPageOverviewData.publicationsAffiliated = publicationsAffiliatedIndicator;

      } else if ((series.series.query.name === 'new.oso.results.oa_percentage.deposited.country')

        && series.series.query.parameters && series.series.query.parameters[0] === 'publication') {

        countryPageOverviewData.name = series.series.result[0].row[3];

        countryPageOverviewData.code = series.series.result[0].row[4];

        const publicationsDepositedIndicator: Indicator = new Indicator();

        publicationsDepositedIndicator.percentage = Number(series.series.result[0].row[0]);

        publicationsDepositedIndicator.oa = Number(series.series.result[0].row[1]);

        publicationsDepositedIndicator.total = Number(series.series.result[0].row[2]);

        countryPageOverviewData.publicationsDeposited = publicationsDepositedIndicator;

      } if ((series.series.query.name === 'new.oso.results.oa_percentage.country')

        && series.series.query.parameters && series.series.query.parameters[0] === 'dataset') {

        countryPageOverviewData.name = series.series.result[0].row[3];

        countryPageOverviewData.code = series.series.result[0].row[4];

        const datasetsAffiliatedIndicator: Indicator = new Indicator();

        datasetsAffiliatedIndicator.percentage = Number(series.series.result[0].row[0]);

        datasetsAffiliatedIndicator.oa = Number(series.series.result[0].row[1]);

        datasetsAffiliatedIndicator.total = Number(series.series.result[0].row[2]);

        countryPageOverviewData.datasetsAffiliated = datasetsAffiliatedIndicator;

      } else if ((series.series.query.name === 'new.oso.results.oa_percentage.deposited.country')

        && series.series.query.parameters && series.series.query.parameters[0] === 'dataset') {

        countryPageOverviewData.name = series.series.result[0].row[3];

        countryPageOverviewData.code = series.series.result[0].row[4];

        const datasetsDepositedIndicator: Indicator = new Indicator();

        datasetsDepositedIndicator.percentage = Number(series.series.result[0].row[0]);

        datasetsDepositedIndicator.oa = Number(series.series.result[0].row[1]);

        datasetsDepositedIndicator.total = Number(series.series.result[0].row[2]);

        countryPageOverviewData.datasetsDeposited = datasetsDepositedIndicator;

      } else if (series.series.query.name === 'new.oso.repositories.doar_re3data.validated.country') {

        countryPageOverviewData.name = series.series.result[0].row[3];

        countryPageOverviewData.code = series.series.result[0].row[4];

        const repositoriesIndicator: Indicator = new Indicator();

        repositoriesIndicator.percentage = Number(series.series.result[0].row[0]);

        repositoriesIndicator.oa = Number(series.series.result[0].row[1]);

        repositoriesIndicator.total = Number(series.series.result[0].row[2]);

        countryPageOverviewData.repositories = repositoriesIndicator;

      } else if (series.series.query.name === 'new.oso.journals.doaj.validated.country') {

        countryPageOverviewData.name = series.series.result[0].row[3];

        countryPageOverviewData.code = series.series.result[0].row[4];

        const journalsIndicator: Indicator = new Indicator();

        journalsIndicator.percentage = Number(series.series.result[0].row[0]);

        journalsIndicator.oa = Number(series.series.result[0].row[1]);

        journalsIndicator.total = Number(series.series.result[0].row[2]);

        countryPageOverviewData.journals = journalsIndicator;

      } else if (series.series.query.name === 'new.oso.oa_policies.country') {

        countryPageOverviewData.policies = Number(series.series.result[0].row[0]);

      } else if (series.series.query.name === 'new.oso.funder.country') {

        countryPageOverviewData.funders = Number(series.series.result[0].row[0]);

      } else if (series.series.query.name === 'new.oso.funding_organizations.country') {

        countryPageOverviewData.fundingOrganizations = Number(series.series.result[0].row[0]);

      } else if (series.series.query.name === 'new.oso.ec_funded_organizations.country') {

        countryPageOverviewData.ec_fundedOrganizations = Number(series.series.result[0].row[0]);

      }

    }

    return countryPageOverviewData;

  }

    const mapDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.publications.affiliated%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.publications.deposited%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.datasets.affiliated%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.datasets.deposited%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.oa_policies%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

      overviewTablePercentageDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.bycountry%22%2C%22parameters%22%3A%5B%22publication%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.bycountry%22%2C%22parameters%22%3A%5B%22dataset%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.bycountry%22%2C%22parameters%22%3A%5B%22software%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.bycountry%22%2C%22parameters%22%3A%5B%22other%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.bycountry%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.bycountry%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

      overviewTablePercentageDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.affiliated.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22publication%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.affiliated.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22dataset%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.affiliated.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22software%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.affiliated.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22other%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.bycountry%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.bycountry%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

      overviewTablePercentageDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.bycountry%22%2C%22parameters%22%3A%5B%22publication%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.bycountry%22%2C%22parameters%22%3A%5B%22dataset%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.bycountry%22%2C%22parameters%22%3A%5B%22software%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.bycountry%22%2C%22parameters%22%3A%5B%22other%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.bycountry%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.bycountry%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

      overviewTablePercentageDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22publication%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22dataset%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22software%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.peer_reviewed.bycountry%22%2C%22parameters%22%3A%5B%22other%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.bycountry%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.bycountry%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

  public getEuropeOAPercentages(): Observable<RawData> {

    const europeOAPercentagesQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.publications.oa_percentage%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.datasets.oa_percentage%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.software.oa_percentage%22%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.other.oa_percentage%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

    return this.httpClient.get<RawData>(this.apiURL + europeOAPercentagesQuery, headerOptions);

  }

  public getCountryPageOverviewData(countryCode: string): Observable<RawData> {

    const countryPageOverviewDataQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.country%22%2C%20%22parameters%22%3A%5B%22publication%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.country%22%2C%20%22parameters%22%3A%5B%22publication%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.country%22%2C%20%22parameters%22%3A%5B%22dataset%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.results.oa_percentage.deposited.country%22%2C%20%22parameters%22%3A%5B%22dataset%22%2C%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.repositories.doar_re3data.validated.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.journals.doaj.validated.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.oa_policies.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funder.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funding_organizations.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%2C%7B%22query%22%3A%7B%22name%22%3A%22new.oso.ec_funded_organizations.country%22%2C%20%22parameters%22%3A%5B%22DE%22%5D%7D%7D%5D%2C%22verbose%22%3Atrue%7D';

    return this.httpClient.get<RawData>(this.apiURL + countryPageOverviewDataQuery, headerOptions);

  }

  parameters: string[];

  doar_re3data: number;

  doaj: number;

  simple: number;

  software: Indicator;

  other: Indicator;

export class CountryPageOverviewData {

  name: string = null;

  code: string = null;

  publicationsAffiliated: Indicator;

  publicationsDeposited: Indicator ;

  datasetsAffiliated: Indicator;

  datasetsDeposited: Indicator;

  repositories: Indicator;

  journals: Indicator;

  policies: number = null;

  funders: number = null;

  fundingOrganizations: number = null;

  ec_fundedOrganizations: number = null;

}

    path: 'countryDashboard/:countryCode',

.lastUpdateInfo {

  opacity: 0.4;

  color: #000;

  letter-spacing: 0px;

}

.entitiesContainer {

  height: 300px;

  display: flex;

  align-items: flex-end;

}

.publicationsColumn {

  background-color: #f181ae;

  box-shadow: 3px 3px 6px #00000029;

  opacity: 1;

  z-index: 10;

}

.publicationsDot {

  background-color: #f181ae;

  width: 50px;

  height: 33px;

  border-radius: 50%;

}

.datasetsColumn {

  background-color: #ae91d6;

  box-shadow: 3px 3px 6px #00000029;

  opacity: 1;

  z-index: 8;

}

.datasetsDot {

  background-color: #ae91d6;

  width: 50px;

  height: 33px;

  border-radius: 50%;

}

.softwareColumn {

  background-color: #8f1043;

  box-shadow: 3px 3px 6px #00000029;

  opacity: 1;

  z-index: 6;

}

.softwareDot {

  background-color: #8f1043;

  width: 50px;

  height: 33px;

  border-radius: 50%;

}

.otherColumn {

  background-color: #00a1c2;

  box-shadow: 3px 3px 6px #00000029;

  opacity: 1;

  z-index: 4;

}