create style.ts to set elevation for all dashboard components

src/app/chart/device-chart/device-chart.component.html

@@ -1 +1,7 @@
-<p>device-chart works!</p>
+<mat-card class="{{elevation}}">
+    <mat-card-title>Devices</mat-card-title>
+    <mat-card-content>
+        <app-donut-chart [elementID]=" chartID">
+        </app-donut-chart>
+    </mat-card-content>
+</mat-card>

src/app/chart/device-chart/device-chart.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { cardElevation } from '../../style';
 
 @Component({
   selector: 'app-device-chart',
@@ -6,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./device-chart.component.scss']
 })
 export class DeviceChartComponent implements OnInit {
+  chartID: string = 'devicesChart';
+  elevation: string = cardElevation;
 
   constructor() { }
 

src/app/chart/folder-chart/folder-chart.component.html

@@ -1 +1,6 @@
-<p>folder-chart works!</p>
+<mat-card class="{{elevation}}">
+    <mat-card-title>Folders</mat-card-title>
+    <mat-card-content>
+        <app-donut-chart [elementID]="chartID"></app-donut-chart>
+    </mat-card-content>
+</mat-card>

src/app/chart/folder-chart/folder-chart.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { SystemConfigService } from 'src/app/system-config.service';
+import { cardElevation } from '../../style'
 
 @Component({
   selector: 'app-folder-chart',
@@ -6,10 +8,17 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./folder-chart.component.scss']
 })
 export class FolderChartComponent implements OnInit {
+  chartID: string = 'foldersChart';
+  elevation: string = cardElevation;
 
-  constructor() { }
+  constructor(private systemConfigService: SystemConfigService) { }
 
   ngOnInit(): void {
+    this.systemConfigService.getFolders().subscribe(
+      data => {
+        console.log("char folder data", data)
+      }
+    );
   }
 
 }