[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_231":232,"_233":234},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":86,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":25,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",121,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","Measurements.tsx","latestPath","fileId","aa8d3bca-aee4-11f0-b9e9-0224a6c84d84","name","fileType","script","content","/** @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 out: Measurement[] = [];\n\n const hoursMeasurements = Array.from({\n length: 60 * 60,\n });\n\n const initialLength = hoursMeasurements.length;\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 // out.push({\n // timestamp: new Date(\n // baseDate.with({ minute, second })\n // .epochMilliseconds,\n // ),\n // });\n }\n\n console.log(\n \"initialLength\",\n initialLength,\n \"length\",\n hoursMeasurements.length,\n );\n // return hoursMeasurements;\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\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 */\n }\n \n );\n}","/** @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\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 */\n }\n \n );\n}","createdAt",["D",1761161794963],"branchVersion","branchId","9fbf37c0-aee4-11f0-9bb9-0224a6c84d84","id","9fba5318-aee4-11f0-9bb9-0224a6c84d84","react-spa-starter",["D",1761095740368],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","1f237713-11d1-4294-ab70-82730bccda50","pinnedFileId","019a097c-6c1d-771a-b0fa-0ad6f3262ca7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","fd1b665c-4983-49ff-b5a0-fd3dd2afe226","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":50,"_93":94,"_95":96,"_97":45,"_98":99},"isOwned",135,"main","projectId","forkedBranchId","95ca739c-0bdd-11f0-8dac-569c3dd06744","forkedBranchVersion",16,"forkedProjectPrivacy","forkedProjectId","95ca272a-0bdd-11f0-8dac-569c3dd06744","forkedProjectOrgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","projectName","userHandle","milohansen","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybVp5RE9OSnc5WHJvNTNNMUI4cmVIQ1RBbTgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":227,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":228,"_80":229,"_82":230,"_84":25},"tree",[202,203,204,205,206,207],"files",[202,203,204,205,206,207],"counts",{"_192":62,"_193":155,"_194":62,"_195":196,"_197":198},"contents",[143,144,145,146,147,148],"upstreamProject",{"_43":94,"_32":45,"_52":139,"_53":140,"_49":50,"_78":141},"upstreamBranch",{"_43":89,"_38":132,"_133":134,"_32":86,"_87":94,"_13":135,"_88":-5,"_90":-5,"_136":137,"_47":-5,"_84":25,"_49":50,"_98":138,"_63":96,"_97":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1743170677719],"updatedAt",["D",1788294741202],19,"lockfileKey","1788294741391-esm.town_v_jxnblk_react-spa-starter@19-main","jxnblk","Minimal React SPA example built in Val Town","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f0f7dcce-d342-468d-92be-481bb6870700/square512?exp=1789585199&sig=c9fbd2ad46d551ac6ae3b08c30dc270071ee3dbef53a80dfd9a76e641422cc3f",{"_100":138,"_107":142},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789585199&sig=7b8633614d887b90860f9d06687c1bd96ab798bf2fc10c942f84bcc017651c12",{"_43":184,"_32":185,"_30":186,"_151":-5,"_41":42,"_40":187,"_153":58,"_38":188,"_13":189,"_33":34,"_35":190,"_24":25,"_158":-5,"_27":191},{"_43":176,"_32":177,"_30":178,"_151":-5,"_41":42,"_40":179,"_153":58,"_38":180,"_13":181,"_33":34,"_35":182,"_24":25,"_158":-5,"_27":183},{"_43":172,"_32":28,"_30":31,"_151":-5,"_41":42,"_40":14,"_153":25,"_38":173,"_13":174,"_33":34,"_35":37,"_24":25,"_158":-5,"_27":175},{"_43":166,"_32":167,"_30":168,"_151":-5,"_41":42,"_40":155,"_153":58,"_38":169,"_13":62,"_33":20,"_35":170,"_24":25,"_158":-5,"_27":171},{"_43":160,"_32":161,"_30":162,"_151":-5,"_41":42,"_40":155,"_153":58,"_38":163,"_13":62,"_33":34,"_35":164,"_24":25,"_158":-5,"_27":165},{"_43":149,"_32":150,"_30":56,"_151":-5,"_41":42,"_40":152,"_153":58,"_38":154,"_13":155,"_33":156,"_35":157,"_24":25,"_158":-5,"_27":159},"e74d12c8-aee5-11f0-a3a1-0224a6c84d84","http.tsx","parentId",14,"latest",["D",1761096289960],1,"http","const CLIENT_MODULE = import.meta.url.replace(\"http.tsx\", \"client.tsx\");\n\nconst html = `\n\n \n React SPA Starter\n \n \n \n

\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],"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();",[161],"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",[167],"6b52c67e-af7e-11f0-918a-0224a6c84d84",["D",1761161794963],89,[28],"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}",[177],"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}",[185],"pulls","branches","forks","envVars",{"_199":62,"_201":62},"connections",{"_199":62,"_200":62},"count","unfilledCount","emptyCount",{"_43":184,"_32":185,"_30":186,"_151":-5,"_41":42,"_40":187,"_153":58,"_38":224,"_13":189,"_33":34,"_35":190,"_24":25,"_158":-5,"_209":225,"_27":226},{"_43":176,"_32":177,"_30":178,"_151":-5,"_41":42,"_40":179,"_153":58,"_38":221,"_13":181,"_33":34,"_35":182,"_24":25,"_158":-5,"_209":222,"_27":223},{"_43":172,"_32":28,"_30":31,"_151":-5,"_41":42,"_40":14,"_153":25,"_38":218,"_13":174,"_33":34,"_35":37,"_24":25,"_158":-5,"_209":219,"_27":220},{"_43":166,"_32":167,"_30":168,"_151":-5,"_41":42,"_40":155,"_153":58,"_38":215,"_13":62,"_33":20,"_35":170,"_24":25,"_158":-5,"_209":216,"_27":217},{"_43":160,"_32":161,"_30":162,"_151":-5,"_41":42,"_40":155,"_153":58,"_38":212,"_13":62,"_33":34,"_35":164,"_24":25,"_158":-5,"_209":213,"_27":214},{"_43":149,"_32":150,"_30":56,"_151":-5,"_41":42,"_40":152,"_153":58,"_38":208,"_13":155,"_33":156,"_35":157,"_24":25,"_158":-5,"_209":210,"_27":211},["D",1761096289960],"children",[],[150],["D",1761095740368],[],[161],["D",1761095740368],[],[167],["D",1761161794963],[],[28],["D",1761161437922],[],[177],["D",1761101725771],[],[185],["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,"_129":264,"_265":266,"_267":268,"_269":25,"_270":25,"_271":25,"_272":58,"_273":-5,"_274":-7,"_275":-7,"_276":62,"_277":25,"_278":25,"_279":-5,"_280":25,"_281":25,"_282":25,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":86,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"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"]

Diff · v121