From 69f8efba94ad06e3aadff59a3420c175d5beb68f Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 15 Dec 2020 19:14:42 -0800
Subject: [PATCH 1/3] Use unique clientID as the row key. Closes
 https://github.com/owncast/owncast/issues/452

---
 web/pages/viewer-info.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/pages/viewer-info.tsx b/web/pages/viewer-info.tsx
index a264ca5b6..70edf11fd 100644
--- a/web/pages/viewer-info.tsx
+++ b/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>
   );
 }

From 59eb6eaa168e63ba88eeb40273b2869429dee8fe Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 15 Dec 2020 19:40:27 -0800
Subject: [PATCH 2/3] Do not format date, just pass raw date object to chart.
 Closes https://github.com/owncast/owncast/issues/459

---
 web/pages/components/chart.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx
index 8d8f7609b..3efae8ecc 100644
--- a/web/pages/components/chart.tsx
+++ b/web/pages/components/chart.tsx
@@ -19,8 +19,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()}`;
-    dataValues[dateString] = item.value;
+    dataValues[dateObject] = item.value;
   })
   return dataValues;
 }

From b89cc6fb26716c551db51f7507580cc800b84d6a Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Tue, 15 Dec 2020 19:52:01 -0800
Subject: [PATCH 3/3] Fine, use a string instead of date object

---
 web/pages/components/chart.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx
index 3efae8ecc..019411d1f 100644
--- a/web/pages/components/chart.tsx
+++ b/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,8 @@ function createGraphDataset(dataArray) {
   const dataValues = {};
   dataArray.forEach(item => {
     const dateObject = new Date(item.time);
-    dataValues[dateObject] = item.value;
+    const dateString = format(dateObject, 'p P');
+    dataValues[dateString] = item.value;
   })
   return dataValues;
 }