tables

web/pages/components/connected-clients.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import { Table } from 'antd';
+
 import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from '../utils/apis';
 
 export default function HardwareInfo() {
@@ -16,12 +18,10 @@ geo data looks like this
   const getInfo = async () => {
     try {
       const result = await fetchData(CONNECTED_CLIENTS);
-      console.log("================ result", result)
-
-      setClients({ ...result });
+      setClients(result);
 
     } catch (error) {
-      setClients({ ...clients, message: error.message });
+      console.log("==== error", error)
     }
   };
   
@@ -36,15 +36,46 @@ geo data looks like this
       clearInterval(getStatusIntervalId);
     }
   }, []);
-
+  
+  const columns = [
+    {
+      title: 'User name',
+      dataIndex: 'username',
+      key: 'username',
+      render: username => username || '-',
+      sorter: (a, b) => a.username - b.username,
+      sortDirections: ['descend', 'ascend'],  
+    },
+    {
+      title: 'Messages sent',
+      dataIndex: 'messageCount',
+      key: 'messageCount',
+      sorter: (a, b) => a.messageCount - b.messageCount,
+      sortDirections: ['descend', 'ascend'],  
+    },
+    {
+      title: 'Connected Time',
+      dataIndex: 'connectedAt',
+      key: 'connectedAt',
+      render: time => (Date.now() - (new Date(time).getTime())) / 1000 / 60,
+    },
+    {
+      title: 'User Agent',
+      dataIndex: 'userAgent',
+      key: 'userAgent', 
+    },
+    {
+      title: 'Location',
+      dataIndex: 'geo',
+      key: 'geo', 
+      render: geo => geo && `${geo.regionName}, ${geo.countryCode}`,
+    },
+  ];
+  
   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>
+      <Table dataSource={clients} columns={columns} />;
     </div>
   );
 }

web/pages/components/viewer-info.tsx

@@ -3,7 +3,6 @@ import {timeFormat} from 'd3-time-format';
 import { LineChart, XAxis, YAxis, Line, Tooltip } from 'recharts';
 import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
 
-
 const FETCH_INTERVAL = 5 * 60 * 1000; // 5 mins
 
 export default function ViewersOverTime() {
@@ -13,7 +12,6 @@ export default function ViewersOverTime() {
     try {
       const result = await fetchData(VIEWERS_OVER_TIME);
       setViewerInfo(result);
-
     } catch (error) {
       console.log("==== error", error)
     }
@@ -33,22 +31,41 @@ export default function ViewersOverTime() {
 
   const timeFormatter = (tick) => {return timeFormat('%H:%M:%S')(new Date(tick));};
 
+  const CustomizedTooltip = (props) => {
+    const { active, payload, label } = props;
+    if (active) {
+      const numViewers = payload && payload[0] && payload[0].value;
+      const time = timeFormatter(label);
+      const message = `${numViewers} viewer(s) at ${time}`;
+      return (
+        <div className="custom-tooltip">
+          <p className="label">{message}</p>
+        </div>
+      );
+    }
+    return null;
+  };
 
 
   return (
-    <div style={{backgroundColor: '#333'}}>
-      <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)}
+    <div>
+      <h2>Current Viewers</h2>
+      <div className="chart-container">
+        <LineChart width={800} height={400} data={viewerInfo}>
+          <XAxis dataKey="time" tickFormatter={timeFormatter}/>
+          <YAxis dataKey="value"/>
+          <Tooltip
+            content={<CustomizedTooltip />}
+          />
+          <Line
+            type="monotone"
+            dataKey="value"
+            stroke="#ff84d8" 
+            dot={{ stroke: 'red', strokeWidth: 2 }} 
+          />
+        </LineChart>
       </div>
 
-      <LineChart width={800} height={400} data={viewerInfo}>
-        <XAxis dataKey="time" tickFormatter={timeFormatter}/>
-        <YAxis dataKey="value"/>
-        <Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} />
-        <Line type="monotone" dataKey="value" stroke="#ff84d8" dot={{ stroke: 'red', strokeWidth: 2 }} />
-      </LineChart>
 
     </div>
   );