\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}","label",[150],"e837d1d6-b026-11f0-b3ca-0224a6c84d84",["D",1761234159953],[28],"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();",[164],"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",[170],"a4e56b62-af7e-11f0-a4f0-0224a6c84d84","Measurements.tsx","aa8d3bca-aee4-11f0-b9e9-0224a6c84d84",125,["D",1761161891553],93,"/** @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\";\n\nexport type ChartableMeasurement = Omit & {\n timestamp: Date;\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\nfunction unpivot(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 };\n }\n\n return hoursMeasurements.map((v, i) =>\n v ||\n ({\n ...nullMeasurments,\n timestamp: new Date(baseDate.add({ seconds: i }).epochMilliseconds),\n })\n );\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}",[176],"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}",[184],"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}",[192],"pulls","branches","forks","envVars",{"_206":62,"_208":62},"connections",{"_206":62,"_207":62},"count","unfilledCount","emptyCount",{"_43":191,"_32":192,"_30":193,"_151":-5,"_41":42,"_40":194,"_153":58,"_38":235,"_13":196,"_34":35,"_36":197,"_24":25,"_158":-5,"_217":236,"_27":237},{"_43":183,"_32":184,"_30":185,"_151":-5,"_41":42,"_40":186,"_153":58,"_38":232,"_13":188,"_34":35,"_36":189,"_24":25,"_158":-5,"_217":233,"_27":234},{"_43":175,"_32":176,"_30":177,"_151":-5,"_41":42,"_40":178,"_153":25,"_38":229,"_13":180,"_34":35,"_36":181,"_24":25,"_158":-5,"_217":230,"_27":231},{"_43":169,"_32":170,"_30":171,"_151":-5,"_41":42,"_40":155,"_153":58,"_38":226,"_13":62,"_34":20,"_36":173,"_24":25,"_158":-5,"_217":227,"_27":228},{"_43":163,"_32":164,"_30":165,"_151":-5,"_41":42,"_40":155,"_153":58,"_38":223,"_13":62,"_34":35,"_36":167,"_24":25,"_158":-5,"_217":224,"_27":225},{"_43":160,"_32":28,"_30":31,"_151":-5,"_41":42,"_40":14,"_153":25,"_38":220,"_13":155,"_34":35,"_36":37,"_24":25,"_158":-5,"_217":221,"_27":222},{"_43":149,"_32":150,"_30":56,"_151":-5,"_41":42,"_40":152,"_153":58,"_38":216,"_13":155,"_34":156,"_36":157,"_24":25,"_158":-5,"_217":218,"_27":219},["D",1761096289960],"children",[],[150],["D",1761234159953],[],[28],["D",1761095740368],[],[164],["D",1761095740368],[],[170],["D",1761161891553],[],[176],["D",1761161437922],[],[184],["D",1761101725771],[],[192],["D",1761095740368],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":50,"_93":94,"_95":96,"_97":45,"_98":99},"ctx",{"_78":-5,"_128":275,"_276":277,"_278":279,"_280":25,"_281":25,"_282":25,"_283":58,"_284":-5,"_285":-7,"_286":-7,"_287":62,"_288":25,"_289":25,"_290":-5,"_291":25,"_292":25,"_293":25,"_294":-5},"ENV",{"_246":247,"_248":249,"_250":86,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Diff · v127