[UsageCounts]: Add close on seearch result. Add animation on search results. Fix height for countries section
This commit is contained in:
parent
72215e89d1
commit
638ca3395f
|
@ -2,8 +2,8 @@
|
||||||
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: bottom center;
|
background-position: center center;
|
||||||
min-height: 60vh;
|
min-height: calc(100vh - 100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.countries input, .countries input:focus {
|
.countries input, .countries input:focus {
|
||||||
|
|
|
@ -1,107 +1,118 @@
|
||||||
<div *ngIf="countryFb" class="uk-section uk-section-small uk-container countries uk-text-center uk-text-bold">
|
<div *ngIf="countryFb" class="uk-section uk-section-small uk-container countries uk-text-center uk-text-bold">
|
||||||
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
||||||
<div class="uk-container uk-container-small">
|
<div class="uk-container uk-container-small">
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
|
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-large-bottom">
|
||||||
<div class="uk-width-3-5">
|
<div class="uk-width-3-5">
|
||||||
<form [formGroup]="countryFb" (ngSubmit)="search()">
|
<form [formGroup]="countryFb" (ngSubmit)="search()">
|
||||||
<input #input type="text" class="uk-animation-slide-right-medium uk-width-1-1"
|
<input #input type="text" class="uk-animation-slide-right-medium uk-width-1-1"
|
||||||
[class.uk-hidden]="!showSearch"
|
[class.uk-hidden]="!showSearch || country"
|
||||||
placeholder="SEARCH FOR A COUNTRY"
|
placeholder="SEARCH FOR A COUNTRY"
|
||||||
aria-label="Number"
|
aria-label="Number"
|
||||||
formControlName="country"
|
formControlName="country"
|
||||||
[matAutocomplete]="auto">
|
[matAutocomplete]="auto">
|
||||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
|
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="search()">
|
||||||
<mat-option *ngFor="let option of countries | async" [value]="option">
|
<mat-option *ngFor="let option of countries | async" [value]="option">
|
||||||
{{option}}
|
{{option}}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-autocomplete>
|
</mat-autocomplete>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
<div class="uk-flex uk-flex-left">
|
||||||
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (click)="toggle()">
|
<span *ngIf="country" class="uk-flex uk-flex-middle">
|
||||||
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
<span>{{country}}</span>
|
||||||
<span class="uk-text-uppercase">search</span>
|
<span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
|
||||||
</button>
|
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
|
||||||
</div>
|
fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
|
||||||
<div class="uk-margin-medium-bottom">
|
stroke-width="1.06"
|
||||||
<div class="uk-text-uppercase">{{(country) ? country : 'world wide'}}</div>
|
d="M16,4 L4,16"></path></svg>
|
||||||
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
<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">
|
|
||||||
<div class="card">
|
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
Repositories
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{{display.total_repos | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/2.svg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="display.repositories">
|
|
||||||
<div class="card">
|
|
||||||
<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 *ngIf="display.total_views">
|
|
||||||
<div class="card">
|
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
Views
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{{display.total_views | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/3.svg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="display.views">
|
|
||||||
<div class="card">
|
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
Views
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{{display.views | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/3.svg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="display.total_downloads">
|
|
||||||
<div class="card">
|
|
||||||
<div class="uk-margin-medium-bottom">
|
|
||||||
Downloads
|
|
||||||
</div>
|
|
||||||
<h3>
|
|
||||||
{{display.total_downloads | number}}
|
|
||||||
</h3>
|
|
||||||
<img src="assets/usage-statistics-assets/analytics/4.svg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="display.downloads">
|
|
||||||
<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 *ngIf="!display && !loading" class="card">
|
<button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (click)="toggle()">
|
||||||
<div class="uk-position-center">
|
<img src="assets/usage-statistics-assets/analytics/search.svg">
|
||||||
No results found for that country
|
<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>
|
||||||
|
<h3>
|
||||||
|
{{display.total_repos | number}}
|
||||||
|
</h3>
|
||||||
|
<img src="assets/usage-statistics-assets/analytics/2.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>
|
||||||
|
<h3>
|
||||||
|
{{display.repositories | number}}
|
||||||
|
</h3>
|
||||||
|
<img src="assets/usage-statistics-assets/analytics/2.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>
|
||||||
|
<h3>
|
||||||
|
{{display.total_views | number}}
|
||||||
|
</h3>
|
||||||
|
<img src="assets/usage-statistics-assets/analytics/3.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>
|
||||||
|
<h3>
|
||||||
|
{{display.views | number}}
|
||||||
|
</h3>
|
||||||
|
<img src="assets/usage-statistics-assets/analytics/3.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>
|
||||||
|
<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 class="uk-position-center">
|
||||||
|
No results found for that country
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -6,39 +6,37 @@ 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 {Title} from '@angular/platform-browser';
|
||||||
|
import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'analytics',
|
selector: 'analytics',
|
||||||
templateUrl: 'analytics.component.html',
|
templateUrl: 'analytics.component.html',
|
||||||
styleUrls: ['analytics.component.css'],
|
styleUrls: ['analytics.component.css'],
|
||||||
})
|
})
|
||||||
export class AnalyticsComponent implements OnInit{
|
export class AnalyticsComponent implements OnInit {
|
||||||
public countryFb: FormGroup;
|
public countryFb: FormGroup;
|
||||||
public countries: Observable<string[]>;
|
public countries: Observable<string[]>;
|
||||||
public country: string;
|
public country: string;
|
||||||
public loading: boolean = true;
|
public loading: boolean = true;
|
||||||
public display: UsageStat | CountryUsageStat;
|
public display: UsageStat | CountryUsageStat;
|
||||||
public showSearch: boolean = false;
|
public showSearch: boolean = false;
|
||||||
@ViewChild("input") input: ElementRef;
|
public state: number = 0;
|
||||||
|
private timeouts: any[] = [];
|
||||||
|
@ViewChild('input') input: ElementRef;
|
||||||
|
|
||||||
constructor(private usageStatsService: UsageStatsService,
|
constructor(private usageStatsService: UsageStatsService,
|
||||||
private title: Title) {}
|
private title: Title) {
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.title.setTitle('OpenAIRE - UsageCounts | Analytics');
|
this.title.setTitle('OpenAIRE - UsageCounts | Analytics');
|
||||||
this.init();
|
this.init();
|
||||||
this.usageStatsService.getAllMetrics().subscribe(stats => {
|
this.search();
|
||||||
this.display = stats;
|
|
||||||
this.loading = false;
|
|
||||||
}, error => {
|
|
||||||
this.display = null;
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private init() {
|
private init() {
|
||||||
this.countryFb= new FormGroup({
|
this.countryFb = new FormGroup({
|
||||||
country: new FormControl('')
|
country: new FormControl(null)
|
||||||
});
|
});
|
||||||
this.countries = this.countryFb.get('country').valueChanges
|
this.countries = this.countryFb.get('country').valueChanges
|
||||||
.pipe(
|
.pipe(
|
||||||
|
@ -50,11 +48,16 @@ export class AnalyticsComponent implements OnInit{
|
||||||
public search() {
|
public search() {
|
||||||
this.country = this.countryFb.value.country;
|
this.country = this.countryFb.value.country;
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
if(this.country && this.country != '') {
|
this.clearTimeouts();
|
||||||
|
if (this.country && this.country.length > 0) {
|
||||||
|
this.country = StringUtils.capitalize(this.country);
|
||||||
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;
|
||||||
this.init();
|
if(this.display) {
|
||||||
|
this.state = 1;
|
||||||
|
this.animation();
|
||||||
|
}
|
||||||
}, error => {
|
}, error => {
|
||||||
this.display = null;
|
this.display = null;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
@ -63,14 +66,26 @@ 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;
|
||||||
this.init();
|
if(this.display) {
|
||||||
},error => {
|
this.state = 1;
|
||||||
|
this.animation();
|
||||||
|
}
|
||||||
|
}, error => {
|
||||||
this.display = null;
|
this.display = null;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private animation() {
|
||||||
|
this.timeouts.push(setTimeout(() => {
|
||||||
|
if(this.state != 3) {
|
||||||
|
this.animation();
|
||||||
|
}
|
||||||
|
this.state++;
|
||||||
|
}, 800));
|
||||||
|
}
|
||||||
|
|
||||||
private _filter(value: string): string[] {
|
private _filter(value: string): string[] {
|
||||||
const filterValue = value.toLowerCase();
|
const filterValue = value.toLowerCase();
|
||||||
return countries.map(value => value.name).filter(option => filterValue && option.toLowerCase().includes(filterValue));
|
return countries.map(value => value.name).filter(option => filterValue && option.toLowerCase().includes(filterValue));
|
||||||
|
@ -78,10 +93,29 @@ export class AnalyticsComponent implements OnInit{
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
this.showSearch = !this.showSearch;
|
this.showSearch = !this.showSearch;
|
||||||
if(this.showSearch) {
|
if (this.showSearch) {
|
||||||
setTimeout(()=>{ // this will make the execution after the above boolean has changed
|
setTimeout(() => { // this will make the execution after the above boolean has changed
|
||||||
this.input.nativeElement.focus();
|
this.input.nativeElement.focus();
|
||||||
},0);
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeouts() {
|
||||||
|
this.timeouts.forEach(timeout => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
});
|
||||||
|
this.state = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.clearTimeouts();
|
||||||
|
if(this.state == 0) {
|
||||||
|
this.init();
|
||||||
|
this.showSearch = true;
|
||||||
|
setTimeout(() => { // this will make the execution after the above boolean has changed
|
||||||
|
this.input.nativeElement.focus();
|
||||||
|
}, 0);
|
||||||
|
this.search();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue