Project

General

Profile

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&amp;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>
(2-2/4)