diff --git a/src/app/charts/device-chart/device-chart.component.ts b/src/app/charts/device-chart/device-chart.component.ts index eeba45c95..703515a29 100644 --- a/src/app/charts/device-chart/device-chart.component.ts +++ b/src/app/charts/device-chart/device-chart.component.ts @@ -13,7 +13,7 @@ export class DeviceChartComponent implements OnInit { @ViewChild(DonutChartComponent) donutChart: DonutChartComponent; chartID: string = 'devicesChart'; elevation: string = cardElevation; - states: { label: string, count: number }[] = []; + states: { label: string, count: number, color: string }[] = []; constructor(private deviceService: DeviceService) { } @@ -30,6 +30,7 @@ export class DeviceChartComponent implements OnInit { // 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; @@ -41,7 +42,7 @@ export class DeviceChartComponent implements OnInit { }); if (!found) { - this.states.push({ label: state, count: 1 }); + this.states.push({ label: state, count: 1, color: color }); } this.donutChart.updateData(this.states); diff --git a/src/app/charts/donut-chart/donut-chart.component.ts b/src/app/charts/donut-chart/donut-chart.component.ts index 25b483aa7..8755bf1d4 100644 --- a/src/app/charts/donut-chart/donut-chart.component.ts +++ b/src/app/charts/donut-chart/donut-chart.component.ts @@ -17,32 +17,17 @@ export class DonutChartComponent { constructor() { } - data(val: number[]) { - if (this.chart) { - val.forEach((v) => { - this.addData(v) - }); - } - } - - updateData(data: { label: string, count: number }[]): void { - //Using object destructuring + updateData(data: { label: string, count: number, color: string }[]): void { + // Using object destructuring for (let i = 0; i < data.length; i++) { let s = data[i]; this.chart.data.labels[i] = s.label; this.chart.data.datasets[0].data[i] = s.count; + this.chart.data.datasets[0].backgroundColor[i] = s.color; } this.chart.update(); } - addData(data: number): void { - // this.chart.data.labels.push(label); - this.chart.data.datasets.forEach((dataset) => { - dataset.data.push(data); - }); - this.chart.update(); - } - removeAllData(withAnimation: boolean): void { this.chart.data.labels.pop(); this.chart.data.datasets.forEach((dataset) => { @@ -59,11 +44,7 @@ export class DonutChartComponent { data: { datasets: [{ data: [], - backgroundColor: [ - '#56C568', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], + backgroundColor: [], borderWidth: 1 }] }, diff --git a/src/app/charts/folder-chart/folder-chart.component.ts b/src/app/charts/folder-chart/folder-chart.component.ts index f34a52396..de8a505ea 100644 --- a/src/app/charts/folder-chart/folder-chart.component.ts +++ b/src/app/charts/folder-chart/folder-chart.component.ts @@ -12,7 +12,7 @@ import { DonutChartComponent } from '../donut-chart/donut-chart.component'; export class FolderChartComponent implements OnInit { @ViewChild(DonutChartComponent) donutChart: DonutChartComponent; chartID: string = 'foldersChart'; - states: { label: string, count: number }[] = []; + states: { label: string, count: number, color: string }[] = []; elevation: string = cardElevation; constructor(private folderService: FolderService) { } @@ -32,6 +32,7 @@ export class FolderChartComponent implements OnInit { // 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; @@ -43,7 +44,8 @@ export class FolderChartComponent implements OnInit { }); if (!found) { - this.states.push({ label: state, count: 1 }); + console.log(color, "look!!!") + this.states.push({ label: state, count: 1, color: color }); } this.donutChart.updateData(this.states); diff --git a/src/app/device.ts b/src/app/device.ts index 72d3d47fc..aeb70cbe2 100644 --- a/src/app/device.ts +++ b/src/app/device.ts @@ -1,3 +1,5 @@ +import { colors } from './style'; + interface Device { deviceID: string; name: string; @@ -41,6 +43,31 @@ namespace Device { } } + /** + * stateTypeToColor looks up a hex color string based on StateType + * @param s StateType + */ + export function stateTypeToColor(s: StateType): string { + switch (s) { + case StateType.Insync: + return colors.get("green"); + case StateType.UnusedInsync: + return colors.get("grey"); + case StateType.Unknown: + return colors.get("grey"); + case StateType.Syncing: + return colors.get("blue"); + case StateType.Paused: + return colors.get("grey"); + case StateType.UnusedPaused: + return colors.get("grey"); + case StateType.Disconnected: + return colors.get("yellow"); + case StateType.UnusedDisconnected: + return colors.get("grey"); + } + } + export function getStateType(d: Device): StateType { // StateType Unknown is set in DeviceService if (d.state === StateType.Unknown) { diff --git a/src/app/folder.ts b/src/app/folder.ts index da217dc28..3015c0fd2 100644 --- a/src/app/folder.ts +++ b/src/app/folder.ts @@ -1,4 +1,5 @@ import Device from './device'; +import { colors } from './style'; interface Folder { id: string; @@ -63,7 +64,42 @@ namespace Folder { } /** - * getStatusType looks at a folder and determines the correct + * stateTypeToColor looks up a hex color string based on StateType + * @param s StateType + */ + export function stateTypeToColor(s: StateType): string { + switch (s) { + case StateType.Paused: + return colors.get("grey"); + case StateType.Unknown: + return colors.get("grey"); + case StateType.Unshared: + return colors.get("grey"); + case StateType.WaitingToSync: + return colors.get("yellow"); + case StateType.Stopped: + return colors.get("grey"); + case StateType.Scanning: + return colors.get("grey"); + case StateType.Idle: + return colors.get("green"); + case StateType.LocalAdditions: + return colors.get("grey"); + case StateType.WaitingToScan: + return colors.get("grey"); + case StateType.PreparingToSync: + return colors.get("grey"); + case StateType.Syncing: + return colors.get("blue"); + case StateType.OutOfSync: + return colors.get("grey"); + case StateType.FailedItems: + return colors.get("red"); + } + } + + /** + * getStateType looks at a folder and determines the correct * StateType to return * * Possible state values from API diff --git a/src/app/style.ts b/src/app/style.ts index 67db8a077..37f3aa670 100644 --- a/src/app/style.ts +++ b/src/app/style.ts @@ -1,3 +1,11 @@ // material design elevation for all dashboard components export const cardElevation: string = "mat-elevation-z2"; -export const dataTableElevation: string = "mat-elevation-z0"; \ No newline at end of file +export const dataTableElevation: string = "mat-elevation-z0"; + +export const colors: Map = new Map([ + ["blue", "#0891D1"], + ["yellow", "#FFC400"], + ["green", "#56C568"], + ["grey", "#DDDDDD"], + ["red", "#EB5757"] +]); \ No newline at end of file