From 6af2657d7e315e1f75802c9a91575832e2996276 Mon Sep 17 00:00:00 2001 From: Jesse Lucas Date: Mon, 30 Mar 2020 13:44:54 -0400 Subject: [PATCH] Combine folder and device chart component into chart component --- src/app/app.module.ts | 6 +- src/app/chart.ts | 4 + .../chart.component.html} | 2 +- .../chart.component.scss} | 0 .../chart.component.spec.ts} | 12 +-- src/app/charts/chart/chart.component.ts | 91 +++++++++++++++++++ .../device-chart.component.spec.ts | 25 ----- .../device-chart/device-chart.component.ts | 53 ----------- .../folder-chart/folder-chart.component.html | 12 --- .../folder-chart/folder-chart.component.scss | 0 .../folder-chart/folder-chart.component.ts | 59 ------------ src/app/dashboard/dashboard.component.html | 4 +- src/app/dashboard/dashboard.component.ts | 4 +- src/styles.scss | 3 +- 14 files changed, 111 insertions(+), 164 deletions(-) create mode 100644 src/app/chart.ts rename src/app/charts/{device-chart/device-chart.component.html => chart/chart.component.html} (89%) rename src/app/charts/{device-chart/device-chart.component.scss => chart/chart.component.scss} (100%) rename src/app/charts/{folder-chart/folder-chart.component.spec.ts => chart/chart.component.spec.ts} (53%) create mode 100644 src/app/charts/chart/chart.component.ts delete mode 100644 src/app/charts/device-chart/device-chart.component.spec.ts delete mode 100644 src/app/charts/device-chart/device-chart.component.ts delete mode 100644 src/app/charts/folder-chart/folder-chart.component.html delete mode 100644 src/app/charts/folder-chart/folder-chart.component.scss delete mode 100644 src/app/charts/folder-chart/folder-chart.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 289a3ec0a..addad321b 100644 --- a/src/app/app.module.ts +++ b/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: [ diff --git a/src/app/chart.ts b/src/app/chart.ts new file mode 100644 index 000000000..b6145574c --- /dev/null +++ b/src/app/chart.ts @@ -0,0 +1,4 @@ +export const enum ChartType { + Folder = 0, + Device +} \ No newline at end of file diff --git a/src/app/charts/device-chart/device-chart.component.html b/src/app/charts/chart/chart.component.html similarity index 89% rename from src/app/charts/device-chart/device-chart.component.html rename to src/app/charts/chart/chart.component.html index d4c1b7cc5..3b741f09c 100644 --- a/src/app/charts/device-chart/device-chart.component.html +++ b/src/app/charts/chart/chart.component.html @@ -1,5 +1,5 @@
-
{{title}}
+
{{title | uppercase}}
diff --git a/src/app/charts/device-chart/device-chart.component.scss b/src/app/charts/chart/chart.component.scss similarity index 100% rename from src/app/charts/device-chart/device-chart.component.scss rename to src/app/charts/chart/chart.component.scss diff --git a/src/app/charts/folder-chart/folder-chart.component.spec.ts b/src/app/charts/chart/chart.component.spec.ts similarity index 53% rename from src/app/charts/folder-chart/folder-chart.component.spec.ts rename to src/app/charts/chart/chart.component.spec.ts index 1a9754940..4bfa61135 100644 --- a/src/app/charts/folder-chart/folder-chart.component.spec.ts +++ b/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; +describe('ChartComponent', () => { + let component: ChartComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ FolderChartComponent ] + declarations: [ ChartComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(FolderChartComponent); + fixture = TestBed.createComponent(ChartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/charts/chart/chart.component.ts b/src/app/charts/chart/chart.component.ts new file mode 100644 index 000000000..32d1c3bcb --- /dev/null +++ b/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), + () => { + } + ); + } +} \ No newline at end of file diff --git a/src/app/charts/device-chart/device-chart.component.spec.ts b/src/app/charts/device-chart/device-chart.component.spec.ts deleted file mode 100644 index 9f40493dc..000000000 --- a/src/app/charts/device-chart/device-chart.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DeviceChartComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DeviceChartComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/charts/device-chart/device-chart.component.ts b/src/app/charts/device-chart/device-chart.component.ts deleted file mode 100644 index 764d025e0..000000000 --- a/src/app/charts/device-chart/device-chart.component.ts +++ /dev/null @@ -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); - } - ); - } -} diff --git a/src/app/charts/folder-chart/folder-chart.component.html b/src/app/charts/folder-chart/folder-chart.component.html deleted file mode 100644 index d4c1b7cc5..000000000 --- a/src/app/charts/folder-chart/folder-chart.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
-
{{title}}
-
-
- -
- - -
-
-
-
\ No newline at end of file diff --git a/src/app/charts/folder-chart/folder-chart.component.scss b/src/app/charts/folder-chart/folder-chart.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/charts/folder-chart/folder-chart.component.ts b/src/app/charts/folder-chart/folder-chart.component.ts deleted file mode 100644 index 0e42ea68f..000000000 --- a/src/app/charts/folder-chart/folder-chart.component.ts +++ /dev/null @@ -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), - () => { - } - ); - } -} \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 434d48291..96df08d62 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -4,8 +4,8 @@

Tech UI

- - + +
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index ef4394024..30d8f6729 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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) { } diff --git a/src/styles.scss b/src/styles.scss index 8ab16a842..08d859424 100644 --- a/src/styles.scss +++ b/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 {