Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): add electricity table

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-11 18:59:08 +03:00
parent 76a33485e3
commit 727f50dd6c
7 changed files with 181 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/dashboard/dashboard.component.html
View file

@ -7,11 +7,7 @@
</div>
<div class="col-lg-9">
<nga-card size="large">
<nga-card-header>
Electricity
</nga-card-header>
</nga-card>
<ngx-electricity></ngx-electricity>
</div>
</div>

2
src/app/pages/dashboard/dashboard.module.ts
View file

@ -11,6 +11,7 @@ import { TemperatureComponent } from './temperature/temperature.component';
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
import { TeamComponent } from './team/team.component';
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
import { ElectricityComponent } from './electricity/electricity.component';
@NgModule({
imports: [
@ -28,6 +29,7 @@ import { SecurityCamerasComponent } from './security-cameras/security-cameras.co
RoomsComponent,
TeamComponent,
SecurityCamerasComponent,
ElectricityComponent,
],
})
export class DashboardModule { }

42
src/app/pages/dashboard/electricity/electricity.component.html Normal file
View file

@ -0,0 +1,42 @@
<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 tabTitle="2015">
<div class="stats-row" *ngFor="let row of data[2015]">
<div class="month">
<span>{{ row.month }}</span>
<span class="delta" [ngClass]="{ 'down': row.down }">{{ row.delta }}</span>
</div>
<div class="results">
<b>{{ row.kWatts }}</b> kWh / <b>{{ row.cost }}</b> USD
</div>
</div>
</nga-tab>
<nga-tab tabTitle="2016" active>
<div class="stats-row" *ngFor="let row of data[2015]">
<div>
<span class="month">{{ row.month }}</span>
<span class="delta" [ngClass]="{ 'down': row.down }">{{ row.delta }}</span>
</div>
<div class="results">
<b>{{ row.kWatts }}</b> kWh / <b>{{ row.cost }}</b> USD
</div>
</div>
</nga-tab>
<nga-tab tabTitle="2017">
2017 year data
</nga-tab>
</nga-tabset>
</div>
<div class="chart">
</div>
</nga-card>

103
src/app/pages/dashboard/electricity/electricity.component.scss Normal file
View file

@ -0,0 +1,103 @@
@import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/components/card/card.component.theme';
@import '~@akveo/nga-theme/styles/global/overrides';
@include nga-install-component() {
nga-card {
display: flex;
flex-direction: row;
}
.consumption-table {
display: flex;
flex-direction: column;
width: 20rem;
height: 100%;
}
.table-header {
@include nga-card-header();
font-size: 1.5rem;
border-bottom: 1px solid nga-theme(separator);
.subtitle {
color: nga-theme(color-fg);
font-family: nga-theme(font-primary);
font-size: 1.125rem;
font-weight: nga-theme(font-weight-light);
}
}
nga-tabset /deep/ {
flex: 1;
ul {
align-items: center;
padding: 1rem;
}
ul li a {
font-weight: nga-theme(font-weight-bolder);
padding: 0.5rem 1rem 0.75rem;
}
ul li.active {
background-color: nga-theme(color-primary);
border-radius: nga-theme(radius);
a {
font-size: 1.5rem;
}
a::before {
display: none;
}
}
}
.stats-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-top: 1px solid nga-theme(separator);
.month {
font-family: nga-theme(font-secondary);
font-size: 1.25rem;
font-weight: nga-theme(font-weight-bolder);
color: nga-theme(color-fg-heading);
}
.delta {
display: inline-block;
padding-left: 1rem;
font-size: 0.75rem;
font-weight: nga-theme(font-weight-light);
color: text-danger();
&.down {
color: text-success();
}
}
.results {
font-size: 0.875rem;
font-weight: nga-theme(font-weight-light);
b {
font-family: nga-theme(font-secondary);
font-size: 1rem;
font-weight: nga-theme(font-weight-bolder);
color: nga-theme(color-fg-heading);
}
}
}
.chart {
flex: 1;
height: 100%;
background-image: nga-theme(radial-gradient);
}
}

31
src/app/pages/dashboard/electricity/electricity.component.ts Normal file
View file

@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ngx-electricity',
styleUrls: ['./electricity.component.scss'],
templateUrl: './electricity.component.html',
})
export class ElectricityComponent implements OnInit {
data = {
2015: [
{ month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' },
{ month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' },
{ month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' },
{ month: 'Apr', delta: '2.17', down: false, kWatts: '818', cost: '98' },
{ month: 'May', delta: '1.32', down: true, kWatts: '809', cost: '96' },
{ month: 'Jun', delta: '0.05', down: true, kWatts: '808', cost: '96' },
{ month: 'Jul', delta: '1.39', down: false, kWatts: '815', cost: '97' },
{ month: 'Aug', delta: '0.73', down: true, kWatts: '807', cost: '95' },
{ month: 'Sept', delta: '2.61', down: true, kWatts: '792', cost: '92' },
{ month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' },
{ month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' },
{ month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' },
],
2016: [],
2017: [],
};
ngOnInit() {
}
}

4
src/app/pages/dashboard/team/team.component.scss
View file

@ -43,10 +43,8 @@
}
.team-bio {
// TODO: nga-theme(color-fg) is not getting needed color
// color: nga-theme(color-fg);
text-align: justify;
color: #d1d1ff;
color: nga-theme(color-fg-text);
}
}

2
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -3,7 +3,7 @@
@include nga-install-component() {
nga-card {
background-image: radial-gradient(circle at 50% 50%, #423f8c, #302c6e);
background-image: nga-theme(radial-gradient);
}
nga-tabset {