2f:T3070,viewof glucoseChart = { const { windowHours, maxPoints, viewportWidth, height, yAxisWidth, margin, pixelsPerHour } = CONFIG; const minPlotInnerWidth = windowHours * pixelsPerHour; const container = html`

Loading data...

Current observed status: unknown

`; const outer = html`

`; const yAxisPane = html`

`; const scrollFrame = html`

`; outer.appendChild(yAxisPane); outer.appendChild(scrollFrame); container.appendChild(outer); const yAxisSvg = d3.create("svg") .attr("width", yAxisWidth) .attr("height", height); const plotSvg = d3.create("svg") .attr("height", height) .style("display", "block"); yAxisPane.appendChild(yAxisSvg.node()); scrollFrame.appendChild(plotSvg.node()); const innerHeight = height - margin.top - margin.bottom; let plotWidth = viewportWidth; let plotInnerWidth = plotWidth - margin.left - margin.right; const state = { allData: [], isLiveMode: true, isPaused: false, selectedDevice: null, selectedSerialNumber: null, lastTimestampSeen: null }; const y = d3.scaleLinear().domain([0, 500]).range([innerHeight, 0]); const x = d3.scaleTime().range([0, plotInnerWidth]); const yAxisRoot = yAxisSvg.append("g") .attr("transform", `translate(${yAxisWidth - 12},${margin.top})`); const plotRoot = plotSvg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const lowBand = plotRoot.append("rect").attr("fill", "#dbeafe").attr("opacity", 0.35); const normalBand = plotRoot.append("rect").attr("fill", "#dcfce7").attr("opacity", 0.2); const highBand = plotRoot.append("rect").attr("fill", "#fee2e2").attr("opacity", 0.35); const gridGroup = plotRoot.append("g"); const xAxisGroup = plotRoot.append("g").attr("transform", `translate(0,${innerHeight})`); const lowThreshold = plotRoot.append("line") .attr("stroke", "#2563eb") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 1.5); const highThreshold = plotRoot.append("line") .attr("stroke", "#dc2626") .attr("stroke-dasharray", "6 4") .attr("stroke-width", 1.5); const segmentsLayer = plotRoot.append("g"); const pointsLayer = plotRoot.append("g"); const line = d3.line() .x(d => x(d.timestamp)) .y(d => y(d.glucose)) .curve(d3.curveMonotoneX); function updateDimensions() { if (!state.allData.length) return; const [start, end] = d3.extent(state.allData, d => d.timestamp); const totalMs = Math.max(end - start, windowHours * 60 * 60 * 1000); plotInnerWidth = Math.max( minPlotInnerWidth, (totalMs / (60 * 60 * 1000)) * pixelsPerHour ); plotWidth = plotInnerWidth + margin.left + margin.right; plotSvg.attr("width", plotWidth).attr("height", height); x.range([0, plotInnerWidth]).domain([start, end]); } function renderYAxis() { yAxisRoot.call(d3.axisLeft(y).ticks(6)); } function renderAxesAndBands() { const majorTicks = d3.timeHour.every(1); const minorTicks = d3.timeMinute.every(15); xAxisGroup.call( d3.axisBottom(x) .ticks(majorTicks) .tickFormat(formatTick) ); const minorTickValues = x.ticks(minorTicks).filter(t => t.getMinutes() !== 0 ); const minorTicksSelection = xAxisGroup .selectAll(".minor-tick") .data(minorTickValues, d => d.toISOString()); minorTicksSelection.enter() .append("line") .attr("class", "minor-tick") .merge(minorTicksSelection) .attr("x1", d => x(d)) .attr("x2", d => x(d)) .attr("y1", 0) .attr("y2", 6) .attr("stroke", "#9ca3af") .attr("stroke-width", 1); minorTicksSelection.exit().remove(); xAxisGroup.selectAll(".tick text") .style("white-space", "pre") .attr("dy", "0.9em"); gridGroup.call( d3.axisLeft(y) .ticks(6) .tickSize(-plotInnerWidth) .tickFormat("") ); lowBand .attr("x", 0) .attr("width", plotInnerWidth) .attr("y", y(70)) .attr("height", y(0) - y(70)); normalBand .attr("x", 0) .attr("width", plotInnerWidth) .attr("y", y(250)) .attr("height", y(70) - y(250)); highBand .attr("x", 0) .attr("width", plotInnerWidth) .attr("y", y(500)) .attr("height", y(250) - y(500)); lowThreshold .attr("x1", 0) .attr("x2", plotInnerWidth) .attr("y1", y(70)) .attr("y2", y(70)); highThreshold .attr("x1", 0) .attr("x2", plotInnerWidth) .attr("y1", y(250)) .attr("y2", y(250)); } // function renderAxesAndBands() { // const tickEvery = plotInnerWidth > 2200 ? d3.timeHour.every(2) : d3.timeHour.every(1); // xAxisGroup.call( // d3.axisBottom(x).ticks(tickEvery).tickFormat(formatTick) // ); // xAxisGroup.selectAll(".tick text") // .style("white-space", "pre") // .attr("dy", "0.9em"); // gridGroup.call( // d3.axisLeft(y).ticks(6).tickSize(-plotInnerWidth).tickFormat("") // ); // lowBand.attr("x", 0).attr("width", plotInnerWidth).attr("y", y(70)).attr("height", y(0) - y(70)); // normalBand.attr("x", 0).attr("width", plotInnerWidth).attr("y", y(250)).attr("height", y(70) - y(250)); // highBand.attr("x", 0).attr("width", plotInnerWidth).attr("y", y(500)).attr("height", y(250) - y(500)); // lowThreshold.attr("x1", 0).attr("x2", plotInnerWidth).attr("y1", y(70)).attr("y2", y(70)); // highThreshold.attr("x1", 0).attr("x2", plotInnerWidth).attr("y1", y(250)).attr("y2", y(250)); // } function renderChart() { if (!state.allData.length) return; updateDimensions(); renderYAxis(); renderAxesAndBands(); const segments = buildSegments(state.allData); const segmentPaths = segmentsLayer.selectAll("path") .data(segments, d => d.points[1].timestamp.toISOString()); segmentPaths.enter() .append("path") .attr("fill", "none") .attr("stroke-width", 3) .merge(segmentPaths) .attr("stroke", d => stateColor(d.label)) .attr("d", d => line(d.points)); segmentPaths.exit().remove(); const circles = pointsLayer.selectAll("circle") .data(state.allData, d => d.timestamp.toISOString()); circles.enter() .append("circle") .attr("r", 4) .merge(circles) .attr("cx", d => x(d.timestamp)) .attr("cy", d => y(d.glucose)) .attr("fill", d => stateColor(d.label)); circles.exit().remove(); if (state.isLiveMode) { scrollFrame.scrollLeft = scrollFrame.scrollWidth - scrollFrame.clientWidth; } } function updateAlarm(point) { const alarmBox = container.querySelector("#alarmBox"); const forecastAlarmBox = container.querySelector("#forecastAlarmBox"); const latestReading = container.querySelector("#latestReading"); latestReading.textContent = `Latest: ${point.glucose} mg/dL | ${point.timestamp.toLocaleString()}`; alarmBox.textContent = `Current observed status: ${point.label ?? "unknown"}`; if (point.label === "hypoglycemia") { alarmBox.style.color = "#2563eb"; } else if (point.label === "hyperglycemia") { alarmBox.style.color = "#dc2626"; } else if (point.label === "normal") { alarmBox.style.color = "#15803d"; } else { alarmBox.style.color = "#6b7280"; } // forecastAlarmBox.textContent = `Forecast status (10 min): ${point.predicted_label_10m ?? "unknown"}`; // if (point.predicted_label_10m === "hypoglycemia") { // forecastAlarmBox.style.color = "#2563eb"; // } else if (point.predicted_label_10m === "hyperglycemia") { // forecastAlarmBox.style.color = "#dc2626"; // } else if (point.predicted_label_10m === "normal") { // forecastAlarmBox.style.color = "#15803d"; // } else { // forecastAlarmBox.style.color = "#6b7280"; // } } // function updateAlarm(point) { // const alarmBox = container.querySelector("#alarmBox"); // const forecastAlarmBox = container.querySelector("#forecastAlarmBox"); // const latestReading = container.querySelector("#latestReading"); // latestReading.textContent = // `Latest: ${point.glucose} mg/dL | Current: ${point.label} | ${point.timestamp.toLocaleString()}`; // if (point.label === "hypoglycemia") { // alarmBox.textContent = "Current alert: Hypoglycemia detected"; // alarmBox.style.color = "#2563eb"; // } else if (point.label === "hyperglycemia") { // alarmBox.textContent = "Current alert: Hyperglycemia detected"; // alarmBox.style.color = "#dc2626"; // } else { // alarmBox.textContent = state.isLiveMode ? "Current status: Stable (Live)" : "Current status: Stable (Viewing history)"; // alarmBox.style.color = "#15803d"; // } // if (point.predictedLabel10m === "hypoglycemia") { // forecastAlarmBox.textContent = "Upcoming risk: Predicted hypoglycemia within 10 minutes"; // forecastAlarmBox.style.color = "#2563eb"; // } else if (point.predictedLabel10m === "hyperglycemia") { // forecastAlarmBox.textContent = "Upcoming risk: Predicted hyperglycemia within 10 minutes"; // forecastAlarmBox.style.color = "#dc2626"; // } else { // forecastAlarmBox.textContent = "No upcoming unsafe event in next 10 minutes"; // forecastAlarmBox.style.color = "#6b7280"; // } // } function clearChart() { state.allData.length = 0; segmentsLayer.selectAll("path").remove(); pointsLayer.selectAll("circle").remove(); } function addPoint(rawPoint) { const point = normalizePoint(rawPoint); state.allData.push(point); if (state.allData.length > maxPoints) state.allData.shift(); renderChart(); updateAlarm(point); } function resetData(points) { clearChart(); state.allData = points.map(normalizePoint).slice(-CONFIG.maxPoints); if (state.allData.length) { renderChart(); updateAlarm(state.allData[state.allData.length - 1]); } } function jumpToLive() { state.isLiveMode = true; renderChart(); if (state.allData.length) updateAlarm(state.allData[state.allData.length - 1]); } function setStatus(text) { container.querySelector("#latestReading").textContent = text; } function setDevice(device, serialNumber) { state.selectedDevice = device; state.selectedSerialNumber = serialNumber; } function setLastTimestamp(ts) { state.lastTimestampSeen = ts; } function getLastTimestamp() { return state.lastTimestampSeen; } scrollFrame.addEventListener("scroll", () => { const nearRightEdge = scrollFrame.scrollLeft + scrollFrame.clientWidth >= scrollFrame.scrollWidth - 20; state.isLiveMode = nearRightEdge; if (state.allData.length) updateAlarm(state.allData[state.allData.length - 1]); }); container.querySelector("#liveBtn").onclick = () => jumpToLive(); container.querySelector("#pauseBtn").onclick = () => { state.isPaused = !state.isPaused; container.querySelector("#pauseBtn").textContent = state.isPaused ? "Resume" : "Pause"; }; return Object.assign(container, { value: { state, deviceSelect: container.querySelector("#deviceSelect"), setDevice, setLastTimestamp, getLastTimestamp, addPoint, resetData, clearChart, jumpToLive, setStatus } }); } 30:Ta7c,{ const chart = viewof glucoseChart.value; const deviceSelect = chart.deviceSelect; deviceSelect.innerHTML = ""; chart.setStatus("Loading devices from live API..."); const devices = await fetchDevices(); devices.forEach((d, i) => { const option = document.createElement("option"); option.value = `${d.device}|||${d.serial_number}`; option.textContent = `${d.device} | ${d.serial_number}`; if (i === 0) option.selected = true; deviceSelect.appendChild(option); }); if (!devices.length) { chart.setStatus("No devices returned by live API."); return html`

Data source: live API, no devices found

`; } async function loadSelectedDevice(value) { const [device, serialNumber] = value.split("|||"); chart.setDevice(device, serialNumber); chart.setStatus(`Loading ${device} / ${serialNumber}...`); chart.clearChart(); chart.setLastTimestamp(null); const [latest, points] = await Promise.all([ fetchLatest(device, serialNumber), fetchHistory(device, serialNumber, 60) ]); if (points.length) { chart.resetData(points); chart.setLastTimestamp(points[points.length - 1].timestamp); chart.jumpToLive(); return; } if (latest) { chart.addPoint(latest); chart.setLastTimestamp(latest.timestamp); chart.jumpToLive(); return; } chart.setStatus(`No recent glucose data found for ${device} / ${serialNumber}.`); } deviceSelect.onchange = async () => { try { await loadSelectedDevice(deviceSelect.value); } catch (err) { console.error(err); chart.setStatus(`Load error: ${err.message}`); } }; try { await loadSelectedDevice(deviceSelect.value); } catch (err) { console.error(err); chart.setStatus(`Startup error: ${err.message}`); return html`

Live API failed: ${err.message}

`; } const timer = setInterval(async () => { const { state } = chart; if (state.isPaused || !state.selectedDevice || !state.selectedSerialNumber) return; try { const latest = await fetchLatest(state.selectedDevice, state.selectedSerialNumber); if (!latest) return; if (latest.timestamp !== chart.getLastTimestamp()) { chart.addPoint(latest); chart.setLastTimestamp(latest.timestamp); } } catch (err) { console.error(err); chart.setStatus(`Polling error: ${err.message}`); } }, CONFIG.pollMs); invalidation.then(() => clearInterval(timer)); return html`

Data source: live API

`; } 31:[] 2d:{"title":"GlycoAhead Dashboard","cells":[{"id":0,"value":"# GlycoAhead Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"BASE_URL = \"https://d1x9y920uzv18.cloudfront.net/woof\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"CONFIG = ({\n windowHours: 4,\n lookbackMinutes: 60,\n pollMs: 1000,\n maxPoints: 20000,\n viewportWidth: 1000,\n height: 460,\n yAxisWidth: 100,\n margin: { top: 20, right: 14, bottom: 55, left: 10 },\n pixelsPerHour: 400\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"fetchJson = async function(url) {\n try {\n const res = await fetch(url);\n if (!res.ok) {\n throw new Error(`Request failed: ${res.status} ${res.statusText}`);\n }\n return await res.json();\n } catch (err) {\n throw new Error(`Fetch failed for ${url}: ${err.message}`);\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"fetchDevices = async function() {\n const data = await fetchJson(`${BASE_URL}/devices`);\n return data.devices ?? [];\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"fetchLatest = async function(device, serialNumber) {\n const data = await fetchJson(\n `${BASE_URL}/devices/${encodeURIComponent(device)}/${encodeURIComponent(serialNumber)}/glucose/latest`\n );\n return data.point;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"fetchHistory = async function(device, serialNumber, lookbackMinutes = CONFIG.lookbackMinutes) {\n const data = await fetchJson(\n `${BASE_URL}/devices/${encodeURIComponent(device)}/${encodeURIComponent(serialNumber)}/glucose?lookback_minutes=${lookbackMinutes}&limit=10000`\n );\n return data.points ?? [];\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"// fetchHistory = async function(device, serialNumber, lookbackMinutes = CONFIG.lookbackMinutes) {\n// const data = await fetchJson(\n// `${BASE_URL}/devices/${encodeURIComponent(device)}/${encodeURIComponent(serialNumber)}/glucose?lookback_minutes=${lookbackMinutes}&limit=20000`\n// );\n// return data.points ?? [];\n// }\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"normalizePoint = function(point) {\n return {\n timestamp: new Date(point.timestamp),\n glucose: +point.glucose,\n label: point.label ?? \"normal\",\n predictedLabel10m: point.predicted_label_10m ?? null\n };\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"stateColor = function(label) {\n if (label === \"hypoglycemia\") return \"#2563eb\";\n if (label === \"hyperglycemia\") return \"#dc2626\";\n return \"#059669\";\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"buildSegments = function(data) {\n const segments = [];\n for (let i = 1; i < data.length; i++) {\n segments.push({\n points: [data[i - 1], data[i]],\n label: data[i].label\n });\n }\n return segments;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"formatTick = function(date) {\n const d = new Date(date);\n const isMidnight = d.getHours() === 0 && d.getMinutes() === 0;\n return isMidnight\n ? d3.timeFormat(\"%b %d\\n%H:%M\")(d)\n : d3.timeFormat(\"%H:%M\")(d);\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"await fetch(\"https://d1x9y920uzv18.cloudfront.net/woof/devices\").then(r => r.json())\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"await fetchHistory(\"FreeStyle LibreLink\", \"e7ddfae7-5081-4ed3-a861-f47b50cc1bcb\", 1240)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"await fetchLatest(\"FreeStyle LibreLink\", \"e7ddfae7-5081-4ed3-a861-f47b50cc1bcb\")\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}