From 45de332c1497dddb7d10c3799139507c5098ea2b Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Wed, 3 Apr 2024 09:16:12 -0500 Subject: [PATCH] Cleanup --- index.css | 3 +++ index.html | 3 ++- index.mjs | 26 ++++++++++++++++++++++---- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index 137602b..adeca43 100644 --- a/index.css +++ b/index.css @@ -2,3 +2,6 @@ width: 100vw; height: 50vh; } +.table { + height: 300px; +} diff --git a/index.html b/index.html index 6411601..98fd2c2 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ href="assets/favicon-16x16-rn22XzRx.png" /> IOT Charts + -
+
diff --git a/index.mjs b/index.mjs index b70e818..29d7f72 100644 --- a/index.mjs +++ b/index.mjs @@ -8,7 +8,15 @@ 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 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() @@ -49,6 +57,7 @@ export async function createPlot() { const minI = d3.minIndex(y) const maxI = d3.maxIndex(y) + const now = { y: y[0] } const min = { x: x[minI], y: y[minI], @@ -77,7 +86,7 @@ export async function createPlot() { }, ) - cellData[name] = [min.y, max.y, mean.y] + cellData[name] = [now.y, min.y, max.y, mean.y] return { x, @@ -93,6 +102,7 @@ export async function createPlot() { header: { values: [ ['Sensors'], + ['Now'], ['Min'], ['Max'], ['Avg'], @@ -104,7 +114,8 @@ export async function createPlot() { Object.keys(cellData), Object.values(cellData).map((datum) => datum[0]), Object.values(cellData).map((datum) => datum[1]), - Object.values(cellData).map((datum) => Number(datum[2].toFixed(2))), + Object.values(cellData).map((datum) => datum[2]), + Object.values(cellData).map((datum) => Number(datum[2].toFixed(3))), ], }, } @@ -120,7 +131,7 @@ export async function createPlot() { chartEl, traces, { - margin: { t: 0 }, + margin: { t: 32, l: 24, r: 24, b: 24 }, legend: { orientation: 'h' }, xaxis: { range: [start.getTime(), end.getTime()], @@ -133,7 +144,14 @@ export async function createPlot() { ) const tableEl = document.getElementById('table') - Plotly.newPlot(tableEl, [tableData], {}, { responsive: true }) + Plotly.newPlot( + tableEl, + [tableData], + { + margin: { t: 10, l: 10, r: 10, b: 10 }, + }, + { responsive: true }, + ) } /** @param date {Date} */