MaDgIK
/
open-science-observatory-ui
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working on the new version of the oso - started incorporating charts and created a treemap highcharts component

This commit is contained in:
Stefania Martziou 2020-06-14 21:43:21 +00:00
parent fe0704eda9
commit ce091974d3
24 changed files with 1125 additions and 429 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -1081,6 +1081,11 @@
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
},
"angular-ng-autocomplete": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/angular-ng-autocomplete/-/angular-ng-autocomplete-2.0.1.tgz",
"integrity": "sha512-IlKrUeMM6V0/ipnlXF5WluiWmav7eiIlZWtEoch6eXUGylYCHGNdwRO4Kb2snMQuY/6Kv6tDbRFT51Tihd3JwQ=="
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",

1
package.json
View File

@ -21,6 +21,7 @@
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"@highcharts/map-collection": "^1.1.2",
"angular-ng-autocomplete": "^2.0.1",
"core-js": "^2.5.4",
"dom-to-image": "^2.6.0",
"echarts": "^4.8.0",

10
src/app/app.module.ts
View File

@ -20,6 +20,9 @@ import { DataHandlerService } from './services/data-handler.service';
import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from 'echarts';
import { AutocompleteLibModule } from 'angular-ng-autocomplete';
import { TopmenuComponent } from './shared/topmenu/top-menu.component';
import { TreemapHighchartsComponent } from './chart-components/treemap-highcharts/treemap-highcharts.component';
@NgModule({
declarations: [
@ -33,7 +36,9 @@ import * as echarts from 'echarts';
CountryPageComponent,
CountryMapComponent,
GaugeChartComponent,
MethodologyPageComponent
MethodologyPageComponent,
TopmenuComponent,
TreemapHighchartsComponent
],
imports: [
BrowserModule,
@ -42,7 +47,8 @@ import * as echarts from 'echarts';
NgxEchartsModule.forRoot({
echarts
}),
HighchartsChartModule
HighchartsChartModule,
AutocompleteLibModule
],
providers: [
DataService,

7
src/app/chart-components/treemap-highcharts/treemap-highcharts.component.html Normal file
View File

@ -0,0 +1,7 @@
<div>
<highcharts-chart #chart [Highcharts]="Highcharts"
[options]="treeMapChartOptions"
style="width: 100%; height: 600px; display: block;">
</highcharts-chart>
</div>

59
src/app/chart-components/treemap-highcharts/treemap-highcharts.component.ts Normal file
View File

@ -0,0 +1,59 @@
import { Component, Input, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import More from 'highcharts/highcharts-more';
import Tree from 'highcharts/modules/treemap';
import Heatmap from 'highcharts/modules/heatmap';
import { TreemapHighchartsData } from '../../domain/treemap-highcharts-data';
More(Highcharts);
Tree(Highcharts);
Heatmap(Highcharts);
@Component({
selector: 'app-treemap-highchart',
templateUrl: './treemap-highcharts.component.html',
})
export class TreemapHighchartsComponent implements OnInit {
@Input() chartTitle: string;
@Input() chartData: TreemapHighchartsData[];
@Input() color: string;
Highcharts: typeof Highcharts = Highcharts;
treeMapChartOptions = {};
constructor() {}
ngOnInit(): void {
this.treeMapChartOptions = {
chart: {
type: 'treemap'
},
title: {
text: this.chartTitle
},
tooltip: {
enabled: true
},
credits: {
enabled: false
},
colorAxis: {
minColor: '#FFFFFF',
maxColor: this.color,
// maxColor: Highcharts.getOptions().colors[0]
},
series: [
{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: this.chartData
}
]
};
}
}

54
src/app/domain/countries.ts Normal file
View File

@ -0,0 +1,54 @@
export const countries = [
{id : 'AL', name : 'Albania'},
{id : 'AD', name : 'Andorra'},
{id : 'AT', name : 'Austria'},
{id : 'BY', name : 'Belarus'},
{id : 'BE', name : 'Belgium'},
{id : 'BA', name : 'Bosnia and Herzegovina'},
{id : 'BG', name : 'Bulgaria'},
{id : 'HR', name : 'Croatia'},
{id : 'CZ', name : 'Czech Republic'},
{id : 'DK', name : 'Denmark'},
{id : 'EE', name : 'Estonia'},
// {id : 'FO', name : 'Faroe Islands'},
{id : 'FI', name : 'Finland'},
{id : 'FR', name : 'France'},
{id : 'DE', name : 'Germany'},
// {id : 'GI', name : 'Gibraltar'},
{id : 'GR', name : 'Greece'},
// {id : 'GG', name : 'Guernsey'},
// {id : 'VA', name : 'Holy See (Vatican City State)'},
{id : 'HU', name : 'Hungary'},
{id : 'IS', name : 'Iceland'},
{id : 'IE', name : 'Ireland'},
// {id : 'IM', name : 'Isle of Man'},
{id : 'IT', name : 'Italy'},
// {id : 'JE', name : 'Jersey'},
{id : 'LV', name : 'Latvia'},
// {id : 'LI', name : 'Liechtenstein'},
{id : 'LT', name : 'Lithuania'},
{id : 'LU', name : 'Luxembourg'},
{id : 'MT', name : 'Malta'},
{id : 'MD', name : 'Moldova, Republic of'},
// {id : 'MC', name : 'Monaco'},
{id : 'ME', name : 'Montenegro'},
{id : 'NL', name : 'Netherlands'},
{id : 'MK', name : 'North Macedonia'},
{id : 'NO', name : 'Norway'},
{id : 'PL', name : 'Poland'},
{id : 'PT', name : 'Portugal'},
{id : 'RO', name : 'Romania'},
{id : 'RU', name : 'Russian Federation'},
// {id : 'SM', name : 'San Marino'},
{id : 'RS', name : 'Serbia'},
{id : 'SK', name : 'Slovakia'},
{id : 'SI', name : 'Slovenia'},
{id : 'ES', name : 'Spain'},
// {id : 'SJ', name : 'Svalbard and Jan Mayen'},
{id : 'SE', name : 'Sweden'},
{id : 'CH', name : 'Switzerland'},
{id : 'TR', name : 'Turkey'},
{id : 'UA', name : 'Ukraine'},
{id : 'GB', name : 'United Kingdom'},
// {id : 'AX', name : 'Åland Islands'}
];

5
src/app/domain/treemap-highcharts-data.ts Normal file
View File

@ -0,0 +1,5 @@
export class TreemapHighchartsData {
name: string;
value: number;
colorValue: number;
}

186
src/app/pages/continentoverview/continent-overview.component.html
View File

@ -6,7 +6,7 @@
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul class="uk-breadcrumb">
<li><a [routerLink]="['/home']">Home</a></li>
<li><a routerLink="/home">Home</a></li>
<li><span>{{continentName | titlecase}}</span></li>
</ul>
@ -312,8 +312,8 @@
<!--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 class="uk-active" aria-expanded="true"><a href="#">Overview</a></li>
<li aria-expanded="false"><a href="#">Open Science</a></li>
<li class="uk-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
<li aria-expanded="false"><a (click)="changeTopView('openScience')">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>
@ -322,8 +322,8 @@
<!--MOBILE & PAD PORTRAIT-->
<ul class="uk-hidden@m uk-tab" 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-active" aria-expanded="true"><a (click)="changeTopView('overview')">Overview</a></li>
<li aria-expanded="false"><a (click)="changeTopView('openScience')">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>
@ -337,26 +337,45 @@
<div class="uk-margin tabContent">
<!--<div class="uk-grid uk-child-width-1-4 uk-grid-match">-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--22.888-->
<!--<div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--<svg 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" stroke-dasharray="30, 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">30%</text>-->
<!--</svg>-->
<!--<div class="uk-margin-small-top uk-text-center">OA publications</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--30% open access-->
<!--<div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--30% open access-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--18.165 closed access-->
<!--<div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--18.165 closed access-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--22.888-->
<!--<div>-->
<!--<div class="md-card">-->
<!--<div class="md-card-content">-->
<!--22.888-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="uk-grid uk-child-width-1-1">
@ -364,19 +383,19 @@
<div>
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="550" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%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%22select%22%3A%5B%7B%22field%22%3A%22publication%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.organization.country.continent%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Europe%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220041%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220043%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220044%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22Unknown%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22publication%22%2C%22profile%22%3A%22OpenAIRE%20All-inclusive%22%2C%22limit%22%3A%2230%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20by%20type%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22type%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Afalse%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
<iframe width="100%" height="550" [src]="publicationsByTypeChartURL"></iframe>
</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 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="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications%22%7D%7D%2C%7B%22name%22%3A%22OA%20Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.publications.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Publications%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22publications%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
<iframe width="100%" height="550" [src]="publicationsByCountryChartURL"></iframe>
</div>
</div>
</div>
@ -384,7 +403,7 @@
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets%22%7D%7D%2C%7B%22name%22%3A%22OA%20Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.datasets.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Datasets%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22datasets%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
<iframe width="100%" height="550" [src]="publicationsByDatasourceChartURL"></iframe>
</div>
</div>
</div>
@ -392,7 +411,7 @@
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software%22%7D%7D%2C%7B%22name%22%3A%22OA%20Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.software.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Software%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22software%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
<iframe width="100%" height="550" [src]="publicationsByOrganizationChartURL"></iframe>
</div>
</div>
</div>
@ -400,34 +419,151 @@
<div class="uk-grid-margin">
<div class="md-card chartCard">
<div class="md-card-content">
<iframe width="100%" height="350" src="http://88.197.53.71:8080/stats-api/chart?json=%7B%22library%22%3A%22eCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other%22%7D%7D%2C%7B%22name%22%3A%22OA%20Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.other.oa%22%7D%7D%5D%2C%22chart%22%3A%7B%7D%2C%22title%22%3A%7B%22text%22%3A%22Other%20research%20products%20over%20the%20years%22%7D%2C%22yAxis%22%3A%7B%22name%22%3A%22other%20research%20products%22%7D%2C%22xAxis%22%3A%7B%22name%22%3A%22year%22%7D%2C%22lang%22%3A%7B%22noData%22%3A%22No%20Data%20available%20for%20the%20Query%22%7D%2C%22toolbox%22%3A%7B%22show%22%3Afalse%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Atrue%7D%2C%22stacking%22%3Atrue%7D%7D%2C%22legend%22%3A%7B%22show%22%3Atrue%2C%22orient%22%3A%22horizontal%22%2C%22left%22%3A%22center%22%2C%22top%22%3A%22bottom%22%7D%2C%22tooltip%22%3A%7B%22show%22%3Atrue%7D%2C%22backgroundColor%22%3A%22%23FFFFFFFF%22%7D%7D"></iframe>
<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>
<!--<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>-->
<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 class="publicationsSubnav" (click)="changeView('publications')">
<img src="../../../assets/img/icons/publications-icon.svg" width="15">
</a>
</li>
<li aria-expanded="false" class="">
<a class="datasetsSubnav" (click)="changeView('datasets')">
<img src="../../../assets/img/icons/datasets-icon.svg" width="15">
</a>
</li>
<li aria-expanded="false" class="">
<a class="softwareSubnav" (click)="changeView('software')">
<img src="../../../assets/img/icons/software-icon.svg" width="15">
</a>
</li>
<li aria-expanded="false" class="">
<a class="otherSubnav" (click)="changeView('other')">
<img src="../../../assets/img/icons/other-icon.svg" width="15">
</a>
</li>
</ul>
<hr class="uk-visible@m">
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<div>
Publications....
</div>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div>
Datasets...
</div>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div>
Software...
</div>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div>
Other...
</div>
</li>
</ul>
</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>

54
src/app/pages/continentoverview/continent-overview.component.ts
View File

@ -1,9 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import { DataService } from '../../services/data.service';
import { DataHandlerService } from '../../services/data-handler.service';
import { EuropeData } from '../../domain/overview-map-data';
import {environment} from '../../../environments/environment';
@Component({
selector: 'app-continent-overview',
@ -12,10 +13,30 @@ import { EuropeData } from '../../domain/overview-map-data';
export class ContinentOverviewComponent implements OnInit {
private chartsURL = environment.API_ENDPOINT + 'chart?json=';
continentName: string;
europeOverviewData: EuropeData;
publicationsByTypeChartURL: SafeResourceUrl;
publicationsByCountryChartURL: SafeResourceUrl;
publicationsByDatasourceChartURL: SafeResourceUrl;
publicationsByOrganizationChartURL: SafeResourceUrl;
datasetsByCountryChartURL: SafeResourceUrl;
datasetsByDatasourceChartURL: SafeResourceUrl;
datasetsByOrganizationChartURL: SafeResourceUrl;
softwareByCountryChartURL: SafeResourceUrl;
softwareByDatasourceChartURL: SafeResourceUrl;
softwareByOrganizationChartURL: SafeResourceUrl;
otherByCountryChartURL: SafeResourceUrl;
otherByDatasourceChartURL: SafeResourceUrl;
otherByOrganizationChartURL: SafeResourceUrl;
constructor(private dataService: DataService,
private dataHandlerService: DataHandlerService,
private route: ActivatedRoute,
@ -34,6 +55,24 @@ export class ContinentOverviewComponent implements OnInit {
console.log(error);
}
);
this.publicationsByTypeChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22select%22%3A%5B%7B%22field%22%3A%22publication%22%2C%22aggregate%22%3A%22count%22%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22aggregate%22%3Anull%7D%5D%2C%22filters%22%3A%5B%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.organization.country.continent%22%2C%22type%22%3A%22%3D%22%2C%22values%22%3A%5B%22Europe%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%2C%7B%22groupFilters%22%3A%5B%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220041%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220043%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%220044%22%5D%7D%2C%7B%22field%22%3A%22publication.classification%22%2C%22type%22%3A%22!%3D%22%2C%22values%22%3A%5B%22Unknown%22%5D%7D%5D%2C%22op%22%3A%22AND%22%7D%5D%2C%22entity%22%3A%22publication%22%2C%22profile%22%3A%22OpenAIRE%20All-inclusive%22%2C%22limit%22%3A%2230%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%20by%20type%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%22type%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%7D%7D`);
this.publicationsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Data%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.results.bycountry%22%2C%22parameters%22%3A%5B%22publication%22%5D%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%22OA%20Publications%20by%20country%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%22country%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%7D%7D`);
this.publicationsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.bydatasource%22%2C%22parameters%22%3A%5B%22publication%22%5D%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%22OA%20Publications%20by%20datasource%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%22country%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%7D%7D`);
this.publicationsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.byorganization%22%2C%22parameters%22%3A%5B%22publication%22%5D%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%22OA%20Publications%20by%20organization%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%22organization%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%7D%7D`);
this.datasetsByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22Data%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.results.bycountry%22%2C%22parameters%22%3A%5B%22dataset%22%5D%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%22OA%20Datasets%20by%20country%22%7D%2C%22subtitle%22%3A%7B%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%22country%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%7D%7D`);
this.datasetsByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.bydatasource%22%2C%22parameters%22%3A%5B%22dataset%22%5D%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%22OA%20Datasets%20by%20datasource%22%7D%2C%22subtitle%22%3A%7B%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%22country%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%7D%7D`);
this.datasetsByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.byorganization%22%2C%22parameters%22%3A%5B%22dataset%22%5D%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%22OA%20Datasets%20by%20organization%22%7D%2C%22subtitle%22%3A%7B%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%22organization%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%7D%7D`);
this.softwareByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.bycountry%22%2C%22parameters%22%3A%5B%22software%22%5D%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%22OA%20Software%20by%20country%22%7D%2C%22subtitle%22%3A%7B%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%22country%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%7D%7D`);
this.softwareByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.bydatasource%22%2C%22parameters%22%3A%5B%22software%22%5D%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%22OA%20Software%20by%20datasource%22%7D%2C%22subtitle%22%3A%7B%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%22country%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%7D%7D`);
this.softwareByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%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%22new.oso.results.byorganization%22%2C%22parameters%22%3A%5B%22software%22%5D%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%22OA%20Software%20by%20organization%22%7D%2C%22subtitle%22%3A%7B%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%22organization%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%7D%7D`);
this.otherByCountryChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22other%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.results.bycountry%22%2C%22parameters%22%3A%5B%22other%22%5D%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%22OA%20Other%20research%20products%20by%20country%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22other%20research%20products%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22country%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%7D%7D`);
this.otherByDatasourceChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22other%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.results.bydatasource%22%2C%22parameters%22%3A%5B%22other%22%5D%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%22OA%20Other%20research%20products%20by%20datasource%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22other%20research%20products%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22country%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%7D%7D`);
this.otherByOrganizationChartURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22other%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.results.byorganization%22%2C%22parameters%22%3A%5B%22other%22%5D%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%22OA%20Other%20research%20products%20by%20organization%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22other%20research%20products%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22organization%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%7D%7D`);
}
getHeight(percentage: number) {
@ -92,4 +131,17 @@ export class ContinentOverviewComponent implements OnInit {
}
}
changeTopView(view: string) {
// this.activeView = view;
console.log('top view: ', view);
if (view === 'overview') {
}
}
changeView(view: string) {
console.log('view: ', view);
}
}

57
src/app/pages/countrypage/country-page.component.html
View File

@ -12,7 +12,7 @@
<!--LAPTOP & PAD LANDSCAPE-->
<div class="uk-visible@m">
<ul *ngIf="countryPageOverviewData && countryPageOverviewData.name" class="uk-breadcrumb">
<li><a [routerLink]="['/home']">Home</a></li>
<li><a routerLink="/home">Home</a></li>
<li><span>{{countryPageOverviewData.name}}</span></li>
</ul>
@ -614,21 +614,72 @@
<!--<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>-->
<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 class="publicationsSubnav" (click)="changeView('publications')">
<img src="../../../assets/img/icons/publications-icon.svg" width="15">
</a>
</li>
<li aria-expanded="false" class="">
<a class="datasetsSubnav" (click)="changeView('datasets')">
<img src="../../../assets/img/icons/datasets-icon.svg" width="15">
</a>
</li>
<li aria-expanded="false" class="">
<a class="softwareSubnav" (click)="changeView('software')">
<img src="../../../assets/img/icons/software-icon.svg" width="15">
</a>
</li>
<li aria-expanded="false" class="">
<a class="otherSubnav" (click)="changeView('other')">
<img src="../../../assets/img/icons/other-icon.svg" width="15">
</a>
</li>
</ul>
<hr class="uk-visible@m">
<ul id="switcher-content-a-fade" class="uk-switcher uk-margin" >
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<div>
Publications....
</div>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div>
Datasets...
</div>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div>
Software...
</div>
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div>
Other...
</div>
</li>
</ul>
</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>

40
src/app/pages/countrypage/country-page.component.ts
View File

@ -30,10 +30,6 @@ export class CountryPageComponent implements OnInit {
topProjectsByDatasetsGraphURL: SafeResourceUrl;
topProjectsBySoftwareGraphURL: SafeResourceUrl;
overviewData: OverviewData;
countryData: CountryOverview;
constructor(private dataService: DataService,
private dataHandlerService: DataHandlerService,
private route: ActivatedRoute,
@ -43,30 +39,22 @@ export class CountryPageComponent implements OnInit {
window.scroll(0, 0);
this.countryCode = this.route.snapshot.paramMap.get('countryCode');
this.route.params.subscribe(params => {
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();
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);
}
}, error => {
console.log(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);
// }
// );
);
});

2
src/app/pages/home/countries-map-overview.component.ts
View File

@ -84,7 +84,7 @@ export class CountriesMapOverviewComponent implements OnInit {
loadMapCountryData() {
this.mapCountryData = [];
for(let index in this.countries) {
for (const index in this.countries) {
this.mapCountryData.push(this.overviewToMapData(this.countries[index]));
}

2
src/app/pages/home/countries-table.component.html
View File

@ -53,7 +53,7 @@
</thead>
<tbody>
<tr *ngFor="let countryOverview of countries">
<td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.code]">{{countryOverview.name}}</a></td>
<td class=""><a [routerLink]="['/countryDashboard', countryOverview.code]">{{countryOverview.name}}</a></td>
<td class="uk-text-center">
<ng-container *ngIf="countryOverview.repositories===null">--</ng-container>
<ng-container *ngIf="countryOverview.repositories!=null">

126
src/app/pages/home/data-view.component.html
View File

@ -17,7 +17,7 @@
</ul>
<div class="goToDetailedViewLink uk-text-right">
<a class="" [routerLink]="['/overview/' + 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
<a class="" [routerLink]="['/overview', 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
</div>
<hr>
@ -58,30 +58,112 @@
</li>
<li aria-hidden="true" style="animation-duration: 200ms;" class="">
<div id="graphs">
<div *ngIf="type=='overview'" class="uk-grid uk-margin-top">
<div class="uk-width-1-2">
<iframe *ngIf="oaJournalsURL" width="100%" height="440" [src]="oaJournalsURL"></iframe>
<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 class="uk-width-1-2">
<iframe *ngIf="oaRepositoriesURL" width="100%" height="440" [src]="oaRepositoriesURL"></iframe>
</div>
</div>
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-2">
<iframe *ngIf="oaPublicationsURL" width="100%" height="440" [src]="oaPublicationsURL"></iframe>
</div>
<div class="uk-width-1-2">
<iframe *ngIf="oaDatasetsURL" width="100%" height="440" [src]="oaDatasetsURL"></iframe>
</div>
</div>
<div class="uk-grid uk-margin-top">
<div class="uk-width-1-2">
<iframe *ngIf="oaSoftwareURL" width="100%" height="440" [src]="oaSoftwareURL"></iframe>
</div>
<div class="uk-width-1-2">
<iframe *ngIf="oaOtherURL" width="100%" height="440" [src]="oaOtherURL"></iframe>
<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></app-treemap-highchart>-->
<app-treemap-highchart *ngIf="fundersResultsData" [chartTitle]="'Funders for all research results'"
[chartData]="fundersResultsData" [color]="'#072AE6'"></app-treemap-highchart>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>

78
src/app/pages/home/data-view.component.ts
View File

@ -3,7 +3,9 @@ import { printPage } from '../../shared/reusablecomponents/print-function';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { DataService } from '../../services/data.service';
import { DataHandlerService } from '../../services/data-handler.service';
import { CountryTableData } from '../../domain/overview-map-data';
import {CountryTableData, EuropeData} from '../../domain/overview-map-data';
import {environment} from '../../../environments/environment';
import {TreemapHighchartsData} from '../../domain/treemap-highcharts-data';
@Component({
selector: 'app-data-view',
@ -15,6 +17,8 @@ export class DataViewComponent implements OnInit {
// @Input() type: string;
// @Input() countries: CountryOverview[];
private chartsURL = environment.API_ENDPOINT + 'chart?json=';
activeView: string = 'absolute';
contentAbsoluteSelection: string = 'affiliated';
contentPercentageSelection: string = 'affiliated';
@ -25,12 +29,21 @@ export class DataViewComponent implements OnInit {
loadingAbsoluteTable: boolean = true;
loadingPercentageTable: boolean = true;
oaPublicationsURL: SafeResourceUrl;
oaRepositoriesURL: SafeResourceUrl;
oaJournalsURL: SafeResourceUrl;
oaDatasetsURL: SafeResourceUrl;
oaSoftwareURL: SafeResourceUrl;
oaOtherURL: SafeResourceUrl;
europeOverviewData: EuropeData;
oaNoaPublicationsTimelineURL: SafeResourceUrl;
oaNoaDatasetsTimelineURL: SafeResourceUrl;
oaNoaSoftwareTimelineURL: SafeResourceUrl;
oaNoaOtherTimelineURL: SafeResourceUrl;
fundersResultsData: TreemapHighchartsData[];
// oaPublicationsURL: SafeResourceUrl;
// oaRepositoriesURL: SafeResourceUrl;
// oaJournalsURL: SafeResourceUrl;
// oaDatasetsURL: SafeResourceUrl;
// oaSoftwareURL: SafeResourceUrl;
// oaOtherURL: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer,
private dataService: DataService,
@ -39,6 +52,8 @@ export class DataViewComponent implements OnInit {
ngOnInit(): void {
this.getAbsoluteData();
this.getPercentageData();
this.getEuropeOverviewData();
this.getFundersResults();
}
getAbsoluteData() {
@ -67,6 +82,26 @@ export class DataViewComponent implements OnInit {
);
}
getEuropeOverviewData() {
this.dataService.getEuropeOAPercentages().subscribe(
rawData => {
this.europeOverviewData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);
}, error => {
console.log(error);
}
);
}
getFundersResults() {
this.dataService.getFundersResults().subscribe(
rawData => {
this.fundersResultsData = this.dataHandlerService.convertRawDataToTreemapHighchartsData(rawData);
}, error => {
console.log(error);
}
);
}
getContentAbsolute(contentSelection: string): void {
this.contentAbsoluteSelection = contentSelection;
this.getAbsoluteData();
@ -80,29 +115,18 @@ export class DataViewComponent implements OnInit {
changeView(view: string) {
this.activeView = view;
if (view === 'graph') {
if (!this.oaPublicationsURL) {
// publications: #19647E
this.oaPublicationsURL = 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%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%22Open%20Access%20Publications%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%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%3Atrue%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%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%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`);
if (!this.oaNoaPublicationsTimelineURL) {
this.oaNoaPublicationsTimelineURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22OA%20Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.oa%22%2C%22parameters%22%3A%5B%22publication%22%5D%7D%7D%2C%7B%22name%22%3A%22Non-OA%20Publications%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.non_oa%22%2C%22parameters%22%3A%5B%22publication%22%5D%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%20over%20the%20years%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%7D%7D`);
}
if (!this.oaRepositoriesURL) {
// repositories: #A03245
this.oaRepositoriesURL = 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%22Repositories%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oarepositories%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%22Open%20Access%20Repositories%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%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%3Atrue%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%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%23A03245%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`);
if (!this.oaNoaDatasetsTimelineURL) {
this.oaNoaDatasetsTimelineURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22OA%20Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.oa%22%2C%22parameters%22%3A%5B%22dataset%22%5D%7D%7D%2C%7B%22name%22%3A%22Non-OA%20Datasets%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.non_oa%22%2C%22parameters%22%3A%5B%22dataset%22%5D%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%22Datasets%20over%20the%20years%22%7D%2C%22subtitle%22%3A%7B%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%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%7D%7D`);
}
if (!this.oaJournalsURL) {
// journals: #2B243C
this.oaJournalsURL = 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.oajournals%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%22Open%20Access%20Journals%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%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%3Atrue%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%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%232B243C%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`);
if (!this.oaNoaSoftwareTimelineURL) {
this.oaNoaSoftwareTimelineURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22OA%20Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.oa%22%2C%22parameters%22%3A%5B%22software%22%5D%7D%7D%2C%7B%22name%22%3A%22Non-OA%20Software%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.non_oa%22%2C%22parameters%22%3A%5B%22software%22%5D%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%22Software%20over%20the%20years%22%7D%2C%22subtitle%22%3A%7B%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%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%7D%7D`);
}
if (!this.oaDatasetsURL) {
// datasets: #019A85
this.oaDatasetsURL = 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.oadatasets%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%22Open%20Access%20Datasets%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%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%3Atrue%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%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%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`);
}
if (!this.oaSoftwareURL) {
// software: #99B2DD
this.oaSoftwareURL = 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.oasoftware%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%22Open%20Access%20Software%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%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%3Atrue%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%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%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`);
}
if (!this.oaOtherURL) {
// other reasearch products: #310A31
this.oaOtherURL = 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%22Other%20Research%20Products%22%2C%22type%22%3A%22bar%22%2C%22query%22%3A%7B%22name%22%3A%22oso.oaother%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%22Open%20Access%20Other%20Research%20Products%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%22%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22%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%3Atrue%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%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%23310A31%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`);
if (!this.oaNoaOtherTimelineURL) {
this.oaNoaOtherTimelineURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.chartsURL + `%7B%22library%22%3A%22HighCharts%22%2C%22chartDescription%22%3A%7B%22queries%22%3A%5B%7B%22name%22%3A%22OA%20Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.oa%22%2C%22parameters%22%3A%5B%22other%22%5D%7D%7D%2C%7B%22name%22%3A%22Non-OA%20Other%20Research%20Products%22%2C%22type%22%3A%22column%22%2C%22query%22%3A%7B%22name%22%3A%22new.oso.result_timeline.results.non_oa%22%2C%22parameters%22%3A%5B%22other%22%5D%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%22Other%20Research%20Products%20over%20the%20years%22%7D%2C%22subtitle%22%3A%7B%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22text%22%3A%22other%20research%20products%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%7D%7D`);
}
}
}

44
src/app/pages/home/home.component.html
View File

@ -121,9 +121,8 @@
</div>
<div class="uk-text-center uk-margin-medium-top">
<!--<button [routerLink]="['/countryDashboard/' + countrySelectedName]" class="md-btn md-btn-primary">View Details</button>-->
<button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
<!--<a class="" [routerLink]="['/countryDashboard/' + countrySelectedName]">Detailed View <i class="fas fa-arrow-right uk-margin-small-left"></i></a>-->
<!--<button [routerLink]="['/countryDashboard/' + selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>-->
<button [routerLink]="['/countryDashboard' , selectedCountry.code]" class="md-btn md-btn-primary">View Details</button>
</div>
</div>
@ -308,11 +307,38 @@
<!--</div>-->
<div class="uk-margin-top">
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Search for a country...">
<!--<input type="text">-->
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">
<span id="search-icon" uk-search-icon></span>
<ng-autocomplete
[data]="countriesCollection"
[searchKeyword]="keyword"
placeHolder="Search for a country..."
(selected)='selectCountryFromAutocompleteEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)'
historyIdentifier="countriesCollection"
[itemTemplate]="itemTemplate"
[notFoundTemplate]="notFoundTemplate">
</ng-autocomplete>
<ng-template #itemTemplate let-item>
<a [innerHTML]="item.name"></a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template>
</div>
<!--<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">-->
<!--<span uk-search-icon></span>-->
<!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->
<!--&lt;!&ndash;<input type="text">&ndash;&gt;-->
<!--</div>-->
</div>
@ -433,7 +459,7 @@
<div *ngFor="let data of leadingOpenScienceData" class="uk-margin-small-top">
<div class="md-card leadingOpenScienceCard">
<a [routerLink]="['/countryDashboard/' + data.code]" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
<a [routerLink]="['/countryDashboard', data.code]" class="el-link uk-position-cover uk-margin-remove-adjacent"></a>
<div class="md-card-content">
<div class="uk-flex">
<img src="../../../assets/img/flags/{{data.code | lowercase}}-flag.svg" width="15">
@ -463,7 +489,7 @@
<section class="section">
<div class="uk-container uk-container-expand uk-container-center ">
<div class="goToDetailedViewLink">
<a class="" [routerLink]="['/overview/' + 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
<a class="" [routerLink]="['/overview' , 'europe']">Detailed View of OA in Europe<i class="fas fa-arrow-right uk-margin-small-left"></i></a>
</div>
</div>
</section>

32
src/app/pages/home/home.component.ts
View File

@ -1,7 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import {CountryOverviewData, EuropeData, SelectedCountry} from '../../domain/overview-map-data';
import {DataHandlerService} from '../../services/data-handler.service';
import { CountryOverviewData, EuropeData, SelectedCountry } from '../../domain/overview-map-data';
import { DataHandlerService } from '../../services/data-handler.service';
import { countries } from '../../domain/countries';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
@ -17,13 +19,21 @@ export class HomeComponent implements OnInit {
leadingOpenScienceData: CountryOverviewData[];
countriesCollection = countries;
keyword = 'name';
constructor(private dataService: DataService,
private dataHandlerService: DataHandlerService) { }
private dataHandlerService: DataHandlerService,
private router: Router) { }
ngOnInit(): void {
window.scroll(0, 0);
// const searchIcon = document.getElementById('search-icon');
// const inputContainer = document.getElementsByClassName('input-container')[0];
// inputContainer.insertAdjacentElement('afterbegin', searchIcon);
this.dataService.getEuropeOverviewData().subscribe(
rawData => {
this.europeOverviewData = this.dataHandlerService.convertRawDataToEuropeOverviewData(rawData);
@ -58,4 +68,20 @@ export class HomeComponent implements OnInit {
this.selectedCountry = null;
this.selectedCountryData = null;
}
selectCountryFromAutocompleteEvent(item) {
// do something with selected item
// console.log('country selected: ', item);
this.router.navigate([`/countryDashboard/${item.id}`]);
}
onChangeSearch(search: string) {
// fetch remote data from here
// And reassign the 'data' which is binded to 'data' property.
}
onFocused(e) {
// do something
}
}

563
src/app/pages/methodology/methodology.component.html
View File

@ -2,341 +2,346 @@
<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}">
<!--Introduction-->
<div class="">
<h2>Introduction</h2>
<div class="md-card uk-margin-bottom">
<div class="md-card-content large-padding">
<p>
This document describes the methodology , terms, and definitions of the indicators presented in Open Science Observatory.
The Open Science Observatory combines data gathered from OpenAIRE and other data sources to develop and operate an
interactive and dynamic portal, which informs users via rich visualizations and reports on different Open Science
aspects and facets in Europe. The Observatory is an extendable monitor portal with indicators on open science and
the framework uptake by national and sectoral set.
</p>
<p>
The dynamic <strong>Open Science Observatory</strong> leverages existing information collected by OpenAIRE and
<strong>at little additional cost or effort, produces and reports value added metrics</strong> regarding Open Science
trends and evolution for Horizon 2020 and other funding sources. The goal is to provide an EU Open Science Observatory
as key OpenAIRE product, and employing open metrics based on open data gathered by OpenAire to measure the openness
of publications and data on various aspects (e.g., gold/green/fair), the metadata completeness, the regional or
thematic distributions and will test out preliminary metrics for their FAIRness. This will ensure that research can
be evaluated at the right level (including article-level metrics and altmetrics), in an <strong>open and transparent
manner</strong>. Such services will deliver accurate metrics for European Research and enable informed recommendations
to high-level decision makers.
</p>
</div>
</div>
<div style="min-height: 500px;">
<h4>Coming soon....</h4>
</div>
<!--Methodological Approach and Indicators-->
<div class="">
<h2>Methodological Approach and Indicators</h2>
<div class="md-card uk-margin-bottom">
<div class="md-card-content large-padding">
<p>
Monitoring and evaluating the advancements, trends and impact of OS in Europe is recognised as one of the most
important steps towards the realisation of the EOSC vision. The implementation of the Open Science Observatory
follows the guidelines and <a target="_blank" href="https://eoscpilot.eu/wp3-policy/eosc-open-science-monitor-specifications/methodological-approach-monitoring-open-science">
methodological approach</a> which was specified by the EOSCPilot project and more specifically the
<a target="_blank" href="https://eoscpilot.eu/content/d32-eosc-open-science-monitor-specifications">EOSCpilot Open Science Monitor Framework (EOSCpilot OSMF)</a>.
It aimed to build a model and initial high-level specifications for providing useful analytics to researchers as well
as enabling research performing and funding organizations within EOSC to monitor and gain insights about the OS movement,
regardless of their service management systems and the technology behind them. The six core steps of the specified methodology are:
</p>
<ul style="font-style: italic">
<li>Step 1. Identification of the Open Science Activities;</li>
<li>Step 2. Policy-driven derivation of monitoring targets;</li>
<li>Step 3. Identification of the main Open Science Resources and Indicators;</li>
<li>Step 4. Design of monitoring processes, tasks and workflows;</li>
<li>Step 5. Modelling and implementation of the framework;</li>
<li>Step 6. Continuous validation of the monitoring targets;</li>
</ul>
<!--&lt;!&ndash;Introduction&ndash;&gt;-->
<!--<div class="">-->
<!--<h2>Introduction</h2>-->
<p>
<span style="font-style: italic">Step 1. Identification of the Open Science Activities:</span> The first step addresses the need to identify
which parts of the OS lifecycle are of interest in the monitoring process. These can include the conceptualization
of a research task, the data and literature collection, the analysis and development of the research output, the
publication, the review and evaluation of the research result as well as the reuse and reproducibility of results
by the scientific community. These phases entail different open access practices and elements which are being considered
by the monitor, with a special focus on the policies that these elements fall under.
</p>
<p>
<span style="font-style: italic">Step 2. Policy-driven derivation of monitoring targets:</span> The proposed monitoring
framework adopts a policy-driven approach for deriving high level objectives, i.e., target dimensions to be measured
in the monitoring process. Policies on Open Access at different levels, such as the international, national and
regional levels, as well as micro policies are considered as primary sources for deriving more concrete measurable
targets (e.g., Openness, FAIRness, etc.) that should be monitored in the framework. Furthermore, monitoring targets
can be organised into more specialised sub-targets, to measure more specific aspects of OS. For example, a policy
recommendation stating that research data repositories should follow a data archiving plan indicates the monitoring
target for long-term preservation of OS artefacts monitored by a set of indicators, such as whether an organization
applies such a plan, or the period (e.g., months, years) for which preservation is guaranteed.
</p>
<p>
<span style="font-style: italic">Step 3. Identification of the main Open Science Resources and Indicators:</span>
In the next step, the monitoring targets are being mapped to OS elements they apply to, as well as to indicators
that quantify these targets. OS elements are well-defined artefacts of OS practices, such as publication in open
access journals, research data made available in open access repositories, open source software, open educational
material, etc. In the context of this framework, these elements are called OS resources to state the importance
of their contribution for the development of the “Open Science World”.
</p>
<p>
<span style="font-style: italic">Step 4. Design of monitoring processes, tasks and workflows:</span> Each indicator
must be associated with a set of processes, which are employed for the collection of data, the validation and
scoring of metrics (e.g., combination and aggregation of metrics for deriving an accumulated score for a target
dimension), the visualization of the results, and so on. These processes must be well documented in the form of
workflows and tasks, to be performed for the collection and quantification of the indicators.
</p>
<p>
<span style="font-style: italic">Step 5. Modelling and implementation of the framework:</span> The next step
involves the detailed design, implementation, and customization of the framework, which includes the design of
the functionality at its whole, as well as all added value services offered by the framework.
</p>
<p>
<span style="font-style: italic">Step 6. Continuous validation of the monitoring targets:</span> The last step
follows the operation of the OS monitoring framework and refers to the continuous validation and refinement of
the monitoring methodology (i.e., targets and indicators) and results in EOSC. Α monitoring process, to be effective,
must adapt to new OS practices and new policies, validating and readjusting its target goals as well as the indicators
for their evaluation.
</p>
<!--<div class="md-card uk-margin-bottom">-->
<!--<div class="md-card-content large-padding">-->
<!--<p>-->
<!--This document describes the methodology , terms, and definitions of the indicators presented in Open Science Observatory.-->
<!--The Open Science Observatory combines data gathered from OpenAIRE and other data sources to develop and operate an-->
<!--interactive and dynamic portal, which informs users via rich visualizations and reports on different Open Science-->
<!--aspects and facets in Europe. The Observatory is an extendable monitor portal with indicators on open science and-->
<!--the framework uptake by national and sectoral set.-->
<!--</p>-->
<!--<p>-->
<!--The dynamic <strong>Open Science Observatory</strong> leverages existing information collected by OpenAIRE and-->
<!--<strong>at little additional cost or effort, produces and reports value added metrics</strong> regarding Open Science-->
<!--trends and evolution for Horizon 2020 and other funding sources. The goal is to provide an EU Open Science Observatory-->
<!--as key OpenAIRE product, and employing open metrics based on open data gathered by OpenAire to measure the openness-->
<!--of publications and data on various aspects (e.g., gold/green/fair), the metadata completeness, the regional or-->
<!--thematic distributions and will test out preliminary metrics for their FAIRness. This will ensure that research can-->
<!--be evaluated at the right level (including article-level metrics and altmetrics), in an <strong>open and transparent-->
<!--manner</strong>. Such services will deliver accurate metrics for European Research and enable informed recommendations-->
<!--to high-level decision makers.-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<p>
<strong>The Open Science Observatory of the OpenAIRE is the first implementation</strong> of these specifications
and it aspires to become a dynamic tool in the future, with benefits both to the organisations using it to measure
the OA levels of implementation and impact to their community and for the High Level Stakeholders which are the
European Union’s Legal Entities and Bodies, including the Member States and their respective Units. Gaps, implications
and new ways of performing OS are among the elements that could be identified through OA Open Science Observatory
which could then be easily incorporated within the stakeholders’ scope and strategic planning for OS.
</p>
</div>
</div>
<!--</div>-->
</div>
<!--&lt;!&ndash;Methodological Approach and Indicators&ndash;&gt;-->
<!--<div class="">-->
<!--<h2>Methodological Approach and Indicators</h2>-->
<!--Indicators-->
<div class="">
<h2>Indicators</h2>
<!--<div class="md-card uk-margin-bottom">-->
<!--<div class="md-card-content large-padding">-->
<!--<p>-->
<!--Monitoring and evaluating the advancements, trends and impact of OS in Europe is recognised as one of the most-->
<!--important steps towards the realisation of the EOSC vision. The implementation of the Open Science Observatory-->
<!--follows the guidelines and <a target="_blank" href="https://eoscpilot.eu/wp3-policy/eosc-open-science-monitor-specifications/methodological-approach-monitoring-open-science">-->
<!--methodological approach</a> which was specified by the EOSCPilot project and more specifically the-->
<!--<a target="_blank" href="https://eoscpilot.eu/content/d32-eosc-open-science-monitor-specifications">EOSCpilot Open Science Monitor Framework (EOSCpilot OSMF)</a>.-->
<!--It aimed to build a model and initial high-level specifications for providing useful analytics to researchers as well-->
<!--as enabling research performing and funding organizations within EOSC to monitor and gain insights about the OS movement,-->
<!--regardless of their service management systems and the technology behind them. The six core steps of the specified methodology are:-->
<!--</p>-->
<!--<ul style="font-style: italic">-->
<!--<li>Step 1. Identification of the Open Science Activities;</li>-->
<!--<li>Step 2. Policy-driven derivation of monitoring targets;</li>-->
<!--<li>Step 3. Identification of the main Open Science Resources and Indicators;</li>-->
<!--<li>Step 4. Design of monitoring processes, tasks and workflows;</li>-->
<!--<li>Step 5. Modelling and implementation of the framework;</li>-->
<!--<li>Step 6. Continuous validation of the monitoring targets;</li>-->
<!--</ul>-->
<div class="md-card uk-margin-bottom">
<div class="md-card-content large-padding">
<!--<p>-->
<!--<span style="font-style: italic">Step 1. Identification of the Open Science Activities:</span> The first step addresses the need to identify-->
<!--which parts of the OS lifecycle are of interest in the monitoring process. These can include the conceptualization-->
<!--of a research task, the data and literature collection, the analysis and development of the research output, the-->
<!--publication, the review and evaluation of the research result as well as the reuse and reproducibility of results-->
<!--by the scientific community. These phases entail different open access practices and elements which are being considered-->
<!--by the monitor, with a special focus on the policies that these elements fall under.-->
<!--</p>-->
<!--<p>-->
<!--<span style="font-style: italic">Step 2. Policy-driven derivation of monitoring targets:</span> The proposed monitoring-->
<!--framework adopts a policy-driven approach for deriving high level objectives, i.e., target dimensions to be measured-->
<!--in the monitoring process. Policies on Open Access at different levels, such as the international, national and-->
<!--regional levels, as well as micro policies are considered as primary sources for deriving more concrete measurable-->
<!--targets (e.g., Openness, FAIRness, etc.) that should be monitored in the framework. Furthermore, monitoring targets-->
<!--can be organised into more specialised sub-targets, to measure more specific aspects of OS. For example, a policy-->
<!--recommendation stating that research data repositories should follow a data archiving plan indicates the monitoring-->
<!--target for long-term preservation of OS artefacts monitored by a set of indicators, such as whether an organization-->
<!--applies such a plan, or the period (e.g., months, years) for which preservation is guaranteed.-->
<!--</p>-->
<!--<p>-->
<!--<span style="font-style: italic">Step 3. Identification of the main Open Science Resources and Indicators:</span>-->
<!--In the next step, the monitoring targets are being mapped to OS elements they apply to, as well as to indicators-->
<!--that quantify these targets. OS elements are well-defined artefacts of OS practices, such as publication in open-->
<!--access journals, research data made available in open access repositories, open source software, open educational-->
<!--material, etc. In the context of this framework, these elements are called OS resources to state the importance-->
<!--of their contribution for the development of the “Open Science World”.-->
<!--</p>-->
<!--<p>-->
<!--<span style="font-style: italic">Step 4. Design of monitoring processes, tasks and workflows:</span> Each indicator-->
<!--must be associated with a set of processes, which are employed for the collection of data, the validation and-->
<!--scoring of metrics (e.g., combination and aggregation of metrics for deriving an accumulated score for a target-->
<!--dimension), the visualization of the results, and so on. These processes must be well documented in the form of-->
<!--workflows and tasks, to be performed for the collection and quantification of the indicators.-->
<!--</p>-->
<!--<p>-->
<!--<span style="font-style: italic">Step 5. Modelling and implementation of the framework:</span> The next step-->
<!--involves the detailed design, implementation, and customization of the framework, which includes the design of-->
<!--the functionality at its whole, as well as all added value services offered by the framework.-->
<!--</p>-->
<!--<p>-->
<!--<span style="font-style: italic">Step 6. Continuous validation of the monitoring targets:</span> The last step-->
<!--follows the operation of the OS monitoring framework and refers to the continuous validation and refinement of-->
<!--the monitoring methodology (i.e., targets and indicators) and results in EOSC. Α monitoring process, to be effective,-->
<!--must adapt to new OS practices and new policies, validating and readjusting its target goals as well as the indicators-->
<!--for their evaluation.-->
<!--</p>-->
<div class="">
<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#tabs',animation: 'slide-bottom'}">
<li class="uk-active" aria-expanded="true"><a href="#">Terms and definitions</a></li>
<li aria-expanded="false"><a href="#">Continent overview</a></li>
<li aria-expanded="false"><a href="#">COuntry page</a></li>
</ul>
<!--<p>-->
<!--<strong>The Open Science Observatory of the OpenAIRE is the first implementation</strong> of these specifications-->
<!--and it aspires to become a dynamic tool in the future, with benefits both to the organisations using it to measure-->
<!--the OA levels of implementation and impact to their community and for the High Level Stakeholders which are the-->
<!--European Union’s Legal Entities and Bodies, including the Member States and their respective Units. Gaps, implications-->
<!--and new ways of performing OS are among the elements that could be identified through OA Open Science Observatory-->
<!--which could then be easily incorporated within the stakeholders’ scope and strategic planning for OS.-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
<ul id="tabs" class="uk-switcher">
<!--</div>-->
<!--OVERVIEW tab-->
<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">
<div class="uk-margin">
<!--&lt;!&ndash;Indicators&ndash;&gt;-->
<!--<div class="">-->
<!--<h2>Indicators</h2>-->
<!--Terms and definitions-->
<div>
<!--<h3>Terms and definitions</h3>-->
<dl>
<dt>Publication</dt>
<dd>a scientific publication</dd>
<!--<div class="md-card uk-margin-bottom">-->
<!--<div class="md-card-content large-padding">-->
<dt>Repository</dt>
<dd>a repository of publications</dd>
<!--<div class="">-->
<!--<ul class="uk-tab uk-tab-large uk-flex-center" data-uk-tab="{connect:'#tabs',animation: 'slide-bottom'}">-->
<!--<li class="uk-active" aria-expanded="true"><a href="#">Terms and definitions</a></li>-->
<!--<li aria-expanded="false"><a href="#">Continent overview</a></li>-->
<!--<li aria-expanded="false"><a href="#">COuntry page</a></li>-->
<!--</ul>-->
<dt>Dataset</dt>
<dd>a dataset, usually associated with a publication</dd>
<!--<ul id="tabs" class="uk-switcher">-->
<dt>Software</dt>
<dd>software (e.g., open source), usually associated with a publication/dataset</dd>
<!--&lt;!&ndash;OVERVIEW tab&ndash;&gt;-->
<!--<li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">-->
<!--<div class="uk-margin">-->
<dt>Other Research Products</dt>
<dd>Other research outputs (e.g., dissemination or educational material) associated with a publication, dataset or software.</dd>
<!--&lt;!&ndash;Terms and definitions&ndash;&gt;-->
<!--<div>-->
<!--&lt;!&ndash;<h3>Terms and definitions</h3>&ndash;&gt;-->
<!--<dl>-->
<!--<dt>Publication</dt>-->
<!--<dd>a scientific publication</dd>-->
<dt>Journal</dt>
<dd>a scientific journal where authors publish their results in the form of publications</dd>
<!--<dt>Repository</dt>-->
<!--<dd>a repository of publications</dd>-->
<dt>Policy</dt>
<dd>an Open Science mandate that organizations follow in order to engage in Open Science best practices</dd>
<!--<dt>Dataset</dt>-->
<!--<dd>a dataset, usually associated with a publication</dd>-->
<dt>Organization</dt>
<dd>an academic institution, company, or any other legal entity with the context of OpenAIRE</dd>
<!--<dt>Software</dt>-->
<!--<dd>software (e.g., open source), usually associated with a publication/dataset</dd>-->
<dt>Vocabularies</dt>
<dd>used in the Observatory are described in <a target="_blank" href="http://api.openaire.eu/vocabularies">http://api.openaire.eu/vocabularies</a></dd>
</dl>
</div>
<!--<dt>Other Research Products</dt>-->
<!--<dd>Other research outputs (e.g., dissemination or educational material) associated with a publication, dataset or software.</dd>-->
</div>
</li>
<!--<dt>Journal</dt>-->
<!--<dd>a scientific journal where authors publish their results in the form of publications</dd>-->
<!--OPEN SCIENCE tab-->
<li aria-hidden="true" style="animation-duration: 200ms;">
<div class="uk-margin">
<!--<dt>Policy</dt>-->
<!--<dd>an Open Science mandate that organizations follow in order to engage in Open Science best practices</dd>-->
<!--Continent overview-->
<div>
<!--<h3>Continent overview</h3>-->
<dl>
<dt>Number of OA publications</dt>
<dd>The total number of open access publications currently in OpenAIRE, along with the percentage they represent with respect to the total number of publications.</dd>
<!--<dt>Organization</dt>-->
<!--<dd>an academic institution, company, or any other legal entity with the context of OpenAIRE</dd>-->
<dt>Number of OA datasets</dt>
<dd>The total number of open access datasets currently in OpenAIRE, along with the percentage they represent with respect to the total number of datasets.</dd>
<!--<dt>Vocabularies</dt>-->
<!--<dd>used in the Observatory are described in <a target="_blank" href="http://api.openaire.eu/vocabularies">http://api.openaire.eu/vocabularies</a></dd>-->
<!--</dl>-->
<!--</div>-->
<dt>Number of OA repositories</dt>
<dd>The total number of open access repositories currently in OpenAIRE.</dd>
<!--</div>-->
<!--</li>-->
<dt>Number of OA journals</dt>
<dd>The total number of open access journals currently in OpenAIRE, along with the percentage they represent with respect to the total number of journals. Source: DOAJ.</dd>
<!--&lt;!&ndash;OPEN SCIENCE tab&ndash;&gt;-->
<!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
<!--<div class="uk-margin">-->
<dt>Number of organizations with OA policies</dt>
<dd>The total number of organizations in OpenAIRE that have Open Access policies associated with them. Source: RoarMap.</dd>
</dl>
<!--&lt;!&ndash;Continent overview&ndash;&gt;-->
<!--<div>-->
<!--&lt;!&ndash;<h3>Continent overview</h3>&ndash;&gt;-->
<!--<dl>-->
<!--<dt>Number of OA publications</dt>-->
<!--<dd>The total number of open access publications currently in OpenAIRE, along with the percentage they represent with respect to the total number of publications.</dd>-->
<!--Overview-->
<div>
<h4>Overview</h4>
<p>Each table row refers to a country. For each country, the table shows <span style="font-style: italic">total numbers of OA repositories,
journals, policies, publications, datasets, software and other research products.</span><br>
The total numbers and percentages are computed as described in the continent overview.
</p>
</div>
<!--<dt>Number of OA datasets</dt>-->
<!--<dd>The total number of open access datasets currently in OpenAIRE, along with the percentage they represent with respect to the total number of datasets.</dd>-->
<!--Open Science-->
<div>
<h4>Open Science</h4>
<p>Open science related resources, specifically OA publications, datasets, software and other research products.</p>
</div>
<!--<dt>Number of OA repositories</dt>-->
<!--<dd>The total number of open access repositories currently in OpenAIRE.</dd>-->
</div>
<!--<dt>Number of OA journals</dt>-->
<!--<dd>The total number of open access journals currently in OpenAIRE, along with the percentage they represent with respect to the total number of journals. Source: DOAJ.</dd>-->
</div>
</li>
<!--<dt>Number of organizations with OA policies</dt>-->
<!--<dd>The total number of organizations in OpenAIRE that have Open Access policies associated with them. Source: RoarMap.</dd>-->
<!--</dl>-->
<li aria-hidden="true" style="animation-duration: 200ms;">
<div class="uk-margin">
<!--&lt;!&ndash;Overview&ndash;&gt;-->
<!--<div>-->
<!--<h4>Overview</h4>-->
<!--<p>Each table row refers to a country. For each country, the table shows <span style="font-style: italic">total numbers of OA repositories,-->
<!--journals, policies, publications, datasets, software and other research products.</span><br>-->
<!--The total numbers and percentages are computed as described in the continent overview.-->
<!--</p>-->
<!--</div>-->
<!--Country page-->
<div>
<!--<h3>Country page</h3>-->
<!--&lt;!&ndash;Open Science&ndash;&gt;-->
<!--<div>-->
<!--<h4>Open Science</h4>-->
<!--<p>Open science related resources, specifically OA publications, datasets, software and other research products.</p>-->
<!--</div>-->
<!--Country overview-->
<div>
<h4>Country overview</h4>
<dl>
<dt>Number of OA publications</dt>
<dd>The total number of open access publications currently in OpenAIRE for this country, along with the
percentage they represent with respect to the total number of publications of this country.</dd>
<!--</div>-->
<dt>Number of OA datasets</dt>
<dd>The total number of open access datasets currently in OpenAIRE for this country, along with the percentage
they represent with respect to the total number of datasets of this country.
</dd>
<!--</div>-->
<!--</li>-->
<dt>Number of OA repositories</dt>
<dd>The total number of open access repositories currently in OpenAIRE for this country.</dd>
<!--<li aria-hidden="true" style="animation-duration: 200ms;">-->
<!--<div class="uk-margin">-->
<dt>Number of OA journals</dt>
<dd>The total number of open access journals currently in OpenAIRE for this country, along with the percentage
they represent with respect to the total number of journals. Source: DOAJ.</dd>
<!--&lt;!&ndash;Country page&ndash;&gt;-->
<!--<div>-->
<!--&lt;!&ndash;<h3>Country page</h3>&ndash;&gt;-->
<dt>Number of organizations with OA policies</dt>
<dd>The total number of organizations in OpenAIRE for this country that have Open Access policies associated
with them. Source: RoarMap.</dd>
</dl>
</div>
<!--&lt;!&ndash;Country overview&ndash;&gt;-->
<!--<div>-->
<!--<h4>Country overview</h4>-->
<!--<dl>-->
<!--<dt>Number of OA publications</dt>-->
<!--<dd>The total number of open access publications currently in OpenAIRE for this country, along with the-->
<!--percentage they represent with respect to the total number of publications of this country.</dd>-->
<!--Info Box-->
<div>
<h4>Info Box</h4>
<dl>
<dt>R&D Expenditure</dt>
<dd>The total R&D expenditure for this country since 2008. Source: Eurostat.</dd>
<!--<dt>Number of OA datasets</dt>-->
<!--<dd>The total number of open access datasets currently in OpenAIRE for this country, along with the percentage-->
<!--they represent with respect to the total number of datasets of this country.-->
<!--</dd>-->
<dt>Funding sources</dt>
<dd></dd>
<!--<dt>Number of OA repositories</dt>-->
<!--<dd>The total number of open access repositories currently in OpenAIRE for this country.</dd>-->
<dt>Funding Organizations</dt>
<dd></dd>
<!--<dt>Number of OA journals</dt>-->
<!--<dd>The total number of open access journals currently in OpenAIRE for this country, along with the percentage-->
<!--they represent with respect to the total number of journals. Source: DOAJ.</dd>-->
<dt>Organizations funded by the European Commission since 2013</dt>
<dd>The total number of organizations in this country that have participated/participate in a project that was/is
funded by the European Commission.</dd>
</dl>
</div>
<!--<dt>Number of organizations with OA policies</dt>-->
<!--<dd>The total number of organizations in OpenAIRE for this country that have Open Access policies associated-->
<!--with them. Source: RoarMap.</dd>-->
<!--</dl>-->
<!--</div>-->
<!--Green vs. Gold-->
<div>
<h4>Green vs. Gold</h4>
<dl>
<dt>Green vs Gold Publications</dt>
<dd>The line shows the evolution of the total number of publications that have been published through a green
open access route, vs the total number of publications that have been published through a gold open access route.</dd>
<!--&lt;!&ndash;Info Box&ndash;&gt;-->
<!--<div>-->
<!--<h4>Info Box</h4>-->
<!--<dl>-->
<!--<dt>R&D Expenditure</dt>-->
<!--<dd>The total R&D expenditure for this country since 2008. Source: Eurostat.</dd>-->
<dt>Gold Open Access</dt>
<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total
count of gold open access publications.</dd>
<!--<dt>Funding sources</dt>-->
<!--<dd></dd>-->
<dt>Green Open Access</dt>
<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total
count of green open access publications. </dd>
</dl>
</div>
<!--<dt>Funding Organizations</dt>-->
<!--<dd></dd>-->
<!--EU Funded Open Science-->
<div>
<h4>EU Funded Open Science</h4>
<dl>
<dt>Publications vs Datasets vs Software</dt>
<dd>The chart shows a per-year count and comparison of open access publications, datasets and software for this country.</dd>
<!--<dt>Organizations funded by the European Commission since 2013</dt>-->
<!--<dd>The total number of organizations in this country that have participated/participate in a project that was/is-->
<!--funded by the European Commission.</dd>-->
<!--</dl>-->
<!--</div>-->
<dt>Organizations</dt>
<dd>This table shows all organizations from this country, along with the total number of publications, datasets and
software that have authors that are affiliated with each organization. The rows can be ordered by any of the three numbers.</dd>
<!--&lt;!&ndash;Green vs. Gold&ndash;&gt;-->
<!--<div>-->
<!--<h4>Green vs. Gold</h4>-->
<!--<dl>-->
<!--<dt>Green vs Gold Publications</dt>-->
<!--<dd>The line shows the evolution of the total number of publications that have been published through a green-->
<!--open access route, vs the total number of publications that have been published through a gold open access route.</dd>-->
<dt>Repositories</dt>
<dd>This table shows all repositories from this country, along with the total number of publications, datasets
and software that reside in each repository. The rows can be ordered by any of the three numbers.</dd>
</dl>
</div>
<!--<dt>Gold Open Access</dt>-->
<!--<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total-->
<!--count of gold open access publications.</dd>-->
<!--Funding Sources-->
<div>
<h4>Funding Sources</h4>
<dl>
<dt>Publications vs Datasets vs Software</dt>
<dd>This chart shows colored horizontal bars representing total number of publications, datasets and software
for each funder organization associated with this country.</dd>
</dl>
</div>
<!--<dt>Green Open Access</dt>-->
<!--<dd>The chart shows a ranking of the top 15 organizations of this country in descending order of their total-->
<!--count of green open access publications. </dd>-->
<!--</dl>-->
<!--</div>-->
<!--Project Performance-->
<div>
<h4>Project Performance</h4>
<dl>
<dt>Top 10 Projects by publications / datasets / software</dt>
<dd>A ranking of the top 10 projects in descending order of their associated publication/dataset/software count.
Publication/dataset/software count is computed as the total number of publications/datasets/software that have
been funded by a project.</dd>
</dl>
</div>
<!--&lt;!&ndash;EU Funded Open Science&ndash;&gt;-->
<!--<div>-->
<!--<h4>EU Funded Open Science</h4>-->
<!--<dl>-->
<!--<dt>Publications vs Datasets vs Software</dt>-->
<!--<dd>The chart shows a per-year count and comparison of open access publications, datasets and software for this country.</dd>-->
<!--<dt>Organizations</dt>-->
<!--<dd>This table shows all organizations from this country, along with the total number of publications, datasets and-->
<!--software that have authors that are affiliated with each organization. The rows can be ordered by any of the three numbers.</dd>-->
<!--<dt>Repositories</dt>-->
<!--<dd>This table shows all repositories from this country, along with the total number of publications, datasets-->
<!--and software that reside in each repository. The rows can be ordered by any of the three numbers.</dd>-->
<!--</dl>-->
<!--</div>-->
<!--&lt;!&ndash;Funding Sources&ndash;&gt;-->
<!--<div>-->
<!--<h4>Funding Sources</h4>-->
<!--<dl>-->
<!--<dt>Publications vs Datasets vs Software</dt>-->
<!--<dd>This chart shows colored horizontal bars representing total number of publications, datasets and software-->
<!--for each funder organization associated with this country.</dd>-->
<!--</dl>-->
<!--</div>-->
<!--&lt;!&ndash;Project Performance&ndash;&gt;-->
<!--<div>-->
<!--<h4>Project Performance</h4>-->
<!--<dl>-->
<!--<dt>Top 10 Projects by publications / datasets / software</dt>-->
<!--<dd>A ranking of the top 10 projects in descending order of their associated publication/dataset/software count.-->
<!--Publication/dataset/software count is computed as the total number of publications/datasets/software that have-->
<!--been funded by a project.</dd>-->
<!--</dl>-->
<!--</div>-->
</div>
<!--</div>-->
</div>
</li>
</ul>
</div>
<!--</div>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
</div>
</div>
<!--</div>-->
<!--</div>-->
</div>
<!--</div>-->
</div>
</section>

27
src/app/services/data-handler.service.ts
View File

@ -9,6 +9,7 @@ import {
CountryPageOverviewData
} from '../domain/overview-map-data';
import {Indicator} from '../domain/overview-data';
import {TreemapHighchartsData} from '../domain/treemap-highcharts-data';
@Injectable ()
export class DataHandlerService {
@ -699,6 +700,32 @@ export class DataHandlerService {
return countryPageOverviewData;
}
public convertRawDataToTreemapHighchartsData(rawData: RawData) {
const treeMapData: TreemapHighchartsData[] = [];
for (const series of rawData.datasets) {
if (series.series.query.name === 'new.oso.funders.results') {
// let index = 1;
for (const rowResult of series.series.result) {
const treeMapItemData: TreemapHighchartsData = new TreemapHighchartsData();
treeMapItemData.name = rowResult.row[1];
treeMapItemData.value = Number(rowResult.row[0]);
treeMapItemData.colorValue = Number(rowResult.row[0]);
// treeMapItemData.colorValue = index;
treeMapData.push(treeMapItemData);
// index = index + 1;
}
}
}
return treeMapData;
}
private rawResultToCountryMapData(result: Row[]) {
const entityMapData: CountryMapData[] = [];

4
src/app/services/data.service.ts
View File

@ -78,6 +78,10 @@ export class DataService {
return this.httpClient.get<RawData>(this.apiURL + countryPageOverviewDataQuery, headerOptions);
}
public getFundersResults(): Observable<RawData> {
const fundersResultsQuery = '%7B%22series%22%3A%5B%7B%22query%22%3A%7B%22name%22%3A%22new.oso.funders.results%22%7D%7D%5D%2C%22verbose%22%3Atrue%7D';
return this.httpClient.get<RawData>(this.apiURL + fundersResultsQuery, headerOptions);
}

7
src/app/shared/reusablecomponents/reusable-components.module.ts
View File

@ -8,7 +8,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AsideHelpContentComponent, HelpContentComponent } from './help-content.component';
import { HelpContentService } from '../../services/help-content.service';
// import { ModalModule, TabsModule } from 'ngx-bootstrap';
import { FooterComponent } from '../footer/footer.component';
import { ReadMoreComponent, ReadMoreTextComponent } from './read-more.component';
import { TopmenuComponent } from '../topmenu/top-menu.component';
@ -24,12 +23,12 @@ const myGroups = [
// ModalModule.forRoot(),
FormsModule,
ReactiveFormsModule,
HttpClientModule,
HttpClientModule
],
declarations: [
HelpContentComponent,
AsideHelpContentComponent,
TopmenuComponent,
// TopmenuComponent,
FooterComponent,
ReadMoreComponent,
ReadMoreTextComponent,
@ -38,7 +37,7 @@ const myGroups = [
exports: [
HelpContentComponent,
AsideHelpContentComponent,
TopmenuComponent,
// TopmenuComponent,
FooterComponent,
...myGroups,
ReadMoreComponent,

63
src/app/shared/topmenu/top-menu.component.html
View File

@ -17,12 +17,12 @@
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a [routerLink]="['/home']">Home</a></li>
<li class="uk-active"><a [routerLink]="['/overview/' + 'europe']">OA in Europe</a></li>
<li class="uk-active"><a routerLink="/home">Home</a></li>
<li class="uk-active"><a [routerLink]="['/overview','europe']">OA in Europe</a></li>
<!--<li class="uk-active"><a href="#">About</a></li>-->
<li class="uk-active"><a [routerLink]="['/methodology']">Methodology</a></li>
<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a [routerLink]="['home']">Sign In</a></li>
<li class="uk-active"><a routerLink="/home">Sign In</a></li>
</ul>
</div>
</li>
@ -33,7 +33,7 @@
<nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" [routerLink]="['/home']">
<a class="uk-navbar-item uk-logo" routerLink="/home">
<img src="../../../assets/img/OS_Logo_Vertical.svg" alt="Open Science Observatory" width="161"
class="uk-responsive-height"> </a>
</div>
@ -43,17 +43,42 @@
<ng-template #smallHeader>
<nav class="uk-navbar-container uk-navbar smallHeader" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" [routerLink]="['/home']">
<a class="uk-navbar-item uk-logo" routerLink="/home">
<img src="../../../assets/img/OS_Logo_small.svg" alt="Open Science Observatory" width="36"
class="uk-responsive-height"> </a>
</div>
<div class="uk-navbar-center">
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="Search for a country...">
<!--<input type="text">-->
<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">
<span id="search-icon" uk-search-icon></span>
<ng-autocomplete
[data]="countriesCollection"
[searchKeyword]="keyword"
placeHolder="Search for a country..."
(selected)='selectCountryFromAutocompleteEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)'
historyIdentifier="countriesCollection"
[itemTemplate]="itemTemplate"
[notFoundTemplate]="notFoundTemplate">
</ng-autocomplete>
<ng-template #itemTemplate let-item>
<a [innerHTML]="item.name"></a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template>
</div>
<!--<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">-->
<!--<span uk-search-icon></span>-->
<!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->
<!--&lt;!&ndash;<input type="text">&ndash;&gt;-->
<!--</div>-->
</div>
<div class="uk-navbar-right">
@ -65,12 +90,12 @@
</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a [routerLink]="['/home']">Home</a></li>
<li class="uk-active"><a [routerLink]="['/overview/' + 'europe']">OA in Europe</a></li>
<li class="uk-active"><a routerLink="/home">Home</a></li>
<li class="uk-active"><a [routerLink]="['/overview', 'europe']">OA in Europe</a></li>
<!--<li class="uk-active"><a href="#">About</a></li>-->
<li class="uk-active"><a [routerLink]="['/methodology']">Methodology</a></li>
<li class="uk-active"><a routerLink="/methodology">Methodology</a></li>
<li class="uk-nav-divider"></li>
<li class="uk-active"><a [routerLink]="['home']">Sign In</a></li>
<li class="uk-active"><a routerLink="/home">Sign In</a></li>
</ul>
</div>
</li>
@ -93,7 +118,7 @@
<div class="uk-container uk-container-expand">
<nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;}">
<div class="uk-navbar-left">
<a [routerLink]="['home']" class="uk-logo uk-navbar-item">
<a routerLink="/home" class="uk-logo uk-navbar-item">
<img src="../../../assets/img/OS_Logo_Horizontal.svg" alt="Open Science Observatory" class="uk-responsive-height">
</a>
</div>
@ -102,22 +127,22 @@
<ul class="uk-navbar-nav" >
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['home']" [routerLinkActive]="['uk-active']">
<a routerLink="/home" [routerLinkActive]="['uk-active']">
Home
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['/overview/' + 'europe']" [routerLinkActive]="['uk-active']">
<a [routerLink]="['/overview', 'europe']" [routerLinkActive]="['uk-active']">
OA in Europe
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['/methodology']" [routerLinkActive]="['uk-active']">
<a routerLink="/methodology" [routerLinkActive]="['uk-active']">
Methodology
</a>
</li>
<li class="uk-parent" [routerLinkActive]="['uk-active']">
<a [routerLink]="['home']" [routerLinkActive]="['uk-active']">
<a routerLink="/home" [routerLinkActive]="['uk-active']">
Sign In
</a>
</li>

21
src/app/shared/topmenu/top-menu.component.ts
View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import {Router} from '@angular/router';
import { Router } from '@angular/router';
import { countries } from '../../domain/countries';
@Component({
selector: 'app-top-menu',
@ -8,10 +9,28 @@ import {Router} from '@angular/router';
export class TopmenuComponent {
countriesCollection = countries;
keyword = 'name';
constructor(private router: Router) {
}
isHomeRoute() {
return (this.router.url === '/home');
}
selectCountryFromAutocompleteEvent(item) {
// do something with selected item
// console.log('country selected: ', item);
this.router.navigate([`/countryDashboard/${item.id}`]);
}
onChangeSearch(search: string) {
// fetch remote data from here
// And reassign the 'data' which is binded to 'data' property.
}
onFocused(e) {
// do something
}
}

107
src/assets/css/os-observatory-custom.css
View File

@ -425,6 +425,39 @@ div.indicator span {
}
a.publicationsSubnav {
color: #F17AA9 !important;
}
.uk-subnav-pill > .uk-active > a.publicationsSubnav {
background: #f8d5e3;
}
a.datasetsSubnav {
color: #A98BD4 !important;
}
.uk-subnav-pill > .uk-active > a.datasetsSubnav {
background: #e2daf0;
}
a.softwareSubnav {
color: #C2155A !important;
}
.uk-subnav-pill > .uk-active > a.softwareSubnav {
background: #F2D0DE;
}
a.otherSubnav {
color: #00CCCC !important;
}
.uk-subnav-pill > .uk-active > a.otherSubnav {
background: #CCF4F4;
}
/**************** HEADER ****************/
/*.tm-header .uk-navbar-container {*/
@ -787,42 +820,42 @@ div.indicator span {
}
.datasetsColumn {
background-color: #ae91d6;
background-color: #BB9CE6;
box-shadow: 3px 3px 6px #00000029;
opacity: 1;
z-index: 8;
}
.datasetsDot {
background-color: #ae91d6;
background-color: #BB9CE6;
width: 50px;
height: 33px;
border-radius: 50%;
}
.softwareColumn {
background-color: #8f1043;
background-color: #C2155A;
box-shadow: 3px 3px 6px #00000029;
opacity: 1;
z-index: 6;
}
.softwareDot {
background-color: #8f1043;
background-color: #C2155A;
width: 50px;
height: 33px;
border-radius: 50%;
}
.otherColumn {
background-color: #00a1c2;
background-color: #00CCCC;
box-shadow: 3px 3px 6px #00000029;
opacity: 1;
z-index: 4;
}
.otherDot {
background-color: #00a1c2;
background-color: #00CCCC;
width: 50px;
height: 33px;
border-radius: 50%;
@ -867,8 +900,61 @@ hr.entitiesDivider {
}
/********* DONUT - CIRCLE ********/
.circular-chart {
display: block;
margin: 10px auto;
max-width: 80%;
/*max-height: 250px;*/
max-height: 110px;
}
.circle-bg {
fill: none;
stroke: #eee;
stroke-width: 3.8;
}
.circle {
fill: none;
/*stroke-width: 2.8;*/
stroke-width: 4.2;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.circular-chart.publications .circle {
stroke: #F181AE;
}
.circular-chart.datasets .circle {
stroke: #BB9CE6;
}
.circular-chart.software .circle {
stroke: #C2155A;
}
.circular-chart.other .circle {
stroke: #00CCCC;
}
.percentage {
fill: #666;
font-family: sans-serif;
font-size: 0.5em;
text-anchor: middle;
}
/*********************************/
/********* MOBILE ********/
@media only screen and (max-width: 960px) {
@ -907,6 +993,7 @@ hr.entitiesDivider {
.searchForCountry.uk-search .uk-search-icon {
color: #4687f4;
z-index: 10;
}
.progress {
@ -1000,5 +1087,13 @@ hr.entitiesDivider {
.tabContent {
padding: 30px 0px;
}
.dataContainer .tabContent {
padding: 0px;
}
.autocomplete-container .input-container input {
padding: 0 15px 0 40px !important;
}
}