Graph fixes

tutorials/device-dashboard/full-dashboard/web_root/index.html

@@ -205,7 +205,7 @@
             <div class="settings-fields">
               <div class="field">
                 <label class="field-label" for="setting-name">Name</label>
-                <input class="field-input" id="setting-name" type="text" data-bind="settings.name" />
+                <input class="field-input" id="setting-name" type="text" data-bind="settings.name" data-autosave="1" />
               </div>
               <div class="field">
                 <label class="field-label" for="setting-volume">Volume</label>

tutorials/device-dashboard/full-dashboard/web_root/main.js

@@ -2,6 +2,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const tabs = Array.from(document.querySelectorAll(".header-left .nav-link[href^='#']"));
   const panels = Array.from(document.querySelectorAll(".tab-panel"));
 
+  let chart = null;
+
   const activateTab = targetId => {
     const targetPanel = document.getElementById(targetId);
     if (!targetPanel) return;
@@ -18,6 +20,19 @@ document.addEventListener("DOMContentLoaded", () => {
       panel.classList.toggle("tab-panel-active", isActive);
       panel.hidden = !isActive;
     });
+
+    requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) rect.height = rect.width = 10;
+
+      if (!chart) {
+        options.width = rect.width;
+        options.height = rect.height;
+        chart = new uPlot(options, [], el);
+      } else {
+        chart.setSize({ width: rect.width, height: rect.height });
+      }
+    });
   };
 
   tabs.forEach(tab => {
@@ -34,11 +49,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
   const el = document.getElementById("chart");
-  const rect = el.getBoundingClientRect();
 
   const options = {
-    width: rect.width,
-    height: rect.height,
+    width: 100,
+    height: 100,
     tzDate: (ts) => uPlot.tzDate(new Date(ts * 1e3), "Europe/London"),
     plugins: [],
     legend: { show: false },
@@ -53,17 +67,13 @@ document.addEventListener("DOMContentLoaded", () => {
     ],
   };
 
-  // Create chart instance
-  const chart = new uPlot(options, [], el);
-
   function updateGraphPoints(args) {
-    if (!args.points) return;
+    if (!args.points || !chart) return;
     const data = [
       args.points.map(x => x[0]),
       args.points.map(x => x[1]),
       args.points.map(x => x[2]),
     ];
-    //console.log(123, args.points);
     chart.setData(data);
   };
 

tutorials/device-dashboard/full-dashboard/web_root/style.css

@@ -114,6 +114,7 @@ body {
   transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   gap: var(--spacing-2);
   text-decoration: none;
+  white-space: nowrap;
 }
 
 .nav-link-active {