ngx-admin/src/app/pages/dashboard/electricity/electricity.component.html

<nb-card size="large">
  <div class="consumption-table">
    <div class="table-header">
      <div>Electricity</div>
      <div class="subtitle">Consumption</div>
    </div>

    <nb-tabset fullWidth>
      <nb-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
        <div class="stats-month" *ngFor="let month of year.months">
          <div>
            <span class="month">{{ month.month }}</span>
            <span class="delta" [ngClass]="{ 'down': month.down }">{{ month.delta }}</span>
          </div>
          <div class="results">
            <b>{{ month.kWatts }}</b> kWh / <b>{{ month.cost }}</b> USD
          </div>
        </div>
      </nb-tab>
    </nb-tabset>
  </div>

  <div class="chart-container">
    <div class="chart-header">
      <div class="header-stats">
        <div class="stats-block">
          <div class="subtitle">Consumed</div>
          <div>
            <span class="value">816</span>
            <span class="unit">kWh</span>
          </div>
        </div>

        <div class="stats-block">
          <div class="subtitle">Value</div>
          <div>
            <span class="value dollar">$</span>
            <span class="value">91</span>
            <span class="unit">USD</span>
          </div>
        </div>
      </div>

      <div ngbDropdown>
        <button type="button" class="btn btn-primary" ngbDropdownToggle>
          {{ type }}
        </button>
        <ul class="dropdown-menu">
          <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
        </ul>
      </div>

    </div>
    <ngx-electricity-chart></ngx-electricity-chart>
  </div>
</nb-card>