[Usage stats | Trunk]: Add graph analysis on analytics. Fix search section size
|
@ -1,51 +1,122 @@
|
||||||
.countries {
|
.countries {
|
||||||
background-image: url("/assets/usage-statistics-assets/analytics/1.svg");
|
background-image: url("/assets/usage-statistics-assets/analytics/1.svg");
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center center;
|
background-position: top center;
|
||||||
min-height: calc(100vh - 100px);
|
min-height: calc(100vh - 100px);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countries a.next {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10vh;
|
||||||
|
right: -10%;
|
||||||
|
color: var(--portal-main-color);
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 1.8px;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countries input, .countries input:focus {
|
.countries input, .countries input:focus {
|
||||||
background: transparent 0 0 no-repeat padding-box;
|
background: transparent 0 0 no-repeat padding-box;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countries input::placeholder {
|
.countries input::placeholder {
|
||||||
color: #a3a3a3;
|
color: #a3a3a3;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.search, button.search:hover {
|
button.search, button.search:hover {
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
font-family: "Roboto", sans-serif;
|
font-family: "Roboto", sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.search:hover {
|
button.search:hover {
|
||||||
color: var(--portal-main-color);
|
color: var(--portal-main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: #FFFFFF 0 0 no-repeat padding-box;
|
background: #FFFFFF 0 0 no-repeat padding-box;
|
||||||
box-shadow: 0 3px 6px #00000029;
|
box-shadow: 0 3px 6px #00000029;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 50px 0;
|
padding: 40px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 113px;
|
height: 110px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h4 {
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card > img {
|
.card > img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 50%);
|
transform: translate(-50%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.second {
|
||||||
|
background-image: url("/assets/usage-statistics-assets/analytics/2.2.svg"), url("/assets/usage-statistics-assets/analytics/2.1.svg");
|
||||||
|
background-size: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom left, top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third {
|
||||||
|
background-image: url("/assets/usage-statistics-assets/analytics/3.2.svg"), url("/assets/usage-statistics-assets/analytics/3.1.svg");
|
||||||
|
background-size: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom left, bottom right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third ul {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
display: inline-flex;
|
||||||
|
vertical-align: middle;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
|
||||||
|
margin-right: 10px !important;
|
||||||
|
border-left: 1px solid #f2f2f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third .uk-subnav > * {
|
||||||
|
padding-left: 10px;
|
||||||
|
flex: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third ul > li > a {
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third ul > li.uk-active > a, .third ul > li.uk-active > a:hover {
|
||||||
|
color: var(--portal-main-color) !important;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third .uk-subnav > *:nth-child(1) {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iframe-card {
|
||||||
|
background: #FFFFFF 0 0 no-repeat padding-box;
|
||||||
|
box-shadow: 1px 10px 12px #00000029;
|
||||||
|
border: 1px solid #E0E0E0;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 30px;
|
||||||
|
min-height: 496px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,26 +1,39 @@
|
||||||
<div *ngIf="countryFb" class="uk-section uk-section-small uk-container countries uk-text-center uk-text-bold">
|
<div class="analytics">
|
||||||
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
<div *ngIf="countryFb" class="uk-container uk-text-center countries">
|
||||||
<div class="uk-container uk-container-small">
|
<a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" (click)="goTo('graph-analysis')">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
|
Graph Analysis
|
||||||
<div class="uk-width-3-5">
|
<svg height="17.155" viewBox="0 0 17.155 17.155" width="17.155" class="uk-margin-left"
|
||||||
<form [formGroup]="countryFb" (ngSubmit)="search()">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<input #input type="text" class="uk-width-1-1"
|
<g data-name="Group 2442" id="Group_2442" transform="translate(-1221 -675)">
|
||||||
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
|
<path
|
||||||
[class.uk-hidden]="!showSearch || (!showSearch && country)"
|
d="M14.405,4.3,6.022,12.68V9.055A1.011,1.011,0,0,0,4,9.055V15.12a1.009,1.009,0,0,0,1.011,1.01h6.065a1.011,1.011,0,1,0,0-2.022H7.451l8.383-8.383A1.011,1.011,0,0,0,14.405,4.3h0Z"
|
||||||
placeholder="SEARCH FOR A COUNTRY"
|
fill="#e95420" id="arrow-down-left2" transform="translate(1215.343 683.578) rotate(-45)"></path>
|
||||||
(blur)="closeSearch()"
|
</g>
|
||||||
aria-label="Number"
|
</svg>
|
||||||
formControlName="country"
|
</a>
|
||||||
[matAutocomplete]="auto">
|
<div class="uk-section uk-section-small">
|
||||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
|
<h2 class="uk-margin-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
||||||
<mat-option *ngFor="let option of countries | async" [value]="option">
|
<div class="uk-container uk-text-bold">
|
||||||
{{option}}
|
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom">
|
||||||
</mat-option>
|
<div class="uk-width-3-5">
|
||||||
</mat-autocomplete>
|
<form [formGroup]="countryFb" (ngSubmit)="search()">
|
||||||
</form>
|
<input #input type="text" class="uk-width-1-1"
|
||||||
<div class="uk-flex uk-flex-left">
|
[class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
|
||||||
<span *ngIf="countryFb.get('country').value && !showSearch" class="uk-flex uk-flex-middle">
|
[class.uk-hidden]="!showSearch || (!showSearch && country)"
|
||||||
<span (click)="toggle()">{{countryFb.get('country').value}}</span>
|
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()">
|
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
|
||||||
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
|
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
|
||||||
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
|
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
|
||||||
|
@ -28,92 +41,128 @@
|
||||||
d="M16,4 L4,16"></path></svg>
|
d="M16,4 L4,16"></path></svg>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
<div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
|
|
||||||
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="loading" class="uk-animation-fade uk-margin-large-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-large"
|
|
||||||
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>
|
</div>
|
||||||
<h3>
|
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search"
|
||||||
{{display.total_repos | number}}
|
(mousedown)="$event.preventDefault()" (click)="toggle()">
|
||||||
</h3>
|
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
||||||
<img src="assets/usage-statistics-assets/analytics/2.svg">
|
<span class="uk-text-uppercase space">search</span>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="uk-margin-medium-bottom">
|
||||||
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
|
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
|
||||||
<div class="card">
|
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
Repositories
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{{display.repositories | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/2.svg">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
|
||||||
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
|
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
|
||||||
<div class="card">
|
<span class="loading-gif uk-align-center"></span>
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
Views
|
|
||||||
</div>
|
</div>
|
||||||
<h3>
|
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
|
||||||
{{display.total_views | number}}
|
uk-grid>
|
||||||
</h3>
|
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1"
|
||||||
<img src="assets/usage-statistics-assets/analytics/3.svg">
|
class="uk-padding-remove-left">
|
||||||
</div>
|
<div class="card">
|
||||||
</div>
|
<div class="uk-margin-medium-bottom">
|
||||||
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
|
Repositories
|
||||||
<div class="card">
|
</div>
|
||||||
<div class="uk-margin-medium-bottom">
|
<h4>
|
||||||
Views
|
{{display.total_repos | number}}
|
||||||
|
</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}}
|
||||||
|
</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}}
|
||||||
|
</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}}
|
||||||
|
</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}}
|
||||||
|
</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}}
|
||||||
|
</h4>
|
||||||
|
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>
|
<div *ngIf="!display && !loading" class="card uk-animation-fade">
|
||||||
{{display.views | number}}
|
<div class="uk-position-center">
|
||||||
</h3>
|
No results found for that country
|
||||||
<img src="assets/usage-statistics-assets/analytics/3.svg">
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<h3>
|
|
||||||
{{display.total_downloads | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/4.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>
|
|
||||||
<h3>
|
|
||||||
{{display.downloads | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/4.svg">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="!display && !loading" class="card uk-animation-fade">
|
</div>
|
||||||
<div class="uk-position-center">
|
<div id="graph-analysis" class="uk-visible@m">
|
||||||
No results found for that country
|
<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&format=interactive"></iframe>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,8 +5,9 @@ import {Observable} from 'rxjs';
|
||||||
import {UsageStatsService} from '../services/usage-stats.service';
|
import {UsageStatsService} from '../services/usage-stats.service';
|
||||||
import {map, startWith} from 'rxjs/operators';
|
import {map, startWith} from 'rxjs/operators';
|
||||||
import {countries} from '../services/countries';
|
import {countries} from '../services/countries';
|
||||||
import {Title} from '@angular/platform-browser';
|
import {DomSanitizer, SafeUrl, Title} from '@angular/platform-browser';
|
||||||
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
|
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
|
||||||
|
import {ActivatedRoute} from '@angular/router';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'analytics',
|
selector: 'analytics',
|
||||||
|
@ -18,20 +19,37 @@ export class AnalyticsComponent implements OnInit {
|
||||||
public countries: Observable<string[]>;
|
public countries: Observable<string[]>;
|
||||||
public country: string;
|
public country: string;
|
||||||
public loading: boolean = true;
|
public loading: boolean = true;
|
||||||
|
public iframeLoading: boolean = true;
|
||||||
public display: UsageStat | CountryUsageStat;
|
public display: UsageStat | CountryUsageStat;
|
||||||
public showSearch: boolean = false;
|
public showSearch: boolean = false;
|
||||||
public state: number = 0;
|
public state: number = 0;
|
||||||
private timeouts: any[] = [];
|
private timeouts: any[] = [];
|
||||||
|
public years = 0;
|
||||||
|
public charts: SafeUrl[];
|
||||||
@ViewChild('input') input: ElementRef;
|
@ViewChild('input') input: ElementRef;
|
||||||
|
|
||||||
constructor(private usageStatsService: UsageStatsService,
|
constructor(private usageStatsService: UsageStatsService,
|
||||||
private title: Title) {
|
private route: ActivatedRoute,
|
||||||
|
private title: Title,
|
||||||
|
private sanitizer: DomSanitizer) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.title.setTitle('OpenAIRE - UsageCounts | Analytics');
|
this.title.setTitle('OpenAIRE - UsageCounts | Analytics');
|
||||||
|
this.route.fragment.subscribe(fragment => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.goTo(fragment);
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
this.init();
|
this.init();
|
||||||
this.search();
|
this.search();
|
||||||
|
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&format=interactive'),
|
||||||
|
this.getSafeUrl('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-HejU11H1dMKa2MeIvLevnH0jtJUvduan3WMTjgDYCeq6g_WBPFBbZvg83hLuMv7XNyDQ3vHZWNYc/pubchart?oid=1667183135&format=interactive'),
|
||||||
|
this.getSafeUrl('https://docs.google.com/spreadsheets/d/e/2PACX-1vQ-HejU11H1dMKa2MeIvLevnH0jtJUvduan3WMTjgDYCeq6g_WBPFBbZvg83hLuMv7XNyDQ3vHZWNYc/pubchart?oid=2070534117&format=interactive')
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private init() {
|
private init() {
|
||||||
|
@ -45,6 +63,17 @@ export class AnalyticsComponent implements OnInit {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
changeYear(i: number) {
|
||||||
|
if(!this.iframeLoading) {
|
||||||
|
this.iframeLoading = true;
|
||||||
|
this.years = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.iframeLoading = false;
|
||||||
|
}
|
||||||
|
|
||||||
public search() {
|
public search() {
|
||||||
this.country = this.countryFb.value.country;
|
this.country = this.countryFb.value.country;
|
||||||
this.showSearch = false;
|
this.showSearch = false;
|
||||||
|
@ -55,7 +84,7 @@ export class AnalyticsComponent implements OnInit {
|
||||||
this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
|
this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
|
||||||
this.display = stats;
|
this.display = stats;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
if(this.display) {
|
if (this.display) {
|
||||||
this.state = 1;
|
this.state = 1;
|
||||||
this.animation();
|
this.animation();
|
||||||
}
|
}
|
||||||
|
@ -67,7 +96,7 @@ export class AnalyticsComponent implements OnInit {
|
||||||
this.usageStatsService.getAllMetrics().subscribe(stats => {
|
this.usageStatsService.getAllMetrics().subscribe(stats => {
|
||||||
this.display = stats;
|
this.display = stats;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
if(this.display) {
|
if (this.display) {
|
||||||
this.state = 1;
|
this.state = 1;
|
||||||
this.animation();
|
this.animation();
|
||||||
}
|
}
|
||||||
|
@ -80,7 +109,7 @@ export class AnalyticsComponent implements OnInit {
|
||||||
|
|
||||||
private animation() {
|
private animation() {
|
||||||
this.timeouts.push(setTimeout(() => {
|
this.timeouts.push(setTimeout(() => {
|
||||||
if(this.state != 3) {
|
if (this.state != 3) {
|
||||||
this.animation();
|
this.animation();
|
||||||
}
|
}
|
||||||
this.state++;
|
this.state++;
|
||||||
|
@ -114,7 +143,7 @@ export class AnalyticsComponent implements OnInit {
|
||||||
|
|
||||||
reset() {
|
reset() {
|
||||||
this.clearTimeouts();
|
this.clearTimeouts();
|
||||||
if(this.state == 0) {
|
if (this.state == 0) {
|
||||||
this.init();
|
this.init();
|
||||||
this.showSearch = true;
|
this.showSearch = true;
|
||||||
setTimeout(() => { // this will make the execution after the above boolean has changed
|
setTimeout(() => { // this will make the execution after the above boolean has changed
|
||||||
|
@ -123,4 +152,15 @@ export class AnalyticsComponent implements OnInit {
|
||||||
this.search();
|
this.search();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
goTo(id: string) {
|
||||||
|
const yOffset = -100;
|
||||||
|
const element = document.getElementById(id);
|
||||||
|
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
|
||||||
|
window.scrollTo({top: y, behavior: 'smooth'});
|
||||||
|
}
|
||||||
|
|
||||||
|
public getSafeUrl(url: string): SafeUrl {
|
||||||
|
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -147,10 +147,3 @@
|
||||||
<ng-container *ngTemplateOutlet="fourth"></ng-container>
|
<ng-container *ngTemplateOutlet="fourth"></ng-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--<div class="uk-section third uk-text-center">
|
|
||||||
<h3 class="uk-margin-medium-bottom">Monthly Usage Events</h3>
|
|
||||||
<div class="uk-container">
|
|
||||||
<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&format=interactive"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>-->
|
|
||||||
|
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 566 B |
|
@ -1,4 +1,4 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1170.108" height="584.798" viewBox="0 0 1170.108 584.798">
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1250" height="658" viewBox="0 0 1250 658">
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id="clip-path">
|
<clipPath id="clip-path">
|
||||||
<rect id="Rectangle_2197" data-name="Rectangle 2197" width="166.65" height="159.84" fill="none"/>
|
<rect id="Rectangle_2197" data-name="Rectangle 2197" width="166.65" height="159.84" fill="none"/>
|
||||||
|
@ -7,10 +7,11 @@
|
||||||
<rect id="Rectangle_1897" data-name="Rectangle 1897" width="17.114" height="11.001" fill="none"/>
|
<rect id="Rectangle_1897" data-name="Rectangle 1897" width="17.114" height="11.001" fill="none"/>
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="track_bg" data-name="track bg" transform="translate(-210 -149)">
|
<g id="Group_11679" data-name="Group 11679" transform="translate(0 -106)">
|
||||||
<path id="small_elipse_blue" data-name="small elipse blue" d="M323.561,98.128c0,8.731-7.341,15.808-16.4,15.808s-16.4-7.077-16.4-15.808,7.341-15.808,16.4-15.808S323.555,89.4,323.561,98.128Z" transform="translate(888.659 300.237)" fill="#222080"/>
|
<rect id="Rectangle_2632" data-name="Rectangle 2632" width="1366" height="658" transform="translate(0 106)" fill="none"/>
|
||||||
<circle id="Ellipse_blue" data-name="Ellipse blue" cx="198.5" cy="198.5" r="198.5" transform="translate(210 149)" fill="#4687e6" opacity="0.2"/>
|
<path id="small_elipse_blue" data-name="small elipse blue" d="M323.561,98.128c0,8.731-7.341,15.808-16.4,15.808s-16.4-7.077-16.4-15.808,7.341-15.808,16.4-15.808S323.555,89.4,323.561,98.128Z" transform="translate(776.659 330.238)" fill="#222080"/>
|
||||||
<g id="grid_blue" data-name="grid blue" transform="translate(249.366 519.494)" opacity="0.22">
|
<circle id="Ellipse_blue" data-name="Ellipse blue" cx="198.5" cy="198.5" r="198.5" transform="translate(98 179)" fill="#4687e6" opacity="0.2"/>
|
||||||
|
<g id="grid_blue" data-name="grid blue" transform="translate(137.366 549.494)" opacity="0.22">
|
||||||
<g id="Group_3051" data-name="Group 3051" clip-path="url(#clip-path)">
|
<g id="Group_3051" data-name="Group 3051" clip-path="url(#clip-path)">
|
||||||
<g id="Group_3050" data-name="Group 3050" clip-path="url(#clip-path)">
|
<g id="Group_3050" data-name="Group 3050" clip-path="url(#clip-path)">
|
||||||
<g id="Group_2751" data-name="Group 2751" transform="translate(151.965 150.907)" clip-path="url(#clip-path-3)">
|
<g id="Group_2751" data-name="Group 2751" transform="translate(151.965 150.907)" clip-path="url(#clip-path-3)">
|
||||||
|
@ -1366,10 +1367,10 @@
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g id="rows_track_activity" data-name="rows track activity" transform="translate(1089.412 413.748)">
|
<g id="rows_track_activity" data-name="rows track activity" transform="translate(977.412 486.748)">
|
||||||
<path id="Path_16420" data-name="Path 16420" d="M404.212,271.857,373.2,260.372l-31.869-11.8-55.058-20.384-15.4-5.709L238.96,210.66" transform="translate(-160.76 5.332)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
|
<path id="Path_16420" data-name="Path 16420" d="M331.645,244.983l-17.393-6.441-17.874-6.62L265.5,220.489l-8.638-3.2-17.9-6.627" transform="translate(-195.1 -89.517)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
|
||||||
<path id="Path_17201" data-name="Path 17201" d="M219.74,196.331,178.5,159.486l-42.377-37.869-73.213-65.4L42.435,37.9,0,0" transform="matrix(0.94, 0.342, -0.342, 0.94, 83.767, 59.94)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
|
<path id="Path_17201" data-name="Path 17201" d="M123.245,110.116,100.117,89.451,76.349,68.211,35.287,31.532,23.8,21.259,0,0" transform="matrix(0.94, 0.342, -0.342, 0.94, 46.982, 33.618)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
|
||||||
<path id="Path_17202" data-name="Path 17202" d="M183.655,164.091,149.191,133.3l-35.418-31.65L52.583,46.988,35.467,31.68,0,0" transform="matrix(0.643, -0.766, 0.766, 0.643, 0, 140.688)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
|
<path id="Path_17202" data-name="Path 17202" d="M103.007,92.033,83.677,74.762,63.812,57.01,29.492,26.354l-9.6-8.586L0,0" transform="matrix(0.643, -0.766, 0.766, 0.643, 0, 78.908)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
After Width: | Height: | Size: 170 KiB |
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="145.259" height="145.29" viewBox="0 0 145.259 145.29">
|
||||||
|
<path id="Path_17210" data-name="Path 17210" d="M226.039,119.789a72.814,72.814,0,0,0-30.892-38.86,62.41,62.41,0,0,0-5.836-3.236,72.206,72.206,0,0,0-31.1-7.492h-1.09a72.688,72.688,0,0,0-46.29,128.651,73.468,73.468,0,0,0,7.185,5.242,72.688,72.688,0,0,0,108.025-84.3ZM157.1,184.544A41.544,41.544,0,1,1,198.641,143,41.544,41.544,0,0,1,157.1,184.544Z" transform="translate(-84.523 -70.2)" fill="#4687e6"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 512 B |
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="78.774" height="98.774" viewBox="0 0 78.774 98.774">
|
||||||
|
<g id="Group_11677" data-name="Group 11677" transform="translate(-950.705 -2057.365)">
|
||||||
|
<path id="Path_16423" data-name="Path 16423" d="M331.578,102.724a20.4,20.4,0,1,1-20.4-20.4A20.4,20.4,0,0,1,331.578,102.724Z" transform="translate(697.9 1975.045)" fill="#e95420" opacity="0.8"/>
|
||||||
|
<path id="Path_17208" data-name="Path 17208" d="M369.544,121.707A39.387,39.387,0,1,1,330.157,82.32,39.387,39.387,0,0,1,369.544,121.707Z" transform="translate(659.935 1995.045)" fill="#222080" opacity="0.8"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 613 B |
|
@ -0,0 +1,7 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="229.583" height="297.71" viewBox="0 0 229.583 297.71">
|
||||||
|
<g id="Group_11678" data-name="Group 11678" transform="translate(-244.57 -1898.089)">
|
||||||
|
<path id="Path_17235" data-name="Path 17235" d="M422.615,374.751l-34.464-30.795-35.418-31.65-61.19-54.658L274.427,242.34,238.96,210.66" transform="translate(-51.588 1924.914) rotate(-20)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="1"/>
|
||||||
|
<path id="Path_17236" data-name="Path 17236" d="M434.678,283.139l-36.728-13.6-37.744-13.98L295,231.415l-18.24-6.762-37.8-13.993" transform="matrix(0.891, 0.454, -0.454, 0.891, 165.282, 1661.494)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="2"/>
|
||||||
|
<path id="Path_17237" data-name="Path 17237" d="M519.555,336.774,466.9,313.106l-54.113-24.325L319.3,246.773l-26.151-11.766L238.96,210.66" transform="translate(573.233 1649.117) rotate(87)" fill="none" stroke="#09091e" stroke-miterlimit="10" stroke-width="3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1002 B |