[UsageCounts]: Add close on seearch result. Add animation on search results. Fix height for countries section

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 {

src/app/analytics/analytics.component.html

@@ -5,7 +5,7 @@
       <div class="uk-width-3-5">
         <form [formGroup]="countryFb" (ngSubmit)="search()">
           <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"
                  aria-label="Number"
                  formControlName="country"
@@ -16,10 +16,21 @@
             </mat-option>
           </mat-autocomplete>
         </form>
+        <div class="uk-flex uk-flex-left">
+          <span *ngIf="country" class="uk-flex uk-flex-middle">
+            <span>{{country}}</span>
+            <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
+                  fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000"
+                                                                                             stroke-width="1.06"
+                                                                                             d="M16,4 L4,16"></path></svg>
+            </span>
+          </span>
+        </div>
       </div>
       <button [disabled]="loading" class="uk-width-1-6 uk-margin-medium-left search" (click)="toggle()">
         <img src="assets/usage-statistics-assets/analytics/search.svg">
-          <span class="uk-text-uppercase">search</span>
+        <span class="uk-text-uppercase space">search</span>
       </button>
     </div>
     <div class="uk-margin-medium-bottom">
@@ -31,7 +42,7 @@
     </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 *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
         <div class="card">
           <div class="uk-margin-medium-bottom">
             Repositories
@@ -42,7 +53,7 @@
           <img src="assets/usage-statistics-assets/analytics/2.svg">
         </div>
       </div>
-        <div *ngIf="display.repositories">
+      <div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
         <div class="card">
           <div class="uk-margin-medium-bottom">
             Repositories
@@ -53,7 +64,7 @@
           <img src="assets/usage-statistics-assets/analytics/2.svg">
         </div>
       </div>
-        <div *ngIf="display.total_views">
+      <div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
         <div class="card">
           <div class="uk-margin-medium-bottom">
             Views
@@ -64,7 +75,7 @@
           <img src="assets/usage-statistics-assets/analytics/3.svg">
         </div>
       </div>
-        <div *ngIf="display.views">
+      <div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
         <div class="card">
           <div class="uk-margin-medium-bottom">
             Views
@@ -75,7 +86,7 @@
           <img src="assets/usage-statistics-assets/analytics/3.svg">
         </div>
       </div>
-        <div *ngIf="display.total_downloads">
+      <div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
         <div class="card">
           <div class="uk-margin-medium-bottom">
             Downloads
@@ -86,7 +97,7 @@
           <img src="assets/usage-statistics-assets/analytics/4.svg">
         </div>
       </div>
-        <div *ngIf="display.downloads">
+      <div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
         <div class="card">
           <div class="uk-margin-medium-bottom">
             Downloads
@@ -98,7 +109,7 @@
         </div>
       </div>
     </div>
-      <div *ngIf="!display && !loading" class="card">
+    <div *ngIf="!display && !loading" class="card uk-animation-fade">
       <div class="uk-position-center">
         No results found for that country
       </div>

src/app/analytics/analytics.component.ts

@@ -6,6 +6,7 @@ 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',
@@ -19,26 +20,23 @@ export class AnalyticsComponent implements OnInit{
   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('')
+      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,7 +66,10 @@ export class AnalyticsComponent implements OnInit{
       this.usageStatsService.getAllMetrics().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;
@@ -71,6 +77,15 @@ export class AnalyticsComponent implements OnInit{
     }
   }
   
+  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));
@@ -84,4 +99,23 @@ export class AnalyticsComponent implements OnInit{
       }, 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();
+    }
+  }
 }