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

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

    <nga-tabset fullWidth>
      <nga-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>
      </nga-tab>
    </nga-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 class="btn-group" ngbDropdown>
        <button type="button" class="btn btn-primary">Week</button>
        <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
        <ul class="dropdown-menu">
          <li class="dropdown-item">Week</li>
          <li class="dropdown-item">Month</li>
          <li class="dropdown-item">Year</li>
        </ul>
      </div> -->

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