D-Net

<schema2jsonld [URL]="properties.domain"

               [logoURL]="properties.domain + '/assets/common-assets/logo-small-usage-counts.png'"

               type="other" [description]="description" [name]="title">

</schema2jsonld>

<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

      <icon name="arrow_down" [flex]="true" class="uk-margin-left"></icon>

    </a>

    <div class="uk-section uk-section-small">

      <div class="uk-padding-small uk-padding-remove-vertical">

        <h2 class="uk-margin-medium-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 search-mobile">

            <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@m]="!showSearch"

                       [class.uk-hidden]="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 *ngIf="country && !showSearch" class="uk-flex uk-flex-left">

                <span class="uk-flex uk-flex-middle">

                  <span>{{country}}</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="search uk-margin-medium-left uk-visible@m"

                    (mousedown)="$event.preventDefault()" (click)="toggle()">

              <img src="assets/usage-statistics-assets/analytics/search.svg">

              <span class="uk-text-uppercase space">search</span>

            </button>

            <button [disabled]="loading" class="search uk-hidden@m"

                    (mousedown)="$event.preventDefault()" (click)="search(false)">

              <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 : 'worldwide'}}</div>

            <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>

          </div>

          <div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">

            <div *ngIf="loading" class="uk-padding-large  uk-width-1-1">

              <loading></loading>

            </div>

            <div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"

                 uk-grid>

              <div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">

                <div class="card uk-margin-bottom">

                  <div class="uk-margin-medium-bottom">

                    Repositories

                  </div>

                  <h4>

                    {{display.total_repos.number | number}}{{(display.total_repos.size) ? display.total_repos.size : ""}}

                  </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 uk-margin-bottom">

                  <div class="uk-margin-medium-bottom">

                    Repositories

                  </div>

                  <h4>

                    {{display.repositories.number | number}}{{(display.repositories.size) ? display.repositories.size : ""}}

                  </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 uk-margin-bottom">

                  <div class="uk-margin-medium-bottom">

                    Views

                  </div>

                  <h4>

                    {{display.total_views.number | number}}{{(display.total_views.size) ? display.total_views.size : ""}}

                  </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 uk-margin-bottom">

                  <div class="uk-margin-medium-bottom">

                    Views

                  </div>

                  <h4>

                    {{display.views.number | number}}{{(display.views.size) ? display.views.size : ""}}

                  </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 uk-margin-bottom">

                  <div class="uk-margin-medium-bottom">

                    Downloads

                  </div>

                  <h4>

                    {{display.total_downloads.number | number}}{{(display.total_downloads.size) ? display.total_downloads.size : ""}}

                  </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 uk-margin-bottom">

                  <div class="uk-margin-medium-bottom">

                    Downloads

                  </div>

                  <h4>

                    {{display.downloads.number | number}}{{(display.downloads.size) ? display.downloads.size : ""}}

                  </h4>

                  <img src="../../assets/usage-statistics-assets/analytics/1.3.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>

      </div>

    </div>

  </div>

  <div id="graph-analysis" class="uk-visible@m">

    <div class="uk-container uk-section uk-text-center">

      <div class="uk-padding-small uk-padding-remove-vertical">

        <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&amp;format=interactive"></iframe>

          </div>

        </div>

      </div>

    </div>

    <div *ngIf="charts" class="uk-container uk-section uk-text-center">

      <div class="uk-padding-small uk-padding-remove-vertical">

        <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-padding-large uk-width-1-1" role="alert">

              <loading></loading>

            </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>

        </div>

      </div>

    </div>

  </div>

</div>