New: Summary Stats

frontend/src/Indexer/Stats/IndexerStats.css

@@ -8,6 +8,11 @@
   width: 50%;
 }
 
+.quarterWidthChart {
+  display: inline-block;
+  width: 25%;
+}
+
 .chartContainer {
   margin: 5px;
   padding: 15px 25px;
@@ -16,12 +21,32 @@
   background-color: var(--chartBackgroundColor);
 }
 
+.statContainer {
+  margin: 5px;
+  padding: 15px 25px;
+  height: 150px;
+  border-radius: 10px;
+  background-color: var(--chartBackgroundColor);
+}
+
+.statTitle {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.stat {
+  font-weight: bold;
+  font-size: 60px;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .halfWidthChart {
     display: inline-block;
-    margin: 5px;
-    padding: 15px 25px;
     width: 100%;
-    height: 300px;
+  }
+
+  .quarterWidthChart {
+    display: inline-block;
+    width: 100%;
   }
 }

frontend/src/Indexer/Stats/IndexerStats.css.d.ts

@@ -4,6 +4,10 @@ interface CssExports {
   'chartContainer': string;
   'fullWidthChart': string;
   'halfWidthChart': string;
+  'quarterWidthChart': string;
+  'stat': string;
+  'statContainer': string;
+  'statTitle': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -24,6 +24,7 @@ import {
   IndexerStatsIndexer,
   IndexerStatsUserAgent,
 } from 'typings/IndexerStats';
+import abbreviateNumber from 'Utilities/Number/abbreviateNumber';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
 import IndexerStatsFilterModal from './IndexerStatsFilterModal';
@@ -201,6 +202,16 @@ function IndexerStats() {
   );
 
   const isLoaded = !error && isPopulated;
+  const indexerCount = item.indexers?.length ?? 0;
+  const userAgentCount = item.userAgents?.length ?? 0;
+  const queryCount =
+    item.indexers?.reduce((total, indexer) => {
+      return total + indexer.numberOfQueries;
+    }, 0) ?? 0;
+  const grabCount =
+    item.indexers?.reduce((total, indexer) => {
+      return total + indexer.numberOfGrabs;
+    }, 0) ?? 0;
 
   return (
     <PageContent>
@@ -228,6 +239,40 @@ function IndexerStats() {
 
         {isLoaded && (
           <div>
+            <div className={styles.quarterWidthChart}>
+              <div className={styles.statContainer}>
+                <div className={styles.statTitle}>
+                  {translate('ActiveIndexers')}
+                </div>
+                <div className={styles.stat}>{indexerCount}</div>
+              </div>
+            </div>
+            <div className={styles.quarterWidthChart}>
+              <div className={styles.statContainer}>
+                <div className={styles.statTitle}>
+                  {translate('TotalQueries')}
+                </div>
+                <div className={styles.stat}>
+                  {abbreviateNumber(queryCount)}
+                </div>
+              </div>
+            </div>
+            <div className={styles.quarterWidthChart}>
+              <div className={styles.statContainer}>
+                <div className={styles.statTitle}>
+                  {translate('TotalGrabs')}
+                </div>
+                <div className={styles.stat}>{abbreviateNumber(grabCount)}</div>
+              </div>
+            </div>
+            <div className={styles.quarterWidthChart}>
+              <div className={styles.statContainer}>
+                <div className={styles.statTitle}>
+                  {translate('ActiveApps')}
+                </div>
+                <div className={styles.stat}>{userAgentCount}</div>
+              </div>
+            </div>
             <div className={styles.fullWidthChart}>
               <div className={styles.chartContainer}>
                 <BarChart