openaire-library/monitor/indicators/indicator-themes.component.ts

109 lines
5.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {Component, OnDestroy, OnInit} from "@angular/core";
import {properties} from "../../../../environments/environment";
import {ActivatedRoute, Router} from "@angular/router";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
import {Subscriber} from "rxjs";
import {StakeholderEntities} from "../entities/stakeholder";
@Component({
selector: 'indicator-themes-page',
template: `
<div class="uk-visible@m">
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-container uk-container-large uk-section">
<h1>Indicator Themes<span class="uk-text-primary">.</span></h1>
<div class="uk-section">
<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-3-5">
<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
</div>
<div class="uk-width-expand">
<div>
<h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
<p>
This is the current set of indicator themes we cover. Well keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Graph</a>. We are at your disposal, should you have any recommendations!
</p>
<p>
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route">funders</a>,
<a [routerLink]="['../organization']" [relativeTo]="route">research institutions</a> and
<a [routerLink]="['../ri']" [relativeTo]="route">research initiatives</a>)
for the specific indicators for each type of dashboard, and the <a [routerLink]="['../../methodology']" [relativeTo]="route">methodology and terminology</a> page on how we produce the metrics.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-hidden@m">
<div class="uk-section uk-container uk-container-large">
<h1 class="uk-heading-small uk-text-center uk-padding-small uk-padding-remove-vertical">Indicator Themes<span class="uk-text-primary">.</span></h1>
<div class="uk-text-center uk-margin-large-top">
<div class="uk-padding-small uk-padding-remove-vertical">
<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
</div>
<div>
<h5 class="uk-margin-large-top uk-margin-large-bottom">Indicator themes that we are covering in the Monitor dashboards.</h5>
<p>
This is the current set of indicator themes we cover. Well keep enriching it as new requests and data are coming into the <a href="https://graph.openaire.eu" class="text-graph" target="_blank">OpenAIRE Graph</a>. We are at your disposal, should you have any recommendations!
</p>
<p>
Check out the indicator pages (for <a [routerLink]="['../funder']" [relativeTo]="route" class="uk-text-lowercase">{{entities.FUNDERS}}</a>,
<a [routerLink]="['../organization']" [relativeTo]="route" class="uk-text-lowercase">{{entities.ORGANIZATIONS}}</a> and
<a [routerLink]="['../ri']" [relativeTo]="route" class="uk-text-lowercase">{{entities.RIS}}</a>)
for the specific indicators for each type of dashboard, and the <a [routerLink]="['../../methodology']" [relativeTo]="route">methodology and terminology</a> page on how we produce the metrics.
</p>
</div>
</div>
</div>
</div>
`
})
export class IndicatorThemesComponent implements OnInit, OnDestroy {
private subscriptions: any[] = [];
public properties = properties;
public entities = StakeholderEntities;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources - Themes'}];
constructor(private router: Router,
private meta: Meta,
private title: Title,
private seoService: SEOService,
public route: ActivatedRoute) {
}
ngOnInit() {
this.subscriptions.push(this.route.params.subscribe(params => {
const description = "Monitor | Indicator Themes";
const title = "Monitor | Indicator Themes";
this.metaTags(title, description);
this.breadcrumbs[0].route = '/' + (params['stakeholder']?params['stakeholder']:'');
this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) {
subscription.unsubscribe();
}
});
}
metaTags(title, description) {
const url = properties.domain + properties.baseLink + this.router.url;
this.seoService.createLinkForCanonicalURL(url, false);
this.meta.updateTag({content: url}, "property='og:url'");
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);
}
}