@switchbot/homebridge-switchbot 5.0.0-beta.113 → 5.0.0-beta.115

package/dist/homebridge-ui/public/js/app.js

@@ -2574,6 +2574,63 @@ function renderDeviceDetailsPanel(device) {
     line.appendChild(label);
     line.appendChild(valueWrap);
     details.appendChild(line);
+    if (row.label === "Battery" && Array.isArray(batteryHistory) && batteryHistory.length > 1) {
+      const chart = document.createElement("div");
+      chart.style.margin = "2px 0 8px 0";
+      chart.style.width = "100%";
+      chart.style.height = "28px";
+      chart.style.display = "flex";
+      const w = 120, h = 24, pad = 2;
+      const min = Math.min(...batteryHistory.map((b) => b.value), 100);
+      const max = Math.max(...batteryHistory.map((b) => b.value), 0);
+      const range = max - min || 1;
+      const points = batteryHistory.map((b, i) => {
+        const x = pad + i * (w - 2 * pad) / (batteryHistory.length - 1);
+        const y = pad + (h - 2 * pad) * (1 - (b.value - min) / range);
+        return `${x},${y}`;
+      }).join(" ");
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("width", String(w));
+      svg.setAttribute("height", String(h));
+      svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+      svg.style.display = "block";
+      svg.style.background = "#f3f4f6";
+      svg.style.borderRadius = "3px";
+      svg.style.marginTop = "2px";
+      svg.style.boxShadow = "0 1px 2px #0001";
+      const polyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+      polyline.setAttribute("points", points);
+      polyline.setAttribute("fill", "none");
+      polyline.setAttribute("stroke", "#2563eb");
+      polyline.setAttribute("stroke-width", "2");
+      svg.appendChild(polyline);
+      batteryHistory.forEach((b, i) => {
+        const x = pad + i * (w - 2 * pad) / (batteryHistory.length - 1);
+        const y = pad + (h - 2 * pad) * (1 - (b.value - min) / range);
+        const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        circle.setAttribute("cx", String(x));
+        circle.setAttribute("cy", String(y));
+        circle.setAttribute("r", "2.5");
+        circle.setAttribute("fill", "#2563eb");
+        svg.appendChild(circle);
+      });
+      const minLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+      minLabel.setAttribute("x", "2");
+      minLabel.setAttribute("y", String(h - 2));
+      minLabel.setAttribute("font-size", "9");
+      minLabel.setAttribute("fill", "#888");
+      minLabel.textContent = `${min}%`;
+      svg.appendChild(minLabel);
+      const maxLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+      maxLabel.setAttribute("x", String(w - 18));
+      maxLabel.setAttribute("y", "10");
+      maxLabel.setAttribute("font-size", "9");
+      maxLabel.setAttribute("fill", "#888");
+      maxLabel.textContent = `${max}%`;
+      svg.appendChild(maxLabel);
+      chart.appendChild(svg);
+      details.appendChild(chart);
+    }
   }
   const featureKeys = [
     "airQuality",