From 4d2181f11e820f09fc553484869a87ece9801eab Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Tue, 18 Jun 2019 16:44:09 +0300
Subject: [PATCH] refactor(iot): traffic consumption widget

---
 .../dashboard/traffic/traffic.component.scss  | 17 +++++++--------
 .../dashboard/traffic/traffic.component.ts    | 21 +++++++------------
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss
index 0624aef7..07bb25d3 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.scss
+++ b/src/app/pages/dashboard/traffic/traffic.component.scss
@@ -2,16 +2,17 @@
 
 @include nb-install-component() {
 
+  nb-card {
+    position: relative;
+    overflow: hidden;
+  }
+
   nb-card-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.675rem 0.5rem 0.5rem 1.25rem;
-  }
-
-  nb-card-body {
-    overflow: hidden;
-    position: relative;
+    padding-top: 0.45rem;
+    padding-bottom: 0.45rem;
   }
 
   ::ng-deep canvas {
@@ -24,8 +25,4 @@
     height: 100%;
     width: 100%;
   }
-
-  .dropdown {
-    min-width: 120px;
-  }
 }
diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts
index bf8c5e23..3ddd6e2c 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.ts
+++ b/src/app/pages/dashboard/traffic/traffic.component.ts
@@ -1,28 +1,23 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
+
 import { TrafficChartData } from '../../../@core/data/traffic-chart';
 
 @Component({
   selector: 'ngx-traffic',
   styleUrls: ['./traffic.component.scss'],
   template: `
-    <nb-card size="xsmall">
+    <nb-card size="tiny">
       <nb-card-header>
         <span>Traffic Consumption</span>
-        <div class="dropdown ghost-dropdown" ngbDropdown>
-          <button type="button" class="btn btn-sm" ngbDropdownToggle
-                  [ngClass]="{ 'btn-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
-            {{ type }}
-          </button>
-          <ul ngbDropdownMenu class="dropdown-menu">
-            <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
-          </ul>
-        </div>
+
+        <nb-select [(selected)]="type">
+          <nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
+        </nb-select>
       </nb-card-header>
-      <nb-card-body class="p-0">
-        <ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
-      </nb-card-body>
+
+      <ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
     </nb-card>
   `,
 })