fix(demo): improve dashboard components

src/app/pages/dashboard/dashboard.component.html

@@ -57,12 +57,7 @@
   </div>
 
   <div class="col-lg-3">
-    <nga-card size="xsmall" class="traffic-card">
+    <ngx-traffic></ngx-traffic>
-      <nga-card-header>Traffic Consumption</nga-card-header>
-      <nga-card-body class="p-0">
-        <ngx-traffic></ngx-traffic>
-      </nga-card-body>
-    </nga-card>
     <ngx-weather></ngx-weather>
   </div>
 

src/app/pages/dashboard/dashboard.component.scss

@@ -5,14 +5,4 @@
     border: none;
     padding-bottom: 0;
   }
-
-  .traffic-card {
-    nga-card-header {
-      border: none;
-    }
-
-    nga-card-body {
-      overflow: hidden;
-    }
-  }
 }

src/app/pages/dashboard/dashboard.module.ts

@@ -18,6 +18,7 @@ import { WeatherComponent } from './weather/weather.component';
 import { SolarComponent } from './solar/solar.component';
 import { PlayerComponent } from './player/player.component';
 import { TrafficComponent } from './traffic/traffic.component';
+import { TrafficChartComponent } from './traffic/traffic-chart.component';
 
 @NgModule({
   imports: [
@@ -42,6 +43,7 @@ import { TrafficComponent } from './traffic/traffic.component';
     PlayerComponent,
     SolarComponent,
     TrafficComponent,
+    TrafficChartComponent,
   ],
 })
 export class DashboardModule { }

src/app/pages/dashboard/electricity/electricity.component.html

@@ -41,15 +41,14 @@
         </div>
       </div>
 
-      <!-- <div class="btn-group" ngbDropdown>
+      <div ngbDropdown>
-        <button type="button" class="btn btn-primary">Week</button>
+        <button type="button" class="btn btn-primary" ngbDropdownToggle>
-        <button type="button" class="btn btn-primary" ngbDropdownToggle></button>
+          {{ type }}
+        </button>
         <ul class="dropdown-menu">
-          <li class="dropdown-item">Week</li>
+          <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
-          <li class="dropdown-item">Month</li>
-          <li class="dropdown-item">Year</li>
         </ul>
-      </div> -->
+      </div>
 
     </div>
     <ngx-electricity-chart></ngx-electricity-chart>

src/app/pages/dashboard/electricity/electricity.component.scss

@@ -1,6 +1,5 @@
 @import '../../../@theme/styles/variables';
 @import '~@akveo/nga-theme/components/card/card.component.theme';
-@import '~@akveo/nga-theme/styles/global/overrides';
 
 @include nga-install-component() {
 
@@ -171,4 +170,8 @@
       font-weight: nga-theme(font-weight-light);
     }
   }
+
+  .dropdown {
+    min-width: 130px;
+  }
 }

src/app/pages/dashboard/electricity/electricity.component.ts

@@ -10,6 +10,9 @@ export class ElectricityComponent {
 
   data: Array<any>;
 
+  type: string = 'week';
+  types = ['week', 'month', 'year'];
+
   constructor(private electricityService: ElectricityService) {
     this.data = electricityService.getData();
   }

src/app/pages/dashboard/security-cameras/security-cameras.component.scss

@@ -21,7 +21,6 @@
     .cameras-card-title {
       flex: 1;
       padding: 1.25rem;
-      line-height: 1.25rem;
     }
   }
 
@@ -30,7 +29,6 @@
 
     a {
       font-size: 2rem;
-      line-height: 2rem;
       padding: 0.75rem 1.5rem;
       display: flex;
       flex-direction: column;
@@ -73,8 +71,7 @@
         color: white;
         background: rgba(88, 73, 184, 0.5);
         font-size: 1rem;
-        line-height: 2.5rem;
+        padding: 0.5rem 1rem;
-        padding-left: 1rem;
       }
     }
 

src/app/pages/dashboard/traffic/traffic-chart.component.ts

@@ -0,0 +1,138 @@
+import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
+
+declare const echarts: any;
+
+const points = [300, 520, 435, 530, 730, 620, 660, 860];
+
+@Component({
+  selector: 'ngx-traffic-chart',
+  styleUrls: ['./traffic.component.scss'],
+  template: `
+    <div echarts [options]="option" class="echart"></div>
+  `,
+})
+export class TrafficChartComponent {
+
+  type: string = 'month';
+  types = ['week', 'month', 'year'];
+  option: any = {};
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+
+      this.option = Object.assign({}, {
+        grid: {
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: points,
+        },
+        yAxis: {
+          boundaryGap: [0, '5%'],
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: config.trafficColorBlack,
+              opacity: 0.06,
+              width: '1',
+            },
+          },
+        },
+        tooltip: {
+          axisPointer: {
+            type: 'shadow',
+          },
+          position: 'top',
+          backgroundColor: config.trafficTooltipBg,
+          borderColor: config.colorSuccess,
+          borderWidth: 3,
+          formatter: '{c0} MB',
+          extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
+        },
+        series: [
+          {
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 8,
+            sampling: 'average',
+            silent: true,
+            itemStyle: {
+              normal: {
+                color: config.trafficLineBg,
+              },
+              emphasis: {
+                color: 'rgba(0,0,0,0)',
+                borderColor: 'rgba(0,0,0,0)',
+                borderWidth: 0,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: config.trafficLineBg,
+              },
+            },
+            data: points.map(p => p - 15),
+          },
+          {
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: 6,
+            sampling: 'average',
+            itemStyle: {
+              normal: {
+                color: config.trafficShadowLineBg,
+                borderColor: 'white',
+                borderWidth: 2,
+                shadowColor: config.trafficShadowLineShadow,
+                shadowOffsetX: 0,
+                shadowOffsetY: -3,
+                shadowBlur: 10,
+              },
+              emphasis: {
+                color: 'white',
+                borderColor: 'rgba(0,0,0,0)',
+                borderWidth: 5,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: config.trafficLineBg,
+                shadowColor: config.trafficShadowLineDarkBg,
+                shadowBlur: 14,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: config.trafficGradFrom,
+                }, {
+                  offset: 1,
+                  color: config.trafficGradTo,
+                }]),
+              },
+            },
+            data: points,
+          },
+        ],
+      });
+    });
+  }
+}

src/app/pages/dashboard/traffic/traffic.component.scss

@@ -2,9 +2,16 @@
 
 @include nga-install-component() {
 
-  ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
+  nga-card-header {
-    display: block;
+    display: flex;
-    height: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.675rem 0.5rem 0.5rem 1.25rem;
+    border: none;
+  }
+
+  nga-card-body {
+    overflow: hidden;
   }
 
   /deep/ canvas {
@@ -16,4 +23,8 @@
     height: 100%;
     width: 100%;
   }
+
+  .dropdown {
+    min-width: 120px;
+  }
 }

src/app/pages/dashboard/traffic/traffic.component.ts

@@ -1,142 +1,28 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
-import { NgaThemeService } from '@akveo/nga-theme';
-
-declare const echarts: any;
-
-const points = [300, 520, 435, 530, 730, 620, 660, 860];
-
-const data = points.map((p, index) => ({
-  label: (index % 3 === 1) ? '${index}' : '',
-  value: p,
-}));
 
 @Component({
   selector: 'ngx-traffic',
   styleUrls: ['./traffic.component.scss'],
   template: `
-    <div echarts [options]="option" class="echart">
+    <nga-card size="xsmall">
-    </div>
+      <nga-card-header>
+        <span>Traffic Consumption</span>
+        <div class="ghost-dropdown" ngbDropdown>
+          <button type="button" class="btn btn-sm btn-primary" ngbDropdownToggle>
+            {{ type }}
+          </button>
+          <ul class="dropdown-menu">
+            <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
+          </ul>
+        </div>
+      </nga-card-header>
+      <nga-card-body class="p-0">
+        <ngx-traffic-chart></ngx-traffic-chart>
+      </nga-card-body>
+    </nga-card>
   `,
 })
 export class TrafficComponent {
-
+  type: string = 'month';
-  option: any = {};
+  types = ['week', 'month', 'year'];
-
-  constructor(private theme: NgaThemeService) {
-    this.theme.getJsTheme().subscribe(config => {
-
-      this.option = Object.assign({}, {
-        grid: {
-          left: 0,
-          top: 0,
-          right: 0,
-          bottom: 0,
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: data.map(i => i.label),
-        },
-        yAxis: {
-          boundaryGap: [0, '5%'],
-          axisLine: {
-            show: false,
-          },
-          axisLabel: {
-            show: false,
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: config.trafficColorBlack,
-              opacity: 0.06,
-              width: '1',
-            },
-          },
-        },
-        tooltip: {
-          axisPointer: {
-            type: 'shadow',
-          },
-          position: 'top',
-          backgroundColor: config.trafficTooltipBg,
-          borderColor: config.colorSuccess,
-          borderWidth: 3,
-          formatter: '{c0} MB',
-          extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
-        },
-        series: [
-          {
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: 8,
-            sampling: 'average',
-            silent: true,
-            itemStyle: {
-              normal: {
-                color: config.trafficLineBg,
-              },
-              emphasis: {
-                color: 'rgba(0,0,0,0)',
-                borderColor: 'rgba(0,0,0,0)',
-                borderWidth: 0,
-              },
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: config.trafficLineBg,
-              },
-            },
-            data: data.map(i => i.value - 15),
-          },
-          {
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: 6,
-            sampling: 'average',
-            itemStyle: {
-              normal: {
-                color: config.trafficShadowLineBg,
-                borderColor: 'white',
-                borderWidth: 2,
-                shadowColor: config.trafficShadowLineShadow,
-                shadowOffsetX: 0,
-                shadowOffsetY: -3,
-                shadowBlur: 10,
-              },
-              emphasis: {
-                color: 'white',
-                borderColor: 'rgba(0,0,0,0)',
-                borderWidth: 5,
-              },
-            },
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: config.trafficLineBg,
-                shadowColor: config.trafficShadowLineDarkBg,
-                shadowBlur: 14,
-              },
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 0,
-                  color: config.trafficGradFrom,
-                }, {
-                  offset: 1,
-                  color: config.trafficGradTo,
-                }]),
-              },
-            },
-            data: data.map(i => i.value),
-          },
-        ],
-      });
-    });
-  }
 }

src/app/pages/dashboard/weather/weather.component.scss

@@ -2,10 +2,13 @@
 
 @include nga-install-component() {
 
+  nga-card {
+    background-image: nga-theme(radial-gradient);
+  }
+
   nga-card-body {
     height: 100%;
     padding: 2rem;
-    background-image: nga-theme(radial-gradient);
     color: nga-theme(color-fg);
   }