refactor(iot): traffic consumption widget

This commit is contained in:
Sergey Andrievskiy 2019-06-18 16:44:09 +03:00
parent 8b55e678af
commit 4d2181f11e
2 changed files with 15 additions and 23 deletions

View file

@ -2,16 +2,17 @@
@include nb-install-component() { @include nb-install-component() {
nb-card {
position: relative;
overflow: hidden;
}
nb-card-header { nb-card-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.675rem 0.5rem 0.5rem 1.25rem; padding-top: 0.45rem;
} padding-bottom: 0.45rem;
nb-card-body {
overflow: hidden;
position: relative;
} }
::ng-deep canvas { ::ng-deep canvas {
@ -24,8 +25,4 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.dropdown {
min-width: 120px;
}
} }

View file

@ -1,28 +1,23 @@
import { Component, OnDestroy } from '@angular/core'; import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators'; import { takeWhile } from 'rxjs/operators';
import { TrafficChartData } from '../../../@core/data/traffic-chart'; import { TrafficChartData } from '../../../@core/data/traffic-chart';
@Component({ @Component({
selector: 'ngx-traffic', selector: 'ngx-traffic',
styleUrls: ['./traffic.component.scss'], styleUrls: ['./traffic.component.scss'],
template: ` template: `
<nb-card size="xsmall"> <nb-card size="tiny">
<nb-card-header> <nb-card-header>
<span>Traffic Consumption</span> <span>Traffic Consumption</span>
<div class="dropdown ghost-dropdown" ngbDropdown>
<button type="button" class="btn btn-sm" ngbDropdownToggle <nb-select [(selected)]="type">
[ngClass]="{ 'btn-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}"> <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
{{ type }} </nb-select>
</button>
<ul ngbDropdownMenu class="dropdown-menu">
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
</ul>
</div>
</nb-card-header> </nb-card-header>
<nb-card-body class="p-0">
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart> <ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
</nb-card-body>
</nb-card> </nb-card>
`, `,
}) })