Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 00:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(iot): solar consumption widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 16:18:03 +03:00
parent 6a5baa79e7
commit 46ce65bf88
2 changed files with 10 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/app/pages/dashboard/solar/solar.component.scss
View file

@ -4,62 +4,31 @@
@include nb-install-component() {
$padding: 1rem;
nb-card-body {
overflow: hidden;
padding: $padding;
}
.echart {
position: absolute;
left: 1em;
height: calc(100% - 2 * #{$padding});
height: calc(100% - 2 * 1rem);
width: 40%;
}
.info {
margin-left: 45%;
padding-top: 1.5rem;
color: nb-theme(color-fg);
padding-top: 1rem;
}
.value {
font-family: nb-theme(font-secondary);
font-size: 2rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
margin: 0;
}
.details {
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bolder);
line-height: 1;
span {
font-size: 1rem;
font-weight: nb-theme(font-weight-light);
}
}
.text-hint {
font-size: 1rem;
}
@include nb-for-theme(cosmic) {
color: nb-theme(color-fg-heading);
.value {
color: nb-theme(color-fg-highlight);
}
.details span {
color: nb-theme(color-fg);
}
}
@include media-breakpoint-down(xs) {
.value {
font-size: 1.75rem;
}
color: nb-theme(text-hint-color);
font-family: nb-theme(text-subtitle-2-font-family);
font-size: nb-theme(text-subtitle-2-font-size);
font-weight: nb-theme(text-subtitle-2-font-weight);
line-height: nb-theme(text-subtitle-2-line-height);
}
}

4
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -8,13 +8,13 @@ declare const echarts: any;
selector: 'ngx-solar',
styleUrls: ['./solar.component.scss'],
template: `
<nb-card size="xsmall" class="solar-card">
<nb-card size="tiny" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="value">6. 421 kWh</div>
<div class="h4 value">6.421 kWh</div>
<div class="details"><span>out of</span> 8.421 kWh</div>
</div>
</nb-card-body>