overview

package.json

@@ -35,6 +35,7 @@
     "@ngrx/store-devtools": "^5.0.1",
     "core-js": "^2.5.3",
     "hammerjs": "^2.0.8",
+    "ng2-odometer": "^1.1.3",
     "ngx-perfect-scrollbar": "^5.3.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.20"

src/app/commons/component/dashboard-card/dashboard-card.component.html

@@ -0,0 +1,15 @@
+<div fxLayout="row"  class="dashcard mat-elevation-z4 "  >
+  <div fxFlex="40" fxLayout="row"  fxLayoutAlign="center center" [style.background]="dashData?.colorLight">
+      <mat-icon  class="cardIcon">{{dashData?.icon}}</mat-icon>
+  </div>
+  <div  fxFlex="60" fxLayout="column" fxLayoutAlign="center center" [style.background]="dashData?.colorDark" >
+       
+      <div style="color: white;font-size: 40px">
+          <ng2-odometer [number]="dashData?.number" [config]="{ }"></ng2-odometer>
+          
+      </div>
+      <p class="mat-body-1 border-top">
+          {{dashData?.title}}
+      </p>
+  </div>
+</div>

src/app/commons/component/dashboard-card/dashboard-card.component.scss

@@ -0,0 +1,41 @@
+@mixin mat-icon($size: 24px) {
+    font-size: $size;
+    height: $size;
+    width: $size;
+    color:white;
+}
+
+@mixin mat-headline {
+    margin: 0px;
+    color: white;
+}
+
+@mixin dashcard($theme) {
+
+    .dashcard {
+        margin: 10px 5px;
+        height: 100px;
+        background-color:white;
+    }
+    .mat-icon {
+        @include mat-icon(40px);
+    }
+    .border-top {
+        border-top: 1px solid white;
+    }
+    .mat-headline {
+        @include mat-headline();
+    }
+    .mat-body-1{
+        @include mat-headline();
+    }
+}
+.nav-item {
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  cursor: default;
+
+  &:hover {
+    transform: translate(0, -8px);
+    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
+  }
+}

src/app/commons/component/dashboard-card/dashboard-card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardCardComponent } from './dashboard-card.component';
+
+describe('DashboardCardComponent', () => {
+  let component: DashboardCardComponent;
+  let fixture: ComponentFixture<DashboardCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/commons/component/dashboard-card/dashboard-card.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-dashboard-card',
+  templateUrl: './dashboard-card.component.html',
+  styleUrls: ['./dashboard-card.component.scss']
+})
+export class DashboardCardComponent implements OnInit {
+
+  @Input() dashData: any;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/commons/component/dashboard-card/dashboard-card.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { DashboardCardComponent } from 'app/commons/component/dashboard-card/dashboard-card.component';
+import { Ng2OdometerModule } from 'ng2-odometer';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    RouterModule,
+    Ng2OdometerModule.forRoot()
+  ],
+  declarations: [
+    DashboardCardComponent,
+  ],
+  exports: [
+    DashboardCardComponent
+  ]
+})
+export class DashboardCardModule { }

src/app/pages/overview/overview-page.component.html

@@ -1,3 +1,5 @@
-<p>
+<div fxLayout="row" fxLayoutWrap>
-  overview works!
+  <div  *ngFor="let dash of dashCard"   fxFlex.lt-sm="100"  fxFlex.sm="50" fxFlex.md="25" >
-</p>
+      <of-dashboard-card  [dashData]="dash" ></of-dashboard-card>
+  </div>
+</div>

src/app/pages/overview/overview-page.component.ts

@@ -7,6 +7,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class OverviewPageComponent implements OnInit {
 
+  public dashCard = [
+    { colorDark: '#5C6BC0', colorLight: '#7986CB', number: 1000, title: 'HOSTS', icon: 'devices_other' },
+    { colorDark: '#42A5F5', colorLight: '#64B5F6', number: 2000, title: 'APPLICATIONS', icon: 'apps' },
+    { colorDark: '#26A69A', colorLight: '#4DB6AC', number: 3000, title: 'SENSORS', icon: 'memory' },
+    // { colorDark: '#66BB6A', colorLight: '#81C784', number: 1221, title: 'BANKING', icon: 'account_balance' }
+  ];
+
   constructor() { }
 
   ngOnInit() {

src/app/pages/overview/overview-page.module.ts

@@ -2,11 +2,16 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { OverviewPageRoutingModule } from 'app/pages/overview/overview-page-routing.module';
 import { OverviewPageComponent } from 'app/pages/overview/overview-page.component';
+import { DashboardCardComponent } from 'app/commons/component/dashboard-card/dashboard-card.component';
+import { DashboardCardModule } from 'app/commons/component/dashboard-card/dashboard-card.module';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    OverviewPageRoutingModule
+    OverviewPageRoutingModule,
+    DashboardCardModule,
+    MaterialModule
   ],
   declarations: [
     OverviewPageComponent

src/theme/theme.scss

@@ -2,6 +2,7 @@
 @import '~app/pages/pages.component.scss';
 @import '~app/commons/component/sidebar/sidebar.component.scss';
 @import '~app/commons/component/menu-item/menu-item.component.scss';
+@import '~app/commons/component/dashboard-card/dashboard-card.component.scss';
 
 $mat-light-theme-background: (
   status-bar: map_get($mat-grey, 300),
@@ -41,11 +42,18 @@ of-sidebar{
     @include mat-list-theme($cdk-sidebar-theme); 
 }
    
-
 of-menu-item{
     @include menu-item($cdk-theme,20px)
 }
 
+of-dashboard-card {
+    $dashcard-primary: mat-palette($primary);
+    $dashcard-accent:  mat-palette($accent);
+    $dashcard-warn:    mat-palette($warn);
+    $dashcard-theme:   mat-dark-theme($dashcard-primary, $dashcard-accent,$dashcard-warn);
+    @include dashcard($dashcard-theme);    
+}
+
 @include angular-material-theme($cdk-theme);
 @include auth($cdk-theme);
 

yarn.lock

@@ -4440,6 +4440,12 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
+ng2-odometer@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/ng2-odometer/-/ng2-odometer-1.1.3.tgz#27209e7ed225790120635aba2281b8a9318b6f47"
+  dependencies:
+    odometer "^0.4.8"
+
 ngx-perfect-scrollbar@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-5.3.1.tgz#7fcfb26a93554ac60d0444bfaa4b9487f23c5cbc"
@@ -4721,6 +4727,10 @@ obuf@^1.0.0, obuf@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
 
+odometer@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/odometer/-/odometer-0.4.8.tgz#2f6703bf4c6b384c278236d04d4bc8171abe4374"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"