Initial commit

emeraldwalk · Apr 1, 2024 · bedf852 · bedf852
commit bedf852
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 0 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,3 @@
+.chart {
+  width: 100vw;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IOT Charts</title>
+    <script src="plotly-2.30.0.min.js" charset="utf-8"></script>
+    <script type="module">
+        import { createPlot } from './index.mjs'
+        createPlot()
+    </script>
+</head>
+<body>
+    <div id="tester" class="chart"></div>
+</body>
+</html>
diff --git a/index.mjs b/index.mjs
@@ -0,0 +1,54 @@
+const SENSOR_LABELS = {
+  'sensor.atc_fe05_temperature': 'Garage Temp',
+  'sensor.atc_bb8c_temperature': 'Bunny Temp',
+  'sensor.blue1dht22temp': 'Shed Temp (outside)',
+  'sensor.sonoff_snzb_02d_f1f36efe_temperature': 'Greenhouse Temp',
+}
+
+export async function createPlot() {
+  const url =
+    'https://ball-started.pockethost.io/api/collections/sensor/records?perPage=500&sort=-created'
+
+  const response = await fetch(url)
+  const json = await response.json()
+
+  const data = Object.groupBy(json.items, ({ entity_id }) => entity_id)
+
+  const tempSensorIds = Object.keys(data).filter((sensorId) =>
+    sensorId.includes('temp'),
+  )
+
+  console.log('Temp sensors:', tempSensorIds)
+
+  const traces = tempSensorIds.map((sensorId) => ({
+    x: data[sensorId].map(({ created }) => dateStr(new Date(created))),
+    y: data[sensorId].map(({ data }) => data),
+    name: SENSOR_LABELS[sensorId] ?? sensorId,
+    mode: 'lines',
+    connectgaps: true,
+  }))
+
+  console.log('data:', traces)
+
+  const chartEl = document.getElementById('tester')
+  Plotly.newPlot(chartEl, traces, {
+    margin: { t: 0 },
+    legend: { orientation: 'h' },
+    xaxis: {
+      tickformat: '%I:%M %p',
+    },
+    // yaxis: { range: [0, 100] },
+  })
+}
+
+/** @param date {Date} */
+function dateStr(date) {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hour = String(date.getHours()).padStart(2, '0')
+  const minute = String(date.getMinutes()).padStart(2, '0')
+  const second = String(date.getSeconds()).padStart(2, '0')
+
+  return `${year}-${month}-${day}T${hour}:${minute}:${second}`
+}
diff --git a/plotly-2.30.0.min.js b/plotly-2.30.0.min.js