2f:T174d,{ // Import Chart.js const Chart = await require("chart.js@3"); // Sample data generation function generateSampleData() { return [ { date: "2024-08-15", value: 95, avg: 82, change: -2.68 }, { date: "2024-07-22", value: 98, avg: 84, change: 3.45 }, { date: "2024-06-30", value: 89, avg: 75, change: -1.22 }, { date: "2024-06-10", value: 102, avg: 86, change: 4.78 }, { date: "2024-05-18", value: 88, avg: 78, change: -0.95 }, { date: "2024-04-25", value: 91, avg: 77, change: 2.15 }, { date: "2024-03-12", value: 85, avg: 74, change: -1.56 }, { date: "2024-02-08", value: 79, avg: 72, change: 1.89 } ]; } function updateDataTable() { const tableBody = document.getElementById("dataTableBody"); const data = generateSampleData(); if (!tableBody) return; tableBody.innerHTML = ""; data.forEach((event) => { const row = document.createElement("div"); row.className = "table-row"; const changeClass = event.change >= 0 ? "positive" : "negative"; const changeSign = event.change >= 0 ? "+" : ""; row.innerHTML = `

${event.date}

${event.value}°F

${event.avg}°F

${changeSign}${event.change}%

`; tableBody.appendChild(row); }); } function generateChartData() { const days = []; const avgData = []; const upperData = []; const lowerData = []; for (let i = -10; i <= 10; i++) { days.push(i); let baseResponse; if (i < 0) { baseResponse = (Math.abs(i) / 10) * 0.5 + Math.random() * 0.3 - 0.15; } else if (i === 0) { baseResponse = 2.5 + Math.random() * 0.5; } else { baseResponse = 2.5 * Math.exp(-i * 0.3) + Math.random() * 0.2 - 0.1; } avgData.push(baseResponse); upperData.push(baseResponse + 1.2 + Math.random() * 0.3); lowerData.push(baseResponse - 0.8 - Math.random() * 0.3); } return { days, avgData, upperData, lowerData }; } let weatherChart = null; function initChart() { const ctx = document.getElementById("reactionChart"); if (!ctx) return; if (weatherChart) { weatherChart.destroy(); } const chartData = generateChartData(); weatherChart = new Chart(ctx, { type: "line", data: { labels: chartData.days, datasets: [ { label: "Average Response", data: chartData.avgData, borderColor: "white", borderDash: [5, 5], borderWidth: 2, backgroundColor: "transparent", pointRadius: 0, tension: 0.1 }, { label: "Upper Bound", data: chartData.upperData, borderColor: "#4ade80", borderDash: [5, 5], borderWidth: 2, backgroundColor: "transparent", pointRadius: 0, tension: 0.1 }, { label: "Lower Bound", data: chartData.lowerData, borderColor: "#f87171", borderDash: [5, 5], borderWidth: 2, backgroundColor: "transparent", pointRadius: 0, tension: 0.1 } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: "white", usePointStyle: true } } }, scales: { x: { title: { display: true, text: "Days from Event", color: "white" }, ticks: { color: "white" }, grid: { color: "rgba(255, 255, 255, 0.1)" } }, y: { title: { display: true, text: "Natural Gas Price % Change", color: "white" }, ticks: { color: "white", callback: function (value) { return value.toFixed(1) + "%"; } }, grid: { color: "rgba(255, 255, 255, 0.1)" } } } } }); } function updateStatistics() { const eventType = document.getElementById("weatherEvent")?.value || "extreme_heat"; const stdDev = parseFloat(document.getElementById("stdDev")?.value || "1"); let avgResp; switch (eventType) { case "extreme_heat": avgResp = (Math.random() * 2 + 0.5) * stdDev; break; case "extreme_cold": avgResp = (Math.random() * 3 + 1) * stdDev; break; case "hurricane": avgResp = (Math.random() * 1.5 + 0.3) * stdDev; break; default: avgResp = (Math.random() * 2 + 0.2) * stdDev; } const upperResp = avgResp + (Math.random() * 1.5 + 1); const lowerResp = avgResp - (Math.random() * 1.2 + 0.8); const avgEl = document.getElementById("avgResponse"); const upperEl = document.getElementById("upperResponse"); const lowerEl = document.getElementById("lowerResponse"); if (avgEl) { avgEl.textContent = `${avgResp >= 0 ? "+" : ""}${avgResp.toFixed(3)}%`; avgEl.className = avgResp >= 0 ? "positive" : "negative"; } if (upperEl) upperEl.textContent = `+${upperResp.toFixed(3)}%`; if (lowerEl) { lowerEl.textContent = `${lowerResp.toFixed(3)}%`; lowerEl.className = lowerResp >= 0 ? "positive" : "negative"; } } // Global function for the button window.updateWeatherData = function () { updateDataTable(); updateStatistics(); initChart(); }; // Initialize setTimeout(() => { updateDataTable(); updateStatistics(); initChart(); }, 100); return "Weather Monitor initialized"; }30:T1e43,html`

Event Selection

Weather Event:

Time Span:

Start Date:

End Date:

Standard Deviation Threshold:

Weather Events Data

Date

Value

Hist. Avg

NG Price %Chg

Response Statistics

Average Response - Natural Gas Index +0.385%

Upper Bound Response - Natural Gas Index +1.940%

Lower Bound Response - Natural Gas Index -1.170%

Market Reaction Graph

` 31:[] 2d:{"title":"Weather Market Impact Monitor","cells":[{"id":0,"value":"# Weather Market Impact Monitor","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"$30","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}