Use a smaller font when device or folder counts are above 4 digits

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>

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

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