D-Net

            <!--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="datasource">datasource</option>

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

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

                </select>

              </div>

              <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('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="true" style="animation-duration: 200ms;" class="uk-active">

                  <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>

            <!--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="datasource">datasource</option>

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

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

                </select>

              </div>

              <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('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" style="animation-duration: 200ms;" class="uk-active">

                  <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>