MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

Change stakeholder page with the new theme. Some fixes in methodology and develop

This commit is contained in:
Konstantinos Triantafyllou 2022-03-02 23:58:53 +02:00
parent fa77e9871f
commit 9c67703a2d
14 changed files with 438 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/app.component.html
View File

@ -1,25 +1,15 @@
<div *ngIf="loading == true"> <div *ngIf="loading">
<loading [full]="true"></loading> <loading [full]="true"></loading>
</div> </div>
<div *ngIf="loading == false"> <div *ngIf="!loading">
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar" <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
[class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage"> [class.sidebar_mini]="!open && hasSidebar" [class.stakeholderPage]="isFrontPage">
<div *ngIf="hasHeader" style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;"> <div *ngIf="hasHeader" class="uk-position-fixed uk-width-1-1" style="z-index: 981">
<navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader" <navbar *ngIf="properties" [properties]="properties" portal="monitor_dashboard" [header]="menuHeader"
[userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar> [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
</div> </div>
<dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems" <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
[activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true <dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
[specialMenuItem]="specialSideBarMenuItem"
[searchParams]="{}"
[headerUrl]="'https://' + (properties.environment == 'beta' ? 'beta.' : '') +
'monitor.openaire.eu'" queryParamsHandling="merge"
></dashboard-sidebar>
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" logoLabel="Admin"
[headerUrl]="'https://' + (properties.environment == 'beta' ? 'beta.' : '') +
'monitor.openaire.eu'" headerPosition="right"
[specialMenuItem]="specialSideBarMenuItem"
></dashboard-sidebar>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<bottom *ngIf="isFrontPage" [darkBackground]="false" <bottom *ngIf="isFrontPage" [darkBackground]="false"
[centered]="true" [properties]="properties" [showMenuItems]="true"></bottom> [centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>

140
src/app/app.component.ts
View File

@ -17,6 +17,7 @@ import {Option} from "./openaireLibrary/sharedComponents/input/input.component";
import {StakeholderUtils} from "./utils/indicator-utils"; import {StakeholderUtils} from "./utils/indicator-utils";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll"; import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {ConnectHelper} from "./openaireLibrary/connect/connectHelper"; import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
@Component({ @Component({
@ -47,7 +48,7 @@ export class AppComponent implements OnInit, OnDestroy {
logoUrl: null, logoUrl: null,
logoSmallUrl: null, logoSmallUrl: null,
position: 'center', position: 'center',
badge: false, badge: true,
stickyAnimation: false, stickyAnimation: false,
menuPosition: "center" menuPosition: "center"
}; };
@ -67,7 +68,7 @@ export class AppComponent implements OnInit, OnDestroy {
private layoutService: LayoutService, private layoutService: LayoutService,
private smoothScroll: SmoothScroll, private smoothScroll: SmoothScroll,
private stakeholderService: StakeholderService, private stakeholderService: StakeholderService,
private cdr: ChangeDetectorRef, private configurationService: ConfigurationService) { private cdr: ChangeDetectorRef, private configurationService: ConfigurationService) {
this.subscriptions.push(this.router.events.subscribe(event => { this.subscriptions.push(this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
let r = this.route; let r = this.route;
@ -172,7 +173,7 @@ export class AppComponent implements OnInit, OnDestroy {
} }
})); }));
this.subscriptions.push(this.data.subscribe(data => { this.subscriptions.push(this.data.subscribe(data => {
if(data && data.portal) { if (data && data.portal) {
this.setProperties(data.portal); this.setProperties(data.portal);
this.configurationService.initCommunityInformation(this.properties, this.properties.adminToolsCommunity); this.configurationService.initCommunityInformation(this.properties, this.properties.adminToolsCommunity);
} }
@ -181,7 +182,7 @@ export class AppComponent implements OnInit, OnDestroy {
this.user = user; this.user = user;
if (user) { if (user) {
this.buildMenu(); this.buildMenu();
if(!this.notificationGroupsInitialized) { if (!this.notificationGroupsInitialized) {
this.setNotificationGroups(); this.setNotificationGroups();
} }
} }
@ -190,18 +191,24 @@ export class AppComponent implements OnInit, OnDestroy {
public setNotificationGroups() { public setNotificationGroups() {
this.notificationGroups = []; this.notificationGroups = [];
if(Session.isPortalAdministrator(this.user)) { if (Session.isPortalAdministrator(this.user)) {
this.notificationGroups.push({value: Role.PORTAL_ADMIN, label: 'Portal Administrators'}); this.notificationGroups.push({value: Role.PORTAL_ADMIN, label: 'Portal Administrators'});
} }
for(let type of this.stakeholderUtils.types) { for (let type of this.stakeholderUtils.types) {
if(Session.isCurator(type.value, this.user) || Session.isPortalAdministrator(this.user)) { if (Session.isCurator(type.value, this.user) || Session.isPortalAdministrator(this.user)) {
this.notificationGroups.push({value: Role.curator(type.value), label: type.label + ' Curators'}); this.notificationGroups.push({value: Role.curator(type.value), label: type.label + ' Curators'});
} }
} }
this.subscriptions.push(this.stakeholderService.getMyStakeholders(this.properties.monitorServiceAPIURL).subscribe(stakeholders => { this.subscriptions.push(this.stakeholderService.getMyStakeholders(this.properties.monitorServiceAPIURL).subscribe(stakeholders => {
stakeholders.forEach(stakeholder => { stakeholders.forEach(stakeholder => {
this.notificationGroups.push({value: Role.manager(stakeholder.type, stakeholder.alias), label: stakeholder.name + ' Managers'}); this.notificationGroups.push({
this.notificationGroups.push({value: Role.member(stakeholder.type, stakeholder.alias), label: stakeholder.name + ' Members'}); value: Role.manager(stakeholder.type, stakeholder.alias),
label: stakeholder.name + ' Managers'
});
this.notificationGroups.push({
value: Role.member(stakeholder.type, stakeholder.alias),
label: stakeholder.name + ' Members'
});
}); });
this.notificationGroupsInitialized = true; this.notificationGroupsInitialized = true;
})); }));
@ -234,7 +241,7 @@ export class AppComponent implements OnInit, OnDestroy {
this.stakeholder.topics.forEach((topic) => { this.stakeholder.topics.forEach((topic) => {
if (this.isPublicOrIsMember(topic.visibility)) { if (this.isPublicOrIsMember(topic.visibility)) {
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", ( let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
'/' + this.stakeholder.alias + '/' + topic.alias), '/' + this.stakeholder.alias + '/' + topic.alias),
null, [], [], {}); null, [], [], {});
topicItem.icon = topic.icon; topicItem.icon = topic.icon;
items.push(topicItem); items.push(topicItem);
@ -259,22 +266,22 @@ export class AppComponent implements OnInit, OnDestroy {
this.userMenuItems.push(new MenuItem("", "Manage profiles", this.userMenuItems.push(new MenuItem("", "Manage profiles",
"", "/admin", false, [], [], {})); "", "/admin", false, [], [], {}));
} }
if(Session.isPortalAdministrator(this.user) ) { if (Session.isPortalAdministrator(this.user)) {
this.userMenuItems.push( new MenuItem("adminOptions", "Super Admin options","", "/admin/admin-tools/portals", false, [], [], {})); this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}));
this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor portal options","", "/admin/monitor/admin-tools/pages", false, [], [], {})); this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor portal options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
} }
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {})); this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
} }
if (this.stakeholder) { if (this.stakeholder) {
if (!this.isDashboard) { if (!this.hasAdminMenu) {
this.menuHeader = { this.menuHeader = {
route: null, route: "/" + this.stakeholder.alias,
url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu', url: null,
title: "Monitor", title: this.stakeholder.name,
logoUrl: 'assets/common-assets/logo-large-monitor.png', logoUrl: StringUtils.getLogoUrl(this.stakeholder),
logoSmallUrl: "assets/common-assets/logo-small-monitor.png", logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
position: 'left', position: 'center',
badge: true, badge: true,
stickyAnimation: false, stickyAnimation: false,
menuPosition: "center" menuPosition: "center"
@ -283,66 +290,33 @@ export class AppComponent implements OnInit, OnDestroy {
rootItem: new MenuItem("dashboard", "Dashboard", rootItem: new MenuItem("dashboard", "Dashboard",
"", "/" + this.stakeholder.alias, false, [], null, {}), items: [] "", "/" + this.stakeholder.alias, false, [], null, {}), items: []
}); });
this.menuItems.push({
rootItem: new MenuItem("methodology", "Methodology",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}), items: [
new MenuItem("methodology", "Terminology and construction",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}),
new MenuItem("methodology", "See how it works",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}, null, "how"),
]
});
if(this.stakeholder.type === "funder") {
this.menuItems.push({
rootItem: new MenuItem("develop", "Develop",
"", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
});
}
if (this.isCurator()) {
this.menuItems.push({
rootItem: new MenuItem("manage", "Manage",
"", "/admin", false, [], null, {}), items: []
});
}
}
else if (this.isFrontPage) {
this.menuHeader = {
route: "/" + this.stakeholder.alias,
url: null,
title: this.stakeholder.name,
logoUrl: null,
logoSmallUrl: null,
position: 'center',
badge: false,
stickyAnimation: false,
menuPosition: "center"
};
this.menuItems.push({
rootItem: new MenuItem("methodology", "Methodology",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}), items: [
new MenuItem("methodology", "Terminology and construction",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}),
new MenuItem("methodology", "See how it works",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}, null, "how"),
]
});
if(this.stakeholder.type === "funder") {
this.menuItems.push({
rootItem: new MenuItem("develop", "Develop",
"", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
});
}
if (this.isCurator()) {
this.menuItems.push({
rootItem: new MenuItem("manage", "Manage",
"", "/admin", false, [], null, {}), items: []
});
}
if (this.isPublicOrIsMember(this.stakeholder.visibility)) { if (this.isPublicOrIsMember(this.stakeholder.visibility)) {
this.specialSideBarMenuItem = new MenuItem("search", "Search research outcomes", "", this.properties.searchLinkToResults, false, [], null, {resultbestaccessright: '"' + encodeURIComponent("Open Access") + '"'}); this.menuItems.push({
this.specialSideBarMenuItem.icon = '<span uk-icon="search"></span>'; rootItem: new MenuItem("search", "Search", "", this.properties.searchLinkToResults,
} else { false, [], null, {resultbestaccessright: '"' + encodeURIComponent("Open Access") + '"'}),
this.specialSideBarMenuItem = null; items: []
});
}
this.menuItems.push({
rootItem: new MenuItem("methodology", "Methodology",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}), items: [
new MenuItem("methodology", "Terminology and construction",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}),
new MenuItem("methodology", "See how it works",
"", "/" + this.stakeholder.alias + "/methodology", false, [], null, {}, null, "how"),
]
});
if (this.stakeholder.type === "funder") {
this.menuItems.push({
rootItem: new MenuItem("develop", "Develop",
"", "/" + this.stakeholder.alias + "/develop", false, [], null, {}), items: []
});
}
if (this.isManager(this.stakeholder)) {
this.menuItems.push({
rootItem: new MenuItem("manage", "Manage",
"", "/admin/" + this.stakeholder.alias, false, [], null, {}), items: []
});
} }
} else { } else {
this.menuHeader = { this.menuHeader = {
@ -362,7 +336,7 @@ export class AppComponent implements OnInit, OnDestroy {
}); });
this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, "<i uk-icon=\"image\"></i>")); this.adminMenuItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, "<i uk-icon=\"image\"></i>"));
this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, "<i uk-icon=\"image\"></i>")); this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, "<i uk-icon=\"image\"></i>"));
if(this.stakeholder.defaultId) { if (this.stakeholder.defaultId) {
this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, "<i uk-icon=\"users\"></i>")); this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, "<i uk-icon=\"users\"></i>"));
if (Session.isPortalAdministrator(this.user)) { if (Session.isPortalAdministrator(this.user)) {
this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, null, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools")); this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, null, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools"));
@ -432,9 +406,9 @@ export class AppComponent implements OnInit, OnDestroy {
return !(visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC")); return !(visibility == "PRIVATE" || (this.isViewPublic && visibility != "PUBLIC"));
} }
setProperties(id, type = null){ setProperties(id, type = null) {
this.properties.adminToolsCommunity = id; this.properties.adminToolsCommunity = id;
if(type) { if (type) {
this.properties.adminToolsPortalType = type; this.properties.adminToolsPortalType = type;
} else { } else {
ConnectHelper.setPortalTypeFromPid(id); ConnectHelper.setPortalTypeFromPid(id);

10
src/app/develop/develop.component.ts
View File

@ -13,13 +13,11 @@ import {StakeholderUtils} from "../utils/indicator-utils";
template: ` template: `
<div page-content> <div page-content>
<div inner> <div inner>
<div class="uk-section uk-container uk-container-large uk-margin-large-top"> <div class="uk-container uk-container-large">
<div class="uk-padding-small">
<h1>Help developers <br> with OpenAIRE APIs<span class="uk-text-primary">.</span></h1> <h1>Help developers <br> with OpenAIRE APIs<span class="uk-text-primary">.</span></h1>
</div>
</div> </div>
<div class="uk-section uk-container uk-container-large uk-padding-remove-top"> <div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small uk-grid uk-grid-large uk-child-width-1-3@m uk-child-width-1-1" uk-grid> <div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div class="uk-text-center uk-margin-large-top"> <div class="uk-text-center uk-margin-large-top">
<div class="uk-icon-bg-shadow uk-margin-auto"> <div class="uk-icon-bg-shadow uk-margin-auto">
<icon name="description" [flex]="true" ratio="2" visuallyHidden="For research outcomes"></icon> <icon name="description" [flex]="true" ratio="2" visuallyHidden="For research outcomes"></icon>
@ -64,7 +62,7 @@ import {StakeholderUtils} from "../utils/indicator-utils";
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large"> <div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small uk-grid uk-grid-large uk-child-width-1-2@m uk-child-width-1-1" uk-grid> <div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
<div> <div>
<div>Request examples for research outcomes:</div> <div>Request examples for research outcomes:</div>
<ul class="uk-list uk-list-disc"> <ul class="uk-list uk-list-disc">

402
src/app/methodology/methodology.component.ts
View File

@ -12,211 +12,207 @@ import {ActivatedRoute, Router} from "@angular/router";
template: ` template: `
<div page-content> <div page-content>
<div inner> <div inner>
<div class="uk-section uk-container uk-container-large uk-margin-large-top"> <div class="uk-container uk-container-large">
<div class="uk-padding-small"> <h1>Terminology and <br> construction<span class="uk-text-primary">.</span></h1>
<h1>Terminology and <br> construction<span class="uk-text-primary">.</span></h1>
</div>
</div> </div>
<div class="uk-section uk-container uk-container-large uk-padding-remove-top"> <div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small"> <my-tabs>
<my-tabs> <my-tab [tabTitle]="'Entities'" [tabId]="'entities'" class="uk-active">
<my-tab [tabTitle]="'Entities'" [tabId]="'entities'" class="uk-active"> <ng-container>
<ng-container> <dl class="uk-description-list uk-description-list-divider">
<dl class="uk-description-list uk-description-list-divider"> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1 uk-text-primary">Research Outcomes</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Research Outcomes</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <div>There are currently four different types of research outcomes in the OpenAIRE Research <br> Graph:</div>
<div>There are currently four different types of research outcomes in the OpenAIRE Research <br> Graph:</div> <ul class="uk-list uk-list-disc">
<ul class=""> <li>Publication</li>
<li>Publication</li> <li>Dataset</li>
<li>Dataset</li> <li>Software</li>
<li>Software</li> <li>Other Research Product</li>
<li>Other Research Product</li> </ul>
</ul> <div class="uk-margin-small-top">
<div class="uk-margin-small-top"> OpenAIRE deduplicates (merges) different records of research outcomes and keeps the <br> metadata of all instances.
OpenAIRE deduplicates (merges) different records of research outcomes and keeps the <br> metadata of all instances. </div>
</div> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Publication</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Publication</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Research outcomes intended for human reading (published articles, pre-prints, conference <br> papers, presentations, technical reports, etc.)
Research outcomes intended for human reading (published articles, pre-prints, conference <br> papers, presentations, technical reports, etc.) </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Dataset</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Dataset</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <div>Research data</div>
<div>Research data</div> <div>Granularity is not defined by OpenAIRE, it reflects the granularity supported by
<div>Granularity is not defined by OpenAIRE, it reflects the granularity supported by the sources <br> from which the description of the dataset has been collected.</div>
the sources <br> from which the description of the dataset has been collected.</div> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Software</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Software</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Source code or software package developed and/or used in a research context
Source code or software package developed and/or used in a research context </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Other Research Product</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Other Research Product</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Anything that does not fall in the previous categories (e.g. workflow, methods, protocols)
Anything that does not fall in the previous categories (e.g. workflow, methods, protocols) </dd>
</dd> </div>
</div> </dl>
</dl> </ng-container>
</ng-container> </my-tab>
</my-tab> <my-tab [tabTitle]="'Attributes of Entities'" [tabId]="'attributes'">
<my-tab [tabTitle]="'Attributes of Entities'" [tabId]="'attributes'"> <ng-container>
<ng-container> <dl class="uk-description-list uk-description-list-divider">
<dl class="uk-description-list uk-description-list-divider"> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Organization & Country</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Organization & Country</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <p><span class="uk-text-bold">For research outcomes:</span> the affiliated organizations of its
<p><span class="uk-text-bold">For research outcomes:</span> the affiliated organizations of its authors (and their country)</p>
authors (and their country)</p> <p><span class="uk-text-bold">For projects:</span> the organizations participating in the project
<p><span class="uk-text-bold">For projects:</span> the organizations participating in the project (i.e. beneficiaries of the grant) and
(i.e. beneficiaries of the grant) and their countries
their countries </p>
</p> <p>
<p> <span class="uk-text-bold">Country code mapping: </span>
<span class="uk-text-bold">Country code mapping: </span> <a href="https://api.openaire.eu/vocabularies/dnet:countries" target="_blank">
<a href="https://api.openaire.eu/vocabularies/dnet:countries" target="_blank"> https://api.openaire.eu/vocabularies/dnet:countries</a>
https://api.openaire.eu/vocabularies/dnet:countries</a> </p>
</p> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Type</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Type</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <p>The sub-type of a research outcome (e.g., a publication can be a pre-print, conference proceeding,
<p>The sub-type of a research outcome (e.g., a publication can be a pre-print, conference proceeding, article,
article, etc.)</p>
etc.)</p> <p><span class="uk-text-bold">Resource type mapping: </span>
<p><span class="uk-text-bold">Resource type mapping: </span> <a href="https://api.openaire.eu/vocabularies/dnet:result_typologies" target="_blank">https://api.openaire.eu/vocabularies/dnet:result_typologies</a>
<a href="https://api.openaire.eu/vocabularies/dnet:result_typologies" target="_blank">https://api.openaire.eu/vocabularies/dnet:result_typologies</a> (click on the code to see the specific types for each result type)
(click on the code to see the specific types for each result type) </p>
</p> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Access mode</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Access mode</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <p>The best available (across all instances) access rights of a research outcome</p>
<p>The best available (across all instances) access rights of a research outcome</p> <p>Types: open, restricted, closed, embargo (= closed for a specific period of time, then open)</p>
<p>Types: open, restricted, closed, embargo (= closed for a specific period of time, then open)</p> <p><span class="uk-text-bold">Note:</span> definition of <span class="uk-text-bold">restricted</span>
<p><span class="uk-text-bold">Note:</span> definition of <span class="uk-text-bold">restricted</span> may vary by data source.</p>
may vary by data source.</p> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">PID (persistent identifier)</dt>
<dt class="uk-width-1-5@m uk-width-1-1">PID (persistent identifier)</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <p>A long-lasting reference to a resource</p>
<p>A long-lasting reference to a resource</p> <p><span class="uk-text-bold">Types: </span> <a
<p><span class="uk-text-bold">Types: </span> <a href="http://api.openaire.eu/vocabularies/dnet:pid_types" target="_blank">http://api.openaire.eu/vocabularies/dnet:pid_types</a>
href="http://api.openaire.eu/vocabularies/dnet:pid_types" target="_blank">http://api.openaire.eu/vocabularies/dnet:pid_types</a> </p>
</p> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Context</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Context</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Related research community, initiative or infrastructure.
Related research community, initiative or infrastructure. </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Journal</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Journal</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> The scientific journal an article is published in.
The scientific journal an article is published in. </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Publisher</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Publisher</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> The publisher of the venue (journal, book, etc.) of a research outcome.
The publisher of the venue (journal, book, etc.) of a research outcome. </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Content Providers (Datasources)</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Content Providers (Datasources)</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> <p>The different data sources ingested in the OpenAIRE Research Graph.</p>
<p>The different data sources ingested in the OpenAIRE Research Graph.</p> <div class="uk-text-bold">Content Provider Types:</div>
<div class="uk-text-bold">Content Provider Types:</div> <ul class="uk-list uk-list-disc">
<ul class="portal-circle"> <li>Repositories</li>
<li>Repositories</li> <li>Open Access Publishers & Journals</li>
<li>Open Access Publishers & Journals</li> <li>Aggregators</li>
<li>Aggregators</li> <li>Entity Registries</li>
<li>Entity Registries</li> <li>Journal Aggregators</li>
<li>Journal Aggregators</li> <li>CRIS (Current Research Information System)</li>
<li>CRIS (Current Research Information System)</li> </ul>
</ul> </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Repositories</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Repositories</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Information systems where scientists upload the bibliographic metadata and payloads of their
Information systems where scientists upload the bibliographic metadata and payloads of their research outcomes (e.g. PDFs of their scientific articles, CSVs of their data, archive with their
research outcomes (e.g. PDFs of their scientific articles, CSVs of their data, archive with their software), due to obligations from their organizations, their funders, or due to community practices
software), due to obligations from their organizations, their funders, or due to community practices (e.g. ArXiv, Europe PMC, Zenodo).
(e.g. ArXiv, Europe PMC, Zenodo). </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Open Access Publishers & Journals</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Open Access Publishers & Journals</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Information systems of open access publishers or relative journals, which offer bibliographic
Information systems of open access publishers or relative journals, which offer bibliographic metadata and PDFs of their published articles.
metadata and PDFs of their published articles. </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Aggregators</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Aggregators</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Information systems that collect descriptive metadata about research products from multiple sources
Information systems that collect descriptive metadata about research products from multiple sources in order to enable cross-data source discovery of given research products (e,g, DataCite,
in order to enable cross-data source discovery of given research products (e,g, DataCite, BASE, DOAJ).
BASE, DOAJ). </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">Entity Registries</dt>
<dt class="uk-width-1-5@m uk-width-1-1">Entity Registries</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Information systems created with the intent of maintaining authoritative registries of given
Information systems created with the intent of maintaining authoritative registries of given entities in the scholarly communication, such as OpenDOAR for the institutional repositories, re3data
entities in the scholarly communication, such as OpenDOAR for the institutional repositories, re3data for the data repositories, CORDA and other funder databases for projects and funding information.
for the data repositories, CORDA and other funder databases for projects and funding information. </dd>
</dd> </div>
</div> <hr>
<hr> <div class="uk-grid uk-padding-small" uk-grid>
<div class="uk-grid uk-padding-small" uk-grid> <dt class="uk-width-1-5@m uk-width-1-1">CRIS (Current Research Information System)</dt>
<dt class="uk-width-1-5@m uk-width-1-1">CRIS (Current Research Information System)</dt> <dd class="uk-width-expand">
<dd class="uk-width-expand"> Information systems adopted by research and academic organizations to keep track of their research
Information systems adopted by research and academic organizations to keep track of their research administration records and relative results; examples of CRIS content are articles or datasets funded
administration records and relative results; examples of CRIS content are articles or datasets funded by projects, their principal investigators, facilities acquired thanks to funding, etc.
by projects, their principal investigators, facilities acquired thanks to funding, etc. </dd>
</dd> </div>
</div> </dl>
</dl> </ng-container>
</ng-container> </my-tab>
</my-tab> </my-tabs>
</my-tabs> <div class="uk-margin-medium-top">
<div class="uk-margin-large-top"> <img src="assets/common-assets/graph.svg">
<img src="assets/common-assets/graph.svg"> <span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">More information for <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span>
href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a>.</span> </div>
</div>
</div>
</div> </div>
<div id="how" class="uk-container uk-container-large uk-section-small"> <div id="how" class="uk-container uk-container-large uk-section uk-section-small uk-margin-large-top">
<h2 class="uk-h1"> <h2 class="uk-h1">
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span> Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h2> </h2>

10
src/app/monitor/monitor-routing.module.ts
View File

@ -18,7 +18,7 @@ import {MonitorComponent} from "./monitor.component";
canDeactivate: [PreviousRouteRecorder], canDeactivate: [PreviousRouteRecorder],
data: { data: {
hasSidebar: false, hasSidebar: false,
isDashboard: false isDashboard: true
} }
}, },
{ {
@ -27,13 +27,17 @@ import {MonitorComponent} from "./monitor.component";
canDeactivate: [PreviousRouteRecorder], canDeactivate: [PreviousRouteRecorder],
data: { data: {
hasSidebar: false, hasSidebar: false,
isDashboard: false isDashboard: true
} }
}, },
{ {
path: ':stakeholder/search', path: ':stakeholder/search',
loadChildren: () => import('../search/search.module').then(m => m.SearchModule), loadChildren: () => import('../search/search.module').then(m => m.SearchModule),
canDeactivate: [PreviousRouteRecorder] canDeactivate: [PreviousRouteRecorder],
data: {
hasSidebar: false,
isDashboard: true
}
}, },
{ {
path: ':stakeholder/:topic', path: ':stakeholder/:topic',

4
src/app/monitor/monitor.component.css
View File

@ -1,3 +1,7 @@
.uk-card { .uk-card {
min-height: 270px; min-height: 270px;
} }
.uk-card.semiFiltered, .uk-card.semiFiltered > * > .highcharts-series-group {
opacity: 0.5;
}

238
src/app/monitor/monitor.component.html
View File

@ -2,7 +2,7 @@
<!-- <div class="uk-grid uk-grid-small uk-text-small" uk-grid>--> <!-- <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
<span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin"> <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin">
<a (click)="clearPeriodFilter()" [class]="((loading)?' uk-disabled':' ')+' uk-link-text '"> <span <a (click)="clearPeriodFilter()" [class]="((loading)?' uk-disabled':' ')+' uk-link-text '"> <span
class="selectedFilterLabel" [class.uk-margin-small-left]="margin" class="filter-tag" [class.uk-margin-small-left]="margin"
title="Remove {{periodFilter.selectedFromAndToValues}}"> title="Remove {{periodFilter.selectedFromAndToValues}}">
<i uk-icon="close"></i> <i uk-icon="close"></i>
<span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span> <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
@ -14,11 +14,11 @@
<ng-container *ngIf="value.selected"> <ng-container *ngIf="value.selected">
<span class="uk-grid-margin"> <span class="uk-grid-margin">
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span --> <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
<span class="selectedFilterLabel " [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name" <span class="filter-tag" [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"
(click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues= (click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=
filter.countSelectedValues -1; filter.countSelectedValues -1;
filterChanged({value:filter}) "> filterChanged({value:filter}) ">
<a [class]="((loading)?' uk-disabled':' ')+' uk-link-text '"> <a [class.uk-disabled]="loading">
<span class=" clickable" aria-hidden="true"> <span class=" clickable" aria-hidden="true">
<span class="uk-icon"> <span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
@ -40,25 +40,20 @@
</ng-container> </ng-container>
<!-- </div>--> <!-- </div>-->
</ng-template> </ng-template>
<div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle"> <div page-content>
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header> <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
<nav class=" "> <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-margin-medium">
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" <ul class="uk-tab">
class="uk-grid uk-flex uk-flex-middle" uk-grid> <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
<div class="uk-width-expand"> <li *ngIf="isPublicOrIsMember(category.visibility)" [class.uk-active]="category.alias === activeCategory.alias">
<ul class="customTabs uk-tab">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
<li *ngIf="isPublicOrIsMember(category.visibility)"
[class.uk-active]="category.alias ===
activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"> <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)">
<span class="title">{{category.name}}</span> <span class="title">{{category.name}}</span>
</a> </a>
</li> </li>
</ng-template> </ng-template>
</ul> </ul>
</div> <!-- TODO add Print on the right side -->
<div class="uk-width-auto@m uk-width-1-1 uk-flex uk-flex-center"> <!--<div class="uk-width-auto@m uk-width-1-1 uk-flex uk-flex-center">
<a class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center"> <a class="uk-text-uppercase uk-flex uk-flex-middle uk-flex-center">
<button class="uk-icon-button large uk-button-secondary" (click)="printReport()"> <button class="uk-icon-button large uk-button-secondary" (click)="printReport()">
<icon name="print"></icon> <icon name="print"></icon>
@ -67,20 +62,20 @@
Print Report Print Report
</button> </button>
</a> </a>
</div> </div>-->
</div> </div>
</nav> <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
<ul *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" <ul class="uk-subnav uk-subnav-pill">
class="uk-subnav uk-subnav-pill subCategoriesTabs "> <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index"> <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
<li *ngIf="isPublicOrIsMember(subCategory.visibility)" [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''"> <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)" class="uk-margin-remove-bottom"
class="uk-margin-remove-bottom" ><span>{{subCategory.name}}</span></a>
><span>{{subCategory.name}}</span></a> </li>
</li> </ng-template>
</ng-template> </ul>
</ul> </div>
<div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small"> <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom uk-text-small">
<span class="uk-grid-margin">Filters: </span> <span class="uk-grid-margin">Filters: </span>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container> <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
@ -90,24 +85,17 @@
<div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical"> <div [class.uk-padding]="!isSmallScreen" class="uk-padding-remove-vertical">
<div *ngIf="privateStakeholder" class="message"> <div *ngIf="privateStakeholder" class="message">
<div class="uk-text-center"> <div class="uk-text-center">
<h3><i> <h3 class="uk-flex uk-flex-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"> <icon name="incognito" ratio="2"></icon>
<path d="M0 0h24v24H0z" fill="none"/> <span class="uk-margin-left">Private data</span>
<path
d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
</svg>
</i>
Private data
</h3> </h3>
<div class="uk-text-large "></div>
</div> </div>
</div> </div>
<div *ngIf="!privateStakeholder && stakeholder"> <div *ngIf="!privateStakeholder && stakeholder">
<div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0)) <div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
&& ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) || && ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
(activeCategory && activeCategory.description && activeCategory.description.length > 0) || (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
(activeTopic && activeTopic.description && activeTopic.description.length > 0))" (activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
class="uk-text-center">
<div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left"> <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
{{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
: (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
@ -126,103 +114,95 @@
</div> </div>
</ng-template> </ng-template>
<ng-template #content> <ng-template #content>
<div *ngFor="let number of activeSubCategory.numbers; let i = index;" <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
class="uk-grid uk-grid-small uk-margin-bottom uk-margin-top" <div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-large-bottom" uk-grid uk-height-match="target: .uk-card">
uk-height-match="target: .uk-card"> <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<h5 *ngIf="countIndicatorsToShow(number.indicators)> 0 " <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5> <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)" class="uk-margin-bottom">
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
<div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)" class="uk-margin-bottom"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center" <div class="uk-text-center">
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()" <!--<div *ngIf="properties.environment === 'development'">
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
<div class="uk-card-body uk-text-center"> </div>-->
<div *ngIf="properties.environment === 'development'">Filtered: <div class="number uk-text-bold uk-text-primary-gradient">
{{indicator.indicatorPaths[0].filtersApplied}} <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
out of <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
{{countSelectedFilters()}}</div>
<div class="uk-text-bold ">{{indicator.name}}</div>
<h3 class="uk-margin-medium-top uk-text-bold">
<span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>
<div *ngIf="indicator.description || indicator.additionalDescription" class="uk-overlay uk-position-bottom">
<div class="uk-padding-small">
<div *ngIf="indicator.description">
{{indicator.description}}
</div>
<div *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</div> </div>
<div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div> </div>
</div> <div *ngIf="indicator.description || indicator.additionalDescription" class="uk-overlay uk-position-bottom">
</div> <div class="uk-padding-small">
</div> <div *ngIf="indicator.description">
</ng-template> {{indicator.description}}
</div> </div>
<div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0"> <div *ngIf="indicator.additionalDescription">
<div *ngFor="let chart of activeSubCategory.charts; let i = index;" {{indicator.additionalDescription}}
class="uk-grid uk-grid-small uk-margin-bottom uk-flex uk-flex-middle " </div>
uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title && chart.title.length > 0 && countIndicatorsToShow(chart.indicators) > 0 "
class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div
*ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom">
<div class="uk-card uk-card-default"
[class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
'image'" class="uk-alert uk-alert-danger uk-text-center">I frames preview is disabled</div>
<!-- {{chartsActiveType.get(i).safeResourceUrl}}-->
<!-- <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')">
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding multi-line-ellipsis lines-3">
<p class="uk-margin-remove">
<span *ngIf="indicator.description">
{{indicator.description}}
</span>
<br>
<span *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</span>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ng-template> </ng-template>
</div> </div>
</ng-container>
<div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0">
<ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
<div *ngIf="countIndicatorsToShow(chart.indicators) > 0" class="uk-grid uk-margin-medium-bottom uk-flex uk-flex-middle" uk-height-match="target: .uk-card">
<h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom">
<div class="uk-card uk-card-default" [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div>
</h4>
<div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of indicator.indicatorPaths;"
class="uk-button"
(click)="setActiveChart(i, j, indicatorPath.type)"
[class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
{{indicatorPath.type}}
</button>
</div>
<div *ngIf="properties.environment === 'development'">
Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}} out of
{{countSelectedFilters()}}</div>
<iframe *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
<div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !==
'image'" class="uk-alert uk-alert-danger uk-text-center">I frames preview is disabled</div>
<!-- {{chartsActiveType.get(i).safeResourceUrl}}-->
<!-- <a [href]="chartsActiveType.get(i).safeResourceUrl" target="_blank" > ChartuURL</a>-->
<img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
[src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
[class]="' uk-width-1-1 uk-height-' +
(indicator.height?indicator.height.toLowerCase():'medium')">
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
</div>
<div *ngIf="indicator.description || indicator.additionalDescription"
class="uk-overlay uk-position-bottom">
<div class="uk-padding multi-line-ellipsis lines-3">
<p class="uk-margin-remove">
<span *ngIf="indicator.description">
{{indicator.description}}
</span>
<br>
<span *ngIf="indicator.additionalDescription">
{{indicator.additionalDescription}}
</span>
</p>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</ng-container>
</div> </div>
<div class="uk-margin-medium-top uk-flex hideInfo"> <div class="uk-margin-medium-top uk-flex hideInfo">
<!-- Last Stats Date--> <!-- Last Stats Date-->

2
src/app/monitor/monitor.component.ts
View File

@ -60,7 +60,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
public chartsActiveType: Map<string, IndicatorPath> = new Map<string, IndicatorPath>(); public chartsActiveType: Map<string, IndicatorPath> = new Map<string, IndicatorPath>();
private errorMessages: ErrorMessagesComponent; private errorMessages: ErrorMessagesComponent;
properties: EnvProperties = properties; properties: EnvProperties = properties;
filterToggle = false;
public routerHelper: RouterHelper = new RouterHelper(); public routerHelper: RouterHelper = new RouterHelper();
filters: Filter[] = []; filters: Filter[] = [];
queryParams = {}; queryParams = {};
@ -121,7 +120,6 @@ export class MonitorComponent implements OnInit, OnDestroy {
this.activeTopic = null; this.activeTopic = null;
this.activeCategory = null; this.activeCategory = null;
this.activeSubCategory = null; this.activeSubCategory = null;
this.filterToggle = false;
if (subscription) { if (subscription) {
subscription.unsubscribe(); subscription.unsubscribe();
} }

4
src/app/monitor/monitor.module.ts
View File

@ -23,7 +23,7 @@ import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/sea
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module"; import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
import {IconsService} from '../openaireLibrary/utils/icons/icons.service'; import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module'; import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {print} from "../openaireLibrary/utils/icons/icons"; import {incognito, print} from "../openaireLibrary/utils/icons/icons";
@NgModule({ @NgModule({
imports: [ imports: [
@ -45,6 +45,6 @@ import {print} from "../openaireLibrary/utils/icons/icons";
}) })
export class MonitorModule { export class MonitorModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([print]); this.iconsService.registerIcons([incognito, print]);
} }
} }

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit c2b6547b4c36415ff2e9b1050dcdabc80bb34973 Subproject commit 4698a5fafd51fa7d8a0969b0d4e2691cce53ccf4

2
src/assets/dashboard-theme

@ -1 +1 @@
Subproject commit a9e0079b207d8e2894f71fff5b683afe44d3eb57 Subproject commit c66881b1d021db2ec99fb3e62fd179dcba6c0a10

72
src/assets/new.css → src/assets/monitor-dashboard-custom.css
View File

@ -4,12 +4,39 @@
/* --portal-dark-color: #7c9144;*/ /* --portal-dark-color: #7c9144;*/
/*}*/ /*}*/
/*.stakeholderPage {*/ .stakeholderPage {
/* --primary-color: var(--theme-secondary-color);*/ /* Structure */
/* --secondary-color: var(--theme-secondary-color);*/ --structure-background-color: #F1F1F1;
/* --primary-color-rgb: var(--theme-secondary-color-rgb);*/
/* --secondary-color-rgb: var(--theme-secondary-color-rgb);*/ /* Dashboard */
/*}*/ --dashboard-primary-color: var(--monitor-color);
--dashboard-primary-color-rgb: var(--monitor-color-rgb);
--dashboard-primary-image: linear-gradient(133deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
--dashboard-primary-inverse-color: var(--light-color);
/* Buttons */
--button-primary-background: var(--monitor-color);
--button-primary-background-image: linear-gradient(110deg, var(--monitor-light-color) 50%, var(--monitor-dark-color) 100%);
--button-secondary-background: var(--light-color);
--button-secondary-color: var(--monitor-color);
--button-secondary-border-color: var(--monitor-color);
--button-secondary-background-hover: var(--secondary-color);
--button-secondary-color-hover: var(--light-color);
--button-secondary-border-color-hover: transparent;
/* Backgrounds */
--primary-background: #2C2C2C;
--primary-background-image:none;
--secondary-background: var(--monitor-color);
--secondary-background-image:none;
/* Fonts */
--font-primary-color: var(--monitor-color);
--font-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
/* List */
--list-disc-color: var(--monitor-color);
}
/*!*Stakeholder Specific*!*/ /*!*Stakeholder Specific*!*/
/*.publicationsSearchForm {*/ /*.publicationsSearchForm {*/
/* background-image: none;*/ /* background-image: none;*/
@ -48,19 +75,19 @@
/* !*z-index: 981;*!*/ /* !*z-index: 981;*!*/
/*}*/ /*}*/
/*#filters_switcher_toggle {*/ #filters_switcher_toggle {
/* top: 320px !important;*/ top: 320px !important;
/* position: fixed;*/ position: fixed;
/* height: 36px;*/ height: 36px;
/* background-color: var(--secondary-color);*/ background-color: var(--secondary-color);
/* border-radius: 4px 0 0 4px;*/ border-radius: 4px 0 0 4px;
/* cursor: pointer;*/ cursor: pointer;
/* padding: 0 2px;*/ padding: 0 2px;
/* box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);*/ box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);
/* box-sizing: border-box;*/ box-sizing: border-box;
/* !*z-index: 981;*!*/ /*z-index: 981;*/
/* right: 0;*/ right: 0;
/*}*/ }
/*!*Sidebar*!*/ /*!*Sidebar*!*/
/*!*Style*!*/ /*!*Style*!*/
@ -233,12 +260,7 @@
/*.uk-modal-container .uk-modal-dialog {*/ /*.uk-modal-container .uk-modal-dialog {*/
/* width: 900px;*/ /* width: 900px;*/
/*}*/ /*}*/
/*.stakeholderPage .uk-card.uk-disabled, .stakeholderPage .uk-card.semiFiltered{*/
/* opacity: 0.5;*/
/*}*/
/*.stakeholderPage .uk-card.semiFiltered > * > .highcharts-series-group{*/
/* opacity: 0.5;*/
/*}*/
/*.stakeholderPage .selectedFilterLabel {*/ /*.stakeholderPage .selectedFilterLabel {*/
/* background-color: #E6EEF2;*/ /* background-color: #E6EEF2;*/
/* border-color: #E6EEF2;*/ /* border-color: #E6EEF2;*/

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit fb13bcae2ffe56445eda67e2e48740dc5a1e12df Subproject commit 60be89ef464a3eb6a485b1f68bd9f3dcde0393a0

2
src/styles.css
View File

@ -3,5 +3,5 @@
@import "assets/common-assets/library.css"; @import "assets/common-assets/library.css";
@import "assets/common-assets/common/custom.css"; @import "assets/common-assets/common/custom.css";
@import "assets/dashboard-theme/main.css"; @import "assets/dashboard-theme/main.css";
@import "assets/new.css"; @import "assets/monitor-dashboard-custom.css";
@import "assets/print.css"; @import "assets/print.css";