[Monitor Dashboard]: Add open menu on main header. Click outside close sidebar.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57464 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
bd27c65582
commit
5d589efc55
|
|
@ -0,0 +1,20 @@
|
|||
import {Injectable} from "@angular/core";
|
||||
import {BehaviorSubject} from "rxjs";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SidebarOpenService {
|
||||
|
||||
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
|
||||
|
||||
constructor() {}
|
||||
|
||||
get open(): boolean {
|
||||
return this.openSubject.getValue();
|
||||
}
|
||||
|
||||
setOpen(value: boolean) {
|
||||
this.openSubject.next(value);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
<div class="disable_transitions sidebar_main_open sidebar_main_swipe">
|
||||
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" id="header_main">
|
||||
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open">
|
||||
<div id="header_main">
|
||||
<nav class="uk-navbar">
|
||||
<div class="uk-navbar-center">
|
||||
<a id="sidebar_main_toggle" (click)="toggleOpen()" class="sSwitch sSwitch_left">
|
||||
<span class="sSwitchIcon"></span>
|
||||
</a>
|
||||
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-center">
|
||||
<ul class="uk-navbar-nav">
|
||||
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
|
||||
<li *ngIf="topic.isPublic && topic.isActive"
|
||||
|
|
@ -13,10 +16,10 @@
|
|||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<dashboard-sidebar [items]="sideBar.items" [name]="stakeholder.index_name"
|
||||
<dashboard-sidebar *ngIf="sideBar" [items]="sideBar.items" [name]="stakeholder.index_name"
|
||||
class="uk-width-1-5"></dashboard-sidebar>
|
||||
<div *ngIf="activeSubCategory"
|
||||
id="page_content">
|
||||
id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">
|
||||
<div id="page_content_inner">
|
||||
<h5 class="uk-margin uk-margin-top uk-text-bold">Indicators</h5>
|
||||
<div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > h6">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Params, Router} from '@angular/router';
|
||||
import {DomSanitizer, Meta, Title} from '@angular/platform-browser';
|
||||
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
||||
|
|
@ -14,12 +14,13 @@ import {StakeholderService} from "../services/stakeholder.service";
|
|||
import {Category, IndicatorPath, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder";
|
||||
import {StatisticsService} from "../utils/services/statistics.service";
|
||||
import {Item, Sidebar} from "../utils/entities/sidebar";
|
||||
import {SidebarOpenService} from "../library/sidebar/sidebar-open.service";
|
||||
|
||||
@Component({
|
||||
selector: 'monitor',
|
||||
templateUrl: 'monitor.component.html',
|
||||
})
|
||||
export class MonitorComponent {
|
||||
export class MonitorComponent implements OnInit, OnDestroy {
|
||||
public piwiksub: any;
|
||||
public pageContents = null;
|
||||
public divContents = null;
|
||||
|
|
@ -45,11 +46,12 @@ export class MonitorComponent {
|
|||
private helper: HelperService,
|
||||
private stakeholderService: StakeholderService,
|
||||
private statisticsService: StatisticsService,
|
||||
private sidebarOpenService: SidebarOpenService,
|
||||
private seoService: SEOService,
|
||||
private sanitizer: DomSanitizer) {
|
||||
this.errorCodes = new ErrorCodes();
|
||||
this.errorMessages = new ErrorMessagesComponent();
|
||||
this.status = this.errorCodes.LOADING;
|
||||
this.errorCodes = new ErrorCodes();
|
||||
this.errorMessages = new ErrorMessagesComponent();
|
||||
this.status = this.errorCodes.LOADING;
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
|
|
@ -60,7 +62,7 @@ export class MonitorComponent {
|
|||
var url = data.envSpecific.baseLink + this._router.url;
|
||||
if (!this.stakeholder || this.stakeholder.index_id !== params['stakeholder']) {
|
||||
this.status = this.errorCodes.LOADING;
|
||||
this.numberResults= new Map<number, number>();
|
||||
this.numberResults = new Map<number, number>();
|
||||
this.chartsActiveType = new Map<number, IndicatorPath>();
|
||||
this.stakeholderService.getStakeholder(params['stakeholder']).subscribe(stakeholder => {
|
||||
this.stakeholder = stakeholder;
|
||||
|
|
@ -89,6 +91,18 @@ export class MonitorComponent {
|
|||
});
|
||||
}
|
||||
|
||||
public get open() {
|
||||
return this.sidebarOpenService.open;
|
||||
}
|
||||
|
||||
public toggleOpen(event = null) {
|
||||
if(!event) {
|
||||
this.sidebarOpenService.setOpen(!this.open);
|
||||
} else if(event && event['value'] === true) {
|
||||
this.sidebarOpenService.setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
private getPageContents() {
|
||||
this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
|
||||
this.pageContents = contents;
|
||||
|
|
@ -126,8 +140,8 @@ export class MonitorComponent {
|
|||
this.setIndicators();
|
||||
return;
|
||||
} else {
|
||||
let subCategory: SubCategory = this.activeCategory.subCategories.filter( subCategory =>
|
||||
subCategory.isPublic && subCategory.isActive)[0];
|
||||
let subCategory: SubCategory = this.activeCategory.subCategories.filter(subCategory =>
|
||||
subCategory.isPublic && subCategory.isActive)[0];
|
||||
this.navigateTo(this.stakeholder.alias, this.activeTopic.alias, this.activeCategory.alias, subCategory.alias);
|
||||
return;
|
||||
}
|
||||
|
|
@ -165,7 +179,7 @@ export class MonitorComponent {
|
|||
private setIndicators() {
|
||||
let urls: Map<string, number[]> = new Map<string, number[]>();
|
||||
this.activeSubCategory.numbers.forEach((number, index) => {
|
||||
if(number.isActive && number.isPublic) {
|
||||
if (number.isActive && number.isPublic) {
|
||||
const pair = JSON.stringify([number.indicatorPaths[0].source, number.indicatorPaths[0].url]);
|
||||
const indexes = urls.get(pair) ? urls.get(pair) : [];
|
||||
indexes.push(index);
|
||||
|
|
@ -174,11 +188,13 @@ export class MonitorComponent {
|
|||
});
|
||||
urls.forEach((indexes, pair) => {
|
||||
pair = JSON.parse(pair);
|
||||
this.statisticsService.getNumbers(pair[0], pair[1]).subscribe( response => {
|
||||
indexes.forEach( index => {
|
||||
this.statisticsService.getNumbers(pair[0], pair[1]).subscribe(response => {
|
||||
indexes.forEach(index => {
|
||||
let result = JSON.parse(JSON.stringify(response));
|
||||
this.activeSubCategory.numbers[index].indicatorPaths[0].jsonPath.forEach(jsonPath => {
|
||||
result = result[jsonPath];
|
||||
if (result) {
|
||||
result = result[jsonPath];
|
||||
}
|
||||
});
|
||||
this.numberResults.set(index, result);
|
||||
});
|
||||
|
|
@ -192,8 +208,7 @@ export class MonitorComponent {
|
|||
}
|
||||
|
||||
public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
|
||||
return this.sanitizer.
|
||||
bypassSecurityTrustResourceUrl(this.statisticsService.getChartUrl(indicatorPath.source, indicatorPath.url));
|
||||
return this.sanitizer.bypassSecurityTrustResourceUrl(this.statisticsService.getChartUrl(indicatorPath.source, indicatorPath.url));
|
||||
}
|
||||
|
||||
public setActiveChart(index, type: string) {
|
||||
|
|
|
|||
|
|
@ -16,11 +16,12 @@ import {MonitorComponent} from "./monitor.component";
|
|||
import {StakeholderService} from "../services/stakeholder.service";
|
||||
import {StatisticsService} from "../utils/services/statistics.service";
|
||||
import {SideBarModule} from "../library/sidebar/sideBar.module";
|
||||
import {ModalModule} from "../openaireLibrary/utils/modal/modal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
|
||||
HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule
|
||||
HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, ModalModule
|
||||
],
|
||||
declarations: [
|
||||
MonitorComponent
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ export class Stakeholder {
|
|||
pubDefSub.charts.push(c_pubs_per_project);
|
||||
|
||||
//TO check
|
||||
let c_pubs_per_datasource = new Indicator("Which are the top repositories containing "+stakeholder.index_shortName+" research outputs?",null, "chart","small",false,
|
||||
/* let c_pubs_per_datasource = new Indicator("Which are the top repositories containing "+stakeholder.index_shortName+" research outputs?",null, "chart","small",false,
|
||||
true, [new IndicatorPath("column", "old", "chart.php?com=query&data="+encodeURIComponent('{"table":"result","fields":[{"fld":"number","agg":"count","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"result_datasources-datasource-name","agg":"avg"},"group":"","color":"","type":"chart","size":"20","sort":"count-number","yaxisheaders":[""],"fieldsheaders":["publications"],"in":[],"filters":[{"name":"type","values":["publication"],"to":"-1"},{"name":"result_projects-project-funder","values":["'+stakeholder.index_name+'"],"to":"-1"},{"name":"result_datasources-datasource-type","exvalues":["Publication Catalogue"]}],"having":[],"xStyle":{"r":-90,"s":"-","l":"-","ft":10,"wt":"-"},"title":"Publications by content provider (top 20)","subtitle":"","xaxistitle":"content providers","order":"d"}'), null)]);
|
||||
pubDefSub.charts.push(c_pubs_per_datasource);
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ export class Stakeholder {
|
|||
let c_pubs_funding_scheme = new Indicator("What is the percentage publications by funding scheme / programme?",null, "chart","small",true,
|
||||
true, [new IndicatorPath("bar", "stats-tool", "chart?json="+encodeURIComponent('{"library":"HighCharts","chartDescription":{"colors":["#42a5f5","#26a69a","#90ed7d","#607d8b","#00838f","#689f38","#e4d354","#2b908f","#546e7a","#01579"],"queries":[{"name":"Open Access","type":"bar","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.project.funding level 1","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.project.funder","type":"=","values":["'+stakeholder.index_name+'"]},{"field":"result.project.funding level 0","type":"=","values":["H2020"]},{"field":"result.type","type":"=","values":["publication"]},{"field":"result.access mode","type":"=","values":["Open Access"]}],"op":"AND"}],"entity":"result","profile":"OpenAIRE original","limit":"0"}},{"name":"Total","type":"bar","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.project.funding level 1","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.project.funder","type":"=","values":["'+stakeholder.index_name+'"]},{"field":"result.type","type":"=","values":["publication"]}],"op":"AND"}],"entity":"result","profile":"OpenAIRE original","limit":"0"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Publications"},"subtitle":{"text":"by funding scheme"},"yAxis":{"title":{"text":"Publications"}},"xAxis":{"title":{"text":"Funding scheme"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}'), null)]);
|
||||
pubDefSub.charts.push(c_pubs_funding_scheme);
|
||||
|
||||
*/
|
||||
/* //TODO check why doesn't load
|
||||
let c_pubs_gg_funding_scheme = new Indicator("What is the percentage of green and gold publications by funding scheme / programme?",null, "chart","medium",true,
|
||||
true, [new IndicatorPath("bar", "stats-tool", "chart?json="+encodeURIComponent('{"library":"HighCharts","chartDescription":{"colors":["#42a5f5","#26a69a","#90ed7d","#607d8b","#00838f","#689f38","#e4d354","#2b908f","#546e7a","#01579"],"queries":[{"name":"Gold","color":"#f8b500","type":"bar","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.project.funding level 1","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.project.funder","type":"=","values":["'+stakeholder.index_name+'"]},,{"field":"result.type","type":"=","values":["publication"]},{"field":"result.access mode","type":"=","values":["Open Access"]}],"op":"AND"},{"groupFilters":[{"field":"result.datasource.type","type":"=","values":["Journal"]},{"field":"result.datasource.type","type":"=","values":["Journal Aggregator/Publisher"]}],"op":"OR"}],"entity":"result","profile":"OpenAIRE original","limit":"0"}},{"name":"Green","color":"#239d60","type":"bar","query":{"select":[{"field":"result","aggregate":"count"},{"field":"result.project.funding level 1","aggregate":null}],"filters":[{"groupFilters":[{"field":"result.project.funder","type":"=","values":["'+stakeholder.index_name+'"]},{"field":"result.project.funding level 0","type":"=","values":["H2020"]},{"field":"result.type","type":"=","values":["publication"]},{"field":"result.access mode","type":"=","values":["Open Access"]}],"op":"AND"},{"groupFilters":[{"field":"result.datasource.type","type":"=","values":["Institutional Repository"]},{"field":"result.datasource.type","type":"=","values":["Thematic Repository"]}],"op":"OR"}],"entity":"result","profile":"OpenAIRE original","limit":"0"}}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"H2020 green and gold publications"},"subtitle":{"text":"by funding scheme"},"yAxis":{"title":{"text":"Publications"}},"xAxis":{"title":{"text":"Funding scheme"}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":true},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":true,"align":"center","verticalAlign":"bottom","layout":"horizontal"},"credits":{"href":null,"enabled":true,"text":"Created by OpenAIRE via HighCharts"}}}'), null)]);
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<link rel="stylesheet" href="assets/theme-assets/css/themes/themes_combined.min.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar_main_open">
|
||||
<div>
|
||||
<app-root></app-root>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue