Merge pull request #6 from owncast/gek/viewers-page-fixes

Admin viewers page fixes

web/pages/components/chart.tsx

@@ -1,6 +1,7 @@
 import { LineChart } from 'react-chartkick'
 import styles from '../../styles/styles.module.scss';
 import 'chart.js';
+import format from 'date-fns/format'
 
 interface TimedValue {
   time: Date;
@@ -19,7 +20,7 @@ function createGraphDataset(dataArray) {
   const dataValues = {};
   dataArray.forEach(item => {
     const dateObject = new Date(item.time);
-    const dateString = `${dateObject.getFullYear()  }-${  dateObject.getMonth()  }-${  dateObject.getDay()  } ${  dateObject.getHours()  }:${  dateObject.getMinutes()}`;
+    const dateString = format(dateObject, 'p P');
     dataValues[dateString] = item.value;
   })
   return dataValues;

web/pages/viewer-info.tsx

@@ -120,7 +120,7 @@ export default function ViewersOverTime() {
         />
       </Row>
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
-      <Table dataSource={clients} columns={columns} rowKey={(row) => row.userAgent} />
+      <Table dataSource={clients} columns={columns} rowKey={(row) => row.clientID} />
     </div>
   );
 }