File
Implements
Metadata
| selector |
ngx-electricity |
| styleUrls |
electricity.component.scss |
| templateUrl |
./electricity.component.html |
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
data
|
data: Array<any>
|
Type : Array<any>
|
|
|
|
themeSubscription
|
themeSubscription: any
|
Type : any
|
|
|
|
types
|
types: []
|
Type : []
|
Default value : ['week', 'month', 'year']
|
|
|
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { ElectricityService } from '../../../@core/data/electricity.service';
@Component({
selector: 'ngx-electricity',
styleUrls: ['./electricity.component.scss'],
templateUrl: './electricity.component.html',
})
export class ElectricityComponent implements OnDestroy {
data: Array<any>;
type = 'week';
types = ['week', 'month', 'year'];
currentTheme: string;
themeSubscription: any;
constructor(private eService: ElectricityService, private themeService: NbThemeService) {
this.data = this.eService.getData();
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}
<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">Spent</div>
<div>
<span class="value">291</span>
<span class="unit">USD</span>
</div>
</div>
</div>
<div class="dropdown" ngbDropdown>
<button type="button" ngbDropdownToggle class="btn"
[ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
{{ type }}
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<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>
Legend
Html element with directive