112 lines
4.2 KiB
HTML
112 lines
4.2 KiB
HTML
|
<!--class="uk-margin-left uk-margin-right"-->
|
||
|
<div>
|
||
|
<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-animation-slide-right-medium uk-width-1-1"
|
||
|
[class.uk-hidden]="!showSearch"
|
||
|
[disabled]="loading"
|
||
|
placeholder="SEARCH FOR A COUNTRY"
|
||
|
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>
|
||
|
<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>
|
||
|
</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">
|
||
|
<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 *ngIf="!display && !loading" class="card">
|
||
|
<div class="uk-position-center">
|
||
|
No results found for that country
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|