determine chart color based on state type

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

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
         }]
       },

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

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) {

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

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";
+export const dataTableElevation: string = "mat-elevation-z0";
+
+export const colors: Map<string, string> = new Map([
+    ["blue", "#0891D1"],
+    ["yellow", "#FFC400"],
+    ["green", "#56C568"],
+    ["grey", "#DDDDDD"],
+    ["red", "#EB5757"]
+]);