From 7fed8334b98b1dca3af9c2a270835d90cf68aa08 Mon Sep 17 00:00:00 2001
From: Jesse Lucas <jesse@jesselucas.com>
Date: Mon, 30 Mar 2020 14:44:20 -0400
Subject: [PATCH] Use a smaller font when device or folder counts are above 4
 digits

---
 .../donut-chart/donut-chart.component.html    |  2 +-
 .../donut-chart/donut-chart.component.scss    | 23 +++++++++++--------
 .../donut-chart/donut-chart.component.ts      | 11 +++++++--
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/app/charts/donut-chart/donut-chart.component.html b/src/app/charts/donut-chart/donut-chart.component.html
index 3d7ae2b4f..83bc1ce1b 100644
--- a/src/app/charts/donut-chart/donut-chart.component.html
+++ b/src/app/charts/donut-chart/donut-chart.component.html
@@ -1,7 +1,7 @@
 <div class="chart-container">
     <canvas id={{elementID}} width="100px" height="100px"></canvas>
     <div class="center" fxLayout="column" fxLayoutAlign="center center">
-        <div class="count">{{count}}</div>
+        <div class="{{_countClass}}">{{_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 b8f62a322..1793f03ff 100644
--- a/src/app/charts/donut-chart/donut-chart.component.scss
+++ b/src/app/charts/donut-chart/donut-chart.component.scss
@@ -13,25 +13,30 @@
     margin: auto;
 }
 
-.count {
-  font-size: calc(1rem + 0.625vw);
-}
-
 .title {
   font-size: calc(0.5rem + 0.625vw);
   display:none;
 }
 
-@media (max-width: 640px) {
-
+.count-total {
+  font-size: calc(1rem + 0.625vw);
 }
-@media (min-width: 640px) and (max-width: 1000px) {
+
+.large-count-total {
+  font-size: calc(0.5rem + 0.625vw);
+}
+
+@media (max-width: 800px) {
+  .count-total {
+   font-size: calc(1.00rem + 0.625vw);
+  }
+}
+@media (min-width: 800px) and (max-width: 1000px) {
   .title {
-    display:none;
    font-size: calc(0.35rem + 0.625vw);
   }
 
-  .count {
+  .count-total {
    font-size: calc(1.35rem + 0.625vw);
   }
 }
diff --git a/src/app/charts/donut-chart/donut-chart.component.ts b/src/app/charts/donut-chart/donut-chart.component.ts
index d1f25b339..f652a851f 100644
--- a/src/app/charts/donut-chart/donut-chart.component.ts
+++ b/src/app/charts/donut-chart/donut-chart.component.ts
@@ -10,7 +10,14 @@ import { tooltip } from '../tooltip'
 export class DonutChartComponent {
   @Input() elementID: string;
   @Input() title: number;
-  count: number;
+  _count: number;
+  _countClass = "count-total";
+  set count(n: number) {
+    if (n >= 1000) { // use a smaller font
+      this._countClass = "large-count-total"
+    }
+    this._count = n;
+  }
 
   private canvas: any;
   private ctx: any;
@@ -50,7 +57,7 @@ export class DonutChartComponent {
         }]
       },
       options: {
-        cutoutPercentage: 75,
+        cutoutPercentage: 77,
         responsive: true,
         legend: {
           display: false