From e14ac10952d0a95a8b7f05278e93506b7abf1cac Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 2 Apr 2024 23:05:31 -0500 Subject: [PATCH] Table --- index.html | 1 + index.mjs | 65 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 70e2cc6..6411601 100644 --- a/index.html +++ b/index.html @@ -31,5 +31,6 @@
+
diff --git a/index.mjs b/index.mjs index ae01e6d..b70e818 100644 --- a/index.mjs +++ b/index.mjs @@ -1,9 +1,4 @@ -import { - min, - max, - minIndex, - maxIndex, -} from 'https://cdn.jsdelivr.net/npm/d3-array@3/+esm' +import * as d3 from 'https://cdn.jsdelivr.net/npm/d3-array@3/+esm' const SENSOR_LABELS = { 'sensor.atc_fe05_temperature': 'Garage Temp', @@ -44,41 +39,76 @@ export async function createPlot() { console.log('Temp sensors:', tempSensorIds) const annotations = [] + const cellData = {} const traces = tempSensorIds.map((sensorId, i) => { + const name = SENSOR_LABELS[sensorId] ?? sensorId const x = data[sensorId].map(({ created }) => dateStr(new Date(created))) const y = data[sensorId].map(({ data }) => data) - const minI = minIndex(y) - const maxI = maxIndex(y) + const minI = d3.minIndex(y) + const maxI = d3.maxIndex(y) - console.log('minmax:', min(y), max(y)) + const min = { + x: x[minI], + y: y[minI], + } + const max = { + x: x[maxI], + y: y[maxI], + } + const mean = { + y: d3.mean(y), + } annotations.push( { - x: x[minI], - y: y[minI], - text: `${y[minI]} (min)`, + x: min.x, + y: min.y, + text: `${min.y} (min)`, ax: i * -20, // ay: -40, }, { - x: x[maxI], - y: y[maxI], - text: `${y[maxI]} (max)`, + x: max.x, + y: max.y, + text: `${max.y} (max)`, ax: i * -20, }, ) + cellData[name] = [min.y, max.y, mean.y] + return { x, y, - name: SENSOR_LABELS[sensorId] ?? sensorId, + name, mode: 'lines', connectgaps: true, } }) + const tableData = { + type: 'table', + header: { + values: [ + ['Sensors'], + ['Min'], + ['Max'], + ['Avg'], + ], + }, + cells: { + align: ['left', 'right', 'right', 'right'], + values: [ + 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))), + ], + }, + } + console.log('traces:', traces) const end = new Date() @@ -101,6 +131,9 @@ export async function createPlot() { }, { responsive: true }, ) + + const tableEl = document.getElementById('table') + Plotly.newPlot(tableEl, [tableData], {}, { responsive: true }) } /** @param date {Date} */