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

<ng-container *ngIf="view==='overview'">
  <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]="['/country', 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">
          <ng-container *ngIf="isPercentage">{{countryOverview.repositories | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.repositories | number}}</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.journals===null">--</ng-container>
        <ng-container *ngIf="countryOverview.journals!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.journals | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.journals | number}}</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">
          <ng-container *ngIf="isPercentage">{{countryOverview.publications | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.publications | number}}</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">
          <ng-container *ngIf="isPercentage">{{countryOverview.datasets | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.datasets | number}}</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.software===null">--</ng-container>
        <ng-container *ngIf="countryOverview.software!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.software | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.software | number}}</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.other===null">--</ng-container>
        <ng-container *ngIf="countryOverview.other!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.other | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.other | number}}</ng-container>
        </ng-container>
      </td>
    </tr>
    </tbody>
  </table>
</ng-container>

<ng-container *ngIf="view==='openScience'">
  <table *ngIf="countries" class="uk-table uk-table-hover uk-table-divider uk-table-small">
    <thead>
    <tr>
      <th width="20%" 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 class="uk-text-center" width="20%" (click)="sortBy('pid')">
        <span *ngIf="!isSortedBy || isSortedBy!='pid'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='pid' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='pid' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        PID
      </th>
      <th class="uk-text-center" width="20%" (click)="sortBy('licence')">
        <span *ngIf="!isSortedBy || isSortedBy!='licence'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='licence' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='licence' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        Licence
      </th>
      <th *ngIf="entity==='publication'" class="uk-text-center" width="20%" (click)="sortBy('gold')">
        <span *ngIf="!isSortedBy || isSortedBy!='gold'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='gold' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='gold' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        Gold
      </th>
      <th *ngIf="entity==='publication'" class="uk-text-center" width="20%" (click)="sortBy('green')">
        <span *ngIf="!isSortedBy || isSortedBy!='green'" class="uk-margin-small-right"><img src="../../../assets/img/icons/sort.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='green' && isDescending"><img src="../../../assets/img/icons/sort-descending.svg"></span>
        <span *ngIf="isSortedBy && isSortedBy=='green' && !isDescending"><img src="../../../assets/img/icons/sort-ascending.svg"></span>
        Green
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let countryOverview of countries">
      <td class=""><a [routerLink]="['/country', countryOverview.code]">{{countryOverview.name}}</a></td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.pid===null">--</ng-container>
        <ng-container *ngIf="countryOverview.pid!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.pid.percentage | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.pid.oa | number}}</ng-container>
        </ng-container>
      </td>
      <td class="uk-text-center">
        <ng-container *ngIf="countryOverview.licence===null">--</ng-container>
        <ng-container *ngIf="countryOverview.licence!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.licence.percentage | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.licence.oa | number}}</ng-container>
        </ng-container>
      </td>
      <td *ngIf="entity==='publication'" class="uk-text-center">
        <ng-container *ngIf="countryOverview.gold===null">--</ng-container>
        <ng-container *ngIf="countryOverview.gold!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.gold.percentage | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.gold.oa | number}}</ng-container>
        </ng-container>
      </td>
      <td *ngIf="entity==='publication'" class="uk-text-center">
        <ng-container *ngIf="countryOverview.green===null">--</ng-container>
        <ng-container *ngIf="countryOverview.green!=null">
          <ng-container *ngIf="isPercentage">{{countryOverview.green.percentage | number :'1.0-1'}}%</ng-container>
          <ng-container *ngIf="!isPercentage">{{countryOverview.green.oa | number}}</ng-container>
        </ng-container>
      </td>
    </tr>
    </tbody>
  </table>
</ng-container>