[UsageCounts | Trunk]: New text and UI changes

This commit is contained in:
k.triantafyllou 2020-11-27 16:44:03 +00:00
parent 4be98570d1
commit a8dc3761ea
11 changed files with 449 additions and 392 deletions

View File

@ -58,8 +58,9 @@
@media only screen and (min-width: 1200px) {
.architecture {
background-size: 80% 70%;
height: 450px;
background-size: 95% 75%;
background-position: 0 50%;
height: 600px;
}
.architecture > div {
@ -68,7 +69,7 @@
background-position: 0 0;
background-size: auto;
margin-top: -50px;
width: 30%;
width: 31%;
}
}

View File

@ -5,105 +5,119 @@
<div class="about">
<div class="uk-container uk-container-large about-background">
<div class="uk-container uk-section uk-section-small uk-visible@l">
<h2 class="uk-text-bold">About</h2>
<div class="uk-padding uk-width-3-4">
UsageCounts service is an OpenAIRE service built after the development of the Usage Statistics Service within
OpenAIRE. UsageCounts forms metrics of usage activity of Open Access Repositories categorizing the data
retrieved by country, number of downloads, number of views, number of repositories and all derivative
quantitative open metrics, in a comprehensive way for all stakeholders.
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-text-bold">About</h2>
<div class="uk-padding uk-width-3-4">
UsageCounts service is an OpenAIRE service built to cover the needs of content providers and consumers and
offer
added value to assist them in reaching their goals. UsageCounts forms metrics of usage activity of Open Access
Repositories categorizing the data retrieved by country, number of downloads, number of views, number of
repositories and all derivative quantitative open metrics, comprehensively.
</div>
</div>
</div>
<a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('architecture')">
Architecture
<icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
</a>
<div class="uk-hidden@l">
<h2 class="uk-text-bold">About</h2>
<div class="uk-padding uk-padding-remove-horizontal">
UsageCounts service is an OpenAIRE service built after the development of the Usage Statistics Service within
OpenAIRE. UsageCounts forms metrics of usage activity of Open Access Repositories categorizing the data
retrieved by country, number of downloads, number of views, number of repositories and all derivative
quantitative open metrics, in a comprehensive way for all stakeholders.
<div class="uk-hidden@l uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-text-bold">About</h2>
<div class="uk-padding uk-padding-remove-horizontal">
UsageCounts service is an OpenAIRE service built to cover the needs of content providers and consumers and
offer
added value to assist them in reaching their goals. UsageCounts forms metrics of usage activity of Open Access
Repositories categorizing the data retrieved by country, number of downloads, number of views, number of
repositories and all derivative quantitative open metrics, comprehensively.
</div>
</div>
</div>
</div>
<div id="architecture" class="uk-container uk-section">
<div class="uk-section uk-padding-remove-top">
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-text-bold">Architecture</h2>
<div class="architecture uk-margin-large-top uk-flex uk-flex-right">
<div class="uk-visible@l uk-padding-large uk-padding-remove-bottom uk-padding-remove-right">
UsageCounts service collects usage activity from OpenAIRE content providers for usage events related to
research products of the OpenAIRE graph, creates and deploys aggregated statistics for these products.
research products of the <a class="graph-color" href="http://graph.openaire.eu" target="_blank">OpenAIRE
Research Graph</a>, creates and deploys aggregated statistics for these
products.
</div>
</div>
<div class="uk-hidden@l uk-padding uk-margin-top">
<div class="uk-hidden@l uk-margin-top">
UsageCounts service collects usage activity from OpenAIRE content providers for usage events related to
research products of the OpenAIRE graph, creates and deploys aggregated statistics for these products.
research products of the <a class="graph-color" href="http://graph.openaire.eu" target="_blank">OpenAIRE
Research Graph</a>, creates and deploys aggregated statistics for these
products.
</div>
</div>
<div class="uk-section uk-margin-large-top">
<h2 class="uk-text-bold">Architecture & Workflows</h2>
<div class="uk-flex uk-grid uk-child-width-1-2@l" uk-grid>
<div class="uk-width-3-5@l uk-flex uk-flex-center workflows">
<img src="assets/usage-statistics-assets/about/3.1.png" class="uk-margin-large-top uk-margin-left">
</div>
<div>
<h3 class="uk-text-bold portal-color">Architecture functionalities</h3>
<div class="uk-margin-large-left">
<ol class="light-blue">
<li>Constant tracking of views and downloads of open science repositories registered on OpenAIRE PROVIDE
</li>
<li>Creation of downloadable reports available only for content providers</li>
<li>Instant connection with the OpenAIRE Research Graph</li>
<li>Compatibility with COUNTER Code of Practice that provides standards based usage statistics and enables
comparability with statistics from other data sources
</li>
<li>Anonymisation of IP-addresses</li>
</ol>
<div class="uk-section uk-margin-large-top">
<h2 class="uk-text-bold">Architecture & Workflows</h2>
<div class="uk-flex uk-grid uk-child-width-1-2@l" uk-grid>
<div class="uk-width-3-5@l uk-flex uk-flex-center workflows">
<img src="assets/usage-statistics-assets/about/3.1.png" class="uk-margin-large-top uk-margin-left">
</div>
</div>
</div>
<div class="uk-section uk-margin-large-top push-pull">
<div class=" uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<h5 class="uk-text-primary uk-text-bold">
<span class="uk-text-normal portal-color">Push</span>
Usage Statistics Tracking Workflow
</h5>
<ul class="light-blue-circle uk-margin-medium-top">
<li>An institutional repository is registered in OpenAIRE.</li>
<li>Server side tracking: Plugins (Dspace) or patches (Eprints) using Matomos Web Analytics HTTP API.
</li>
<li>Usage Activity is tracked and logged in real time.</li>
<li>Ιnformation is transferred offline to OpenAIREs DBs for statistical analysis.</li>
<li>Statistics are deployed for human (OpenAIREs Portal) and machine (Sushi-Lite API) consumption.</li>
</ul>
<h3 class="uk-text-bold portal-color">Architecture functionalities</h3>
<div class="uk-margin-large-left uk-margin-medium-top">
<ol class="light-blue">
<li>Constant tracking of views and downloads of open science content providers registered on OpenAIRE
PROVIDE.
</li>
<li>Creation of downloadable reports available only for content providers.</li>
<li>Instant connection with the OpenAIRE Research Graph.</li>
<li>Compatibility with COUNTER Code of Practice that provides standards based usage statistics and
enables
comparability with statistics from other data sources.
</li>
<li>Anonymization of IP-addresses.</li>
</ol>
</div>
</div>
<div class="uk-margin-medium-top">
<h5 class="uk-text-primary uk-text-bold uk-width-2-3@m">
Collecting <span class="uk-text-normal portal-color">(Pull)</span> Consolidated Usage Statistics Reports
</h5>
<ul class="light-blue-circle uk-margin-medium-top">
<li>Gathering of consolidated statistics reports from aggregation services, such as IRUS-UK, using
protocols such as SUSHI-Lite.
</li>
<li>Statistics are stored in OpenAIREs DB for statistical analysis.</li>
<li>Statistics are deployed via OpenAIREs Portal or Sushi-Lite API.</li>
</ul>
</div>
<div class="uk-section uk-margin-large-top push-pull">
<div class=" uk-grid uk-child-width-1-2@m" uk-grid>
<div>
<h5 class="uk-text-primary uk-text-bold">
<span class="uk-text-normal portal-color">Push</span>
Usage Statistics Tracking Workflow
</h5>
<ul class="light-blue-circle uk-margin-medium-top uk-margin-medium-left">
<li>An institutional repository is registered in OpenAIRE.</li>
<li>Server side tracking: Plugins (Dspace) or patches (Eprints) using Matomos Web Analytics HTTP API.
</li>
<li>Usage Activity is tracked and logged in real time.</li>
<li>Information is transferred offline to OpenAIREs DBs for statistical analysis.</li>
<li>Statistics are deployed for human (OpenAIREs Portal) and machine (Sushi-Lite API) consumption.</li>
</ul>
</div>
<div class="uk-margin-medium-top">
<h5 class="uk-text-primary uk-text-bold uk-width-2-3@m">
Collecting <span class="uk-text-normal portal-color">(Pull)</span> Consolidated Usage Statistics Reports
</h5>
<ul class="light-blue-circle uk-margin-medium-top uk-margin-medium-left">
<li>Gathering of consolidated statistics reports from aggregation services, such as IRUS-UK, using
protocols such as SUSHI-Lite.
</li>
<li>Statistics are stored in OpenAIRE's DB for statistical analysis.</li>
<li>Statistics are deployed via OpenAIREs Portal or Sushi-Lite API.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="faqs" class="uk-container uk-section" [class.uk-hidden]="faqs.length == 0">
<h2 class="uk-text-bold">About - FAQs</h2>
<ul class="faqs uk-margin-medium-top" uk-accordion="multiple: true">
<li *ngFor="let faq of faqs;let i=index" [class.uk-open]="i===0">
<a class="uk-accordion-title">{{faq.question}}</a>
<div class="uk-accordion-content">
{{faq.answer}}
</div>
</li>
</ul>
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-text-bold">About - FAQs</h2>
<ul class="faqs uk-margin-medium-top" uk-accordion="multiple: true">
<li *ngFor="let faq of faqs;let i=index" [class.uk-open]="i===0">
<a class="uk-accordion-title">{{faq.question}}</a>
<div class="uk-accordion-content">
{{faq.answer}}
</div>
</li>
</ul>
</div>
</div>
</div>

View File

@ -46,7 +46,7 @@ button.search, button.search:hover {
outline: none;
background-color: transparent;
font-family: "Roboto", sans-serif;
font-size: 12px;
font-size: 16px;
}
button.search:hover {

View File

@ -9,26 +9,27 @@
<icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
</a>
<div class="uk-section uk-section-small">
<h2 class="uk-margin-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
<div class="uk-container uk-text-bold">
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom">
<div class="uk-width-3-5">
<form [formGroup]="countryFb" (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
[class.uk-hidden]="!showSearch || (!showSearch && country)"
placeholder="SEARCH FOR A COUNTRY"
(blur)="closeSearch()"
aria-label="Number"
formControlName="country"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
<mat-option *ngFor="let option of countries | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</form>
<div class="uk-flex uk-flex-left">
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
<div class="uk-container uk-text-bold">
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom">
<div class="uk-width-3-5">
<form [formGroup]="countryFb" (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
[class.uk-hidden]="!showSearch || (!showSearch && country)"
placeholder="SEARCH FOR A COUNTRY"
(blur)="closeSearch()"
aria-label="Number"
formControlName="country"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
<mat-option *ngFor="let option of countries | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</form>
<div class="uk-flex uk-flex-left">
<span *ngIf="country && !showSearch" class="uk-flex uk-flex-middle">
<span (click)="toggle()">{{country}}</span>
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
@ -38,95 +39,96 @@
</svg>
</span>
</span>
</div>
</div>
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search"
(mousedown)="$event.preventDefault()" (click)="toggle()">
<img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span>
</button>
</div>
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search"
(mousedown)="$event.preventDefault()" (click)="toggle()">
<img src="assets/usage-statistics-assets/analytics/search.svg">
<span class="uk-text-uppercase space">search</span>
</button>
</div>
<div class="uk-margin-medium-bottom">
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
<div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
<div class="uk-margin-medium-bottom">
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
</div>
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
uk-grid>
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
<div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
uk-grid>
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h4>
{{display.total_repos.number | number}}{{(display.total_repos.size) ? display.total_repos.size : ""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
</div>
</div>
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h4>
{{display.repositories.number | number}}{{(display.repositories.size) ? display.repositories.size : ""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
</div>
</div>
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h4>
{{display.total_views.number | number}}{{(display.total_views.size) ? display.total_views.size : ""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
</div>
</div>
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h4>
{{display.views.number | number}}{{(display.views.size) ? display.views.size : ""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
</div>
</div>
<div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h4>
{{display.total_downloads.number | number}}{{(display.total_downloads.size) ? display.total_downloads.size : ""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
</div>
</div>
<div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h4>
{{display.downloads.number | number}}{{(display.downloads.size) ? display.downloads.size : ""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
</div>
<h4>
{{display.total_repos.number | number}}{{(display.total_repos.size)?display.total_repos.size:""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
</div>
</div>
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
<div class="card">
<div class="uk-margin-medium-bottom">
Repositories
</div>
<h4>
{{display.repositories.number | number}}{{(display.repositories.size)?display.repositories.size:""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
<div *ngIf="!display && !loading" class="card uk-animation-fade">
<div class="uk-position-center">
No results found for that country
</div>
</div>
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h4>
{{display.total_views.number | number}}{{(display.total_views.size)?display.total_views.size:""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
</div>
</div>
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
<div class="card">
<div class="uk-margin-medium-bottom">
Views
</div>
<h4>
{{display.views.number | number}}{{(display.views.size)?display.views.size:""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
</div>
</div>
<div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h4>
{{display.total_downloads.number | number}}{{(display.total_downloads.size)?display.total_downloads.size:""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
</div>
</div>
<div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
<div class="card">
<div class="uk-margin-medium-bottom">
Downloads
</div>
<h4>
{{display.downloads.number | number}}{{(display.downloads.size)?display.downloads.size:""}}
</h4>
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
</div>
</div>
</div>
<div *ngIf="!display && !loading" class="card uk-animation-fade">
<div class="uk-position-center">
No results found for that country
</div>
</div>
</div>
</div>
@ -134,30 +136,37 @@
</div>
<div id="graph-analysis" class="uk-visible@m">
<div class="uk-container uk-section uk-text-center">
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Usage Events</h3>
<div class="uk-padding second">
<div class="iframe-card uk-margin-left uk-margin-right">
<iframe width="742" height="453" seamless frameborder="0" scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&amp;format=interactive"></iframe>
<div class="uk-padding-small uk-padding-remove-vertical">
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Usage Events</h3>
<div class="uk-padding second">
<div class="iframe-card uk-margin-left uk-margin-right">
<iframe width="742" height="453" seamless frameborder="0" scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&amp;format=interactive"></iframe>
</div>
</div>
</div>
</div>
<div *ngIf="charts" class="uk-container uk-section uk-text-center">
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Views & Downloads</h3>
<div class="uk-padding third">
<div class="iframe-card uk-margin-left uk-margin-right uk-text-center">
<div>
<ul class="uk-subnav uk-subnav-divider uk-margin-remove-bottom">
<li [class.uk-active]="years == 0"><a class="uk-text-primary" (click)="changeYear(0)">This year</a></li>
<li [class.uk-active]="years == 1"><a class="uk-text-primary" (click)="changeYear(1)">Last 2 years</a></li>
<li [class.uk-active]="years == 2"><a class="uk-text-primary" (click)="changeYear(2)">Last 5 years</a></li>
</ul>
<div class="uk-padding-small uk-padding-remove-vertical">
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Views & Downloads</h3>
<div class="uk-padding third">
<div class="iframe-card uk-margin-left uk-margin-right uk-text-center">
<div>
<ul class="uk-subnav uk-subnav-divider uk-margin-remove-bottom">
<li [class.uk-active]="years == 0"><a class="uk-text-primary" (click)="changeYear(0)">This year</a></li>
<li [class.uk-active]="years == 1"><a class="uk-text-primary" (click)="changeYear(1)">Last 2 years</a>
</li>
<li [class.uk-active]="years == 2"><a class="uk-text-primary" (click)="changeYear(2)">Last 5 years</a>
</li>
</ul>
</div>
<div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0"
scrolling="no" [class.uk-hidden]="iframeLoading"
[src]="charts[years]"></iframe>
</div>
<div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0" scrolling="no" [class.uk-hidden]="iframeLoading"
[src]="charts[years]"></iframe>
</div>
</div>
</div>

View File

@ -62,7 +62,7 @@ export class AnalyticsComponent implements OnInit {
}, 100);
}));
this.init();
this.search();
this.search(true);
for(let i = 0; i < 3; i++) {
this.charts = [
this.getSafeUrl('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-HejU11H1dMKa2MeIvLevnH0jtJUvduan3WMTjgDYCeq6g_WBPFBbZvg83hLuMv7XNyDQ3vHZWNYc/pubchart?oid=919355937&amp;format=interactive'),
@ -112,9 +112,9 @@ export class AnalyticsComponent implements OnInit {
return stats;
}
public search() {
public search(show: boolean = false) {
this.country = this.countryFb.value.country;
this.showSearch = false;
this.showSearch = show;
this.loading = true;
this.clearTimeouts();
if (this.country && this.country.length > 0) {

View File

@ -3,41 +3,40 @@
type="other" [description]="description" [name]="title">
</schema2jsonld>
<div class="uk-section uk-section-small uk-container uk-container-large contact">
<div class="uk-container">
<h2 class="uk-text-bold">Contact Us</h2>
<div class="uk-grid uk-flex uk-flex-bottom" uk-grid>
<div class="uk-width-expand">
<div class="uk-margin-large-left contact-card uk-visible@s">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
<div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-container">
<h2 class="uk-text-bold">Contact Us</h2>
<div class="uk-grid uk-flex uk-flex-bottom" uk-grid>
<div class="uk-width-expand">
<div class="uk-margin-large-left contact-card uk-visible@s">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false" buttonClass="uk-button-primary"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
</div>
</div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false" buttonClass="uk-button-primary"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
<div class="uk-hidden@s">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false" buttonClass="uk-button-primary"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
</div>
</div>
</div>
<div class="uk-hidden@s">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false" buttonClass="uk-button-primary"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
</div>
<div class="uk-width-1-5@m uk-visible@m uk-flex uk-flex-center">
<img src="assets/usage-statistics-assets/contact/2.svg">
</div>
</div>
<div class="uk-width-1-5@m uk-visible@m uk-flex uk-flex-center">
<img src="assets/usage-statistics-assets/contact/2.svg">
</div>
</div>
</div>
<div class="uk-align-center">
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToHome()">
<div class="uk-text-center">

View File

@ -4,19 +4,19 @@
background-image: url("/assets/usage-statistics-assets/home/1.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 20px -100px;
background-position: 0 -130px;
}
}
.second h4 {
background-image: url("/assets/usage-statistics-assets/home/2.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: 0 0;
padding: 25px 0 0 25px;
}
@media only screen and (min-width: 960px) {
.second {
background-image: url("/assets/usage-statistics-assets/home/2.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: -2% 0;
padding-top: 50px;
}
.third .first-column {
background-image: url("/assets/usage-statistics-assets/home/3.1.svg"), url("/assets/usage-statistics-assets/home/3.2.svg");
background-repeat: no-repeat;
@ -49,7 +49,7 @@
background-size: auto;
background-repeat: no-repeat;
background-position: top left;
padding: 10px 30px 0 20px;
padding: 30px 0 0 5px;
}
.third .third-column > div {
@ -57,9 +57,15 @@
}
}
@media only screen and (min-width: 1600px) {
.second {
background-position: 0 0;
}
}
@media only screen and (min-width: 1200px) {
.third .third-column {
padding: 10px 90px 0 40px;
padding: 30px 70px 0 20px;
}
}

View File

@ -1,49 +1,64 @@
<ng-template #first>
<ng-template #first let-small="small">
<div class="uk-container uk-section first">
<div class="uk-grid uk-flex uk-flex-top" uk-grid>
<div class="uk-width-2-3@m">
<h1 class="uk-text-bold">UsageCounts Service by <span class="uk-text-primary">OpenAIRE</span></h1>
<div class="uk-margin-medium-top uk-margin-medium-bottom">
UsageCounts service collects usage data from repositories, journals and other scientific data sources,
aggregates them and delivers standardized activity reports about research usage and uptake. It complements
existing citation mechanisms and assists institutional repository managers, research communities, research
organizations, funders and policy makers track and evaluate research from an early stage.
<div class="uk-width-3-5@m">
<h1><span class="portal-color uk-text-bold">UsageCounts Service</span><br>
by OpenAIRE</h1>
<div [class.uk-margin-xlarge-right]="!small">
<div class="uk-margin-medium-top uk-margin-medium-bottom">
UsageCounts service collects usage data from Open Science content providers repositories, journals, and
other scientific data sources. Then, it aggregates them, delivering standardized activity reports about
research usage and uptake. It complements existing citation mechanisms and assists institutional repository
managers, research communities, research organizations, funders, and policy makers to track and evaluate
research from an early stage.
</div>
<a routerLink="/about" class="uk-button uk-button-primary">Learn More</a>
</div>
<div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1">
<img src="assets/usage-statistics-assets/home/1-static.svg"/>
</div>
<a routerLink="/about" class="uk-button uk-button-primary">Learn More</a>
</div>
<div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1">
<img src="assets/usage-statistics-assets/home/1-static.svg"/>
</div>
</div>
</div>
</ng-template>
<ng-template #second>
<div class="uk-container second">
<div class="uk-grid uk-child-width-1-2@m" uk-grid>
<div class="uk-flex uk-flex-last@m uk-margin-large-top">
<h2 class="uk-text-bold portal-color uk-text-right@m">Why OpenAIRE UsageCounts?</h2>
<div class="second uk-container uk-container-large">
<div class="uk-container">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-flex uk-flex-last@m uk-width-expand">
<h2 class="uk-text-bold portal-color uk-text-right@m">Why OpenAIRE UsageCounts?</h2>
</div>
<div class="uk-width-1-1 uk-width-2-5@m">
<p>
OpenAIRE <span class="portal-color uk-text-bold">UsageCounts applies</span> the Open Metrics framework which
standardizes the sharing and exchange of usage
data and develops trusted metrics to promote open science.
</p>
<p>
<span class="portal-color uk-text-bold">UsageCounts is valuable for</span> various stakeholders that either
provide or consume open science data metrics.
The value for both user groups, briefly are;
</p>
</div>
</div>
<div>
OpenAIRE UsageCounts is part of an Open Metrics framework which intends to standardize the sharing and exchange
of usage data (views and downloads) and develop trusted metrics to promote open science.
</div>
</div>
<div class="uk-grid uk-child-width-1-2@m uk-margin-top uk-padding" uk-grid uk-height-match="target: li">
<div>
<h4 class="uk-text-bold">Providers</h4>
<ul class="light-blue-triangle uk-margin-top">
<li>Accurate and objective performance measures monitoring of repository content</li>
<li>Evidence based analytical metrics of views, downloads of research, aggregated from all over the world</li>
<li>Activity and trends of open science topics</li>
</ul>
</div>
<div>
<h4 class="uk-text-bold">Consumers</h4>
<ul class="light-blue-triangle uk-margin-top">
<li>Overview of research outcomes per country or domain</li>
<li>Trustable, accurate statistics of open science research</li>
<li>Evaluate the result of invested funds, policies, measures and view impact</li>
</ul>
<div class="uk-grid uk-child-width-1-2@m uk-margin-top uk-padding" uk-grid uk-height-match="target: li">
<div>
<h4 class="uk-text-bold">Providers</h4>
<ul class="light-blue-triangle uk-margin-top">
<li>Accurate and objective performance measures monitoring of repository content.</li>
<li>Evidence based analytical metrics of views and downloads, aggregated from all over the world.
</li>
<li>Activity and trends of open science topics.</li>
</ul>
</div>
<div>
<h4 class="uk-text-bold">Consumers</h4>
<ul class="light-blue-triangle uk-margin-top">
<li>Overview of research outcomes per country or domain.</li>
<li>Trustable, accurate statistics of open science research.</li>
<li>Evaluate the result of invested funds, policies, measures and view impact.</li>
</ul>
</div>
</div>
</div>
</div>
@ -53,25 +68,20 @@
<div class="uk-grid uk-child-width-1-3@m" uk-grid>
<div class="uk-flex-last@m ">
<div class="third-column">
<h2 class="portal-color uk-text-bold">Who is it for?</h2>
<h2 class="portal-color uk-text-bold">Who and why is it for?</h2>
<div>
UsageCounts offers standardized and comparable reports that measure the uptake
of research outcomes. Below are the two main categories of users that can benefit from UsageCounts and the
actions they can perform.
UsageCounts <span class="portal-color uk-text-bold">offers</span> standardized and comparable reports that measure the uptake of research outcomes.
</div>
</div>
</div>
<div>
<div class="first-column">
<h5 class="uk-text-primary">Repository managers, publishers</h5>
<h5 class="uk-text-primary">For Open Science repository managers and Publishers</h5>
<div class="uk-margin-top">
Register in OpenAIRE (via <a href="http://provide.openaire.eu" target="_blank">PROVIDE <span
class="custom-icon custom-external"></span></a>),
share usage activity from your repository and receive cleaned and combined
statistics from aggregated usage data from sources around the world. Share
<a href="https://www.projectcounter.org/" target="_blank">COUNTER <span
class="custom-icon custom-external"></span></a>
compliant reports via standard SUSHI-Lite APIs.
Perform the prerequisites -register your content in OpenAIRE
<a href="http://provide.openaire.eu" target="_blank">PROVIDE</a>,
then share usage activity from your repository - and receive standardized statistics from aggregated usage
data from sources around the world.
</div>
<div class="uk-margin-medium-top uk-text-center">
<a class="uk-button uk-button-primary" routerLink="/resources">Learn More</a>
@ -80,14 +90,14 @@
</div>
<div>
<div class="second-column">
<h5 class="uk-text-primary">Research performing & funding organizations, research infrastructures, policy
makers</h5>
<h5 class="uk-text-primary">For Research performing & funding organizations, research infrastructures and
policy makers</h5>
<div class="uk-margin-top">
View research uptake, identify science trends based on user activity, examine the engagement and evolution
or research popularity.
Retrieve easily, fast and dynamically view research uptake, identify science trends based on user activity,
examine the engagement, and evolution or research popularity.
</div>
<div class="uk-margin-medium-top uk-text-center">
<a class="uk-button uk-button-primary" routerLink="/resources/apis">Learn More</a>
<a class="uk-button uk-button-primary" routerLink="/resources" fragment="apis">Learn More</a>
</div>
</div>
</div>
@ -97,8 +107,10 @@
<ng-template #fourth>
<div class="uk-container">
<div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-flex-center" uk-grid>
<div class="uk-width-expand@m uk-width-1-2 uk-flex uk-flex-last@m features">
<h1 class="uk-text-bold portal-color">Features</h1>
<div class="uk-width-expand@m uk-width-1-2 uk-flex uk-flex-right uk-flex-last@m">
<div class="features uk-width-4-5 uk-margin-auto">
<h1 class="uk-text-bold portal-color">Features</h1>
</div>
</div>
<div class="uk-width-2-3@m">
<ul class="light-blue-circle large">
@ -118,10 +130,10 @@
</div>
</div>
</ng-template>
<fp-slider #slider class="uk-visible@m" [hasFooter]="true" [initSlide]="initSlide"
<fp-slider #slider class="uk-visible@l" [hasFooter]="true" [initSlide]="initSlide"
footerClass="footer" topBar="top-bar-background" logoURL="/assets/common-assets/logo-small-usage-counts.png">
<slide>
<ng-container *ngTemplateOutlet="first"></ng-container>
<ng-container *ngTemplateOutlet="first; context: {small: false}"></ng-container>
</slide>
<slide>
<ng-container *ngTemplateOutlet="second"></ng-container>
@ -133,9 +145,9 @@
<ng-container *ngTemplateOutlet="fourth"></ng-container>
</slide>
</fp-slider>
<div class="uk-hidden@m uk-margin-left uk-margin-right">
<div class="uk-hidden@l uk-margin-left uk-margin-right">
<div class="uk-section uk-section-large">
<ng-container *ngTemplateOutlet="first"></ng-container>
<ng-container *ngTemplateOutlet="first; context: {small: true}"></ng-container>
</div>
<div class="uk-section uk-section-large">
<ng-container *ngTemplateOutlet="second"></ng-container>

View File

@ -5,105 +5,116 @@
<div class="resources">
<div class="uk-container uk-container-large provide-background">
<div class="uk-container uk-section uk-section-small uk-padding-remove-bottom">
<h2 class="uk-margin-remove-vertical">OpenAIRE Provide</h2>
<div class="uk-padding uk-width-3-4@l">
<p>
The <span class="uk-text-primary uk-text-bold">resources</span> of the OpenAIRE UsageCounts Service are
available through the OpenAIRE PROVIDE product, which is serving the content providers.
</p>
<div class="provide-definition uk-margin-bottom">
“OpenAIRE PROVIDE is a product that enables data providers to register and observe their data activity on
OpenAIRE, by accessing the OpenAIRE Provide Dashboard”.
</div>
<p>
The OpenAIRE Provide supports the following <span class="uk-text-bold">functionalities</span> for the
UsageCounts Service:
</p>
<ol class="openaire-list">
<li>A registration process to the service for repository managers.</li>
<li> The required resources and instructions to deploy the service.</li>
<li>Visualization and exporting tools for publishing and downloading usage statistics reports.</li>
</ol>
<p class="uk-margin-top">
<span class="portal-color uk-text-bold">Important:</span> All the information that content providers offer to
OpenAIRE, is first validated, enriched, and
then indexed on the OpenAIRE PROVIDE. Only then, after this verification and if needed, enhancement process,
the metadata records are indexed on OpenAIRE PROVIDE, ensuring transparency, security, and trust of data.
</p>
<div class="uk-flex uk-flex-center">
<a class="uk-button uk-button-primary uk-margin-small-top" href="https://provide.openaire.eu" target="_blank">
GO TO OpenAIRE PROVIDE
<icon name="arrow_right" ratio="0.8" class="space"></icon>
<div class="uk-padding-small uk-padding-remove-vertical">
<h2 class="uk-margin-remove-vertical uk-text-bold">OpenAIRE <span class="provide-color">PROVIDE</span></h2>
<div class="uk-padding uk-width-3-4@l">
<p>
The <span class="uk-text-bold">resources</span> of the OpenAIRE UsageCounts Service are
available through the OpenAIRE PROVIDE product, which is serving the content providers.
</p>
<div class="provide-definition uk-margin-bottom">
“OpenAIRE PROVIDE is a product that enables data providers to register and observe their data activity on
OpenAIRE, by accessing the OpenAIRE Provide Dashboard”.
</div>
<p>
The OpenAIRE Provide supports the following <span class="uk-text-bold">functionalities</span> for the
UsageCounts Service:
</p>
<ol class="openaire-list">
<li>A registration process to the service for repository managers.</li>
<li> The required resources and instructions to deploy the service.</li>
<li>Visualization and exporting tools for publishing and downloading usage statistics reports.</li>
</ol>
<p class="uk-margin-top">
<span class="portal-color uk-text-bold">Important:</span> All the information that content providers offer
to
All the information that content providers offer to OpenAIRE, is first validated and enriched. Only then,
the
metadata records are indexed on OpenAIRE PROVIDE, ensuring transparency, security, and trust of data.
</p>
<div class="uk-flex uk-flex-center">
<a class="uk-button uk-button-primary uk-text-bold uk-margin-small-top" href="https://provide.openaire.eu"
target="_blank">
GO TO OpenAIRE PROVIDE
<icon name="arrow_right" ratio="0.8" class="space"></icon>
</a>
</div>
<a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('apis')">
APIs AND REPORTS
<icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
</a>
</div>
<a class="uk-visible@l next uk-flex uk-flex-middle" (click)="goTo('apis')">
APIs AND REPORTS
<icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
</a>
</div>
</div>
</div>
<div id="apis" class="uk-container uk-section">
<div class="uk-flex uk-flex-middle">
<img src="assets/usage-statistics-assets/resources/2.svg">
<h2 class="uk-text-bold uk-margin-medium-left uk-margin-remove-vertical">APIs and Reports</h2>
</div>
<div class="uk-padding uk-margin-top uk-width-3-4@l">
<p>
There are a variety of reports generated via OpenAIRE UsageCounts Service and are available via a SUSHI-Lite
Endpoint (anchor). The reports comply with
<a href="https://www.projectcounter.org/code-of-practice-sections/general-information/" target="_blank">COUNTER
CoP Release 4. <span class="custom-icon custom-external"></span></a>
</p>
<ul class="portal-circle">
<li><a class="uk-link" [routerLink]="'/sushilite/AR1'">AR-1 - Article Report 1.</a>
This report enables you to view the number of successful article download requests by
month and repository. There are filtering options to limit the results to a selected journal or repository. It
can provide results for an individual month or over a number of months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/IR1'">IR-1 - Item Report 1.</a>
This report enables you to view the number of successful item download requests by
month and repository identifier. There are filtering options to limit the results to a selected item or
repository
identifier or item data type. It can provide results for an individual month or over a number of months and
can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/JR1'">JR-1 - Journal Report 1.</a>
This report enables you to view the number of
successful full-text article requests by month and journal. There are filtering options to limit the results
to a selected journal or item data type. It can provide results for an individual month or over a number of
months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/RR1'">RR-1 - Repository Report 1.</a>
This report enables you to view the
number of successful item downloads for all repositories participating in the usage statistics service. There
are filtering options to limit the results to a repository identifier or selected item type. It can provide
results for an individual month or over a number of months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/BR1'">BR-1 - Book Report 1.</a>
This report enables you to view the number of successful book title requests by month and title.
There are filtering options to limit the results to a repository identifier or selected item identifier. It
can provide results for an individual month or over a number of months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/BR2'">BR-2 - Book Report 2.</a>
This report enables you to download the number of successful book section requests by month
and title. There are filtering options to limit the results to a repository identifier or selected item
identifier. It can provide results for an individual month or over a number of months and can be output in
JSON format.
</li>
</ul>
<div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-flex uk-flex-middle">
<img src="assets/usage-statistics-assets/resources/2.svg">
<h2 class="uk-text-bold uk-margin-medium-left uk-margin-remove-vertical">APIs and Reports</h2>
</div>
<div class="uk-padding uk-margin-top uk-width-3-4@l">
<p>
A variety of reports generated via OpenAIRE UsageCounts Service are available via a SUSHI-Lite Endpoint. The
reports comply with
<a href="https://www.projectcounter.org/code-of-practice-sections/general-information/" target="_blank">COUNTER
CoP Release 4. <span class="custom-icon custom-external"></span></a>
</p>
<ul class="portal-circle">
<li><a class="uk-link" [routerLink]="'/sushilite/AR1'">AR-1 - Article Report 1.</a>
This report enables you to view the number of successful article download requests by month and repository.
There are filtering options to limit the results to a selected journal or repository. It can provide results
for an individual month or over a number of months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/IR1'">IR-1 - Item Report 1.</a>
This report enables you to view the number of successful item download requests by month and repository
identifier. There are filtering options to limit the results to a selected item or repository identifier or
item data type. It can provide results for an individual month or over a number of months and can be output
in
JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/JR1'">JR-1 - Journal Report 1.</a>
This report enables you to view the number of successful full-text article requests by month and journal.
There are filtering options to limit the results to a selected journal or item data type. It can provide
results for an individual month or over a number of months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/RR1'">RR-1 - Repository Report 1.</a>
This report enables you to view the number of successful item downloads for all repositories participating
in
the usage statistics service. There are filtering options to limit the results to a repository identifier or
selected item type. It can provide results for an individual month or over a number of months and can be
output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/BR1'">BR-1 - Book Report 1.</a>
This report enables you to view the number of successful book title requests by month and title. There are
filtering options to limit the results to a repository identifier or selected item identifier. It can
provide
results for an individual month or over a number of months and can be output in JSON format.
</li>
<li><a class="uk-link" [routerLink]="'/sushilite/BR2'">BR-2 - Book Report 2.</a>
This report enables you to download the number of successful book section requests by month and title. There
are filtering options to limit the results to a repository identifier or selected item identifier. It can
provide results for an individual month or over a number of months and can be output in JSON format.
</li>
</ul>
</div>
</div>
</div>
<div class="uk-container uk-section">
<div class="uk-flex uk-flex-top">
<img src="assets/usage-statistics-assets/resources/3.svg">
<div class="uk-margin-medium-left">
<h2 class="uk-text-bold">OpenAIRE UsageCounts Guidelines</h2>
<div class="uk-padding uk-padding-remove-vertical uk-margin-top">
<a href="https://openaire.github.io/usage-statistics-guidelines/" target="_blank">
https://openaire.github.io/usage-statistics-guidelines/
<span class="custom-icon custom-external"></span>
</a>
<div class="uk-padding-small uk-padding-remove-vertical">
<div class="uk-flex uk-flex-top">
<img src="assets/usage-statistics-assets/resources/3.svg">
<div class="uk-margin-medium-left">
<h2 class="uk-text-bold">OpenAIRE UsageCounts Guidelines</h2>
<div class="uk-padding uk-padding-remove-vertical uk-margin-top">
<div class="uk-margin-small-bottom">Please read carefully the OpenAIRE usage statistics guidelines before
submitting content.
</div>
<a href="https://openaire.github.io/usage-statistics-guidelines/" target="_blank">
https://openaire.github.io/usage-statistics-guidelines/
<span class="custom-icon custom-external"></span>
</a>
</div>
</div>
</div>
</div>

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="69.761" height="67.26" viewBox="0 0 69.761 67.26">
<path id="small_elipse_blue" data-name="small elipse blue" d="M360.531,115.95c0,18.573-15.616,33.63-34.88,33.63s-34.88-15.057-34.88-33.63,15.616-33.63,34.88-33.63S360.517,97.382,360.531,115.95Z" transform="translate(-290.77 -82.32)" fill="#e7f0fa"/>
<svg xmlns="http://www.w3.org/2000/svg" width="437.659" height="421.971" viewBox="0 0 437.659 421.971">
<path id="small_elipse_blue" data-name="small elipse blue" d="M728.429,293.306c0,116.524-97.973,210.986-218.83,210.986S290.77,409.83,290.77,293.306,388.743,82.32,509.6,82.32C630.421,82.4,728.345,176.815,728.429,293.306Z" transform="translate(-290.77 -82.32)" fill="#e7f0fa"/>
</svg>

Before

Width:  |  Height:  |  Size: 357 B

After

Width:  |  Height:  |  Size: 389 B

View File

@ -6,6 +6,7 @@
:root {
--portal-main-color: #e95420;
--portal-main-contrast: white;
--provide-portal-color: #37C7E9;
--portal-dark-color: #a0462c;
}
@ -105,7 +106,7 @@ ul.light-blue-triangle {
}
ul.light-blue-triangle li {
margin: 0 0 20px 0;
margin: 0 0 40px 0;
position: relative;
}
@ -231,3 +232,7 @@ contact .uk-text-danger {
color: black !important;
border-color: #eeeeee !important;
}
navbar .uk-navbar-nav>li:hover>a, navbar.uk-navbar-nav>li>a.uk-open, navbar .uk-navbar-nav>li>a:focus, navbar .uk-navbar-nav>li.uk-active>a {
color: var(--portal-main-color);
}