Add title to donut chart and media queries

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

@@ -1,8 +1,8 @@
 <div class="{{elevation}} tui-card">
-    <div class="tui-card-title">Devices</div>
+    <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"></app-donut-chart>
+            <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>

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

@@ -14,6 +14,7 @@ export class DeviceChartComponent implements OnInit {
   chartID: string = 'devicesChart';
   elevation: string = cardElevation;
   states: { label: string, count: number, color: string }[] = [];
+  title: string = "Devices";
 
   constructor(private deviceService: DeviceService) { }
 

src/app/charts/donut-chart/donut-chart.component.html

@@ -1,4 +1,7 @@
-<div class="chart-container" fxLayout="column" fxLayoutAlign="space-around">
+<div class="chart-container">
     <canvas id={{elementID}} width="100px" height="100px"></canvas>
-    <div class="center">{{count}}</div>
+    <div class="center" fxLayout="column" fxLayoutAlign="center center">
+        <div class="count">{{count}}</div>
+        <div class="title">{{title}}</div>
+    </div>
 </div>

src/app/charts/donut-chart/donut-chart.component.scss

@@ -6,9 +6,38 @@
 
 .center {
     position: absolute;
-    left: 0;
+    top: 0; left: 0; bottom: 0; right: 0;
-    top: 40%;
+    width: 50%;
-    width: 100%;
+    height: 50%;
-    text-align: center;
+    overflow: auto;
-    font-size:1.8rem;
+    margin: auto;
+}
+
+.count {
+  font-size: calc(1rem + 0.625vw);
+}
+
+.title {
+  font-size: calc(0.5rem + 0.625vw);
+  display:none;
+}
+
+@media (max-width: 640px) {
+
+}
+@media (min-width: 640px) and (max-width: 1000px) {
+  .title {
+    display:none;
+   font-size: calc(0.35rem + 0.625vw);
+  }
+
+  .count {
+   font-size: calc(1.35rem + 0.625vw);
+  }
+}
+
+@media (min-width:1000px) {
+  .title {
+    display: inline;
+  }
 }

src/app/charts/donut-chart/donut-chart.component.ts

@@ -9,6 +9,7 @@ import { tooltip } from '../tooltip'
 })
 export class DonutChartComponent {
   @Input() elementID: string;
+  @Input() title: number;
   count: number;
 
   private canvas: any;

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

@@ -1,8 +1,8 @@
 <div class="{{elevation}} tui-card">
-    <div class="tui-card-title">Folders</div>
+    <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"></app-donut-chart>
+            <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>

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

@@ -14,6 +14,7 @@ export class FolderChartComponent implements OnInit {
   chartID: string = 'foldersChart';
   states: { label: string, count: number, color: string }[] = [];
   elevation: string = cardElevation;
+  title: string = "Folders";
 
   constructor(private folderService: FolderService) { }