\n \n \n\n`;\n\nexport default async function (req: Request): Promise {\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","deleted","label",[135],"2ad9382a-b029-11f0-a882-0224a6c84d84","data.ts","e585d35c-b026-11f0-acdb-0224a6c84d84",["D",1761235130730],7,"script","import type {\n Measurement,\n PivotedMeasurements,\n} from \"https://esm.town/v/milohansen/SensorServer\";\n\nexport type ChartableMeasurement = Omit & {\n timestamp: Date;\n minute: number;\n second: number;\n};\n\ntype Data = {\n currentTime: string;\n measurements: PivotedMeasurements;\n};\n\nconst nullMeasurments = {\n temperature: null,\n humidity: null,\n voc: null,\n nox: null,\n \"p1.0\": null,\n \"p2.5\": null,\n \"p4.0\": null,\n \"p10.0\": null,\n};\n\nexport function unpivotOLD(data: PivotedMeasurements): ChartableMeasurement[] {\n const baseDate = Temporal.ZonedDateTime.from(data.currentTime).with({\n minute: 0,\n second: 0,\n });\n console.log(\"unpivot\", baseDate.toString(), data);\n const m = data.measurements;\n\n const mKeys = Object.keys(m);\n\n const hoursMeasurements = Array.from({\n length: 60 * 60,\n });\n\n for (let i = 0; i < m.timestamp.length; i++) {\n const [minuteString, secondString] = m.timestamp[i].split(\":\");\n const minute = parseInt(minuteString);\n const second = parseInt(secondString);\n const timestamp = new Date(\n baseDate.with({ minute, second })\n .epochMilliseconds,\n );\n const index = (minute * 60) + second;\n\n hoursMeasurements[index] = {\n ...(mKeys.reduce((acc, key) => {\n acc[key] = m[key][i];\n return acc;\n }, {})),\n timestamp,\n minute,\n second,\n };\n }\n\n return hoursMeasurements.map((v, i) =>\n v ||\n ({\n ...nullMeasurments,\n timestamp: new Date(baseDate.add({ seconds: i }).epochMilliseconds),\n minute: Math.floor(i / 60),\n second: i % 60,\n })\n );\n}\n\nconst measurementKeys = Object.keys(nullMeasurments);\n\nexport function unpivot(data: PivotedMeasurements): ChartableMeasurement[] {\n const baseDate = Temporal.ZonedDateTime.from(data.currentTime).with({\n minute: 0,\n second: 0,\n });\n console.log(\"unpivot2\", baseDate.toString(), data);\n const m = data.measurements;\n\n // const hoursMeasurements = Array.from({\n // length: 60 * 60,\n // });\n const hoursMeasurements: ChartableMeasurement[] = [{\n ...nullMeasurments,\n timestamp: new Date(baseDate.epochMilliseconds),\n minute: 0,\n second: 0,\n }];\n\n const dataMap = new Map();\n\n for (let i = 0; i < m.timestamp.length; i++) {\n const [minuteString, secondString] = m.timestamp[i].split(\":\");\n const minute = parseInt(minuteString);\n const second = parseInt(secondString);\n const timestamp = new Date(\n baseDate.with({ minute, second })\n .epochMilliseconds,\n );\n const index = (minute * 60) + second;\n\n dataMap.set(index, {\n ...(measurementKeys.reduce((acc, key) => {\n acc[key] = m[key][i];\n return acc;\n }, {})),\n timestamp,\n minute,\n second,\n });\n }\n\n if (dataMap.has(0)) {\n hoursMeasurements[0] = dataMap.get(0)!;\n }\n\n let last = 0;\n\n for (let i = 1; i < 3600; i++) {\n if (dataMap.has(i)) {\n const gap = i - last;\n if (gap > 10) {\n const nullIndex = i - Math.ceil(gap / 2);\n hoursMeasurements.push({\n ...nullMeasurments,\n timestamp: new Date(\n baseDate.add({ seconds: nullIndex }).epochMilliseconds,\n ),\n minute: Math.floor(nullIndex / 60),\n second: nullIndex % 60,\n });\n }\n hoursMeasurements.push(dataMap.get(i)!);\n last = i;\n } else if (i === 3599) {\n hoursMeasurements.push({\n ...nullMeasurments,\n timestamp: new Date(\n baseDate.add({ seconds: 3599 }).epochMilliseconds,\n ),\n minute: 59,\n second: 59,\n });\n }\n }\n\n return hoursMeasurements;\n}",[152],"9fce604c-aee4-11f0-9bb9-0224a6c84d84","client.tsx","019a097c-6c1d-771a-b0fa-0696463c019e",["D",1761095740368],"/** @jsxImportSource https://esm.sh/react */\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport App from \"./App.tsx\";\n\nconst div = document.getElementById(\"app\");\nconst root = createRoot(div);\nroot.render();",[160],"9fce5eda-aee4-11f0-9bb9-0224a6c84d84","README.md","019a097c-6c1d-771a-b0fa-022b45d3f323",["D",1761095740368],"# React SPA Starter\n\nMinimal React SPA example for Val Town. \n[View Demo][demo]\n\n[demo]: https://jxnblk--9c1548940bdd11f08b59569c3dd06744.web.val.run\n\nRemix this project to start building your own React app\n\n## How it works\n\nThe `http.tsx` file is the main entry point and serves the app.\nIt returns a static HTML string response that includes the client-side JavaScript module in `client.tsx`.\nThe `client.tsx` module hydrates the React app on the client.\n\nThe `App.tsx` file is the root component of the React app.\nYou can add more components and functionality as needed.\n\nNote that this version does _NOT_ handle server-side rendering (SSR). \nUsing one of the versions with SSR is highly recommended:\n\n- [React Starter][]\n- [React Streaming Starter][]\n\n\n[react streaming starter]: https://val.town/x/jxnblk/react-streaming-starter\n[react starter]: https://www.val.town/x/jxnblk/react-starter\n[react spa starter]: https://www.val.town/x/jxnblk/react-spa-starter",[166],"de7765b0-b028-11f0-bdec-0224a6c84d84","Measurements.tsx","aa8d3bca-aee4-11f0-b9e9-0224a6c84d84",133,["D",1761235002590],95,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { useEffect, useState } from \"https://esm.sh/react@19\";\nimport { Line, YAxis } from \"https://esm.sh/recharts\";\n\nimport type {\n Measurement,\n PivotedMeasurements,\n} from \"https://esm.town/v/milohansen/SensorServer\";\nimport { MeasurementChart } from \"./Chart.tsx\";\nimport { unpivot } from \"./data.ts\";\n\nexport type ChartableMeasurement = Omit & {\n timestamp: Date;\n};\n\ntype Data = {\n currentTime: string;\n measurements: PivotedMeasurements;\n};\n\nexport function Measurements() {\n const [hour, setHour] = useState(() => Temporal.Now.zonedDateTimeISO());\n const [measurements, setMeasurements] = useState([]);\n\n const [error, setError] = useState(null);\n const [loading, setLoading] = useState(false);\n\n async function fetchData(hour: Temporal.ZonedDateTime) {\n setLoading(true);\n try {\n const response = await fetch(\n \"https://milohansen--1686eb7aadf811f0be8c0224a6c84d84.web.val.run/data/\" +\n // hour.toString(),\n encodeURIComponent(hour.toJSON()),\n );\n const json = await response.json();\n // setData(json);\n setLoading(false);\n setMeasurements(unpivot(json));\n } catch (e) {\n setLoading(false);\n setError(e as Error);\n console.log(\"ERROR\", e);\n }\n }\n\n useEffect(() => {\n fetchData(hour);\n }, [hour]);\n\n return (\n <>\n

Measurements

\n Current time: {hour.year}-{hour.month}-{hour.day} {hour.hour}\n

\n setHour(hour.subtract({ hours: 1 }))}\n type=\"button\"\n >\n Prev Hour\n \n \n\n \n {loading &&

}\n {error &&

Error: {error.message}

}\n\n \n \n \n\n [Math.min(dataMin, 0), Math.max(100, dataMax)]}\n />\n \n\n \n \n \n\n \n \n\n \n \n \n \n \n \n \n \n );\n}",[172],"968315c0-af7d-11f0-9771-0224a6c84d84","Chart.tsx","918c8bea-aef2-11f0-b879-0224a6c84d84",117,["D",1761161437922],25,"/** @jsxImportSource https://esm.sh/react@19 */\nimport { PropsWithChildren, useMemo } from \"https://esm.sh/react@19\";\nimport {\n CartesianGrid,\n Legend,\n LineChart,\n Tooltip,\n XAxis,\n} from \"https://esm.sh/recharts\";\nimport { ChartableMeasurement } from \"./Measurements.tsx\";\n\nexport function MeasurementChart({ children, data }: PropsWithChildren<{\n data: ChartableMeasurement[];\n}>) {\n const ticks = useMemo(() => {\n console.log({ data });\n if (data.length < 2) {\n return [];\n }\n return [\n data[0].timestamp.getTime(),\n data[data.length - 1].timestamp.getTime(),\n ];\n }, [data]);\n\n return (\n \n \n {children}\n\n value.toLocaleTimeString()}\n scale=\"time\"\n type=\"number\"\n domain={(\n [dataMin, dataMax],\n ) => {\n console.log({ dataMin, dataMax }, dataMax - dataMin);\n if (data.length < 2) {\n return [0, 1];\n }\n // console.log([\n // data[0].timestamp.getTime(),\n // data[data.length - 1].timestamp.getTime(),\n // ]);\n return [\n data[0].timestamp.getTime(),\n data[data.length - 1].timestamp.getTime(),\n ];\n // return [dataMin, dataMax];\n }}\n ticks={ticks}\n tick={false}\n />\n \n \n \n );\n}",[180],"8f517368-aef2-11f0-bf56-0224a6c84d84","App.tsx","019a097c-6c1d-771a-b0f9-ff0c3a2e372a",60,["D",1761101725771],3,"/** @jsxImportSource https://esm.sh/react */\n\nimport { Measurements } from \"./Measurements.tsx\";\n\nexport default function App() {\n return (\n

\n \n

\n );\n}",[188],"pulls","forks","envVars",{"_201":55,"_203":55},"connections",{"_201":55,"_202":55},"count","unfilledCount","emptyCount",{"_20":187,"_13":188,"_136":189,"_137":-5,"_138":21,"_139":190,"_141":51,"_22":230,"_29":192,"_144":156,"_146":193,"_148":40,"_149":-5,"_212":231,"_93":232},{"_20":179,"_13":180,"_136":181,"_137":-5,"_138":21,"_139":182,"_141":51,"_22":227,"_29":184,"_144":156,"_146":185,"_148":40,"_149":-5,"_212":228,"_93":229},{"_20":171,"_13":172,"_136":173,"_137":-5,"_138":21,"_139":174,"_141":51,"_22":224,"_29":176,"_144":156,"_146":177,"_148":40,"_149":-5,"_212":225,"_93":226},{"_20":165,"_13":166,"_136":167,"_137":-5,"_138":21,"_139":143,"_141":51,"_22":221,"_29":55,"_144":105,"_146":169,"_148":40,"_149":-5,"_212":222,"_93":223},{"_20":159,"_13":160,"_136":161,"_137":-5,"_138":21,"_139":143,"_141":51,"_22":218,"_29":55,"_144":156,"_146":163,"_148":40,"_149":-5,"_212":219,"_93":220},{"_20":151,"_13":152,"_136":153,"_137":-5,"_138":21,"_139":30,"_141":51,"_22":215,"_29":155,"_144":156,"_146":157,"_148":40,"_149":-5,"_212":216,"_93":217},{"_20":134,"_13":135,"_136":49,"_137":-5,"_138":21,"_139":140,"_141":51,"_22":211,"_29":143,"_144":145,"_146":147,"_148":40,"_149":-5,"_212":213,"_93":214},["D",1761096289960],"children",[],[135],["D",1761235130730],[],[152],["D",1761095740368],[],[160],["D",1761095740368],[],[166],["D",1761235002590],[],[172],["D",1761161437922],[],[180],["D",1761101725771],[],[188],["D",1761095740368],{"_11":12,"_91":87},{"_11":12,"_85":-5,"_86":87,"_46":47,"_88":89,"_90":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_78":42,"_79":80,"_81":82,"_83":14,"_84":12},"ctx",{"_71":-5,"_115":270,"_271":272,"_273":274,"_275":40,"_276":40,"_277":40,"_278":51,"_279":-5,"_280":-7,"_281":-7,"_282":55,"_283":40,"_284":40,"_285":-5,"_286":40,"_287":40,"_288":40,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":26,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1