From 933a57af7a36bd080089c11cdec84b49ec3b04ee Mon Sep 17 00:00:00 2001
From: Jesse Lucas <jesse@jesselucas.com>
Date: Mon, 30 Mar 2020 11:54:54 -0400
Subject: [PATCH] Add title to donut chart and media queries

---
 .../device-chart/device-chart.component.html  |  4 +-
 .../device-chart/device-chart.component.ts    |  1 +
 .../donut-chart/donut-chart.component.html    |  7 +++-
 .../donut-chart/donut-chart.component.scss    | 39 ++++++++++++++++---
 .../donut-chart/donut-chart.component.ts      |  1 +
 .../folder-chart/folder-chart.component.html  |  4 +-
 .../folder-chart/folder-chart.component.ts    |  1 +
 7 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/app/charts/device-chart/device-chart.component.html b/src/app/charts/device-chart/device-chart.component.html
index f8225dd75..d4c1b7cc5 100644
--- a/src/app/charts/device-chart/device-chart.component.html
+++ b/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>
diff --git a/src/app/charts/device-chart/device-chart.component.ts b/src/app/charts/device-chart/device-chart.component.ts
index 703515a29..764d025e0 100644
--- a/src/app/charts/device-chart/device-chart.component.ts
+++ b/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) { }
 
diff --git a/src/app/charts/donut-chart/donut-chart.component.html b/src/app/charts/donut-chart/donut-chart.component.html
index 88e37515c..3d7ae2b4f 100644
--- a/src/app/charts/donut-chart/donut-chart.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/charts/donut-chart/donut-chart.component.scss b/src/app/charts/donut-chart/donut-chart.component.scss
index 30348140f..b8f62a322 100644
--- a/src/app/charts/donut-chart/donut-chart.component.scss
+++ b/src/app/charts/donut-chart/donut-chart.component.scss
@@ -6,9 +6,38 @@
 
 .center {
     position: absolute;
-    left: 0;
-    top: 40%;
-    width: 100%;
-    text-align: center;
-    font-size:1.8rem;
+    top: 0; left: 0; bottom: 0; right: 0;
+    width: 50%;
+    height: 50%;
+    overflow: auto;
+    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;
+  }
 }
\ No newline at end of file
diff --git a/src/app/charts/donut-chart/donut-chart.component.ts b/src/app/charts/donut-chart/donut-chart.component.ts
index 4d7268feb..d1f25b339 100644
--- a/src/app/charts/donut-chart/donut-chart.component.ts
+++ b/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;
diff --git a/src/app/charts/folder-chart/folder-chart.component.html b/src/app/charts/folder-chart/folder-chart.component.html
index 6a8b23725..d4c1b7cc5 100644
--- a/src/app/charts/folder-chart/folder-chart.component.html
+++ b/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>
diff --git a/src/app/charts/folder-chart/folder-chart.component.ts b/src/app/charts/folder-chart/folder-chart.component.ts
index de8a505ea..0e42ea68f 100644
--- a/src/app/charts/folder-chart/folder-chart.component.ts
+++ b/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) { }