24 hour data + refresh button

emeraldwalk · Apr 4, 2024 · 8778e48 · 8778e48
1 parent 45de332
commit 8778e48
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/index.css b/index.css
@@ -1,7 +1,23 @@
+body {
+  margin: 0;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
 .chart {
-  width: 100vw;
+  width: 100%;
   height: 50vh;
 }
 .table {
   height: 300px;
+  width: 100%;
+}
+.button-link {
+  color: #555;
+  font-size: 3rem;
+  line-height: 2rem;
+  margin-right: 10px;
+  text-decoration: none;
 }
diff --git a/index.html b/index.html
@@ -31,7 +31,10 @@
     </script>
   </head>
   <body>
-    <div id="table" class="table"></div>
-    <div id="chart" class="chart"></div>
+    <div class="container">
+      <a class="button-link" href=".">&#x21BB</a>
+      <div id="table" class="table"></div>
+      <div id="chart" class="chart"></div>
+    </div>
   </body>
 </html>
diff --git a/index.mjs b/index.mjs
@@ -8,28 +8,44 @@ const SENSOR_LABELS = {
 }
 
 async function fetchData(pageNumber = 1) {
-  // const since = new Date()
-  // since.setDate(since.getDate() - 1)
-  // const sinceStr = since.toISOString() // .replace('T', ' ').substring(0, 16) //.split('T')[0]
-  // console.log({ sinceStr })
+  const now = new Date()
+  const since = new Date(now)
+  since.setHours(since.getHours() - 24)
+  const sinceStr = since.toISOString().replace('T', ' ') // .substring(0, 16) //.split('T')[0]
+  console.log({ now: now.toISOString(), sinceStr })
 
-  const url = `https://ball-started.pockethost.io/api/collections/sensor/records?page=${pageNumber}&perPage=500&sort=-created`
-  //&filter=${encodeURIComponent(
-  //   `created>='${sinceStr}'`,
-  // )}`
+  const url = `https://ball-started.pockethost.io/api/collections/sensor/records?page=${pageNumber}&perPage=500&sort=-created&filter=${encodeURIComponent(
+    `created>='${sinceStr}'`,
+  )}`
 
   const response = await fetch(url)
   const json = await response.json()
 
   console.log('Data:', json)
 
-  return json.items
+  return json
 }
 
-export async function createPlot() {
-  const items = (await Promise.all([1, 2, 3, 4, 5, 6].map(fetchData))).flat()
+function* range(start, end) {
+  for (let i = start; i <= end; ++i) {
+    yield i
+  }
+}
 
-  // const data = Object.groupBy(json.items, ({ entity_id }) => entity_id)
+export async function createPlot() {
+  const { items, totalPages } = await fetchData(1)
+  const maxPages = 12
+
+  // Load remaining pages
+  items.push(
+    ...(
+      await Promise.all(
+        [...range(2, Math.min(maxPages, totalPages))].map(fetchData),
+      )
+    )
+      .map((datum) => datum.items)
+      .flat(),
+  )
 
   const data = items.reduce((memo, item) => {
     memo[item.entity_id] = memo[item.entity_id] ?? []
@@ -131,6 +147,7 @@ export async function createPlot() {
     chartEl,
     traces,
     {
+      dragmode: 'pan',
       margin: { t: 32, l: 24, r: 24, b: 24 },
       legend: { orientation: 'h' },
       xaxis: {