2022-10-24 12:18:27 +02:00
import { ChangeDetectorRef , Component } from "@angular/core" ;
import { Router } from '@angular/router' ;
import { Meta , Title } from '@angular/platform-browser' ;
import { PiwikService } from '../openaireLibrary/utils/piwik/piwik.service' ;
import { HelperService } from "../openaireLibrary/utils/helper/helper.service" ;
import { SEOService } from "../openaireLibrary/sharedComponents/SEO/SEO.service" ;
import { Subscriber } from "rxjs" ;
import { Breadcrumb } from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component" ;
import { EnvProperties } from "../openaireLibrary/utils/properties/env-properties" ;
import { properties } from "../../environments/environment" ;
@Component ( {
selector : 'how-it-works' ,
template : `
< div class = "uk-position-relative" >
< div class = "uk-background-muted" >
< div class = "uk-container uk-container-large uk-section uk-section-small" >
< div class = "uk-padding-small uk-padding-remove-horizontal" >
< breadcrumbs [ breadcrumbs ] = " breadcrumbs " > < / breadcrumbs >
< / div >
< div class = "uk-flex uk-flex-column uk-flex-center uk-margin-bottom" uk - scrollspy - class >
< h1 class = "uk-margin-medium-top" uk - scrollspy - class > How it works < span class = "uk-text-primary" > . < / span > < / h1 >
< div class = "uk-text-large" style = "max-width: 550px;" uk - scrollspy - class >
Join the OpenAIRE Monitor service and we will create for you a dashboard to track and understand and position your organization 's research activities and their impact, discover and evaluate Open Science trends for your organization and make data-driven decisions. Here' s how it works .
< / div >
< div class = "uk-margin-medium-top uk-margin-large-bottom" uk - scrollspy - class >
< a class = "uk-button uk-button-primary uk-text-uppercase" routerLink = "/get-started" > Get Started < / a >
< / div >
< / div >
< / div >
< / div >
< div class = "uk-padding" > < / div >
< img class = "uk-visible@m uk-position-bottom-right" src = "assets/monitor-assets/about/hero.svg" loading = "lazy" >
< / div >
< div class = "uk-container uk-section uk-section-small uk-margin-large-bottom" >
< div class = "uk-width-1-1" >
< div class = "uk-sticky uk-blur-background uk-visible@m" uk - sticky [ attr.offset ] = " offset " >
2022-10-24 15:38:21 +02:00
< slider - tabs flexPosition = "center" customClass = "uk-text-large" connect = "#tabs-content" >
2022-10-24 12:18:27 +02:00
< slider - tab * ngFor = "let section of sections; let i = index" [ tabTitle ] = " section " [ tabId ] = " section " > < / s l i d e r - t a b >
< / s l i d e r - t a b s >
< / div >
< div class = "uk-sticky uk-blur-background uk-hidden@m" uk - sticky >
2022-10-24 15:38:21 +02:00
< slider - tabs flexPosition = "center" >
2022-10-24 12:18:27 +02:00
< slider - tab * ngFor = "let section of sections; let i = index" [ tabTitle ] = " section " [ tabId ] = " section " > < / s l i d e r - t a b >
< / s l i d e r - t a b s >
< / div >
< / div >
2022-10-24 15:38:21 +02:00
< ul id = "tabs-content" class = "uk-switcher" >
2022-10-24 12:18:27 +02:00
< li >
<!-- FUNDER -- >
< div >
< h2 class = "uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom" > Are you a < span class = "uk-text-primary" > funder ? < / span > < / h2 >
< div class = "uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk - grid uk - height - match = "target: .uk-card" >
< div class = "uk-flex uk-flex-column uk-flex-middle" >
< span class = "uk-h3 uk-margin-medium-bottom" > You < / span >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 1 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > You provide Information about your funded projects and < a href = "https://www.openaire.eu/funders-how-to-join-guide" target = "_blank" > join OpenAIRE < / a > . < / p >
< p > All information is exchanged under confidential agreements and we only make public what you agree on . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left" src = "assets/monitor-assets/about/icon1.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 2 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > You validate the results and approve for them to be shown on the < a href = "https://explore.openaire.eu" target = "_blank" > Explore < / a > portal . < / p >
< p > Examine your dashboard and the showcased information to ensure you are satisfied with what you see . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 3 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Through 1 - on - 1 expert consultations you interact with us < / p >
< ul class = "uk-list uk-list-disc" >
< li > to understand any gaps and deviations within the dashboard < / li >
< li > to verify the data integrity < / li >
< li > to discuss the addition of any new metrics and indicators that might interest you < / li >
< / ul >
< / div >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-medium-bottom" >
< span class = "uk-text-primary" > Step 4 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Customise your dashboard and make your own profile . < / p >
< p > Select the < a href = "https://monitor.openaire.eu/indicators/funder" target = "_blank" > metrics < / a > of interest to you and the ones you want to publish , to keep private , or to share just with colleagues . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-left" src = "assets/monitor-assets/about/icon3.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1" >
< span class = "uk-text-primary" > Step 5 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Select your team < / p >
< p > And make them collaborators of the service . < / p >
< / div >
< / div >
< div class = "uk-flex uk-flex-column uk-flex-middle" >
< span class = "uk-h3 uk-margin-medium-bottom" > We < / span >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-overflow-hidden uk-width-1-1 uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 1 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We ingest your project metadata and mine the < a href = "https://graph.openaire.eu" target = "_blank" class = "text-graph" > OpenAIRE Research Graph < / a > . < / p >
< p > We infer links to research results : publications , datasets , software , etc . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-right" src = "assets/monitor-assets/about/icon2.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 2 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We present the results to you on our Beta portal . < / p >
< p > We refine until you are happy with the results . We allocate the hardware resources needed to create your dashboard . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 3 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We produce well - documented visualisations of simple & more advanced composite indicators . < / p >
< p > Aligned with the Open Science principles and following an evidence - based approach , and based on the funded research activities . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 4 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We refine until we are happy with the results . < / p >
< p > We present to you your dashboard . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1" >
< span class = "uk-text-primary" > Step 5 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Notify you about new metrics and indicators < / p >
< p > as we keep enriching the Graph , which you may find useful and add to your profile < / p >
< / div >
< / div >
< / div >
< / div >
< / li >
< li >
<!-- RESEARCH INITIATIVE -- >
< div >
< h2 class = "uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom" > Are you a < span class = "uk-text-primary" > research initiative ? < / span > < / h2 >
< div class = "uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk - grid uk - height - match = "target: .uk-card" >
< div class = "uk-flex uk-flex-column uk-flex-middle" >
< span class = "uk-h3 uk-margin-medium-bottom" > You < / span >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 1 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > You state your interest on having a research initiative dashboard . < / p >
< p > All information is exchanged under confidential agreements and we only make public what you agree on . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left" src = "assets/monitor-assets/about/icon1.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 2 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > You configure the criteria to identify the research products that you want to be accounted for . < / p >
< p > You use the administration dashboard we created for you . If this is not enough , you give us input for the implementation of a customised full - text mining algorithm . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 3 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Through 1 - on - 1 expert consultations you interact with us < / p >
< ul class = "uk-list uk-list-disc" >
< li > to understand any gaps and deviations within the dashboard < / li >
< li > to verify the data integrity < / li >
< li > to discuss the addition of any new metrics and indicators that might interest you < / li >
< / ul >
< / div >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-medium-bottom" >
< span class = "uk-text-primary" > Step 4 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Customise your dashboard and make your own profile . < / p >
< p > Select the < a href = "https://monitor.openaire.eu/indicators/funder" target = "_blank" > metrics < / a > of interest to you and the ones you want to publish , to keep private , or to share just with colleagues . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-left" src = "assets/monitor-assets/about/icon3.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1" >
< span class = "uk-text-primary" > Step 5 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Select your team < / p >
< p > And make them collaborators of the service . < / p >
< / div >
< / div >
< div class = "uk-flex uk-flex-column uk-flex-middle" >
< span class = "uk-h3 uk-margin-medium-bottom" > We < / span >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 1 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We set up an administration dashboard that you can use to specify which research products of the < a href = "https://graph.openaire.eu" target = "_blank" class = "text-graph" > OpenAIRE Research Graph < / a > are relevant for you . < / p >
< p > If needed , we develop a customized full - text mining algorithm to identify your publications . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-right" src = "assets/monitor-assets/about/icon2.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 2 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We present the results to you on our Beta portal . < / p >
< p > We refine until you are happy with the results . We allocate the hardware resources needed to create your dashboard . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 3 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We produce well - documented visualisations of simple & more advanced composite indicators . < / p >
< p > Aligned with the Open Science principles and following an evidence - based approach . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 4 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We refine until we are happy with the results . < / p >
< p > We present to you your dashboard . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1" >
< span class = "uk-text-primary" > Step 5 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Notify you about new metrics and indicators < / p >
< p > as we keep enriching the Graph , which you may find useful and add to your profile < / p >
< / div >
< / div >
< / div >
< / div >
< / li >
< li >
<!-- RESEARCH INSTITUTION -- >
< div >
< h2 class = "uk-h1 uk-text-center uk-margin-large-top uk-margin-large-bottom" > Are you a < span class = "uk-text-primary" > research institution ? < / span > < / h2 >
< div class = "uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@m" uk - grid uk - height - match = "target: .uk-card" >
< div class = "uk-flex uk-flex-column uk-flex-middle" >
< span class = "uk-h3 uk-margin-medium-bottom" > You < / span >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 1 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > You state your interest on having an institutional dashboard for your institution . < / p >
< p > All information is exchanged under confidential agreements and we only make public what you agree on . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-left custom-translate-bottom-left" src = "assets/monitor-assets/about/icon1.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 2 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > You validate and approve the results . < / p >
< p > You examine your dashboard and the showcased information to ensure you are satisfied with what you see . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 3 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Through 1 - on - 1 expert consultations you interact with us < / p >
< ul class = "uk-list uk-list-disc" >
< li > to understand any gaps and deviations within the dashboard < / li >
< li > to verify the data integrity < / li >
< li > to discuss the addition of any new metrics and indicators that might interest you < / li >
< / ul >
< / div >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-medium-bottom" >
< span class = "uk-text-primary" > Step 4 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Customise your dashboard and make your own profile . < / p >
< p > Select the < a href = "https://monitor.openaire.eu/indicators/funder" target = "_blank" > metrics < / a > of interest to you and the ones you want to publish , to keep private , or to share just with colleagues . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-left" src = "assets/monitor-assets/about/icon3.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1" >
< span class = "uk-text-primary" > Step 5 a < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Select your team < / p >
< p > And make them collaborators of the service . < / p >
< / div >
< / div >
< div class = "uk-flex uk-flex-column uk-flex-middle" >
< span class = "uk-h3 uk-margin-medium-bottom" > We < / span >
2022-10-25 10:38:20 +02:00
< div class = "uk-card uk-card-default uk-width-1-1 uk-overflow-hidden uk-margin-large-bottom" >
< div class = "uk-card-body uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 1 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Starting from the < a href = "https://graph.openaire.eu" target = "_blank" class = "text-graph" > OpenAIRE Research Graph < / a > we check for existing data for your institution . < / p >
< p > We infer links to research results : publications , datasets , software , etc . < / p >
< / div >
< img class = "uk-width-xsmall uk-position-bottom-right" src = "assets/monitor-assets/about/icon2.svg" >
2022-10-24 12:18:27 +02:00
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 2 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We present the results to you on our Beta portal . < / p >
< p > We refine until you are happy with the results . We allocate the hardware resources needed to create your dashboard . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 3 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We produce well - documented visualisations of simple & more advanced composite indicators . < / p >
< p > Aligned with the Open Science principles and following an evidence - based approach , and based on the institution ’ s research activities . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1 uk-margin-large-bottom" >
< span class = "uk-text-primary" > Step 4 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > We refine until we are happy with the results . < / p >
< p > We present to you your dashboard . < / p >
< / div >
< div class = "uk-card uk-card-default uk-card-body uk-width-1-1" >
< span class = "uk-text-primary" > Step 5 b < / span >
< p class = "uk-text-large uk-margin-xsmall-top" > Notify you about new metrics and indicators < / p >
< p > as we keep enriching the Graph , which you may find useful and add to your profile < / p >
< / div >
< / div >
< / div >
< / div >
< / li >
< / ul >
< / div >
2022-10-25 10:38:20 +02:00
` ,
styles : [ `
. custom - translate - bottom - left {
/* transform: translate(-15px, 15px); */
margin - bottom : - 15 px ;
margin - left : - 15 px ;
}
` ]
2022-10-24 12:18:27 +02:00
} )
export class HowItWorksComponent {
public url : string = null ;
public pageTitle : string = "OpenAIRE - Monitor | How it works" ;
public description : string = "OpenAIRE - Monitor | How it works" ;
public breadcrumbs : Breadcrumb [ ] = [ { name : 'home' , route : '/' } , { name : 'About - How it works' } ] ;
public properties : EnvProperties = properties ;
public sections : string [ ] = [ 'Funders' , 'Research Initiatives' , 'Research Institutions' ] ;
public offset : number ;
subscriptions = [ ] ;
constructor (
private _router : Router ,
private _meta : Meta ,
private _title : Title ,
private seoService : SEOService ,
private _piwikService : PiwikService ,
private helper : HelperService ,
private cdr : ChangeDetectorRef ) {
}
ngOnInit() {
if ( this . properties . enablePiwikTrack && ( typeof document !== 'undefined' ) ) {
this . subscriptions . push ( this . _piwikService . trackView ( this . properties , this . pageTitle , this . properties . piwikSiteId ) . subscribe ( ) ) ;
}
this . url = this . properties . domain + this . properties . baseLink + this . _router . url ;
this . seoService . createLinkForCanonicalURL ( this . url ) ;
this . updateUrl ( this . url ) ;
this . updateTitle ( this . pageTitle ) ;
this . updateDescription ( this . description ) ;
}
ngAfterViewInit() {
if ( typeof document !== 'undefined' ) {
this . offset = Number . parseInt ( getComputedStyle ( document . documentElement ) . getPropertyValue ( '--header-height' ) ) ;
this . cdr . detectChanges ( ) ;
}
}
ngOnDestroy() {
this . subscriptions . forEach ( subscription = > {
if ( subscription instanceof Subscriber ) {
subscription . unsubscribe ( ) ;
}
} ) ;
}
private updateDescription ( description : string ) {
this . _meta . updateTag ( { content : description } , "name='description'" ) ;
this . _meta . updateTag ( { content : description } , "property='og:description'" ) ;
}
private updateTitle ( title : string ) {
var _title = ( ( title . length > 50 ) ? title . substring ( 0 , 50 ) : title ) ;
this . _title . setTitle ( _title ) ;
this . _meta . updateTag ( { content : _title } , "property='og:title'" ) ;
}
private updateUrl ( url : string ) {
this . _meta . updateTag ( { content : url } , "property='og:url'" ) ;
}
2022-10-24 15:38:21 +02:00
}
