open-science-observatory-ui/src/app/pages/home/countries-table.component.html

<table *ngIf="countries" class="uk-table uk-table-hover uk-table-divider uk-table-small">
  <thead>
    <tr>
      <th width="12,5%" class="" (click)="sortBy('country')">
        <span *ngIf="!isSortedBy || isSortedBy!='country'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        Country
      </th>
      <th width="12,5%" (click)="sortBy('repositories')">
        <span *ngIf="!isSortedBy || isSortedBy!='repositories'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        OA repositories
      </th>
      <th width="12,5%" (click)="sortBy('journals')">
        <span *ngIf="!isSortedBy || isSortedBy!='journals'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        OA journals
      </th>
      <!--<th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">-->
        <!--<span *ngIf="!isSortedBy || isSortedBy!='policies'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>-->
        <!--<span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>-->
        <!--<span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>-->
        <!--OA policies-->
      <!--</th>-->
      <th class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
        <span *ngIf="!isSortedBy || isSortedBy!='publications'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        OA publications
      </th>
      <th class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
        <span *ngIf="!isSortedBy || isSortedBy!='datasets'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        OA data
      </th>
      <th class="uk-text-center" width="12,5%" (click)="sortBy('software')">
        <span *ngIf="!isSortedBy || isSortedBy!='software'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        OA software
      </th>
      <th class="uk-text-center" width="12,5%" (click)="sortBy('other')">
        <span *ngIf="!isSortedBy || isSortedBy!='other'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='other' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='other' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        OA other
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let countryOverview of countries">
      <td class=""><a [routerLink]="['/countryDashboard/' + countryOverview.code]">{{countryOverview.name}}</a></td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.repositories===null">--</ng-container>
        <ng-container *ngIf="countryOverview.repositories!=null">
          {{countryOverview.repositories | number}}<ng-container *ngIf="isPercentage">%</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.journals===null">--</ng-container>
        <ng-container *ngIf="countryOverview.journals!=null">
          {{countryOverview.journals | number}}<ng-container *ngIf="isPercentage">%</ng-container>
        </ng-container>
      </td>
      <!--<td class="uk-text-center">-->
      <!--<ng-container *ngIf="countryOverview.policies?.oa !=null">{{countryOverview.policies.oa | number}}</ng-container>-->
      <!--<ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.oa===null">&#45;&#45;</ng-container>-->
      <!--</td>-->
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.publications===null">--</ng-container>
        <ng-container *ngIf="countryOverview.publications!=null">
          {{countryOverview.publications | number}}<ng-container *ngIf="isPercentage">%</ng-container>
          <!--<span style="display: inline-block; float: right; padding-right: 10px;">-->
          <!--<span style="float:left; padding-right: 5px;">{{countryOverview.publications.percentage | number}}% </span>-->
          <!--<ng-container *ngIf="countryOverview.publications?.percentage !=null">-->
          <!--<div class="progress">-->
          <!--<div [ngStyle]="{'width': countryOverview.publications.percentage+'%'}" class="progress-bar progress-bar-publications animate-progress-bar"></div>-->
          <!--</div>-->
          <!--</ng-container>-->
          <!--</span>-->
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.datasets===null">--</ng-container>
        <ng-container *ngIf="countryOverview.datasets!=null">
          {{countryOverview.datasets | number}}<ng-container *ngIf="isPercentage">%</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.software===null">--</ng-container>
        <ng-container *ngIf="countryOverview.software!=null">
          {{countryOverview.software | number}}<ng-container *ngIf="isPercentage">%</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.other===null">--</ng-container>
        <ng-container *ngIf="countryOverview.other!=null">
          {{countryOverview.other | number}}<ng-container *ngIf="isPercentage">%</ng-container>
        </ng-container>
      </td>
    </tr>
  </tbody>
</table>