Combine folder and device chart component into chart component

src/app/app.module.ts

@@ -18,8 +18,6 @@ import { StatusListComponent } from './lists/status-list/status-list.component';
 import { FolderListComponent } from './lists/folder-list/folder-list.component';
 import { DeviceListComponent } from './lists/device-list/device-list.component';
 import { DonutChartComponent } from './charts/donut-chart/donut-chart.component';
-import { DeviceChartComponent } from './charts/device-chart/device-chart.component';
-import { FolderChartComponent } from './charts/folder-chart/folder-chart.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ListToggleComponent } from './list-toggle/list-toggle.component';
 
@@ -29,6 +27,7 @@ import { InMemoryConfigDataService } from './services/in-memory-config-data.serv
 import { deviceID } from './api-utils';
 import { environment } from '../environments/environment';
 import { ChartItemComponent } from './charts/chart-item/chart-item.component';
+import { ChartComponent } from './charts/chart/chart.component';
 
 @NgModule({
   declarations: [
@@ -39,8 +38,7 @@ import { ChartItemComponent } from './charts/chart-item/chart-item.component';
     ListToggleComponent,
     DashboardComponent,
     DonutChartComponent,
-    DeviceChartComponent,
-    FolderChartComponent,
+    ChartComponent,
     ChartItemComponent,
   ],
   imports: [

src/app/chart.ts

@@ -0,0 +1,4 @@
+export const enum ChartType {
+    Folder = 0,
+    Device
+}

src/app/charts/chart/chart.component.html

@@ -1,5 +1,5 @@
 <div class="{{elevation}} tui-card">
-    <div class="tui-card-title">{{title}}</div>
+    <div class="tui-card-title">{{title | uppercase}}</div>
     <div class="tui-card-content">
         <div fxLayout="row" fxLayoutAlign="space-between stretch">
             <app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title"></app-donut-chart>

src/app/charts/chart/chart.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FolderChartComponent } from './folder-chart.component';
+import { ChartComponent } from './chart.component';
 
-describe('FolderChartComponent', () => {
-  let component: FolderChartComponent;
-  let fixture: ComponentFixture<FolderChartComponent>;
+describe('ChartComponent', () => {
+  let component: ChartComponent;
+  let fixture: ComponentFixture<ChartComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FolderChartComponent ]
+      declarations: [ ChartComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FolderChartComponent);
+    fixture = TestBed.createComponent(ChartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/charts/chart/chart.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import Folder from '../../folder'
+import { cardElevation } from '../../style'
+import { FolderService } from 'src/app/services/folder.service';
+import { DonutChartComponent } from '../donut-chart/donut-chart.component';
+import { DeviceService } from 'src/app/services/device.service';
+import Device from 'src/app/device';
+import { ChartType } from '../../chart';
+
+
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.scss']
+})
+
+export class ChartComponent implements OnInit {
+  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
+  @Input() type: ChartType;
+  title: string;
+  chartID: string;
+  states: { label: string, count: number, color: string }[] = [];
+  elevation: string = cardElevation;
+  service: any;
+  namespace: any;
+
+  constructor(private folderService: FolderService, private deviceServce: DeviceService) { }
+
+  ngOnInit(): void {
+    switch (this.type) {
+      case ChartType.Folder:
+        this.title = "Folders";
+        this.chartID = 'foldersChart';
+        this.service = this.folderService;
+        break;
+      case ChartType.Device:
+        this.title = "Devices";
+        this.chartID = 'devicesChart';
+        this.service = this.deviceServce;
+        break;
+    }
+  }
+
+  ngAfterViewInit() {
+    let totalCount: number = 0;
+    this.service.getAll().subscribe(
+      folder => {
+        // Count the number of folders and set chart
+        totalCount++;
+        this.donutChart.count = totalCount;
+
+        // Get StateType and convert to string 
+        let stateType;
+        let state: string;
+        let color;
+        switch (this.type) {
+          case ChartType.Folder:
+            stateType = Folder.getStateType(folder);
+            state = Folder.stateTypeToString(stateType);
+            color = Folder.stateTypeToColor(stateType);
+            break;
+          case ChartType.Device:
+            stateType = Device.getStateType(folder);
+            state = Device.stateTypeToString(stateType);
+            color = Device.stateTypeToColor(stateType);
+            break;
+        }
+
+        // Check if state exists
+        let found: boolean = false;
+        this.states.forEach(s => {
+          if (s.label === state) {
+            s.count = s.count + 1;
+            found = true;
+          }
+        });
+
+        if (!found) {
+          console.log(color, "look!!!")
+          this.states.push({ label: state, count: 1, color: color });
+        }
+
+        this.donutChart.updateData(this.states);
+      },
+      err => console.error('Observer got an error: ' + err),
+      () => {
+      }
+    );
+  }
+}

src/app/charts/device-chart/device-chart.component.spec.ts

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

src/app/charts/device-chart/device-chart.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { cardElevation } from '../../style';
-import { DonutChartComponent } from '../donut-chart/donut-chart.component';
-import { DeviceService } from 'src/app/services/device.service';
-import Device from '../../device';
-
-@Component({
-  selector: 'app-device-chart',
-  templateUrl: './device-chart.component.html',
-  styleUrls: ['./device-chart.component.scss']
-})
-export class DeviceChartComponent implements OnInit {
-  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
-  chartID: string = 'devicesChart';
-  elevation: string = cardElevation;
-  states: { label: string, count: number, color: string }[] = [];
-  title: string = "Devices";
-
-  constructor(private deviceService: DeviceService) { }
-
-  ngOnInit(): void { }
-
-  ngAfterViewInit(): void {
-    let totalCount: number = 0;
-    this.deviceService.getAll().subscribe(
-      device => {
-        // Count the number of folders and set chart
-        totalCount++;
-        this.donutChart.count = totalCount;
-
-        // Get StateType and convert to string 
-        const stateType: Device.StateType = Device.getStateType(device);
-        const state: string = Device.stateTypeToString(stateType);
-        const color: string = Device.stateTypeToColor(stateType);
-
-        // Check if state exists
-        let found: boolean = false;
-        this.states.forEach(s => {
-          if (s.label === state) {
-            s.count = s.count + 1;
-            found = true;
-          }
-        });
-
-        if (!found) {
-          this.states.push({ label: state, count: 1, color: color });
-        }
-
-        this.donutChart.updateData(this.states);
-      }
-    );
-  }
-}

src/app/charts/folder-chart/folder-chart.component.html

@@ -1,12 +0,0 @@
-<div class="{{elevation}} tui-card">
-    <div class="tui-card-title">{{title}}</div>
-    <div class="tui-card-content">
-        <div fxLayout="row" fxLayoutAlign="space-between stretch">
-            <app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title"></app-donut-chart>
-            <div class="items" fxLayout="column" fxLayoutAlign="start end" fxFlex="70">
-                <app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
-                </app-chart-item>
-            </div>
-        </div>
-    </div>
-</div>

src/app/charts/folder-chart/folder-chart.component.ts

@@ -1,59 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import Folder from '../../folder'
-import { cardElevation } from '../../style'
-import { FolderService } from 'src/app/services/folder.service';
-import { DonutChartComponent } from '../donut-chart/donut-chart.component';
-
-@Component({
-  selector: 'app-folder-chart',
-  templateUrl: './folder-chart.component.html',
-  styleUrls: ['./folder-chart.component.scss']
-})
-export class FolderChartComponent implements OnInit {
-  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
-  chartID: string = 'foldersChart';
-  states: { label: string, count: number, color: string }[] = [];
-  elevation: string = cardElevation;
-  title: string = "Folders";
-
-  constructor(private folderService: FolderService) { }
-
-  ngOnInit(): void {
-    // for (let state in Folder.StateType) { }
-  }
-
-  ngAfterViewInit() {
-    let totalCount: number = 0;
-    this.folderService.getAll().subscribe(
-      folder => {
-        // Count the number of folders and set chart
-        totalCount++;
-        this.donutChart.count = totalCount;
-
-        // Get StateType and convert to string 
-        const stateType: Folder.StateType = Folder.getStateType(folder);
-        const state: string = Folder.stateTypeToString(stateType);
-        const color: string = Folder.stateTypeToColor(stateType);
-
-        // Check if state exists
-        let found: boolean = false;
-        this.states.forEach(s => {
-          if (s.label === state) {
-            s.count = s.count + 1;
-            found = true;
-          }
-        });
-
-        if (!found) {
-          console.log(color, "look!!!")
-          this.states.push({ label: state, count: 1, color: color });
-        }
-
-        this.donutChart.updateData(this.states);
-      },
-      err => console.error('Observer got an error: ' + err),
-      () => {
-      }
-    );
-  }
-}

src/app/dashboard/dashboard.component.html

@@ -4,8 +4,8 @@
 <div fxLayout="column" fxLayoutGap="16px" class="grid-container">
   <h1>Tech UI</h1>
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
-    <app-folder-chart fxFlex="50"></app-folder-chart>
-    <app-device-chart fxFlex="50"></app-device-chart>
+    <app-chart [type]=folderChart fxFlex="50"></app-chart>
+    <app-chart [type]=deviceChart fxFlex="50"></app-chart>
   </div>
   <app-status-list gdArea="status-list"></app-status-list>
   <div></div>

src/app/dashboard/dashboard.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { SystemConfigService } from '../services/system-config.service';
+import { ChartType } from '../chart';
 
 @Component({
   selector: 'app-dashboard',
@@ -7,7 +8,8 @@ import { SystemConfigService } from '../services/system-config.service';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent {
-
+  folderChart: ChartType = ChartType.Folder;
+  deviceChart: ChartType = ChartType.Device;
 
   constructor(private systemConfigService: SystemConfigService) { }
 

src/styles.scss

@@ -87,7 +87,8 @@ html, body {
 
 .tui-card-title {
     padding: 16px 16px 0 16px;
-    font-size: mat-font-size($tech-ui-typography, subheading-2)
+    font-size: mat-font-size($tech-ui-typography, subheading-2);
+    color: #0891D1;
 }
 
 .tui-card-content {