From 2cbdc86eeaddee99fe9eeed68a2a871f39275295 Mon Sep 17 00:00:00 2001
From: Andrew Mirsky <andrew@mirsky.net>
Date: Sun, 22 Jun 2025 13:03:02 -0400
Subject: [PATCH] adding number of clients connected

---
 docs_test/src/dashboard/components/MainGrid.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs_test/src/dashboard/components/MainGrid.tsx b/docs_test/src/dashboard/components/MainGrid.tsx
index b27b2ee..471fb50 100644
--- a/docs_test/src/dashboard/components/MainGrid.tsx
+++ b/docs_test/src/dashboard/components/MainGrid.tsx
@@ -20,6 +20,7 @@ export default function MainGrid() {
   const [received, setReceived] = useState<DataPoint[]>([]);
   const [bytesIn, setBytesIn] = useState<DataPoint[]>([]);
   const [bytesOut, setBytesOut] = useState<DataPoint[]>([]);
+  const [clientsConnected, setClientsConnected] = useState<DataPoint[]>([]);
   const [serverStart, setServerStart] = useState<string>('');
   const [serverUptime, setServerUptime] = useState<string>('');
 
@@ -63,6 +64,7 @@ export default function MainGrid() {
       mqttSubscribe('$SYS/broker/load/bytes/#');
       mqttSubscribe('$SYS/broker/uptime/formatted');
       mqttSubscribe('$SYS/broker/uptime');
+      mqttSubscribe('$SYS/broker/clients/connected');
     }
   }, [isConnected, mqttSubscribe]);
 
@@ -97,6 +99,13 @@ export default function MainGrid() {
             value: d
           }
           setBytesOut(bytesOut => [...bytesOut, newPoint]);
+        } else if (payload.topic === '$SYS/broker/clients/connected') {
+          const newPoint: DataPoint = {
+            timestamp: new Date().toISOString(),
+            value: d
+          }
+          setClientsConnected(clientsConnected => [...clientsConnected, newPoint]);
+
         } else if (payload.topic === '$SYS/broker/uptime/formatted') {
           const dt = new Date(d + "Z");
           setServerStart(dt.toLocaleString());
@@ -237,6 +246,9 @@ export default function MainGrid() {
         <Grid size={{xs: 12, md: 6}}>
           <SessionsChart title={'Bytes In'} label={'Bytes'} data={bytesIn} isConnected={isConnected}/>
         </Grid>
+        <Grid size={{xs: 12, md: 6}}>
+          <SessionsChart title={'Clients Connected'} label={''} data={clientsConnected} isConnected={isConnected}/>
+        </Grid>
       </Grid>
 
       <Grid container spacing={2} columns={12}>