+
+
-
-
- No results found for that country
+
+
+
+
{{(country) ? country : 'world wide'}}
+
Results
+
+
+
+
+
+
0" [class.uk-animation-fade]="state == 1">
+
+
+ Repositories
+
+
+ {{display.total_repos | number}}
+
+
+
+
+
0" [class.uk-animation-fade]="state == 1">
+
+
+ Repositories
+
+
+ {{display.repositories | number}}
+
+
+
+
+
1" [class.uk-animation-fade]="state == 2">
+
+
+ Views
+
+
+ {{display.total_views | number}}
+
+
+
+
+
1" [class.uk-animation-fade]="state == 2">
+
+
+ Views
+
+
+ {{display.views | number}}
+
+
+
+
+
2" [class.uk-animation-fade]="state == 3">
+
+
+ Downloads
+
+
+ {{display.total_downloads | number}}
+
+
+
+
+
2" [class.uk-animation-fade]="state == 3">
+
+
+ Downloads
+
+
+ {{display.downloads | number}}
+
+
+
+
+ No results found for that country
+
+
+
diff --git a/src/app/analytics/analytics.component.ts b/src/app/analytics/analytics.component.ts
index a191240..d49574c 100644
--- a/src/app/analytics/analytics.component.ts
+++ b/src/app/analytics/analytics.component.ts
@@ -6,39 +6,37 @@ import {UsageStatsService} from '../services/usage-stats.service';
import {map, startWith} from 'rxjs/operators';
import {countries} from '../services/countries';
import {Title} from '@angular/platform-browser';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
@Component({
selector: 'analytics',
templateUrl: 'analytics.component.html',
styleUrls: ['analytics.component.css'],
})
-export class AnalyticsComponent implements OnInit{
+export class AnalyticsComponent implements OnInit {
public countryFb: FormGroup;
public countries: Observable
;
public country: string;
public loading: boolean = true;
public display: UsageStat | CountryUsageStat;
public showSearch: boolean = false;
- @ViewChild("input") input: ElementRef;
+ public state: number = 0;
+ private timeouts: any[] = [];
+ @ViewChild('input') input: ElementRef;
constructor(private usageStatsService: UsageStatsService,
- private title: Title) {}
+ private title: Title) {
+ }
ngOnInit() {
this.title.setTitle('OpenAIRE - UsageCounts | Analytics');
this.init();
- this.usageStatsService.getAllMetrics().subscribe(stats => {
- this.display = stats;
- this.loading = false;
- }, error => {
- this.display = null;
- this.loading = false;
- });
+ this.search();
}
private init() {
- this.countryFb= new FormGroup({
- country: new FormControl('')
+ this.countryFb = new FormGroup({
+ country: new FormControl(null)
});
this.countries = this.countryFb.get('country').valueChanges
.pipe(
@@ -50,11 +48,16 @@ export class AnalyticsComponent implements OnInit{
public search() {
this.country = this.countryFb.value.country;
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.display = stats;
this.loading = false;
- this.init();
+ if(this.display) {
+ this.state = 1;
+ this.animation();
+ }
}, error => {
this.display = null;
this.loading = false;
@@ -63,14 +66,26 @@ export class AnalyticsComponent implements OnInit{
this.usageStatsService.getAllMetrics().subscribe(stats => {
this.display = stats;
this.loading = false;
- this.init();
- },error => {
+ if(this.display) {
+ this.state = 1;
+ this.animation();
+ }
+ }, error => {
this.display = null;
this.loading = false;
});
}
}
+ private animation() {
+ this.timeouts.push(setTimeout(() => {
+ if(this.state != 3) {
+ this.animation();
+ }
+ this.state++;
+ }, 800));
+ }
+
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return countries.map(value => value.name).filter(option => filterValue && option.toLowerCase().includes(filterValue));
@@ -78,10 +93,29 @@ export class AnalyticsComponent implements OnInit{
toggle() {
this.showSearch = !this.showSearch;
- if(this.showSearch) {
- setTimeout(()=>{ // this will make the execution after the above boolean has changed
+ if (this.showSearch) {
+ setTimeout(() => { // this will make the execution after the above boolean has changed
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();
}
}
}