refactor(e-commerce): chart panel

src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html

@@ -1,20 +1,9 @@
 <div class="chart-header">
   <ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
 
-  <div class="dropdown"
+  <nb-select [selected]="type" (selectedChange)="changePeriod($event)">
-       [ngClass]="{ 'ghost-dropdown': currentTheme === 'corporate' }"
+    <nb-option  *ngFor="let period of types" [value]="period">
-       ngbDropdown>
+      {{ period }}
-    <button type="button" ngbDropdownToggle class="btn"
+    </nb-option>
-            [ngClass]="{
+  </nb-select>
-              'btn-outline-success': currentTheme === 'default',
-              'btn-primary': currentTheme !== 'default',
-              'btn-sm': breakpoint.width <= breakpoints.is}">
-      {{ type }}
-    </button>
-    <ul class="dropdown-menu" ngbDropdownMenu>
-      <li class="dropdown-item" *ngFor="let period of types" (click)="changePeriod(period)">
-        {{ period }}
-      </li>
-    </ul>
-  </div>
 </div>

src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss

@@ -1,51 +1,15 @@
 @import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
   .summary-container {
     display: flex;
     flex: 1;
-    background-color: nb-theme(chart-panel-summary-background-color);
+    background-color: nb-theme(background-basic-color-3);
-    box-shadow: nb-theme(chart-panel-summary-box-shadow);
     justify-content: space-between;
     padding: 1.5rem 4rem 1rem;
     margin-bottom: 1rem;
-    border:
+    border: 1px solid nb-theme(border-basic-color-4);
-      nb-theme(chart-panel-summary-border-width)
-      solid
-      nb-theme(chart-panel-summary-border-color);
     border-left: none;
     border-right: none;
   }
-
-  .value {
-    font-size: 2rem;
-    color: nb-theme(color-fg-heading);
-  }
-
-  @include media-breakpoint-down(sm) {
-    .value, .title {
-      font-weight: nb-theme(font-weight-bold);
-    }
-
-    .title {
-      font-size: nb-theme(font-size-sm);
-    }
-
-    .value {
-      font-size: nb-theme(font-size-xlg);
-    }
-  }
-
-  @include media-breakpoint-down(is) {
-    .summary-container {
-      padding-left: nb-theme(padding);
-      padding-right: nb-theme(padding);
-    }
-
-    .value {
-      margin-top: 0.5rem;
-    }
-  }
 }

src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts

@@ -5,9 +5,9 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./chart-panel-summary.component.scss'],
   template: `
     <div class="summary-container">
-      <div class="summory" *ngFor="let item of summary">
+      <div *ngFor="let item of summary">
-        <div class="title">{{ item.title }}</div>
+        <div>{{ item.title }}</div>
-        <div class="value">{{ item.value }}</div>
+        <div class="h6">{{ item.value }}</div>
       </div>
     </div>
   `,

src/app/pages/e-commerce/charts-panel/charts-panel.component.scss

@@ -6,19 +6,23 @@ $legend-canceled-color: #3f4fda;
 
 @include nb-install-component() {
 
-  ::ng-deep nb-tabset {
+  nb-tabset {
     display: flex;
     flex-direction: column;
     flex: 1;
 
-    ul {
+    ::ng-deep ul {
       border-bottom: none;
+
+      .tab-link {
+        padding: 1.25rem 2rem;
+      }
     }
   }
 
   nb-tab {
     flex: 1;
-    padding-bottom: 1.25rem;
+    padding: 0 0 1.25rem;
   }
 
   .chart-container {
@@ -29,7 +33,9 @@ $legend-canceled-color: #3f4fda;
     overflow: hidden;
   }
 
-  ngx-chart-panel-header, ngx-profit-chart, ngx-orders-chart {
+  ngx-chart-panel-header,
+  ngx-profit-chart,
+  ngx-orders-chart {
     padding: 0 1.25rem;
   }
 }

src/app/pages/e-commerce/legend-chart/legend-chart.component.scss

@@ -5,15 +5,13 @@
 @include nb-install-component() {
   .legends {
     display: flex;
-    @include nb-rtl(flex-direction, row-reverse);
-    color: nb-theme(color-fg);
     padding: 0 0 0 2.85rem;
   }
 
   .legend {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
+    align-items: center;
     margin-left: 4rem;
 
     &:first-child {