usage-counts/src/app/analytics/analytics.component.html

<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>
  <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-width-3-5">
        <form [formGroup]="countryFb" (ngSubmit)="search()">
          <input #input type="text" class="uk-width-1-1"
                 [class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
                 [class.uk-hidden]="!showSearch || (!showSearch && country)"
                 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="countryFb.get('country').value && !showSearch" class="uk-flex uk-flex-middle">
            <span (click)="toggle()">{{countryFb.get('country').value}}</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" (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>
          <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 *ngIf="!display && !loading" class="card uk-animation-fade">
      <div class="uk-position-center">
        No results found for that country
      </div>
    </div>
  </div>
</div>