Combine folder and device chart component into chart component

This commit is contained in:
Jesse Lucas 2020-03-30 13:44:54 -04:00
parent 933a57af7a
commit 6af2657d7e
14 changed files with 111 additions and 164 deletions

View File

@ -18,8 +18,6 @@ import { StatusListComponent } from './lists/status-list/status-list.component';
import { FolderListComponent } from './lists/folder-list/folder-list.component'; import { FolderListComponent } from './lists/folder-list/folder-list.component';
import { DeviceListComponent } from './lists/device-list/device-list.component'; import { DeviceListComponent } from './lists/device-list/device-list.component';
import { DonutChartComponent } from './charts/donut-chart/donut-chart.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 { DashboardComponent } from './dashboard/dashboard.component';
import { ListToggleComponent } from './list-toggle/list-toggle.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 { deviceID } from './api-utils';
import { environment } from '../environments/environment'; import { environment } from '../environments/environment';
import { ChartItemComponent } from './charts/chart-item/chart-item.component'; import { ChartItemComponent } from './charts/chart-item/chart-item.component';
import { ChartComponent } from './charts/chart/chart.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -39,8 +38,7 @@ import { ChartItemComponent } from './charts/chart-item/chart-item.component';
ListToggleComponent, ListToggleComponent,
DashboardComponent, DashboardComponent,
DonutChartComponent, DonutChartComponent,
DeviceChartComponent, ChartComponent,
FolderChartComponent,
ChartItemComponent, ChartItemComponent,
], ],
imports: [ imports: [

4
src/app/chart.ts Normal file
View File

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

View File

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

View File

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

View File

@ -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),
() => {
}
);
}
}

View File

@ -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();
});
});

View File

@ -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);
}
);
}
}

View File

@ -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>

View File

@ -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),
() => {
}
);
}
}

View File

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

View File

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

View File

@ -87,7 +87,8 @@ html, body {
.tui-card-title { .tui-card-title {
padding: 16px 16px 0 16px; 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 { .tui-card-content {