-
+
-
-
+
-
-
GainAC
+
+ ${esc(t().internalGains)}
+ ${esc(t().solarGain)}
+ ${esc(t().ventGain)}
+ ${esc(t().acCapacity)}
@@ -227,119 +366,176 @@
`).join("");
}
+
+ // Fade in LLM skeleton
+ requestAnimationFrame(() => $("llm-summary").classList.remove("opacity-0"));
}
- // ========== SVG Timeline Chart ==========
- function renderTimelineChart(timeline) {
- const container = $("timeline-chart");
- const width = 720;
- const height = 200;
- const padLeft = 40;
- const padRight = 10;
- const padTop = 15;
- const padBottom = 25;
- const chartW = width - padLeft - padRight;
- const chartH = height - padTop - padBottom;
+ function formatHourRange(hours) {
+ if (hours.length === 0) return "";
+ if (hours.length === 1) return String(hours[0]).padStart(2, '0') + ":00";
- const temps = timeline.map(s => s.tempC);
- const minTemp = Math.floor(Math.min(...temps) / 5) * 5;
- const maxTemp = Math.ceil(Math.max(...temps) / 5) * 5;
- const tempRange = maxTemp - minTemp || 10;
+ const ranges = [];
+ let start = hours[0], end = hours[0];
+ for (let i = 1; i < hours.length; i++) {
+ if (hours[i] === end + 1) {
+ end = hours[i];
+ } else {
+ ranges.push(start === end
+ ? String(start).padStart(2, '0') + ":00"
+ : String(start).padStart(2, '0') + ":00\u2013" + String(end).padStart(2, '0') + ":00");
+ start = end = hours[i];
+ }
+ }
+ ranges.push(start === end
+ ? String(start).padStart(2, '0') + ":00"
+ : String(start).padStart(2, '0') + ":00\u2013" + String(end).padStart(2, '0') + ":00");
+ return ranges.join(", ");
+ }
- function x(i) { return padLeft + (i / (timeline.length - 1)) * chartW; }
- function y(t) { return padTop + (1 - (t - minTemp) / tempRange) * chartH; }
-
- // Build area path (temperature curve filled to bottom)
- const points = timeline.map((s, i) => `${x(i).toFixed(1)},${y(s.tempC).toFixed(1)}`);
- const linePath = `M${points.join(" L")}`;
- const areaPath = `${linePath} L${x(timeline.length - 1).toFixed(1)},${(padTop + chartH).toFixed(1)} L${padLeft},${(padTop + chartH).toFixed(1)} Z`;
-
- // Build gradient stops based on temperature
- const gradientStops = timeline.map((s, i) => {
- const pct = ((i / (timeline.length - 1)) * 100).toFixed(1);
- return `
`;
- }).join("");
-
- const gradientStopsLine = timeline.map((s, i) => {
- const pct = ((i / (timeline.length - 1)) * 100).toFixed(1);
- return `
`;
- }).join("");
-
- // Threshold lines
- const thresholds = [30, 35, 40].filter(t => t > minTemp && t < maxTemp);
- const thresholdLines = thresholds.map(t =>
- `
-
${t}\u00b0`
- ).join("");
-
- // Y-axis labels (min, max)
- const yLabels = `
-
${maxTemp}\u00b0
-
${minTemp}\u00b0
- `;
-
- // X-axis labels (every 3 hours)
- const xLabels = timeline
- .filter((s, i) => s.hour % 3 === 0)
- .map((s, i) => {
- const idx = timeline.findIndex(t => t.hour === s.hour);
- return `
${String(s.hour).padStart(2, '0')}`;
- }).join("");
-
- // Data points (circles)
- const circles = timeline.map((s, i) =>
- `
`
- ).join("");
-
- const svg = `
`;
-
- container.innerHTML = svg;
-
- // Tooltip on hover/click
- const tooltip = $("timeline-tooltip");
- container.querySelectorAll(".timeline-dot").forEach(dot => {
- const handler = (e) => {
- const idx = parseInt(dot.dataset.idx);
- const slot = timeline[idx];
- const actions = slot.actions && slot.actions.length > 0
- ? slot.actions.map(a => `\u2022 ${esc(a.name)}`).join("
")
- : "No actions";
- tooltip.innerHTML = `
-
${slot.hourStr}
-
${slot.tempC.toFixed(1)}\u00b0C · ${(slot.humidityPct || 0).toFixed(0)}% RH
-
${slot.budgetStatus}
-
${actions}
- `;
- const rect = dot.getBoundingClientRect();
- tooltip.style.left = (rect.left + window.scrollX - 60) + "px";
- tooltip.style.top = (rect.top + window.scrollY - tooltip.offsetHeight - 8) + "px";
- tooltip.classList.remove("hidden");
- };
- dot.addEventListener("mouseenter", handler);
- dot.addEventListener("click", handler);
+ // ========== AI Actions ==========
+ function renderAIActions(actions) {
+ const groups = {};
+ actions.forEach(a => {
+ const cat = a.category || "other";
+ if (!groups[cat]) groups[cat] = [];
+ groups[cat].push(a);
});
- container.addEventListener("mouseleave", () => tooltip.classList.add("hidden"));
+ const categoryOrder = ["shading", "ventilation", "internal_gains", "ac_strategy", "hydration", "care"];
+ const sortedCats = Object.keys(groups).sort((a, b) => {
+ const ia = categoryOrder.indexOf(a);
+ const ib = categoryOrder.indexOf(b);
+ return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+ });
+
+ const html = sortedCats.map(cat => {
+ const icon = categoryIcons[cat] || '';
+ const label = (t().category && t().category[cat]) || cat;
+ const cards = groups[cat].map(a => {
+ const hours = (a.hours || []).sort((x, y) => x - y);
+ const hourRange = formatHourRange(hours);
+ const ec = effortColors[a.effort] || effortColors.none;
+ const ic = impactColors[a.impact] || impactColors.low;
+ return `
+
+
+
${esc(a.name)}
+
${hourRange}
+
+ ${a.description ? `
${esc(a.description)}
` : ''}
+
+ ${esc(t().effort)}: ${esc(a.effort || 'none')}
+ ${esc(t().impact)}: ${esc(a.impact || 'low')}
+
+
+ `;
+ }).join("");
+
+ return `
+
+
+ ${icon}
+ ${esc(label)}
+
+
${cards}
+
+ `;
+ }).join("");
+
+ hide("actions-loading");
+ show("actions-section");
+ const badge = $("actions-badge");
+ if (badge) {
+ badge.textContent = t().aiActions || "AI";
+ badge.classList.remove("hidden");
+ }
+ $("actions-list").innerHTML = html;
}
- // ========== Budget Status Strip ==========
- function renderBudgetStrip(timeline) {
- const strip = $("timeline-strip");
- strip.innerHTML = timeline.map(slot => {
- const color = budgetHexColors[slot.budgetStatus] || "#d1d5db";
- return `
`;
+ // ========== Heatmap Timeline ==========
+ const coolModeColors = {
+ ventilate: "#38bdf8",
+ ac: "#4ade80",
+ overloaded: "#f87171",
+ };
+
+ const coolModeLabels = () => ({
+ ventilate: t().coolVentilate || "Open windows",
+ ac: t().coolAC || "AC cooling",
+ overloaded: t().coolOverloaded || "AC overloaded",
+ });
+
+ function renderTimelineHeatmap(timeline) {
+ const container = $("timeline-chart");
+ const tooltip = $("timeline-tooltip");
+ const labels = coolModeLabels();
+
+ // Hour labels (every 3h)
+ const hourLabelsHtml = timeline.map(s => {
+ if (s.hour % 3 !== 0) return `
`;
+ return `
${String(s.hour).padStart(2, "0")}
`;
}).join("");
+
+ // Temp cells
+ const tempCellsHtml = timeline.map((s, i) => {
+ const color = tempColorHex(s.tempC);
+ const textColor = s.tempC >= 35 ? "white" : "#1f2937";
+ return `
`
+ + `${Math.round(s.tempC)}
`;
+ }).join("");
+
+ // Cooling mode cells
+ const coolCellsHtml = timeline.map(s => {
+ const mode = s.coolMode || "ac";
+ const color = coolModeColors[mode] || "#d1d5db";
+ return `
`;
+ }).join("");
+
+ container.innerHTML = `
+
+ ${hourLabelsHtml}
+
+
+ ${tempCellsHtml}
+
+
+ ${coolCellsHtml}
+
+ `;
+
+ // Tooltip handlers
+ container.querySelectorAll(".hm-temp-cell").forEach(cell => {
+ const handler = () => {
+ const idx = parseInt(cell.dataset.idx);
+ const slot = timeline[idx];
+ const modeLabel = labels[slot.coolMode] || slot.coolMode || "";
+ tooltip.innerHTML = `
+
${slot.hourStr}
+
${slot.tempC.toFixed(1)}\u00b0C \u00b7 ${(slot.humidityPct || 0).toFixed(0)}% RH
+
${slot.budgetStatus} \u00b7 ${esc(modeLabel)}
+ `;
+ const rect = cell.getBoundingClientRect();
+ const parentRect = tooltip.parentElement.getBoundingClientRect();
+ tooltip.style.left = (rect.left - parentRect.left + rect.width / 2 - 60) + "px";
+ tooltip.style.top = (rect.top - parentRect.top - tooltip.offsetHeight - 8) + "px";
+ tooltip.classList.remove("hidden");
+ };
+ cell.addEventListener("mouseenter", handler);
+ cell.addEventListener("click", handler);
+ });
+ container.addEventListener("mouseleave", () => tooltip.classList.add("hidden"));
+
+ // Legend
+ const usedModes = [...new Set(timeline.map(s => s.coolMode || "ac"))];
+ const legend = $("cooling-legend");
+ if (legend) {
+ legend.innerHTML = usedModes.map(mode => {
+ const color = coolModeColors[mode] || "#d1d5db";
+ const lbl = labels[mode] || mode;
+ return `
${esc(lbl)}`;
+ }).join("");
+ }
}
function esc(s) {
diff --git a/web/templates/dashboard.html b/web/templates/dashboard.html
index 0993449..2a52744 100644
--- a/web/templates/dashboard.html
+++ b/web/templates/dashboard.html
@@ -39,7 +39,8 @@