From 3585c7635b9d08c6ea9b05b8c720e8c40bb4de7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Gessler?=
 <36667834+gessfred@users.noreply.github.com>
Date: Thu, 28 Sep 2023 22:00:47 +0000
Subject: [PATCH] Plot event count

---
 web/src/pages/Insights.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/Insights.js b/web/src/pages/Insights.js
index cfb5f61..ad839ea 100644
--- a/web/src/pages/Insights.js
+++ b/web/src/pages/Insights.js
@@ -39,29 +39,27 @@ export const options = {
   },
 }
 
-async function getStats(api) {
-  const stats = await api.get("/api/stats/typing")
-  return JSON.parse(stats.stats)
-}
-
 function TypingDashboard({ data }) {
+  console.log("typing dashboard", data && data.length)
   if(!data || data.length === 0) return <span></span>
-  console.log(data)
+  console.log(data.map(x => x.event_count))
   const chartData = data.map((item) => ({
     x: new Date(item.window_start),
     y: item.event_count,
   }));
-
+//labels: ['Jun', 'Jul', 'Aug'], in data
   return (
     <Line
-      options={options}
       data={{
-        labels: ['Jun', 'Jul', 'Aug'],
+        labels: data.map((x, i) => i),
         datasets: [
           {
             id: 1,
             label: '',
-            data: [5, 6, 7],
+            data: data.map(x => x.event_count).reverse(),
+            borderColor: 'rgba(75,192,192,1)', // Color of plot line
+            borderWidth: 2,
+            tension: 0.4
           }
         ],
       }}
@@ -74,7 +72,7 @@ export function Insights({show}) {
   const [typingData, setTypingData] = useState([])
   useEffect(() => {
     if(api) {
-      api.typingStats().then(console.log).catch(err => {})
+      api.typingStats().then(setTypingData).catch(err => {})
     }
   }, [isAuthenticated])
   console.log(typingData)