2020-09-23 16:39:48 +02:00
|
|
|
<div class="analytics">
|
|
|
|
<div *ngIf="countryFb" class="uk-container uk-text-center countries">
|
|
|
|
<a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" (click)="goTo('graph-analysis')">
|
|
|
|
Graph Analysis
|
2020-10-13 22:27:31 +02:00
|
|
|
<icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
|
2020-09-23 16:39:48 +02:00
|
|
|
</a>
|
|
|
|
<div class="uk-section uk-section-small">
|
|
|
|
<h2 class="uk-margin-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
|
|
|
<div class="uk-container uk-text-bold">
|
|
|
|
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-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="country && !showSearch" class="uk-flex uk-flex-middle">
|
|
|
|
<span (click)="toggle()">{{country}}</span>
|
2020-09-17 14:53:34 +02:00
|
|
|
<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
|
2020-10-13 22:27:31 +02:00
|
|
|
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>
|
2020-09-17 14:53:34 +02:00
|
|
|
</span>
|
|
|
|
</span>
|
2020-09-23 16:39:48 +02:00
|
|
|
</div>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
<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>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
<div class="uk-margin-medium-bottom">
|
|
|
|
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
|
|
|
|
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
<div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
|
|
|
|
<div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
|
|
|
|
<span class="loading-gif uk-align-center"></span>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
|
|
|
|
uk-grid>
|
2020-09-24 13:56:44 +02:00
|
|
|
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
|
2020-09-23 16:39:48 +02:00
|
|
|
<div class="card">
|
|
|
|
<div class="uk-margin-medium-bottom">
|
|
|
|
Repositories
|
|
|
|
</div>
|
|
|
|
<h4>
|
2020-09-24 13:56:44 +02:00
|
|
|
{{display.total_repos.number | number}}{{(display.total_repos.size)?display.total_repos.size:""}}
|
2020-09-23 16:39:48 +02:00
|
|
|
</h4>
|
|
|
|
<img src="../../assets/usage-statistics-assets/analytics/1.1.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>
|
|
|
|
<h4>
|
2020-09-24 13:56:44 +02:00
|
|
|
{{display.repositories.number | number}}{{(display.repositories.size)?display.repositories.size:""}}
|
2020-09-23 16:39:48 +02:00
|
|
|
</h4>
|
|
|
|
<img src="../../assets/usage-statistics-assets/analytics/1.1.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>
|
|
|
|
<h4>
|
2020-09-24 13:56:44 +02:00
|
|
|
{{display.total_views.number | number}}{{(display.total_views.size)?display.total_views.size:""}}
|
2020-09-23 16:39:48 +02:00
|
|
|
</h4>
|
|
|
|
<img src="../../assets/usage-statistics-assets/analytics/1.2.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>
|
|
|
|
<h4>
|
2020-09-24 13:56:44 +02:00
|
|
|
{{display.views.number | number}}{{(display.views.size)?display.views.size:""}}
|
2020-09-23 16:39:48 +02:00
|
|
|
</h4>
|
|
|
|
<img src="../../assets/usage-statistics-assets/analytics/1.2.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>
|
|
|
|
<h4>
|
2020-09-24 13:56:44 +02:00
|
|
|
{{display.total_downloads.number | number}}{{(display.total_downloads.size)?display.total_downloads.size:""}}
|
2020-09-23 16:39:48 +02:00
|
|
|
</h4>
|
|
|
|
<img src="../../assets/usage-statistics-assets/analytics/1.3.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>
|
|
|
|
<h4>
|
2020-09-24 13:56:44 +02:00
|
|
|
{{display.downloads.number | number}}{{(display.downloads.size)?display.downloads.size:""}}
|
2020-09-23 16:39:48 +02:00
|
|
|
</h4>
|
|
|
|
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
<div *ngIf="!display && !loading" class="card uk-animation-fade">
|
|
|
|
<div class="uk-position-center">
|
|
|
|
No results found for that country
|
|
|
|
</div>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-17 14:53:34 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="graph-analysis" class="uk-visible@m">
|
|
|
|
<div class="uk-container uk-section uk-text-center">
|
|
|
|
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Usage Events</h3>
|
|
|
|
<div class="uk-padding second">
|
|
|
|
<div class="iframe-card uk-margin-left uk-margin-right">
|
|
|
|
<iframe width="742" height="453" seamless frameborder="0" scrolling="no"
|
|
|
|
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&format=interactive"></iframe>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-17 14:53:34 +02:00
|
|
|
</div>
|
2020-09-23 16:39:48 +02:00
|
|
|
<div *ngIf="charts" class="uk-container uk-section uk-text-center">
|
|
|
|
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Views & Downloads</h3>
|
|
|
|
<div class="uk-padding third">
|
|
|
|
<div class="iframe-card uk-margin-left uk-margin-right uk-text-center">
|
|
|
|
<div>
|
|
|
|
<ul class="uk-subnav uk-subnav-divider uk-margin-remove-bottom">
|
|
|
|
<li [class.uk-active]="years == 0"><a class="uk-text-primary" (click)="changeYear(0)">This year</a></li>
|
|
|
|
<li [class.uk-active]="years == 1"><a class="uk-text-primary" (click)="changeYear(1)">Last 2 years</a></li>
|
|
|
|
<li [class.uk-active]="years == 2"><a class="uk-text-primary" (click)="changeYear(2)">Last 5 years</a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
|
|
|
|
<span class="loading-gif uk-align-center"></span>
|
|
|
|
</div>
|
|
|
|
<iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0" scrolling="no" [class.uk-hidden]="iframeLoading"
|
|
|
|
[src]="charts[years]"></iframe>
|
|
|
|
</div>
|
2020-09-14 17:09:23 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-17 14:53:34 +02:00
|
|
|
</div>
|