Display windowed time series viewer metrics (#454)

* WIP displaying windowed time series viewer metrics. Closes https://github.com/owncast/owncast/issues/1478

* Remove unused import

web/pages/viewer-info.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Row, Col, Typography } from 'antd';
-import { UserOutlined } from '@ant-design/icons';
+import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
+import { DownOutlined, UserOutlined } from '@ant-design/icons';
+import { getUnixTime, sub } from 'date-fns';
 import Chart from '../components/chart';
 import StatisticItem from '../components/statistic';
 import ViewerTable from '../components/viewer-table';
@@ -13,15 +14,34 @@ const FETCH_INTERVAL = 60 * 1000; // 1 min
 
 export default function ViewersOverTime() {
   const context = useContext(ServerStatusContext);
-  const { online, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } = context || {};
+  const { online, broadcaster, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } =
+    context || {};
+  let streamStart;
+  if (broadcaster && broadcaster.time) {
+    streamStart = new Date(broadcaster.time);
+  }
+
+  const times = [
+    { title: 'Current stream', start: streamStart },
+    { title: 'Last 12 hours', start: sub(new Date(), { hours: 12 }) },
+    { title: 'Last 24 hours', start: sub(new Date(), { hours: 24 }) },
+    { title: 'Last 7 days', start: sub(new Date(), { days: 7 }) },
+    { title: 'Last 30 days', start: sub(new Date(), { days: 30 }) },
+    { title: 'Last 3 months', start: sub(new Date(), { months: 3 }) },
+    { title: 'Last 6 months', start: sub(new Date(), { months: 6 }) },
+  ];
 
+  const [loadingChart, setLoadingChart] = useState(true);
   const [viewerInfo, setViewerInfo] = useState([]);
   const [viewerDetails, setViewerDetails] = useState([]);
+  const [timeWindowStart, setTimeWindowStart] = useState(times[1]);
 
   const getInfo = async () => {
     try {
-      const result = await fetchData(VIEWERS_OVER_TIME);
+      const url = `${VIEWERS_OVER_TIME}?windowStart=${getUnixTime(timeWindowStart.start)}`;
+      const result = await fetchData(url);
       setViewerInfo(result);
+      setLoadingChart(false);
     } catch (error) {
       console.log('==== error', error);
     }
@@ -47,11 +67,28 @@ export default function ViewersOverTime() {
     }
 
     return () => [];
-  }, [online]);
+  }, [online, timeWindowStart]);
 
-  if (!viewerInfo.length) {
-    return 'no info';
-  }
+  const onTimeWindowSelect = ({ key }) => {
+    setTimeWindowStart(times[key]);
+  };
+
+  const menu = (
+    <Menu>
+      {online && streamStart && (
+        <Menu.Item key="0" onClick={onTimeWindowSelect}>
+          {times[0].title}
+        </Menu.Item>
+      )}
+      {times.slice(1).map((time, index) => (
+        // The array is hard coded, so it's safe to use the index as a key.
+        // eslint-disable-next-line react/no-array-index-key
+        <Menu.Item key={index + 1} onClick={onTimeWindowSelect}>
+          {time.title}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
 
   return (
     <>
@@ -82,9 +119,30 @@ export default function ViewersOverTime() {
           />
         </Col>
       </Row>
+      <Dropdown overlay={menu} trigger={['click']}>
+        <button
+          type="button"
+          style={{ float: 'right', background: 'transparent', border: 'unset' }}
+        >
+          {timeWindowStart.title} <DownOutlined />
+        </button>
+      </Dropdown>
+      {viewerInfo.length > 0 && (
+        <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="viewers" />
+      )}
 
-      <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
       <ViewerTable data={viewerDetails} />
+
+      <Spin spinning={loadingChart}>
+        {viewerInfo.length === 0 && (
+          <Alert
+            banner
+            message="Please wait"
+            description="No viewer data has been collected yet."
+            type="info"
+          />
+        )}
+      </Spin>
     </>
   );
 }