D-Net

  <ul uk-tab class="uk-tab-large">

    <li><a href="#">PID</a></li>

    <li><a href="#">Licence</a></li>

    <li class="uk-visible@m"><a href="#">More Details</a></li>

  </ul>

  <ul class="uk-switcher uk-margin">

    <li>

      <div class="pidIndicator">

        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

          <div class="uk-grid-margin">

            <div class="md-card chartCard">

              <div class="md-card-content">

                <iframe *ngIf="datasetsWithPIDTimeline" width="100%" height="550" [src]="datasetsWithPIDTimeline"></iframe>

              </div>

            </div>

          </div>

          <div class="uk-grid-margin">

            <div class="md-card chartCard">

              <div class="md-card-content">

                <!--MOBILE & PAD PORTRAIT-->

                <div class="uk-hidden@m">

                  <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">

                    <label class="uk-margin-right">Show by: </label>

                    <select class="md-input" #selectPIDGroupBy (change)="getDatasetsWithPIDGroupByMobile(selectPIDGroupBy.value)" style="width: 230px; display: inline-block">

                      <option value="country">country</option>

                      <option value="datasource">datasource</option>

                      <option value="organization">organization</option>

                      <option value="funder">funder</option>

                    </select>

                  </div>

                  <iframe *ngIf="datasetsWithPIDGroupByView==='country' && datasetsWithPIDByCountryChartURLMobile"

                          width="100%" height="550" [src]="datasetsWithPIDByCountryChartURLMobile"></iframe>

                  <iframe *ngIf="datasetsWithPIDGroupByView==='datasource' && datasetsWithPIDByDatasourceChartURLMobile"

                          width="100%" height="550" [src]="datasetsWithPIDByDatasourceChartURLMobile"></iframe>

                  <iframe *ngIf="datasetsWithPIDGroupByView==='organization' && datasetsWithPIDByOrganizationChartURLMobile"

                          width="100%" height="550" [src]="datasetsWithPIDByOrganizationChartURLMobile"></iframe>

                  <app-treemap-highchart *ngIf="datasetsWithPIDGroupByView==='funder' && datasetsWithPIDByFunderData"

                                         [chartTitle]="'OA Datasets with PID by funder'"

                                         [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>

                </div>

                <!--LAPTOP & PAD LANDSCAPE-->

                <div class="uk-visible@m">

                  <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin

                      data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">

                    <li class="uk-active"><a (click)="getDatasetsWithPIDGroupBy('country')">Country</a></li>

                    <li><a (click)="getDatasetsWithPIDGroupBy('datasource')">Datasource</a></li>

                    <li><a (click)="getDatasetsWithPIDGroupBy('organization')">Organization</a></li>

                    <li><a (click)="getDatasetsWithPIDGroupBy('funder')">Funder</a></li>

                  </ul>

                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">

                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">

                      <iframe *ngIf="datasetsWithPIDByCountryChartURL"

                              width="100%" height="350" [src]="datasetsWithPIDByCountryChartURL"></iframe>

                    </li>

                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                      <iframe *ngIf="datasetsWithPIDByDatasourceChartURL"

                              width="100%" height="350" [src]="datasetsWithPIDByDatasourceChartURL"></iframe>

                    </li>

                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                      <iframe *ngIf="datasetsWithPIDByOrganizationChartURL"

                              width="100%" height="350" [src]="datasetsWithPIDByOrganizationChartURL"></iframe>

                    </li>

                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                      <app-treemap-highchart *ngIf="datasetsWithPIDByFunderData"

                                             [chartTitle]="'OA Datasets with PID by funder'"

                                             [chartData]="datasetsWithPIDByFunderData" [color]="datasetColor"></app-treemap-highchart>

                    </li>

                  </ul>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </li>

    <li>

      <div class="licenceIndicator">

        <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">

          <div class="uk-grid-margin">

            <div class="md-card chartCard">

              <div class="md-card-content">

                <iframe *ngIf="datasetsWithLicenceTimeline" width="100%" height="550" [src]="datasetsWithLicenceTimeline"></iframe>

              </div>

            </div>

          </div>

          <div class="uk-grid-margin">

            <div class="md-card chartCard">

              <div class="md-card-content">

                <!--MOBILE & PAD PORTRAIT-->

                <div class="uk-hidden@m">

                  <div class="uk-flex uk-flex-right uk-flex-middle uk-margin-bottom">

                    <label class="uk-margin-right">Show by: </label>

                    <select class="md-input" #selectLicenceGroupBy (change)="getDatasetsWithLicenceGroupByMobile(selectLicenceGroupBy.value)" style="width: 230px; display: inline-block">

                      <option value="country">country</option>

                      <option value="datasource">datasource</option>

                      <option value="organization">organization</option>

                      <option value="funder">funder</option>

                    </select>

                  </div>

                  <iframe *ngIf="datasetsWithLicenceGroupByView==='country' && datasetsWithLicenceByCountryChartURLMobile"

                          width="100%" height="550" [src]="datasetsWithLicenceByCountryChartURLMobile"></iframe>

                  <iframe *ngIf="datasetsWithLicenceGroupByView==='datasource' && datasetsWithLicenceByDatasourceChartURLMobile"

                          width="100%" height="550" [src]="datasetsWithLicenceByDatasourceChartURLMobile"></iframe>

                  <iframe *ngIf="datasetsWithLicenceGroupByView==='organization' && datasetsWithLicenceByOrganizationChartURLMobile"

                          width="100%" height="550" [src]="datasetsWithLicenceByOrganizationChartURLMobile"></iframe>

                  <app-treemap-highchart *ngIf="datasetsWithLicenceGroupByView==='funder' && datasetsWithLicenceByFunderData"

                                         [chartTitle]="'OA Datasets with licence by funder'"

                                         [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>

                </div>

                <!--LAPTOP & PAD LANDSCAPE-->

                <div class="uk-visible@m">

                  <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-right uk-flex-middle uk-margin-bottom" uk-margin

                      data-uk-switcher="{connect:'#switcher-content-a-fade-publications', animation: 'fade'}">

                    <li class="uk-active"><a (click)="getDatasetsWithLicenceGroupBy('country')">Country</a></li>

                    <li><a (click)="getDatasetsWithLicenceGroupBy('datasource')">Datasource</a></li>

                    <li><a (click)="getDatasetsWithLicenceGroupBy('organization')">Organization</a></li>

                    <li><a (click)="getDatasetsWithLicenceGroupBy('funder')">Funder</a></li>

                  </ul>

                  <ul id="switcher-content-a-fade-publications" class="uk-switcher uk-margin">

                    <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">

                      <iframe *ngIf="datasetsWithLicenceByCountryChartURL"

                              width="100%" height="350" [src]="datasetsWithLicenceByCountryChartURL"></iframe>

                    </li>

                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                      <iframe *ngIf="datasetsWithLicenceByDatasourceChartURL"

                              width="100%" height="350" [src]="datasetsWithLicenceByDatasourceChartURL"></iframe>

                    </li>

                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                      <iframe *ngIf="datasetsWithLicenceByOrganizationChartURL"

                              width="100%" height="350" [src]="datasetsWithLicenceByOrganizationChartURL"></iframe>

                    </li>

                    <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                      <app-treemap-highchart *ngIf="datasetsWithLicenceByFunderData"

                                             [chartTitle]="'OA Datasets with licence by funder'"

                                             [chartData]="datasetsWithLicenceByFunderData" [color]="datasetColor"></app-treemap-highchart>

                    </li>

                  </ul>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </li>

    <li>

      <div class="indicatorsTable uk-visible@m uk-margin-large-top">

        <h3 class="">More details for datasets</h3>

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

          <label class="uk-margin-right">Show: </label>

          <select class="md-input" #selectDatasetsContent (change)="getContent('dataset', selectDatasetsContent.value)" style="width: 230px; display: inline-block">

            <option value="affiliated">affiliated</option>

            <option value="affiliated_peer_reviewed">affiliated peer reviewed</option>

            <option value="deposited">deposited</option>

            <option value="deposited_peer_reviewed">deposited peer reviewed</option>

          </select>

          <!--<span class="md-input-bar"></span>-->

        </div>

        <div class="uk-grid uk-child-width-1-2@l uk-child-width-1-2@m">

          <div class="absoluteTable">

            <div class="md-card chartCard">

              <div class="md-card-content">

                <ul class="uk-subnav uk-subnav-pill dataView uk-flex uk-flex-center" data-uk-switcher="{connect:'#data-indicators-content-a-fade', animation: 'fade'}">

                  <li aria-expanded="true" class="uk-active">

                    <a href="#">

                      <i class="fas fa-hashtag"></i>

                    </a>

                  </li>

                  <li aria-expanded="false" class="">

                    <a href="#">

                      <i class="fas fa-percentage"></i>

                    </a>

                  </li>

                </ul>

                <ul id="data-indicators-content-a-fade" class="uk-switcher uk-margin" >

                  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">

                    <div *ngIf="loadingPublicationsAbsoluteTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>

                    <app-countries-table *ngIf="datasetsAbsoluteTableData" [isPercentage]="false" [countries]="datasetsAbsoluteTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>

                  </li>

                  <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                    <div *ngIf="loadingPublicationsPercentageTable" class="whiteFilm"><i class="fa fa-spinner fa-spin fa-2x loader" aria-hidden="true"></i></div>

                    <app-countries-table *ngIf="datasetsPercentageTableData" [isPercentage]="true" [countries]="datasetsPercentageTableData" [view]="'openScience'" [entity]="'dataset'"></app-countries-table>

                  </li>

                </ul>

              </div>

            </div>

          </div>

        </div>

      </div>

    </li>

  </ul>

  <!--<div class="pidIndicator">

            <!–MOBILE & PAD PORTRAIT–>

            <!–LAPTOP & PAD LANDSCAPE–>

            <!–MOBILE & PAD PORTRAIT–>

            <!–LAPTOP & PAD LANDSCAPE–>

  </div>-->

  <!--<div class="indicatorsTable uk-visible@m uk-margin-large-top">

      &lt;!&ndash;<span class="md-input-bar"></span>&ndash;&gt;

  </div>-->