[master | WIP] add content for five-monitors page, will need some css styles for header and transfer texts to the mobile view as well
This commit is contained in:
parent
a015dd1665
commit
e3d01f4dd6
|
|
@ -4,9 +4,11 @@ import {RouterModule} from "@angular/router";
|
|||
import {AboutComponent} from "./about.component";
|
||||
import {TheFiveMonitorsComponent} from "./the-five-monitors.component";
|
||||
import {UserActionsComponent} from "./user-actions.component";
|
||||
import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
|
||||
import {YouWeComponent} from "./you-we.component";
|
||||
|
||||
@NgModule({
|
||||
declarations: [AboutComponent, TheFiveMonitorsComponent, UserActionsComponent],
|
||||
declarations: [AboutComponent, TheFiveMonitorsComponent, UserActionsComponent, YouWeComponent],
|
||||
imports: [CommonModule, RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
|
|
@ -29,7 +31,7 @@ import {UserActionsComponent} from "./user-actions.component";
|
|||
component: UserActionsComponent,
|
||||
canDeactivate: []
|
||||
}
|
||||
])],
|
||||
]), SliderTabsModule],
|
||||
exports: []
|
||||
})
|
||||
export class HowItWorksModule {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,513 @@
|
|||
<div class="uk-visible@m">
|
||||
<div class="uk-position-relative">
|
||||
<div class="uk-banner">
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small">
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-text-center uk-margin-bottom" uk-scrollspy-class>
|
||||
<h1 class="uk-h2 uk-margin-top" uk-scrollspy-class>The 5 Monitors</h1>
|
||||
<div class="uk-text-large uk-width-1-2@l uk-width-2-3" uk-scrollspy-class>
|
||||
5 distinct types of dashboards to navigate Ireland’s Open Access landscape. Each dashboard is tailored to provide unique insights and data relevant to different aspects of Open Science.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-position-relative">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-5 uk-text-center five-boxes" uk-height-match=".uk-card">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
National Monitor
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Research Performing Organisation (RPO)
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Research Funding Organisation (RFO)
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Researcher
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
|
||||
Repository
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small">
|
||||
<div class="uk-width-2-3@m">
|
||||
<h3 class="uk-margin-remove">National Monitor</h3>
|
||||
<h3 class="uk-margin-remove">The Broad Perspective</h3>
|
||||
<p class="uk-text-large">
|
||||
The National Monitor offers an expansive view, featuring cross-country benchmarking and in-depth breakdowns specific to Ireland. It is meant to serve as a key resource for policymakers, publishers, and anyone interested in a comprehensive national overview. Take a look at the National Monitor for detailed insights into the broader Open Access landscape.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small">
|
||||
<div class="uk-width-2-3@m">
|
||||
<h3>Dive Deeper with Tailored Dashboards</h3>
|
||||
<p class="uk-text-large">
|
||||
For RPOs, RFOs, Researchers, and Institutional Repositories, we invite you to explore your individual monitors. Each dashboard is equipped to give you a detailed understanding of your role and impact within Open Access research. Discover how each dashboard works in the sections below.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section uk-section-small">
|
||||
<div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null" [attr.offset]="offset">
|
||||
<div class="uk-container">
|
||||
<div class="uk-padding uk-padding-remove-right uk-padding-remove-bottom">
|
||||
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
|
||||
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
|
||||
[tabId]="section"></slider-tab>
|
||||
</slider-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
|
||||
<li>
|
||||
<you-we [type]="'Research Performing Organisation (RPO)'" id="rpo">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
|
||||
<p>Nominate a primary dashboard manager by filling out <a href="https://app.onlinesurveys.jisc.ac.uk/s/maynoothuniversity/national-open-access-monitor-dashboard-manager-application-form" target="_blank">an application form</a>. If you already have a primary dashboard manager or prefer not to be one, proceed to step 2. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Find Your RPO's Monitor Dashboard</p>
|
||||
<p>Head to the <a routerLink="/rpo">RPO Monitor page</a> and look up your organization. If you can't find it or it appears under multiple names, please <a routerLink="/contact-us">contact us</a>. </p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">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>
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-overflow-hidden uk-position-relative uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">
|
||||
Invite your RPOs Primary Manager via email
|
||||
</p>
|
||||
<p>Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and use of OpenOrgs, OpenAIRE's organization deduplication service.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
|
||||
<p>We built your profile if it is missing and help you deduplicate your organization’s name via the OpenORgs service.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Interact with you Through 1-on-1 expert consultations</p>
|
||||
<p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
<li>
|
||||
<you-we [type]="'Research Funding Organisation (RFO)'" id="rfo">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
|
||||
<p>Nominate a primary dashboard manager by completing <a href="https://app.onlinesurveys.jisc.ac.uk/s/maynoothuniversity/national-open-access-monitor-dashboard-manager-application-form" target="_blank">our application form</a>... If you already have a primary dashboard manager or prefer not to be one, proceed to step 2.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Find Your RFO's Monitor Dashboard</p>
|
||||
<p>Head to the <a routerLink="/rfo">RFO Monitor page</a> and look up your organization. If you can't find it or it appears under multiple names, please <a routerLink="/contact-us">contact us</a>.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Discover Your Monitor and consider joining OpenAIRE (Optional)</p>
|
||||
<p>Explore your personalized dashboard at your leisure. You have the option to join OpenAIRE, allowing us to develop a specialized text mining algorithm to enrich your profile. This marks the final step if you choose not to join OpenAIRE.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body uk-margin-medium-bottom">
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Join OpenAIRE - You provide Information about your funded projects and join OpenAIRE.</p>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree on.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">validate the results and approve for them to be shown on your Monitor dashboard.</p>
|
||||
<p>Examine your dashboard in the Sandbox environment and the showcased information to ensure you are satisfied with what you see.</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Invite your RFOs Primary Manager via email</p>
|
||||
<p>Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and curation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
|
||||
<p>We built your profile if it is missing and help you with any additional issues</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Interact with you Through 1-on-1 expert consultations</p>
|
||||
<p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Ingest your project metadata and mine the <a href="https://graph.openaire.eu" target="_blank">OpenAIRE Graph</a>.</p>
|
||||
<p>We infer links to research results: publications, datasets, software, etc, via dedicated text mining algorithms.</p>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Refine until you are happy with the results.</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
<li>
|
||||
<you-we [type]="'Researcher'" id="researcher">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Access Your Profile with ORCID iD</p>
|
||||
<p>Log in using your ORCID iD to grant OpenAIRE access to your ORCID record. Then, visit the <a routerLink="/researcher">Researcher Monitors</a> to search for your ORCID iD. If it’s not listed, contact us. Note that only research products affiliated with an Irish RPO will be displayed in your profile. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Claim Additional Records</p>
|
||||
<p>From your profile (click the circle with your initials at the top right), navigate to the 'My ORCID Links' page and allow OpenAIRE to enhance your ORCID record. Search for your research products and claim them. These will appear in your ORCID record following the next update of the OpenAIRE Graph.</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
|
||||
<p>If your profile is missing, we are here to help build it. Remember, OpenAIRE syncs with ORCID, so research products not in ORCID or unaffiliated with an Irish organization will not appear in your record.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Support you in understanding any gaps or deviations within your dashboard and to provide assistance as needed.</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
<li>
|
||||
<you-we [type]="'Institutional Repository'" id="repository">
|
||||
<ng-container you>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Find Your Repository’s Monitor Dashboard & Register to OpenAIRE PROVIDE</p>
|
||||
<p>Navigate to the <a routerLink="/repository">Repository Monitor page</a> and search for your repository. If it is not listed, this indicates that you need to register with OpenAIRE. You can complete this process by following <a href="http://Navigate%20to%20the%20Repository%20Monitor%20page%20and%20search%20for%20your%20repository.%20If%20it's%20not%20listed,%20this%20typically%20indicates%20that%20you%20need%20to%20register%20with%20OpenAIRE.%20You%20can%20complete%20this%20process%20here.%20If%20your%20repository%20already%20has%20a%20Monitor%20dashboard%20but%20hasn't%20been%20registered%20in%20OpenAIRE%20PROVIDE,%20please%20contact%20us%20for%20assistance." target="_blank">these</a> instructions. If your repository already has a Monitor dashboard but your have not been registered in OpenAIRE PROVIDE, please <a routerLink="/contact-us">contact us</a> for assistance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">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>
|
||||
</ng-container>
|
||||
<ng-container we>
|
||||
<div class="uk-card uk-card-default uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
|
||||
<div class="uk-card-body">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Invite you as a Manager via email</p>
|
||||
<p>As a manager, you will receive access to the PROVIDE dashboard. OpenAIRE PROVIDE is a service designed for Institutional Repository Managers to register, validate, and enrich their records. It also offers insights into usage statistics, including views and downloads. This dashboard allows you to efficiently manage your records and comply with Open Access requirements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<p class="uk-text-large uk-margin-xsmall-top">Interact with you through 1-on-1 expert consultations</p>
|
||||
<p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
</you-we>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="uk-hidden@m">
|
||||
<div class="uk-banner">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-text-center" uk-scrollspy-class>
|
||||
<h1 class="uk-margin-medium-top uk-margin-medium-bottom" uk-scrollspy-class>How it works<span class="uk-text-primary">.</span></h1>
|
||||
<div class="uk-text-large" uk-scrollspy-class>
|
||||
Join the OpenAIRE Monitor service and we will create for you a dashboard to track, 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-scrollspy-class>
|
||||
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-position-relative uk-height-medium" style="overflow-x: hidden; overflow-x: clip;">
|
||||
<img class="uk-width-large uk-position-absolute" src="assets/monitor-assets/about/hero.svg" loading="lazy"
|
||||
style="bottom: -70px; right: -80px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-section uk-section-large uk-margin-medium-top">
|
||||
<div class="uk-sticky uk-blur-background" [attr.uk-sticky]="shouldSticky?'':null">
|
||||
<div class="uk-padding-small uk-padding-remove-right uk-padding-remove-bottom">
|
||||
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content-mobile">
|
||||
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
|
||||
[tabId]="section"></slider-tab>
|
||||
</slider-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large">
|
||||
<ul id="tabs-content-mobile" class="uk-switcher uk-margin-large-bottom">
|
||||
<li id="funder">
|
||||
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
|
||||
Are you a <span class="uk-text-primary">Funder?</span>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<h5 class="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>.</h5>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree
|
||||
on.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We ingest your project metadata and mine the <a
|
||||
href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Graph</a>.
|
||||
</h5>
|
||||
<p>We infer links to research results: publications, datasets, software, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<h5 class="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.</h5>
|
||||
<p>Examine your dashboard and the showcased information to ensure you are satisfied with what you
|
||||
see.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
|
||||
your dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
|
||||
us</h5>
|
||||
<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>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
|
||||
advanced composite indicators.</h5>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
|
||||
funded research activities.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
|
||||
<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>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
|
||||
<p>We present your dashboard to you.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Select your team</h5>
|
||||
<p>And make them collaborators of the service.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
|
||||
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="ri">
|
||||
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
|
||||
Are you a <span class="uk-text-primary">Research Initiative?</span>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<h5 class="uk-margin-xsmall-top">You state your interest in having a research initiative
|
||||
dashboard.</h5>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree
|
||||
on.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<h5 class="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 Graph</a> are
|
||||
relevant for you.</h5>
|
||||
<p>If needed, we develop a customized full-text mining algorithm to identify your publications.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<h5 class="uk-margin-xsmall-top">You configure the criteria to identify the research
|
||||
products that you want to be accounted for.</h5>
|
||||
<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-margin-large-top">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
|
||||
your dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
|
||||
us</h5>
|
||||
<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>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
|
||||
advanced composite indicators.</h5>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
|
||||
institution’s research activities.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/ri" 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>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
|
||||
<p>We present your dashboard to you.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Select your team</h5>
|
||||
<p>And make them collaborators of the service.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
|
||||
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="organizations">
|
||||
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
|
||||
Are you a <span class="uk-text-primary">Research Institution?</span>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 1a</span>
|
||||
<h5 class="uk-margin-xsmall-top">You state your interest in having an institutional
|
||||
dashboard for your institution.</h5>
|
||||
<p>All information is exchanged under confidential agreements and we only make public what you agree
|
||||
on.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 1b</span>
|
||||
<h5 class="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.</h5>
|
||||
<p>We infer links to research results: publications, datasets, software, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 2a</span>
|
||||
<h5 class="uk-margin-xsmall-top">You validate and approve the results.</h5>
|
||||
<p>You examine your dashboard and the showcased information to ensure you are satisfied with what you
|
||||
see.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 2b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We present the results to you on our Beta portal.</h5>
|
||||
<p>We refine until you are happy with the results. We allocate the hardware resources needed to create
|
||||
your dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 3a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Through 1-on-1 expert consultations you interact with
|
||||
us</h5>
|
||||
<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>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 3b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We produce well-documented visualisations of simple & more
|
||||
advanced composite indicators.</h5>
|
||||
<p>Aligned with the Open Science principles and following an evidence-based approach, and based on the
|
||||
institution’s research activities.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 4a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Customise your dashboard and make your own profile.</h5>
|
||||
<p>Select the <a href="https://monitor.openaire.eu/indicators/organization" 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>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 4b</span>
|
||||
<h5 class="uk-margin-xsmall-top">We refine until we are happy with the results.</h5>
|
||||
<p>We present your dashboard to you.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-card-body uk-position-relative uk-margin-large-bottom">
|
||||
<div>
|
||||
<span class="uk-text-primary">Step 5a</span>
|
||||
<h5 class="uk-margin-xsmall-top">Select your team</h5>
|
||||
<p>And make them collaborators of the service.</p>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<span class="uk-text-primary">Step 5b</span>
|
||||
<h5 class="uk-margin-xsmall-top">Notify you about new metrics and indicators</h5>
|
||||
<p>as we keep enriching the Graph, which you may find useful and add to your profile</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.custom-translate-bottom-left {
|
||||
transform: translate(-20%, 20%);
|
||||
}
|
||||
|
||||
.five-boxes {
|
||||
grid-gap: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -1,13 +1,57 @@
|
|||
import {Component} from "@angular/core";
|
||||
import {ChangeDetectorRef, Component} from "@angular/core";
|
||||
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder";
|
||||
|
||||
@Component({
|
||||
selector: 'the-five-monitors',
|
||||
template: `
|
||||
<div>the 5 monitors page</div>
|
||||
`
|
||||
templateUrl: 'the-five-monitors.component.html',
|
||||
styleUrls: ['the-five-monitors.component.less']
|
||||
})
|
||||
export class TheFiveMonitorsComponent {
|
||||
constructor() {
|
||||
export class TheFiveMonitorsComponent extends BaseComponent{
|
||||
title = 'The 5 Monitors';
|
||||
description = 'The 5 Monitors';
|
||||
public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories'];
|
||||
public offset: number;
|
||||
public stakeholderEntities = StakeholderEntities;
|
||||
public shouldSticky: boolean = true;
|
||||
|
||||
constructor(protected _route: ActivatedRoute,
|
||||
protected _piwikService: PiwikService,
|
||||
protected _meta: Meta,
|
||||
protected seoService: SEOService,
|
||||
protected _title: Title,
|
||||
protected _router: Router,
|
||||
private cdr: ChangeDetectorRef) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.setMetadata();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (typeof document !== 'undefined') {
|
||||
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
|
||||
this.cdr.detectChanges();
|
||||
this.observeBottom();
|
||||
}
|
||||
}
|
||||
|
||||
private observeBottom() {
|
||||
let bottom = document.getElementById('bottom');
|
||||
if (bottom) {
|
||||
let bottomObs = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
this.shouldSticky = !entry.isIntersecting;
|
||||
this.cdr.detectChanges();
|
||||
})
|
||||
});
|
||||
this.subscriptions.push(bottomObs);
|
||||
bottomObs.observe(bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
import {
|
||||
AfterContentChecked, AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
Input,
|
||||
OnDestroy,
|
||||
ViewChild
|
||||
} from "@angular/core";
|
||||
import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
@Component({
|
||||
selector: 'you-we',
|
||||
template: `
|
||||
<div>
|
||||
<div class="uk-container">
|
||||
<h3 class="uk-h4 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span
|
||||
class="uk-text-primary">{{type}}?</span></h3>
|
||||
</div>
|
||||
<div [id]="'sticky-' + id" #sticky class="uk-background-default uk-blur-background uk-sticky uk-visible@l"
|
||||
uk-sticky="animation: uk-animation-slide-bottom" [attr.end]="'#' + id"
|
||||
[attr.start]="'100vh -' + height + 'px'" [attr.offset]="offset">
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid uk-grid-large uk-child-width-1-2@l" [class.uk-grid-divider]="!isSticky">
|
||||
<div class="uk-text-center uk-first-column">
|
||||
<h4 class="uk-h5 uk-margin-remove uk-margin-small-top uk-margin-small-bottom">You</h4>
|
||||
</div>
|
||||
<div class="uk-text-center">
|
||||
<h4 class="uk-h5 uk-margin-remove uk-margin-small-top uk-margin-small-bottom">We</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div [id]="id" class="uk-container">
|
||||
<div class="uk-padding uk-padding-remove-vertical">
|
||||
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid
|
||||
uk-height-match="target: .uk-card">
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
|
||||
<div class="uk-margin-top uk-margin-xlarge-bottom">
|
||||
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">You</span>
|
||||
<ng-content select="[you]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
|
||||
<div class="uk-margin-top uk-margin-xlarge-bottom">
|
||||
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
|
||||
<ng-content select="[we]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
|
||||
@Input()
|
||||
public type: StakeholderEntities.FUNDER | StakeholderEntities.RI | StakeholderEntities.ORGANIZATION = StakeholderEntities.FUNDER;
|
||||
@Input()
|
||||
public id;
|
||||
@ViewChild('sticky') sticky: ElementRef;
|
||||
public isSticky: boolean = false;
|
||||
public offset: number
|
||||
public height: number;
|
||||
private subscriptions: any[] = [];
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (this.sticky) {
|
||||
this.observeSticky();
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
if (this.sticky && typeof document !== 'undefined') {
|
||||
this.offset = this.calcOffset(this.sticky.nativeElement);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptions.forEach(subscription => {
|
||||
if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
|
||||
subscription.disconnect();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public observeSticky() {
|
||||
let resizeObs = new ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
setTimeout(() => {
|
||||
this.offset = this.calcOffset(entry.target);
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
})
|
||||
});
|
||||
this.subscriptions.push(resizeObs);
|
||||
resizeObs.observe(this.sticky.nativeElement);
|
||||
this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'active', (): void => {
|
||||
this.isSticky = true;
|
||||
}));
|
||||
this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'inactive', () => {
|
||||
this.isSticky = false;
|
||||
}));
|
||||
}
|
||||
|
||||
calcOffset(element) {
|
||||
this.height = element.offsetHeight;
|
||||
return window.innerHeight - this.height;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue