D-Net

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

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

    <li><a href="#">Licence</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="softwareWithPIDTimeline" width="100%" height="550" [src]="softwareWithPIDTimeline"></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)="getSoftwareWithPIDGroupByMobile(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="softwareWithPIDGroupByView==='datasource' && softwareWithPIDByDatasourceChartURLMobile"

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

                  <iframe *ngIf="softwareWithPIDGroupByView==='organization' && softwareWithPIDByOrganizationChartURLMobile"

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

                  <app-treemap-highchart *ngIf="softwareWithPIDGroupByView==='funder' && softwareWithPIDByFunderData"

                                         [chartTitle]="'OS Software with PID by funder'"

                                         [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></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)="getSoftwareWithPIDGroupBy('datasource')">Datasource</a></li>

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

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

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

                    </li>

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

                      <iframe *ngIf="softwareWithPIDByOrganizationChartURL"

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

                    </li>

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

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

                                             [chartTitle]="'OS Software with PID by funder'"

                                             [chartData]="softwareWithPIDByFunderData" [color]="softwareColor"></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="softwareWithLicenceTimeline" width="100%" height="550" [src]="softwareWithLicenceTimeline"></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)="getSoftwareWithLicenceGroupByMobile(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="softwareWithLicenceGroupByView==='datasource' && softwareWithLicenceByDatasourceChartURLMobile"

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

                  <iframe *ngIf="softwareWithLicenceGroupByView==='organization' && softwareWithLicenceByOrganizationChartURLMobile"

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

                  <app-treemap-highchart *ngIf="softwareWithLicenceGroupByView==='funder' && softwareWithLicenceByFunderData"

                                         [chartTitle]="'OS Software with licence by funder'"

                                         [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></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)="getSoftwareWithLicenceGroupBy('datasource')">Datasource</a></li>

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

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

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

                    </li>

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

                      <iframe *ngIf="softwareWithLicenceByOrganizationChartURL"

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

                    </li>

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

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

                                             [chartTitle]="'OS Software with licence by funder'"

                                             [chartData]="softwareWithLicenceByFunderData" [color]="softwareColor"></app-treemap-highchart>

                    </li>

                  </ul>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </li>

  </ul>

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

            <!–MOBILE & PAD PORTRAIT–>

            <!–LAPTOP & PAD LANDSCAPE–>

            <!–MOBILE & PAD PORTRAIT–>

            <!–LAPTOP & PAD LANDSCAPE–>

  </div>-->