/** @jsxImportSource https://esm.sh/react */ import { format } from "https://esm.sh/date-fns@4/format.mjs"; import React, { useEffect, useState } from "https://esm.sh/react@18"; import { CartesianGrid, Dot, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "https://esm.sh/recharts@2"; import regression from "https://esm.sh/regression@2.0.1"; import { PSE_OUTAGES_TABLE_NAME } from "https://esm.town/v/andreterron/PSEoutages"; function formatXAxis(tickItem: number | Date) { return format(tickItem, "MMM d h:mmaaa"); } function App() { const [outageData, setOutageData] = useState([]); // const [regressionData, setRegressionData] = useState([]); useEffect(() => { async function fetchData() { const response = await fetch("/outages"); const json = await response.json(); let firstEntry: { i: number; time: number; date: Date } = { i: -1, time: Date.now(), date: new Date() }; let firstRegEntry: { i: number; time: number; date: Date } = { i: -1, time: Date.now(), date: new Date() }; let regressionMinTime = Date.now() - 1 * 24 * 60 * 60 * 1000; // 24 hours ago const data = json.map((entry: any, i: number) => { const date = new Date(entry.checked_at); const time = date.getTime(); if (i === 0 || time < firstEntry.time) { firstEntry = { i, time, date }; } if (time >= regressionMinTime && (firstRegEntry.i === -1 || time < firstRegEntry.time)) { firstRegEntry = { i, time, date }; } return ({ ...entry, checked_at: time, name: formatXAxis(time), }); }); function timeToX(time: number) { return (time - firstEntry.time) / 1000 / 60 / 60 / 24; } function xToTime(x: number) { return x * 60 * 60 * 24 * 1000 + firstEntry.time; } const customer_reg = regression.linear( data .filter((entry: any) => entry.checked_at >= regressionMinTime) .map((entry: any) => [timeToX(entry.checked_at), entry.customer_count / 1000]), ); const [ca, cb] = customer_reg.equation; console.log("equation", ca, cb); // Linear const zeroX = -cb / ca; // Exponential // const zeroX = (Math.log(0.4) - Math.log(ca)) / cb; // Power // const zeroX = Math.pow(0.4 / ca, 1 / cb); console.log("zero", zeroX); // console.log("zero", cb, ca); for (let entry of data) { if (entry.checked_at >= regressionMinTime) { entry.estimate = Math.round(customer_reg.predict(timeToX(entry.checked_at))[1] * 1000); } } if (firstRegEntry.i >= 0) { // data[firstRegEntry.i].estimate = Math.round(customer_reg.predict(timeToX(firstRegEntry.time))); data.push({ checked_at: new Date(xToTime(zeroX)).getTime(), estimate: 0, }); } // setRegressionData([ // { // checked_at: new Date(startTime), // customer_estimate: ca * startTime + cb, // }, // { // checked_at: new Date(-cb / ca), // customer_estimate: 0, // }, // ]); setOutageData(data); } fetchData(); }, []); return (

{/* 💣🌪️ ✖️ 🔌🪫 × */}

🌪️ × 🔌

Bomb Cyclone
PSE Power Outage Tracker

Tracking PSE power outages after the Bomb Cyclone of Nov 19th, 2024.

Tracking started a day later, Nov 20th, at around 7pm PST. It's refreshing every 15 minutes.

Customers Affected

{/* scale="time" type="number" domain={["dataMin", "dataMax"]} */} v ? `${Math.floor(v / 1000)}k` : "0"} /> v !== "estimate" ? "Affected Customers" : `Estimate*`} /> { // console.log(args); return (props.payload.estimate === 0) ? : 0; }} />

*Estimate based on the previous 24 hours

Number of Outages

); } async function client() { const ReactDOM = await import("https://esm.sh/react-dom@18"); console.log(ReactDOM); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); if (request.url.includes("/outages")) { const result = await sqlite.execute(` SELECT checked_at, customer_count, outage_count FROM ${PSE_OUTAGES_TABLE_NAME} ORDER BY checked_at LIMIT 960 `); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Bomb Cyclone - PSE Power Outage Tracker

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 900px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; } h1 { color: #333; } .charts { display: flex-col; gap: 20px; } .chart { flex: 1; background: white; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } footer { text-align: center; margin-top: 20px; font-size: 0.8em; } `;

bombCycloneOutageTracker

Version 4