D-Net

<!--disable_transitions -->

<div class="sidebar_main_swipe" [class.sidebar_main_active]="open">

  <div id="header_main">

    <nav class="uk-navbar">

      <a id="sidebar_main_toggle" (click)="toggleOpen()" class="sSwitch sSwitch_left">

        <span class="sSwitchIcon"></span>

      </a>

      <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-center">

        <ul class="uk-navbar-nav">

          <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">

            <li *ngIf="topic.isPublic && topic.isActive"

                [ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''">

              <a (click)="navigateTo(stakeholder.alias, topic.alias)">{{topic.name}}</a>

            </li>

          </ng-template>

        </ul>

      </div>

    </nav>

  </div>

  <dashboard-sidebar *ngIf="sideBar" [items]="sideBar.items" [name]="stakeholder.index_name"

                     class="uk-width-1-5"></dashboard-sidebar>

  <div *ngIf="activeSubCategory"

       id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">

    <div id="page_content_inner">

      <h5 class="uk-margin uk-margin-top uk-text-bold">Indicators</h5>

      <div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > h6">

        <ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index">

          <div *ngIf="number.isActive && number.isPublic"

               [class.uk-width-1-3@m]="number.width === 'small'"

               [class.uk-width-1-2@m]="number.width === 'medium'"

               [class.uk-width-1-1]="number.width === 'large'">

            <div class="md-card"

                 [attr.uk-tooltip]="number.description">

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

                <span class="uk-text-muted uk-text-small uk-margin-bottom">{{number.name}}</span>

                <h2 *ngIf="numberResults.get(i)" class="uk-margin-remove">

                  <span class="countUpMe">{{numberResults.get(i) | number}}</span>

                </h2>

              </div>

            </div>

          </div>

        </ng-template>

      </div>

      <div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > div > h5">

        <ng-template ngFor [ngForOf]="activeSubCategory.charts" let-chart let-i="index">

          <div *ngIf="chart.isActive && chart.isPublic"

               [class.uk-width-1-3@m]="chart.width === 'small'"

               [class.uk-width-1-2@m]="chart.width === 'medium'"

               [class.uk-width-1-1]="chart.width === 'large'">

            <div>

              <h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5>

              <div class="md-card"

                   [attr.uk-tooltip]="chart.description">

                <div class="md-card-content uk-text-center">

                  <div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group">

                    <button *ngFor="let indicatorPath of chart.indicatorPaths;"

                            class="uk-button"

                            (click)="setActiveChart(i, indicatorPath.type)"

                            [class.uk-button-secondary]="chartsActiveType.get(i).url === indicatorPath.url">

                      {{indicatorPath.type}}

                    </button>

                  </div>

                  <iframe *ngIf="chartsActiveType.get(i).source !== 'fake'"

                          [src]="getUrlByStakeHolder(chartsActiveType.get(i))"

                          class="uk-width-1-1" height="300"></iframe>

                  <img *ngIf="chartsActiveType.get(i).source === 'fake'"

                       [src]="getUrlByStakeHolder(chartsActiveType.get(i))"

                       class="uk-width-1-1">

                </div>

              </div>

            </div>

          </div>

        </ng-template>

      </div>

    </div>

  </div>

</div>