display messages per second on dashboard

docs_test/src/assets/helpers.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
 export type DataPoint = {
-  timestamp: string; // ISO format
+  time: string // ISO format
+  timestamp: number; // epoch milliseconds
   value: number;
 };
 

docs_test/src/dashboard/components/MainGrid.tsx

@@ -95,7 +95,8 @@ export default function MainGrid() {
         if(payload.topic in topic_map) {
           const { update } = topic_map[payload.topic];
           const newPoint: DataPoint = {
-            timestamp: new Date().toISOString(),
+            time: new Date().toISOString(),
+            timestamp: Date.now(),
             value: d
           };
           update(current => [...current, newPoint])
@@ -228,10 +229,10 @@ export default function MainGrid() {
         <strong>up for</strong> {serverUptime}
       </Grid>
         <Grid size={{xs: 12, md: 6}}>
-          <SessionsChart title={'Sent Messages'} label={''} data={sent} isConnected={isConnected}/>
+          <SessionsChart title={'Sent Messages'} label={''} data={sent} isConnected={isConnected} isPerSecond/>
         </Grid>
         <Grid size={{xs: 12, md: 6}}>
-          <SessionsChart title={'Received Messages'} label={''} data={received} isConnected={isConnected}/>
+          <SessionsChart title={'Received Messages'} label={''} data={received} isConnected={isConnected} isPerSecond/>
         </Grid>
         <Grid size={{xs: 12, md: 6}}>
           <SessionsChart title={'Bytes Out'} label={'Bytes'} data={bytesOut} isConnected={isConnected}/>

docs_test/src/dashboard/components/SessionsChart.tsx

@@ -7,6 +7,7 @@
   import CountUp from 'react-countup';
   import type { DataPoint } from '../../assets/helpers.jsx';
   import {CircularProgress} from "@mui/material";
+  import {useRef} from "react";
 
   const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
@@ -117,6 +118,23 @@
 
   export default function SessionsChart(props: any) {
 
+    const lastCalc = useRef<number>(0);
+
+    const calc_per_second = (curValue: DataPoint, lastValue: DataPoint) => {
+      if(!props.isPerSecond) { return ''; }
+
+      if(!curValue || !lastValue) {
+        return '';
+      }
+
+      if(curValue.timestamp - lastValue.timestamp > 0) {
+        const per_second =  (curValue.value - lastValue.value) / ((curValue.timestamp - lastValue.timestamp) / 1000);
+        lastCalc.current = Math.trunc(per_second * 10) / 10;
+      }
+
+      return `${lastCalc.current} / sec`;
+    }
+
     return (
       <Card variant="outlined" sx={{ width: '100%' }}>
         <CardContent>
@@ -143,6 +161,9 @@
 
                 />} {props.label}
               </Typography>
+              <p>
+                { calc_per_second(props.data[props.data.length-1], props.data[props.data.length-2]) }
+              </p>
             </Stack>
           </Stack>
           { props.data.length < 2 ? <NoDataDisplay isConnected={props.isConnected}/> :