diff --git a/src/app/analytics/analytics.component.css b/src/app/analytics/analytics.component.css index d8ddbd6..0c488e5 100644 --- a/src/app/analytics/analytics.component.css +++ b/src/app/analytics/analytics.component.css @@ -2,8 +2,8 @@ background-image: url("/assets/usage-statistics-assets/analytics/1.svg"); background-size: contain; background-repeat: no-repeat; - background-position: bottom center; - min-height: 60vh; + background-position: center center; + min-height: calc(100vh - 100px); } .countries input, .countries input:focus { diff --git a/src/app/analytics/analytics.component.html b/src/app/analytics/analytics.component.html index 2b3eed0..ba2ec49 100644 --- a/src/app/analytics/analytics.component.html +++ b/src/app/analytics/analytics.component.html @@ -1,107 +1,118 @@
-

Track Countries Usage Activity

-
-
-
-
- - - - {{option}} - - -
-
- -
-
-
{{(country) ? country : 'world wide'}}
-
Results
-
- -
-
-
-
- Repositories -
-

- {{display.total_repos | number}} -

- -
-
-
-
-
- Repositories -
-

- {{display.repositories | number}} -

- -
-
-
-
-
- Views -
-

- {{display.total_views | number}} -

- -
-
-
-
-
- Views -
-

- {{display.views | number}} -

- -
-
-
-
-
- Downloads -
-

- {{display.total_downloads | number}} -

- -
-
-
-
-
- Downloads -
-

- {{display.downloads | number}} -

- -
+

Track Countries Usage Activity

+
+
+
+
+ + + + {{option}} + + +
+
+ + {{country}} + + + +
-
-
- No results found for that country + +
+
+
{{(country) ? country : 'world wide'}}
+
Results
+
+ +
+
+
+
+ Repositories +
+

+ {{display.total_repos | number}} +

+ +
+
+
+
+
+ Repositories +
+

+ {{display.repositories | number}} +

+ +
+
+
+
+
+ Views +
+

+ {{display.total_views | number}} +

+ +
+
+
+
+
+ Views +
+

+ {{display.views | number}} +

+ +
+
+
+
+
+ Downloads +
+

+ {{display.total_downloads | number}} +

+ +
+
+
+
+
+ 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(); } } }