1
|
<schema2jsonld [URL]="properties.domain"
|
2
|
[logoURL]="properties.domain + '/assets/common-assets/logo-small-usage-counts.png'"
|
3
|
type="other" [description]="description" [name]="title">
|
4
|
</schema2jsonld>
|
5
|
<div class="analytics">
|
6
|
<div *ngIf="countryFb" class="uk-container uk-text-center countries">
|
7
|
<a class="uk-visible@l next uk-flex uk-flex-middle uk-text-uppercase" (click)="goTo('graph-analysis')">
|
8
|
Graph Analysis
|
9
|
<icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>
|
10
|
</a>
|
11
|
<div class="uk-section uk-section-small">
|
12
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
13
|
<h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
|
14
|
<div class="uk-container uk-text-bold">
|
15
|
<div class="uk-width-4-5@m uk-align-center">
|
16
|
<div search-input #searchInput [control]="countryFb" [showSearch]="showSearch"
|
17
|
placeholder="SEARCH FOR A COUNTRY"
|
18
|
[selected]="country" [loading]="loading" [list]="countries" (searchEmitter)="search($event)" (resetEmitter)="reset()">
|
19
|
</div>
|
20
|
</div>
|
21
|
<div class="uk-margin-medium-bottom">
|
22
|
<div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
|
23
|
<div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
|
24
|
</div>
|
25
|
<div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">
|
26
|
<div *ngIf="loading" class="uk-padding-large uk-width-1-1">
|
27
|
<loading></loading>
|
28
|
</div>
|
29
|
<div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
|
30
|
uk-grid>
|
31
|
<div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
|
32
|
<div class="card uk-margin-bottom">
|
33
|
<div class="uk-margin-medium-bottom">
|
34
|
Repositories
|
35
|
</div>
|
36
|
<h4>
|
37
|
{{display.total_repos.number | number}}{{(display.total_repos.size) ? display.total_repos.size : ""}}
|
38
|
</h4>
|
39
|
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
|
40
|
</div>
|
41
|
</div>
|
42
|
<div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
|
43
|
<div class="card uk-margin-bottom">
|
44
|
<div class="uk-margin-medium-bottom">
|
45
|
Repositories
|
46
|
</div>
|
47
|
<h4>
|
48
|
{{display.repositories.number | number}}{{(display.repositories.size) ? display.repositories.size : ""}}
|
49
|
</h4>
|
50
|
<img src="../../assets/usage-statistics-assets/analytics/1.1.svg">
|
51
|
</div>
|
52
|
</div>
|
53
|
<div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
|
54
|
<div class="card uk-margin-bottom">
|
55
|
<div class="uk-margin-medium-bottom">
|
56
|
Views
|
57
|
</div>
|
58
|
<h4>
|
59
|
{{display.total_views.number | number}}{{(display.total_views.size) ? display.total_views.size : ""}}
|
60
|
</h4>
|
61
|
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
|
62
|
</div>
|
63
|
</div>
|
64
|
<div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
|
65
|
<div class="card uk-margin-bottom">
|
66
|
<div class="uk-margin-medium-bottom">
|
67
|
Views
|
68
|
</div>
|
69
|
<h4>
|
70
|
{{display.views.number | number}}{{(display.views.size) ? display.views.size : ""}}
|
71
|
</h4>
|
72
|
<img src="../../assets/usage-statistics-assets/analytics/1.2.svg">
|
73
|
</div>
|
74
|
</div>
|
75
|
<div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
|
76
|
<div class="card uk-margin-bottom">
|
77
|
<div class="uk-margin-medium-bottom">
|
78
|
Downloads
|
79
|
</div>
|
80
|
<h4>
|
81
|
{{display.total_downloads.number | number}}{{(display.total_downloads.size) ? display.total_downloads.size : ""}}
|
82
|
</h4>
|
83
|
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
|
84
|
</div>
|
85
|
</div>
|
86
|
<div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
|
87
|
<div class="card uk-margin-bottom">
|
88
|
<div class="uk-margin-medium-bottom">
|
89
|
Downloads
|
90
|
</div>
|
91
|
<h4>
|
92
|
{{display.downloads.number | number}}{{(display.downloads.size) ? display.downloads.size : ""}}
|
93
|
</h4>
|
94
|
<img src="../../assets/usage-statistics-assets/analytics/1.3.svg">
|
95
|
</div>
|
96
|
</div>
|
97
|
</div>
|
98
|
<div *ngIf="!display && !loading" class="card uk-animation-fade">
|
99
|
<div class="uk-position-center">
|
100
|
No results found for that country
|
101
|
</div>
|
102
|
</div>
|
103
|
</div>
|
104
|
</div>
|
105
|
</div>
|
106
|
</div>
|
107
|
</div>
|
108
|
<div id="graph-analysis" class="uk-visible@m">
|
109
|
<div class="uk-container uk-section uk-text-center">
|
110
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
111
|
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Usage Events</h3>
|
112
|
<div class="uk-padding second">
|
113
|
<div class="iframe-card uk-margin-left uk-margin-right">
|
114
|
<iframe width="742" height="453" seamless frameborder="0" scrolling="no"
|
115
|
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRN9KbdyQSnWrC-yNpZj3C0U6_Qp-XQBSm9KY0G1Pz5UMoi1Q0bL5RaC1-oBw3o6kYoT7drlGCjUNCy/pubchart?oid=82603024&format=interactive"></iframe>
|
116
|
</div>
|
117
|
</div>
|
118
|
</div>
|
119
|
</div>
|
120
|
<div *ngIf="charts" class="uk-container uk-section uk-text-center">
|
121
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
122
|
<h3 class="uk-margin-medium-bottom uk-text-bold">Worldwide Monthly Views & Downloads</h3>
|
123
|
<div class="uk-padding third">
|
124
|
<div class="iframe-card uk-margin-left uk-margin-right uk-text-center">
|
125
|
<div>
|
126
|
<ul class="uk-subnav uk-subnav-divider uk-margin-remove-bottom">
|
127
|
<li [class.uk-active]="years == 0"><a class="uk-text-primary" (click)="changeYear(0)">This year</a></li>
|
128
|
<li [class.uk-active]="years == 1"><a class="uk-text-primary" (click)="changeYear(1)">Last 2 years</a>
|
129
|
</li>
|
130
|
<li [class.uk-active]="years == 2"><a class="uk-text-primary" (click)="changeYear(2)">Last 5 years</a>
|
131
|
</li>
|
132
|
</ul>
|
133
|
</div>
|
134
|
<div *ngIf="iframeLoading" class="uk-padding-large uk-width-1-1" role="alert">
|
135
|
<loading></loading>
|
136
|
</div>
|
137
|
<iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0"
|
138
|
scrolling="no" [class.uk-hidden]="iframeLoading"
|
139
|
[src]="charts[years]"></iframe>
|
140
|
</div>
|
141
|
</div>
|
142
|
</div>
|
143
|
</div>
|
144
|
</div>
|
145
|
</div>
|