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="otherWithPIDTimeline" width="100%" height="550" [src]="otherWithPIDTimeline"></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)="getOtherWithPIDGroupByMobile(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="otherWithPIDGroupByView==='country' && otherWithPIDByCountryChartURLMobile"

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

                  <iframe *ngIf="otherWithPIDGroupByView==='datasource' && otherWithPIDByDatasourceChartURLMobile"

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

                  <iframe *ngIf="otherWithPIDGroupByView==='organization' && otherWithPIDByOrganizationChartURLMobile"

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

                  <app-treemap-highchart *ngIf="otherWithPIDGroupByView==='funder' && otherWithPIDByFunderData"

                                         [chartTitle]="'OA Other research products with PID by funder'"

                                         [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></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)="getOtherWithPIDGroupBy('country')">Country</a></li>

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

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

                    <li><a (click)="getOtherWithPIDGroupBy('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="otherWithPIDByCountryChartURL"

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

                    </li>

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

                      <iframe *ngIf="otherWithPIDByDatasourceChartURL"

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

                    </li>

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

                      <iframe *ngIf="otherWithPIDByOrganizationChartURL"

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

                    </li>

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

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

                                             [chartTitle]="'OA Other research products with PID by funder'"

                                             [chartData]="otherWithPIDByFunderData" [color]="otherResearchProductsColor"></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="otherWithLicenceTimeline" width="100%" height="550" [src]="otherWithLicenceTimeline"></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)="getOtherWithLicenceGroupByMobile(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="otherWithLicenceGroupByView==='country' && otherWithLicenceByCountryChartURLMobile"

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

                  <iframe *ngIf="otherWithLicenceGroupByView==='datasource' && otherWithLicenceByDatasourceChartURLMobile"

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

                  <iframe *ngIf="otherWithLicenceGroupByView==='organization' && otherWithLicenceByOrganizationChartURLMobile"

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

                  <app-treemap-highchart *ngIf="otherWithLicenceGroupByView==='funder' && otherWithLicenceByFunderData"

                                         [chartTitle]="'OA Other research products with licence by funder'"

                                         [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></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)="getOtherWithLicenceGroupBy('country')">Country</a></li>

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

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

                    <li><a (click)="getOtherWithLicenceGroupBy('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="otherWithLicenceByCountryChartURL"

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

                    </li>

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

                      <iframe *ngIf="otherWithLicenceByDatasourceChartURL"

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

                    </li>

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

                      <iframe *ngIf="otherWithLicenceByOrganizationChartURL"

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

                    </li>

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

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

                                             [chartTitle]="'OA Other research products with licence by funder'"

                                             [chartData]="otherWithLicenceByFunderData" [color]="otherResearchProductsColor"></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 other research products</h3>

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

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

          <select class="md-input" #selectOtherContent (change)="getContent('other', selectOtherContent.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:'#other-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="other-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="otherAbsoluteTableData" [isPercentage]="false" [countries]="otherAbsoluteTableData" [view]="'openScience'" [entity]="'other'"></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="otherPercentageTableData" [isPercentage]="true" [countries]="otherPercentageTableData" [view]="'openScience'" [entity]="'other'"></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>-->