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>

112
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"
}; };
@ -200,8 +201,14 @@ export class AppComponent implements OnInit, OnDestroy {
} }
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;
})); }));
@ -267,14 +274,14 @@ export class AppComponent implements OnInit, OnDestroy {
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 = {

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">
<div class="uk-section uk-container uk-container-large uk-padding-remove-top"> <div class="uk-grid uk-grid-large uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<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-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">

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

@ -12,22 +12,19 @@ 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">
<div class="uk-section uk-container uk-container-large uk-padding-remove-top">
<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">Research Outcomes</dt> <dt class="uk-width-1-5@m uk-width-1-1 uk-text-primary">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=""> <ul class="uk-list uk-list-disc">
<li>Publication</li> <li>Publication</li>
<li>Dataset</li> <li>Dataset</li>
<li>Software</li> <li>Software</li>
@ -150,7 +147,7 @@ import {ActivatedRoute, Router} from "@angular/router";
<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="portal-circle"> <ul class="uk-list uk-list-disc">
<li>Repositories</li> <li>Repositories</li>
<li>Open Access Publishers & Journals</li> <li>Open Access Publishers & Journals</li>
<li>Aggregators</li> <li>Aggregators</li>
@ -209,14 +206,13 @@ import {ActivatedRoute, Router} from "@angular/router";
</ng-container> </ng-container>
</my-tab> </my-tab>
</my-tabs> </my-tabs>
<div class="uk-margin-large-top"> <div class="uk-margin-medium-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 uk-section-small uk-margin-large-top">
<div id="how" class="uk-container uk-container-large uk-section-small">
<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;
}

90
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,11 +62,10 @@
Print Report Print Report
</button> </button>
</a> </a>
</div>-->
</div> </div>
</div> <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right">
</nav> <ul class="uk-subnav uk-subnav-pill">
<ul *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1"
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':''">
@ -81,6 +75,7 @@
</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,27 +114,22 @@
</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 "
class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)" class="uk-margin-bottom"> <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)" class="uk-margin-bottom">
<div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center" <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
[class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"> [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
<div class="uk-card-body uk-text-center"> <div class="uk-text-center">
<div *ngIf="properties.environment === 'development'">Filtered: <!--<div *ngIf="properties.environment === 'development'">
{{indicator.indicatorPaths[0].filtersApplied}} Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
out of </div>-->
{{countSelectedFilters()}}</div> <div class="number uk-text-bold uk-text-primary-gradient">
<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)">{{numberResults.get(i + '-' + j) | number}}</span>
<span *ngIf="!numberResults.get(i + '-' + j)">--</span> <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
</h3> </div>
<!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>--> <div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
</div> </div>
<div *ngIf="indicator.description || indicator.additionalDescription" class="uk-overlay uk-position-bottom"> <div *ngIf="indicator.description || indicator.additionalDescription" class="uk-overlay uk-position-bottom">
<div class="uk-padding-small"> <div class="uk-padding-small">
@ -162,19 +145,15 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
</ng-container>
<div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0"> <div [class.uk-margin-large-top]="activeSubCategory.numbers.length > 0">
<div *ngFor="let chart of activeSubCategory.charts; let i = index;" <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
class="uk-grid uk-grid-small uk-margin-bottom uk-flex uk-flex-middle " <div *ngIf="countIndicatorsToShow(chart.indicators) > 0" class="uk-grid uk-margin-medium-bottom uk-flex uk-flex-middle" uk-height-match="target: .uk-card">
uk-height-match="target: .uk-card"> <h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
<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"> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div <div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
*ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
[ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom"> [ngClass]="getChartClassBySize(indicator.width)" class="uk-margin-bottom">
<div class="uk-card uk-card-default" <div class="uk-card uk-card-default" [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
[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"> <div class="uk-card-body uk-text-center">
<h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom "> <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
<div>{{indicator.name + " "}}</div> <div>{{indicator.name + " "}}</div>
@ -223,6 +202,7 @@
</div> </div>
</ng-template> </ng-template>
</div> </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";