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'; import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; import {StringUtils} from '../openaireLibrary/utils/string-utils.class'; import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes'; import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component'; import {HelperService} from "../openaireLibrary/utils/helper/helper.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {StakeholderService} from "../services/stakeholder.service"; import {Category, ChartHelper, IndicatorPath, Stakeholder, SubCategory, Topic} from "../utils/entities/stakeholder"; import {StatisticsService} from "../utils/services/statistics.service"; import {Item, Sidebar} from "../utils/entities/sidebar"; import {IndicatorUtils} from "../utils/indicator-utils"; import {LayoutService} from "../library/sharedComponents/sidebar/layout.service"; @Component({ selector: 'monitor', templateUrl: 'monitor.component.html', }) export class MonitorComponent implements OnInit, OnDestroy { public piwiksub: any; public pageContents = null; public divContents = null; public status: number; public loading: boolean = true; public indicatorUtils: IndicatorUtils = new IndicatorUtils(); public activeTopic: Topic = null; public activeCategory: Category = null; public activeSubCategory: SubCategory = null; public sideBar: Sidebar = null; public errorCodes: ErrorCodes; public stakeholder: Stakeholder; public numberResults: Map = new Map(); public chartsActiveType: Map = new Map(); private errorMessages: ErrorMessagesComponent; properties: EnvProperties; fundingL0; startYear; endYear; constructor( private route: ActivatedRoute, private _router: Router, private _meta: Meta, private _title: Title, private _piwikService: PiwikService, private helper: HelperService, private stakeholderService: StakeholderService, private statisticsService: StatisticsService, private layoutService: LayoutService, private seoService: SEOService, private cdr: ChangeDetectorRef, private sanitizer: DomSanitizer) { this.errorCodes = new ErrorCodes(); this.errorMessages = new ErrorMessagesComponent(); this.status = this.errorCodes.LOADING; } public ngOnInit() { this.route.data .subscribe((data: { envSpecific: EnvProperties }) => { this.route.params.subscribe(params => { this.properties = data.envSpecific; 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(); this.chartsActiveType = new Map(); this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => { if(stakeholder) { this.stakeholder = stakeholder; this.seoService.createLinkForCanonicalURL(url, false); this._meta.updateTag({content: url}, "property='og:url'"); var description = "Monitor Dashboard | " + this.stakeholder.index_name; var title = "Monitor Dashboard | " + this.stakeholder.index_shortName; this._meta.updateTag({content: description}, "name='description'"); this._meta.updateTag({content: description}, "property='og:description'"); this._meta.updateTag({content: title}, "property='og:title'"); this._title.setTitle(title); if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { this.piwiksub = this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe(); } //this.getDivContents(); this.getPageContents(); this.status = this.errorCodes.DONE; this.setView(params); } }, error => { this.navigateToError(); }) } else { this.setView(params); } }); }); } public get open() { return this.layoutService.open; } public toggleOpen(event = null) { if(!event) { this.layoutService.setOpen(!this.open); } else if(event && event['value'] === true) { this.layoutService.setOpen(false); } } private getPageContents() { this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => { this.pageContents = contents; }) } private getDivContents() { this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => { this.divContents = contents; }) } private setView(params: Params) { if (params && params['topic']) { this.activeTopic = this.stakeholder.topics.filter(topic => topic.alias === decodeURIComponent(params['topic']))[0]; if (this.activeTopic) { if (params['category']) { this.activeCategory = this.activeTopic.categories.filter(category => (category.alias === params['category']) && category.isPublic && category.isActive)[0]; } else { let category: Category = this.activeTopic.categories[0]; if(category) { this.navigateTo(this.stakeholder.alias, this.activeTopic.alias, category.alias); } else { this.navigateToError(); } return; } if (this.activeCategory) { if (params['subCategory']) { this.activeSubCategory = this.activeCategory.subCategories.filter(subCategory => (subCategory.alias === params['subCategory'] && subCategory.isPublic && subCategory.isActive))[0]; } else { this.activeSubCategory = this.activeCategory.subCategories.filter(subCategory => !subCategory.alias && subCategory.isPublic && subCategory.isActive)[0]; } if (this.activeSubCategory) { this.setSideBar(); this.setIndicators(); return; } else { 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; } } } this.navigateToError(); } else { let topic: Topic = this.stakeholder.topics[0]; let category: Category = topic.categories.filter(category => category.isPublic && category.isActive)[0]; if(topic && category) { this.navigateTo(this.stakeholder.alias, topic.alias, category.alias); } else { this.navigateToError(); } } } private setSideBar() { let items: Item[] = []; this.activeTopic.categories.forEach(category => { if (category.isPublic && category.isActive) { let subItems: Item[] = []; category.subCategories.forEach(subCategory => { if (subCategory.alias != null && subCategory.isPublic && subCategory.isActive) { subItems.push(new Item(subCategory.name, ( '/monitor/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias + '/' + subCategory.alias), null, null, false)); } }); const open = this.activeCategory.alias === category.alias; items.push(new Item(category.name, ( '/monitor/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias), subItems, null, open)); } }); this.sideBar = new Sidebar(items, null); } private setIndicators() { let urls: Map = new Map(); this.activeSubCategory.numbers.forEach((number, index) => { if (number.isActive && number.isPublic) { let url = number.indicatorPaths[0].url; //add fundingLevel0 filter in the query if(this.fundingL0 && number.indicatorPaths[0].filters.get("fundingL0")){ url = url + number.indicatorPaths[0].filters.get("fundingL0").replace(ChartHelper.prefix+'fundingL0'+ChartHelper.suffix,encodeURIComponent(this.fundingL0)); } const pair = JSON.stringify([number.indicatorPaths[0].source, url]); const indexes = urls.get(pair) ? urls.get(pair) : []; indexes.push(index); urls.set(pair, indexes); } }); urls.forEach((indexes, pair) => { pair = JSON.parse(pair); 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 => { if (result) { result = result[jsonPath]; } }); this.numberResults.set(index, result); }); }) }); this.activeSubCategory.charts.forEach((chart, index) => { if (chart.indicatorPaths.length > 0) { chart.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(chart.indicatorPaths[0]); this.chartsActiveType.set(index, chart.indicatorPaths[0]); } }); this.cdr.detectChanges(); } public getUrlByStakeHolder(indicatorPath: IndicatorPath) { return this.sanitizer.bypassSecurityTrustResourceUrl( this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath, this.fundingL0, this.startYear, this.endYear))); } public setActiveChart(index, type: string) { let activeChart = this.activeSubCategory.charts[index].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0]; activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart); this.chartsActiveType.set(index, activeChart); } private navigateToError() { this._router.navigate(['/error'], {queryParams: {'page': this._router.url}}); } public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) { let url = '/monitor/' + stakeholder + '/' + topic + ((category) ? ('/' + category) : '') + ((subcategory) ? ('/' + subcategory) : ''); return this._router.navigate([url]); } public quote(param: string): string { return StringUtils.quote(param); } public ngOnDestroy() { if (this.piwiksub) { this.piwiksub.unsubscribe(); } } }