MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
monitor/indicators/indicator-themes.component.ts
View File

@ -9,6 +9,7 @@ import {Subscriber} from "rxjs";
@Component({ @Component({
selector: 'indicator-themes-page', selector: 'indicator-themes-page',
template: ` 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-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
@ -18,10 +19,10 @@ import {Subscriber} from "rxjs";
<h1>Indicator Themes<span class="uk-text-primary">.</span></h1> <h1>Indicator Themes<span class="uk-text-primary">.</span></h1>
<div class="uk-section"> <div class="uk-section">
<div class="uk-grid uk-grid-large uk-flex-middle" uk-grid> <div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
<div class="uk-width-3-5@m uk-width-1-1"> <div class="uk-width-3-5">
<img src="assets/common-assets/monitor-assets/indicator-themes-circle.png"> <img src="assets/common-assets/monitor-assets/indicator-themes-circle.png">
</div> </div>
<div class="uk-width-expand@m uk-width-1-1"> <div class="uk-width-expand">
<div> <div>
<h5>Indicator themes that we are covering in the Monitor dashboards.</h5> <h5>Indicator themes that we are covering in the Monitor dashboards.</h5>
<p> <p>
@ -38,6 +39,29 @@ import {Subscriber} from "rxjs";
</div> </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. We’ll 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>
` `
}) })
export class IndicatorThemesComponent implements OnInit, OnDestroy { export class IndicatorThemesComponent implements OnInit, OnDestroy {

71
monitor/methodology/methodological-approach.component.ts
View File

@ -11,6 +11,7 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
@Component({ @Component({
selector: 'methodological-approach', selector: 'methodological-approach',
template: ` 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-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
@ -18,9 +19,9 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</div> </div>
<div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250"> <div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div id="how" class="uk-container uk-container-large"> <div id="how" class="uk-container uk-container-large">
<h2 class="uk-h1" uk-scrollspy-class> <h1 class="uk-h1" uk-scrollspy-class>
Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span> Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
</h2> </h1>
<div class="uk-padding uk-padding-remove-vertical"> <div class="uk-padding uk-padding-remove-vertical">
<div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class> <div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class>
<p class="uk-margin-top">Our methodological approach is based on the following operational quality <p class="uk-margin-top">Our methodological approach is based on the following operational quality
@ -88,6 +89,72 @@ import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
</div> </div>
</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>
<li class="uk-margin-small-bottom"><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and
clearly presented.
</li>
<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>
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 class="uk-margin-small-bottom"><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 class="uk-margin-small-bottom"><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-muted">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 class="uk-margin-xlarge-top uk-padding-large">
<img src="assets/common-assets/common/graph-nodes.svg" alt="OpenAIRE Research Graph" loading="lazy">
</div>
<div class="uk-margin-top uk-margin-large-bottom">
<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">It’s 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 class="uk-section uk-section-large uk-container uk-container-large"> <!-- <div class="uk-section uk-section-large uk-container uk-container-large">
TODO: Graph scheme TODO: Graph scheme
</div> --> </div> -->

58
monitor/methodology/terminology.component.ts
View File

@ -22,6 +22,7 @@ declare var ResizeObserver;
@Component({ @Component({
selector: 'terminology', selector: 'terminology',
template: ` template: `
<div class="uk-visible@m">
<div class="uk-background-muted"> <div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small"> <div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
@ -45,7 +46,7 @@ declare var ResizeObserver;
</div> </div>
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class> <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid> <div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4@m uk-margin-top uk-visible@m"> <div class="uk-width-1-4 uk-margin-top">
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;"> <div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;">
<slider-tabs type="scrollable" position="left"> <slider-tabs type="scrollable" position="left">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab> <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
@ -54,17 +55,7 @@ declare var ResizeObserver;
</slider-tabs> </slider-tabs>
</div> </div>
</div> </div>
<div class="uk-width-1-1 uk-margin-top uk-hidden@m"> <div class="uk-width-expand uk-margin-top">
<div class="uk-sticky uk-background-default" uk-sticky>
<slider-tabs type="scrollable" position="horizontal">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes"
tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
<slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
</slider-tabs>
</div>
</div>
<div class="uk-width-expand@m uk-margin-top">
<div id="entities" class="uk-margin-large-bottom"> <div id="entities" class="uk-margin-large-bottom">
<helper [texts]="divContents['entities']"></helper> <helper [texts]="divContents['entities']"></helper>
</div> </div>
@ -78,6 +69,49 @@ declare var ResizeObserver;
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="uk-hidden@m">
<div class="uk-background-muted">
<div class="uk-container uk-container-large">
<div class="uk-text-center" uk-scrollspy-class>
<h1 class="uk-heading-small uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span
class="uk-text-primary">.</span></h1>
</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 {