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

<table *ngIf="countries" class="uk-table uk-table-hover">
  <thead>
    <tr>
      <th width="12,5%" class="" (click)="sortBy('country')">
        Country
        <span *ngIf="isSortedBy && isSortedBy=='country' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='country' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('repositories')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA repositories
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='repositories' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('journals')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA journals
        <span *ngIf="isSortedBy && isSortedBy=='journals' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='journals' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview'" class="uk-text-center" width="12,5%" (click)="sortBy('policies')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA policies
        <span *ngIf="isSortedBy && isSortedBy=='policies' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='policies' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('publications')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA publications
        <span *ngIf="isSortedBy && isSortedBy=='publications' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='publications' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('datasets')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA data
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='datasets' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('software')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA software
        <span *ngIf="isSortedBy && isSortedBy=='software' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='software' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
      <th *ngIf="type=='overview' || type=='openScience'" class="uk-text-center" width="12,5%" (click)="sortBy('otherProducts')">
        <i class="fa fa-sort-numeric-desc m-r-10 uk-margin-right"></i>OA other research products
        <span *ngIf="isSortedBy && isSortedBy=='otherProducts' && isDescending"><i class="fas fa-caret-down uk-margin-small-left"></i></span>
        <span *ngIf="isSortedBy && isSortedBy=='otherProducts' && !isDescending"><i class="fas fa-caret-up uk-margin-small-left"></i></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngIf="isPercentage">
      <tr *ngFor="let countryOverview of countries">
        <td class=""><a>{{countryOverview.country}}</a></td>
        <td *ngIf="type=='overview'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.repositories?.percentage !=null">{{countryOverview.repositories.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.percentage===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.journals?.percentage !=null">{{countryOverview.journals.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.percentage===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.policies?.percentage !=null">{{countryOverview.policies.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.policies===null || countryOverview.policies.percentage===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.publications?.percentage !=null">{{countryOverview.publications.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.percentage===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.datasets?.percentage !=null">{{countryOverview.datasets.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.percentage===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.software?.percentage !=null">{{countryOverview.software.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.percentage===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.otherProducts?.percentage !=null">{{countryOverview.otherProducts.percentage | number}}%</ng-container>
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.percentage===null">--</ng-container>
        </td>
      </tr>
    </ng-container>
    <ng-container *ngIf="!isPercentage">
      <tr *ngFor="let countryOverview of countries">
        <td class=""><a>{{countryOverview.country}}</a></td>
        <td *ngIf="type=='overview'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.repositories?.oa !=null">{{countryOverview.repositories.oa | number}}</ng-container>
          <ng-container *ngIf="countryOverview.repositories===null || countryOverview.repositories.oa===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.journals?.oa !=null">{{countryOverview.journals.oa | number}}</ng-container>
          <ng-container *ngIf="countryOverview.journals===null || countryOverview.journals.oa===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview'" 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">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.publications?.oa !=null">{{countryOverview.publications.oa | number}}</ng-container>
          <ng-container *ngIf="countryOverview.publications===null || countryOverview.publications.oa===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.datasets?.oa !=null">{{countryOverview.datasets.oa | number}}</ng-container>
          <ng-container *ngIf="countryOverview.datasets===null || countryOverview.datasets.oa===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.software?.oa !=null">{{countryOverview.software.oa | number}}</ng-container>
          <ng-container *ngIf="countryOverview.software===null || countryOverview.software.oa===null">--</ng-container>
        </td>
        <td *ngIf="type=='overview' || type=='openScience'" class="uk-text-center">
          <ng-container *ngIf="countryOverview.otherProducts?.oa !=null">{{countryOverview.otherProducts.oa | number}}</ng-container>
          <ng-container *ngIf="countryOverview.otherProducts===null || countryOverview.otherProducts.oa===null">--</ng-container>
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>