add notes; remove victory charts, try recharts

web/pages/_app.tsx

@@ -1,5 +1,8 @@
-import 'antd/dist/antd.css';
-import '../styles/globals.scss'
+// import 'antd/dist/antd.css';
+// import '../styles/globals.scss'
+
+import 'antd/dist/antd.dark.css';
+import 'antd/dist/antd.compact.css';
 
 import { AppProps } from 'next/app'
 

web/pages/components/connected-clients.tsx

@@ -4,10 +4,19 @@ import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from '../utils/apis';
 export default function HardwareInfo() {
   const [clients, setClients] = useState({});
 
+/*
+geo data looks like this
+  "geo": {
+    "countryCode": "US",
+    "regionName": "California",
+    "timeZone": "America/Los_Angeles"
+  }
+*/
+
   const getInfo = async () => {
     try {
       const result = await fetchData(CONNECTED_CLIENTS);
-      console.log("viewers result", result)
+      console.log("================ result", result)
 
       setClients({ ...result });
 
@@ -31,6 +40,8 @@ export default function HardwareInfo() {
   return (
     <div>
       <h2>Connected Clients</h2>
+      <p>a table of info..</p>
+      <p>who's watching, how long they've been there, have they chatted? where they from?</p>
       <div style={{border: '1px solid purple', height: '300px', width: '100%', overflow:'auto'}}>
         {JSON.stringify(clients)}
       </div>

web/pages/components/hardware-info.tsx

@@ -20,7 +20,7 @@ export default function HardwareInfo() {
     let getStatusIntervalId = null;
 
     getHardwareStatus();
-    getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL);
+    getStatusIntervalId = setInterval(getHardwareStatus, FETCH_INTERVAL); //runs every 1 min.
   
     // returned function will be called on component unmount 
     return () => {
@@ -31,6 +31,8 @@ export default function HardwareInfo() {
   return (
     <div>
       <h2>Hardware Info</h2>
+      <p>cpu:[], disk: [], memory: [];  value = %age.</p>
+      <p>the times should be the same for each, though milliseconds differ</p>
       <div style={{border: '1px solid blue', height: '300px', width: '100%', overflow:'auto'}}>
         {JSON.stringify(hardwareStatus)}
       </div>

web/pages/components/viewer-info.tsx

@@ -1,18 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import { VIEWERS_OVER_TIME, fetchData, FETCH_INTERVAL } from '../utils/apis';
+import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
 
-export default function HardwareInfo() {
-  const [viewerInfo, setViewerInfo] = useState({});
+
+const FETCH_INTERVAL = 5 * 60 * 1000; // 5 mins
+
+export default function ViewersOverTime() {
+  const [viewerInfo, setViewerInfo] = useState([]);
 
   const getInfo = async () => {
     try {
       const result = await fetchData(VIEWERS_OVER_TIME);
       console.log("viewers result", result)
 
-      setViewerInfo({ ...result });
+      setViewerInfo(result);
 
     } catch (error) {
-      setViewerInfo({ ...viewerInfo, message: error.message });
+      console.log("==== error", error)
+      // setViewerInfo({ ...viewerInfo, message: error.message });
     }
   };
   
@@ -28,11 +32,18 @@ export default function HardwareInfo() {
     }
   }, []);
 
+
+  const formattedData = viewerInfo.map(viewer => ({
+    x: (new Date(viewer.time)).toLocaleTimeString(),
+    y: viewer.value,
+  }));
+
   return (
     <div>
       <h2>Viewers over time</h2>
+      <p>Time on X axis, # Viewer on Y</p>
       <div style={{border: '1px solid red', height: '300px', width: '100%', overflow:'auto'}}>
-        {JSON.stringify(viewerInfo)}
+        {JSON.stringify(formattedData)}
       </div>
     </div>
   );

web/pages/home.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import BroadcastInfo from './components/broadcast-info';
 import HardwareInfo from './components/hardware-info';
 import ViewerInfo from './components/viewer-info';
+import ServerConfig from './components/server-config';
 import ConnectedClients from './components/connected-clients';
 
 export default function HomeView(props) {
@@ -10,10 +11,11 @@ export default function HomeView(props) {
 
   const broadcastDetails = broadcastActive ? (
     <>
-      <BroadcastInfo {...broadcaster} />
-      <HardwareInfo />
+      {/* <BroadcastInfo {...broadcaster} />
+      <HardwareInfo /> */}
       <ViewerInfo />
-      <ConnectedClients />
+      {/* <ConnectedClients />
+      <ServerConfig /> */}
     </>
   ) : null;