start on mobile monitor pages

This commit is contained in:
Alex Martzios 2022-11-28 10:58:20 +02:00
parent 10b386179c
commit 64b22f3eb5
3 changed files with 251 additions and 126 deletions

View File

@ -9,31 +9,55 @@ import {Subscriber} from "rxjs";
@Component({ @Component({
selector: 'indicator-themes-page', selector: 'indicator-themes-page',
template: ` template: `
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom"> <div class="uk-visible@m">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <div class="uk-padding-small uk-padding-remove-horizontal">
</div> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
<div class="uk-container uk-container-large uk-section"> </div>
<h1>Indicator Themes<span class="uk-text-primary">.</span></h1> <div class="uk-container uk-container-large uk-section">
<div class="uk-section"> <h1>Indicator Themes<span class="uk-text-primary">.</span></h1>
<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid> <div class="uk-section">
<div class="uk-width-3-5@m uk-width-1-1"> <div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png"> <div class="uk-width-3-5">
</div> <img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
<div class="uk-width-expand@m uk-width-1-1">
<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 Research 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 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 Research 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 Research 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>

View File

@ -11,35 +11,109 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
@Component({ @Component({
selector: 'methodological-approach', selector: 'methodological-approach',
template: ` template: `
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom"> <div class="uk-visible@m">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <div class="uk-padding-small uk-padding-remove-horizontal">
</div> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
<div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250"> </div>
<div id="how" class="uk-container uk-container-large"> <div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<h2 class="uk-h1" uk-scrollspy-class> <div id="how" class="uk-container uk-container-large">
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span> <h1 class="uk-h1" uk-scrollspy-class>
</h2> Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
<div class="uk-padding uk-padding-remove-vertical"> </h1>
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class> <div class="uk-padding uk-padding-remove-vertical">
<p class="uk-margin-top">Our methodological approach is based on the following operational quality <div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class>
criteria:</p> <p class="uk-margin-top">Our methodological approach is based on the following operational quality
criteria:</p>
<ul>
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and
clearly presented.
</li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent
possible, in order to provide meaningful indicators.
</li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
detail, so that
it can be verified and used by the scholarly communication community to create ongoing updates to our
proposed statistics and indicators.
</li>
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around
well-established open databases
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning
(ML) - using operational
workflows in OpenAIRE to warrant timely results.
</li>
<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable,
robust, and aligned
to other assessment methods so that it can be operationalized, used and reused, in conjunction with other
assessment methods.
</li>
</ul>
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a
href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
target="_blank">this report</a> (DOI: 10.2777/268348).
</div>
</div>
</div>
</div>
</div>
<div class="uk-background-muted uk-margin-large-top">
<div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<div style="max-width: 575px;">
<span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
<h2 class="uk-margin-small-top">How? Its about open data and collaboration<span class="text-graph">.</span></h2>
<ul class="uk-list uk-list-bullet uk-margin-large-top">
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span>
<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
</li>
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Based on <span class="uk-text-bold">Open Science principles</span></span>
<span>Open data sources, Open APIs, well documented metrics and indicators.</span>
</li>
<li class="uk-flex uk-flex-column">
<span class="uk-text-large uk-margin-small-bottom">Relevance for the <span class="uk-text-bold">Community</span></span>
<span>Indicators development and visualizations to meet community requirements.</span>
</li>
</ul>
</div>
</div>
<div class="uk-position-relative">
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div class="uk-hidden@m">
<div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div class="uk-container uk-container-large">
<h1 class="uk-heading-small uk-text-center uk-padding-small uk-padding-remove-vertical" uk-scrollspy-class>
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h1>
<div class="uk-margin-xlarge-top" uk-scrollspy-class>
<p>Our <span class="uk-text-primary">methodological approach</span> is based on the following operational quality
<span class="uk-text-primary">criteria</span>:</p>
<ul> <ul>
<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and <li class="uk-margin-small-bottom"><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and
clearly presented. clearly presented.
</li> </li>
<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a <li class="uk-margin-small-bottom"><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a> href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent
possible, in order to provide meaningful indicators. possible, in order to provide meaningful indicators.
</li> </li>
<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in <li class="uk-margin-small-bottom"><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
detail, so that detail, so that
it can be verified and used by the scholarly communication community to create ongoing updates to our it can be verified and used by the scholarly communication community to create ongoing updates to our
proposed statistics and indicators. proposed statistics and indicators.
</li> </li>
<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around <li class="uk-margin-small-bottom"><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around
well-established open databases well-established open databases
and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning
(ML) - using operational (ML) - using operational
@ -51,39 +125,32 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
assessment methods. assessment methods.
</li> </li>
</ul> </ul>
<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a <div class="uk-text-small uk-text-italic uk-text-muted">The text above is modified from <a
href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1" href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
target="_blank">this report</a> (DOI: 10.2777/268348). target="_blank">this report</a> (DOI: 10.2777/268348).
</div> </div>
</div> </div>
</div> <div class="uk-margin-xlarge-top uk-padding-large">
</div> <img src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
</div>
<div class="uk-background-muted uk-margin-large-top">
<div class="uk-section uk-section-large uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<div style="max-width: 575px;">
<span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
<h2 class="uk-margin-small-top">How? Its about open data and collaboration<span class="text-graph">.</span></h2>
<ul class="uk-list uk-list-bullet uk-margin-large-top">
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span>
<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
</li>
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Based on <span class="uk-text-bold">Open Science principles</span></span>
<span>Open data sources, Open APIs, well documented metrics and indicators.</span>
</li>
<li class="uk-flex uk-flex-column">
<span class="uk-text-large uk-margin-small-bottom">Relevance for the <span class="uk-text-bold">Community</span></span>
<span>Indicators development and visualizations to meet community requirements.</span>
</li>
</ul>
</div>
</div> </div>
<div class="uk-position-relative"> <div class="uk-margin-top uk-margin-large-bottom">
<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy"> <span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
<h2 class="uk-margin-small-top uk-margin-remove-bottom">How?</h2>
<h2 class="uk-margin-remove-top uk-padding uk-padding-remove-vertical uk-padding-remove-left">Its about open data and collaboration<span class="text-graph">.</span></h2>
<ul class="uk-list uk-list-bullet uk-margin-large-top">
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span>
<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
</li>
<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
<span class="uk-text-large uk-margin-small-bottom">Based on <span class="uk-text-bold">Open Science principles</span></span>
<span>Open data sources, Open APIs, well documented metrics and indicators.</span>
</li>
<li class="uk-flex uk-flex-column">
<span class="uk-text-large uk-margin-small-bottom">Relevance for the <span class="uk-text-bold">Community</span></span>
<span>Indicators development and visualizations to meet community requirements.</span>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>

View File

@ -22,62 +22,96 @@ declare var ResizeObserver;
@Component({ @Component({
selector: 'terminology', selector: 'terminology',
template: ` template: `
<div class="uk-background-muted"> <div class="uk-visible@m">
<div class="uk-container uk-container-large uk-section uk-section-small"> <div class="uk-background-muted">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-container uk-container-large uk-section uk-section-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <div class="uk-padding-small uk-padding-remove-horizontal">
</div> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
<div class="uk-text-center" uk-scrollspy-class> </div>
<h1 class="uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span <div class="uk-text-center" uk-scrollspy-class>
class="uk-text-primary">.</span></h1> <h1 class="uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span
</div> class="uk-text-primary">.</span></h1>
</div> </div>
</div> </div>
<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250"> </div>
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true" <div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
[attr.offset]="graph_offset"> <div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom"> [attr.offset]="graph_offset">
<icon name="graph" customClass="text-graph"></icon> <div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
<span class="uk-margin-small-left uk-text-meta">More information for </span> <icon name="graph" customClass="text-graph"></icon>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a> <span class="uk-margin-small-left uk-text-meta">More information for </span>
<span class="uk-text-meta">.</span> <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
</div> <span class="uk-text-meta">.</span>
</div> </div>
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class> </div>
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid> <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
<div class="uk-width-1-4@m uk-margin-top uk-visible@m"> <div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;"> <div class="uk-width-1-4 uk-margin-top">
<slider-tabs type="scrollable" position="left"> <div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab> <slider-tabs type="scrollable" position="left">
<slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab> <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab> <slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
</slider-tabs> <slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
</div> </slider-tabs>
</div> </div>
<div class="uk-width-1-1 uk-margin-top uk-hidden@m"> </div>
<div class="uk-sticky uk-background-default" uk-sticky> <div class="uk-width-expand uk-margin-top">
<slider-tabs type="scrollable" position="horizontal"> <div id="entities" class="uk-margin-large-bottom">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab> <helper [texts]="divContents['entities']"></helper>
<slider-tab tabId="inherited-and-inferred-attributes" </div>
tabTitle="2. Inherited and Inferred Attributes"></slider-tab> <div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom">
<slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab> <helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
</slider-tabs> </div>
</div> <div id="constructed-attributes" class="uk-margin-large-bottom">
</div> <helper [texts]="divContents['constructed-attributes']"></helper>
<div class="uk-width-expand@m uk-margin-top"> </div>
<div id="entities" class="uk-margin-large-bottom"> </div>
<helper [texts]="divContents['entities']"></helper> </div>
</div> </div>
<div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom"> </div>
<helper [texts]="divContents['inherited-and-inferred-attributes']"></helper> </div>
</div> <div class="uk-hidden@m">
<div id="constructed-attributes" class="uk-margin-large-bottom"> <div class="uk-background-muted">
<helper [texts]="divContents['constructed-attributes']"></helper> <div class="uk-container uk-container-large">
</div> <div class="uk-text-center" uk-scrollspy-class>
</div> <h1 class="uk-heading-small uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span
</div> class="uk-text-primary">.</span></h1>
</div> </div>
</div> </div>
</div>
<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
[attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-meta">More information for </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
<span class="uk-text-meta">.</span>
</div>
</div>
<div class="uk-margin-top">
<div class="uk-sticky uk-background-default" uk-sticky>
<slider-tabs type="scrollable" position="horizontal">
<slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes_m"
tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
<slider-tab tabId="constructed-attributes_m" tabTitle="3. Constructed Attributes"></slider-tab>
</slider-tabs>
</div>
</div>
<div class="uk-margin-top uk-container uk-container-large uk-section uk-section-small">
<div id="entities_m" class="uk-margin-xlarge-bottom">
<helper [texts]="divContents['entities']"></helper>
</div>
<div id="inherited-and-inferred-attributes_m" class="uk-margin-xlarge-bottom">
<helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
</div>
<div id="constructed-attributes_m" class="uk-margin-xlarge-bottom">
<helper [texts]="divContents['constructed-attributes']"></helper>
</div>
</div>
</div>
</div>
` `
}) })
export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentChecked { export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentChecked {