refactor(iot): traffic consumption widget

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;
-  }
 }

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>
     </nb-card>
   `,
 })