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