myio-js-library 0.1.157 → 0.1.158

package/dist/index.cjs

@@ -5134,8 +5134,14 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15) {
 }
 function paint(root, state) {
   const { entityObject, i18n, delayTimeConnectionInMins } = state;
-  if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
-    entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+  if (entityObject.connectionStatus) {
+    if (entityObject.connectionStatus === "offline") {
+      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    }
+  } else {
+    if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
+      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    }
   }
   const stateClass = getCardStateClass(entityObject.deviceStatus);
   root.className = `myio-ho-card ${stateClass}`;
@@ -10945,11 +10951,14 @@ var EnergyModalView = class {
   isLoading = false;
   currentTheme = "dark";
   currentBarMode = "stacked";
+  // RFC-0097: Granularity selector state (only 1h and 1d supported)
+  currentGranularity = "1d";
   constructor(modal, config) {
     this.modal = modal;
     this.config = config;
     this.initializeTheme();
     this.initializeBarMode();
+    this.initializeGranularity();
     this.validateConfiguration();
     this.render();
   }
@@ -10967,6 +10976,59 @@ var EnergyModalView = class {
     const savedBarMode = localStorage.getItem("myio-modal-bar-mode");
     this.currentBarMode = savedBarMode || "stacked";
   }
+  /**
+   * RFC-0097: Initializes granularity from config or localStorage
+   */
+  initializeGranularity() {
+    const savedGranularity = localStorage.getItem("myio-modal-granularity");
+    const configGranularity = this.config.params.granularity;
+    const candidate = savedGranularity || configGranularity || "1d";
+    this.currentGranularity = candidate === "1h" || candidate === "1d" ? candidate : "1d";
+  }
+  /**
+   * RFC-0097: Sets granularity and re-renders chart
+   */
+  setGranularity(granularity) {
+    if (this.currentGranularity === granularity) return;
+    this.currentGranularity = granularity;
+    const buttons = document.querySelectorAll(".myio-btn-granularity");
+    buttons.forEach((btn) => {
+      const btnEl = btn;
+      if (btnEl.dataset.granularity === granularity) {
+        btnEl.classList.add("active");
+      } else {
+        btnEl.classList.remove("active");
+      }
+    });
+    localStorage.setItem("myio-modal-granularity", granularity);
+    this.reRenderChart();
+    console.log("[EnergyModalView] [RFC-0097] Granularity changed to:", granularity);
+  }
+  /**
+   * RFC-0097: Calculates suggested granularity based on date range
+   * Only supports '1h' (hour) and '1d' (day)
+   */
+  calculateSuggestedGranularity(startDate, endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24));
+    if (diffDays <= 1) return "1h";
+    return "1d";
+  }
+  /**
+   * RFC-0097: Applies granularity UI state (highlights correct button)
+   */
+  applyGranularityUI() {
+    const buttons = document.querySelectorAll(".myio-btn-granularity");
+    buttons.forEach((btn) => {
+      const btnEl = btn;
+      if (btnEl.dataset.granularity === this.currentGranularity) {
+        btnEl.classList.add("active");
+      } else {
+        btnEl.classList.remove("active");
+      }
+    });
+  }
   /**
    * Toggles between dark and light theme
    */
@@ -11237,6 +11299,14 @@ var EnergyModalView = class {
               </svg>
             </button>
             ` : ""}
+            ${this.config.params.mode === "comparison" ? `
+            <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
+            <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
+              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
+            </div>
+            ` : ""}
             <button id="close-btn" class="myio-btn myio-btn-secondary">
               Fechar
             </button>
@@ -11459,8 +11529,8 @@ var EnergyModalView = class {
         // ← NO TIME (YYYY-MM-DD)
         endDate: endDateStr,
         // ← NO TIME (YYYY-MM-DD)
-        granularity: this.config.params.granularity,
-        // ← REQUIRED
+        granularity: this.currentGranularity,
+        // RFC-0097: Use current granularity from selector
         theme: this.currentTheme,
         // ← Use current theme (dynamic)
         bar_mode: this.currentBarMode,
@@ -11532,7 +11602,8 @@ var EnergyModalView = class {
         readingType: "temperature",
         startDate: startDateStr,
         endDate: endDateStr,
-        granularity: this.config.params.granularity,
+        granularity: this.currentGranularity,
+        // RFC-0097: Use current granularity from selector
         theme: this.currentTheme,
         timezone: tzIdentifier,
         iframeBaseUrl: this.config.params.chartsBaseUrl || "https://graphs.apps.myio-bas.com",
@@ -11855,6 +11926,20 @@ var EnergyModalView = class {
         this.toggleBarMode();
       });
     }
+    const granularityButtons = document.querySelectorAll(".myio-btn-granularity");
+    if (granularityButtons.length > 0) {
+      this.applyGranularityUI();
+      granularityButtons.forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const target = e.currentTarget;
+          const newGranularity = target.dataset.granularity;
+          if (newGranularity) {
+            this.setGranularity(newGranularity);
+          }
+        });
+      });
+      console.log("[EnergyModalView] [RFC-0097] Granularity selector initialized with:", this.currentGranularity);
+    }
     try {
       this.dateRangePicker = await attach(dateRangeInput, {
         presetStart: this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate,
@@ -11957,6 +12042,37 @@ var EnergyModalView = class {
         background: #e5e7eb;
       }
 
+      /* RFC-0097: Granularity selector buttons */
+      .myio-btn-granularity {
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: 6px;
+        border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        min-width: 36px;
+      }
+
+      .myio-btn-granularity:hover:not(.active) {
+        background: #f3f4f6;
+        border-color: var(--myio-energy-primary);
+        color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-granularity.active {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+      }
+
+      .myio-granularity-selector {
+        border: 1px solid var(--myio-energy-border);
+      }
+
       .myio-modal-scope {
         height: 100% !important;
         display: flex !important;
@@ -12337,7 +12453,9 @@ var EnergyModal = class {
       return;
     }
     if (!this.context?.resolved.ingestionId) {
-      const error = new Error("ingestionId not found in device attributes. Please configure the device properly.");
+      const error = new Error(
+        "ingestionId not found in device attributes. Please configure the device properly."
+      );
       this.handleError(error);
       return;
     }

package/dist/index.js

@@ -5026,8 +5026,14 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15) {
 }
 function paint(root, state) {
   const { entityObject, i18n, delayTimeConnectionInMins } = state;
-  if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
-    entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+  if (entityObject.connectionStatus) {
+    if (entityObject.connectionStatus === "offline") {
+      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    }
+  } else {
+    if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
+      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    }
   }
   const stateClass = getCardStateClass(entityObject.deviceStatus);
   root.className = `myio-ho-card ${stateClass}`;
@@ -10837,11 +10843,14 @@ var EnergyModalView = class {
   isLoading = false;
   currentTheme = "dark";
   currentBarMode = "stacked";
+  // RFC-0097: Granularity selector state (only 1h and 1d supported)
+  currentGranularity = "1d";
   constructor(modal, config) {
     this.modal = modal;
     this.config = config;
     this.initializeTheme();
     this.initializeBarMode();
+    this.initializeGranularity();
     this.validateConfiguration();
     this.render();
   }
@@ -10859,6 +10868,59 @@ var EnergyModalView = class {
     const savedBarMode = localStorage.getItem("myio-modal-bar-mode");
     this.currentBarMode = savedBarMode || "stacked";
   }
+  /**
+   * RFC-0097: Initializes granularity from config or localStorage
+   */
+  initializeGranularity() {
+    const savedGranularity = localStorage.getItem("myio-modal-granularity");
+    const configGranularity = this.config.params.granularity;
+    const candidate = savedGranularity || configGranularity || "1d";
+    this.currentGranularity = candidate === "1h" || candidate === "1d" ? candidate : "1d";
+  }
+  /**
+   * RFC-0097: Sets granularity and re-renders chart
+   */
+  setGranularity(granularity) {
+    if (this.currentGranularity === granularity) return;
+    this.currentGranularity = granularity;
+    const buttons = document.querySelectorAll(".myio-btn-granularity");
+    buttons.forEach((btn) => {
+      const btnEl = btn;
+      if (btnEl.dataset.granularity === granularity) {
+        btnEl.classList.add("active");
+      } else {
+        btnEl.classList.remove("active");
+      }
+    });
+    localStorage.setItem("myio-modal-granularity", granularity);
+    this.reRenderChart();
+    console.log("[EnergyModalView] [RFC-0097] Granularity changed to:", granularity);
+  }
+  /**
+   * RFC-0097: Calculates suggested granularity based on date range
+   * Only supports '1h' (hour) and '1d' (day)
+   */
+  calculateSuggestedGranularity(startDate, endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24));
+    if (diffDays <= 1) return "1h";
+    return "1d";
+  }
+  /**
+   * RFC-0097: Applies granularity UI state (highlights correct button)
+   */
+  applyGranularityUI() {
+    const buttons = document.querySelectorAll(".myio-btn-granularity");
+    buttons.forEach((btn) => {
+      const btnEl = btn;
+      if (btnEl.dataset.granularity === this.currentGranularity) {
+        btnEl.classList.add("active");
+      } else {
+        btnEl.classList.remove("active");
+      }
+    });
+  }
   /**
    * Toggles between dark and light theme
    */
@@ -11129,6 +11191,14 @@ var EnergyModalView = class {
               </svg>
             </button>
             ` : ""}
+            ${this.config.params.mode === "comparison" ? `
+            <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
+            <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
+              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
+            </div>
+            ` : ""}
             <button id="close-btn" class="myio-btn myio-btn-secondary">
               Fechar
             </button>
@@ -11351,8 +11421,8 @@ var EnergyModalView = class {
         // ← NO TIME (YYYY-MM-DD)
         endDate: endDateStr,
         // ← NO TIME (YYYY-MM-DD)
-        granularity: this.config.params.granularity,
-        // ← REQUIRED
+        granularity: this.currentGranularity,
+        // RFC-0097: Use current granularity from selector
         theme: this.currentTheme,
         // ← Use current theme (dynamic)
         bar_mode: this.currentBarMode,
@@ -11424,7 +11494,8 @@ var EnergyModalView = class {
         readingType: "temperature",
         startDate: startDateStr,
         endDate: endDateStr,
-        granularity: this.config.params.granularity,
+        granularity: this.currentGranularity,
+        // RFC-0097: Use current granularity from selector
         theme: this.currentTheme,
         timezone: tzIdentifier,
         iframeBaseUrl: this.config.params.chartsBaseUrl || "https://graphs.apps.myio-bas.com",
@@ -11747,6 +11818,20 @@ var EnergyModalView = class {
         this.toggleBarMode();
       });
     }
+    const granularityButtons = document.querySelectorAll(".myio-btn-granularity");
+    if (granularityButtons.length > 0) {
+      this.applyGranularityUI();
+      granularityButtons.forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const target = e.currentTarget;
+          const newGranularity = target.dataset.granularity;
+          if (newGranularity) {
+            this.setGranularity(newGranularity);
+          }
+        });
+      });
+      console.log("[EnergyModalView] [RFC-0097] Granularity selector initialized with:", this.currentGranularity);
+    }
     try {
       this.dateRangePicker = await attach(dateRangeInput, {
         presetStart: this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate,
@@ -11849,6 +11934,37 @@ var EnergyModalView = class {
         background: #e5e7eb;
       }
 
+      /* RFC-0097: Granularity selector buttons */
+      .myio-btn-granularity {
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: 6px;
+        border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        min-width: 36px;
+      }
+
+      .myio-btn-granularity:hover:not(.active) {
+        background: #f3f4f6;
+        border-color: var(--myio-energy-primary);
+        color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-granularity.active {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+      }
+
+      .myio-granularity-selector {
+        border: 1px solid var(--myio-energy-border);
+      }
+
       .myio-modal-scope {
         height: 100% !important;
         display: flex !important;
@@ -12229,7 +12345,9 @@ var EnergyModal = class {
       return;
     }
     if (!this.context?.resolved.ingestionId) {
-      const error = new Error("ingestionId not found in device attributes. Please configure the device properly.");
+      const error = new Error(
+        "ingestionId not found in device attributes. Please configure the device properly."
+      );
       this.handleError(error);
       return;
     }

package/dist/myio-js-library.umd.js

@@ -5018,8 +5018,14 @@
   }
   function paint(root, state) {
     const { entityObject, i18n, delayTimeConnectionInMins } = state;
-    if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
-      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    if (entityObject.connectionStatus) {
+      if (entityObject.connectionStatus === "offline") {
+        entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+      }
+    } else {
+      if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
+        entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+      }
     }
     const stateClass = getCardStateClass(entityObject.deviceStatus);
     root.className = `myio-ho-card ${stateClass}`;
@@ -10696,11 +10702,14 @@ ${rangeText}`;
     isLoading = false;
     currentTheme = "dark";
     currentBarMode = "stacked";
+    // RFC-0097: Granularity selector state (only 1h and 1d supported)
+    currentGranularity = "1d";
     constructor(modal, config) {
       this.modal = modal;
       this.config = config;
       this.initializeTheme();
       this.initializeBarMode();
+      this.initializeGranularity();
       this.validateConfiguration();
       this.render();
     }
@@ -10718,6 +10727,59 @@ ${rangeText}`;
       const savedBarMode = localStorage.getItem("myio-modal-bar-mode");
       this.currentBarMode = savedBarMode || "stacked";
     }
+    /**
+     * RFC-0097: Initializes granularity from config or localStorage
+     */
+    initializeGranularity() {
+      const savedGranularity = localStorage.getItem("myio-modal-granularity");
+      const configGranularity = this.config.params.granularity;
+      const candidate = savedGranularity || configGranularity || "1d";
+      this.currentGranularity = candidate === "1h" || candidate === "1d" ? candidate : "1d";
+    }
+    /**
+     * RFC-0097: Sets granularity and re-renders chart
+     */
+    setGranularity(granularity) {
+      if (this.currentGranularity === granularity) return;
+      this.currentGranularity = granularity;
+      const buttons = document.querySelectorAll(".myio-btn-granularity");
+      buttons.forEach((btn) => {
+        const btnEl = btn;
+        if (btnEl.dataset.granularity === granularity) {
+          btnEl.classList.add("active");
+        } else {
+          btnEl.classList.remove("active");
+        }
+      });
+      localStorage.setItem("myio-modal-granularity", granularity);
+      this.reRenderChart();
+      console.log("[EnergyModalView] [RFC-0097] Granularity changed to:", granularity);
+    }
+    /**
+     * RFC-0097: Calculates suggested granularity based on date range
+     * Only supports '1h' (hour) and '1d' (day)
+     */
+    calculateSuggestedGranularity(startDate, endDate) {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24));
+      if (diffDays <= 1) return "1h";
+      return "1d";
+    }
+    /**
+     * RFC-0097: Applies granularity UI state (highlights correct button)
+     */
+    applyGranularityUI() {
+      const buttons = document.querySelectorAll(".myio-btn-granularity");
+      buttons.forEach((btn) => {
+        const btnEl = btn;
+        if (btnEl.dataset.granularity === this.currentGranularity) {
+          btnEl.classList.add("active");
+        } else {
+          btnEl.classList.remove("active");
+        }
+      });
+    }
     /**
      * Toggles between dark and light theme
      */
@@ -10988,6 +11050,14 @@ ${rangeText}`;
               </svg>
             </button>
             ` : ""}
+            ${this.config.params.mode === "comparison" ? `
+            <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
+            <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
+              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
+            </div>
+            ` : ""}
             <button id="close-btn" class="myio-btn myio-btn-secondary">
               Fechar
             </button>
@@ -11210,8 +11280,8 @@ ${rangeText}`;
           // ← NO TIME (YYYY-MM-DD)
           endDate: endDateStr,
           // ← NO TIME (YYYY-MM-DD)
-          granularity: this.config.params.granularity,
-          // ← REQUIRED
+          granularity: this.currentGranularity,
+          // RFC-0097: Use current granularity from selector
           theme: this.currentTheme,
           // ← Use current theme (dynamic)
           bar_mode: this.currentBarMode,
@@ -11283,7 +11353,8 @@ ${rangeText}`;
           readingType: "temperature",
           startDate: startDateStr,
           endDate: endDateStr,
-          granularity: this.config.params.granularity,
+          granularity: this.currentGranularity,
+          // RFC-0097: Use current granularity from selector
           theme: this.currentTheme,
           timezone: tzIdentifier,
           iframeBaseUrl: this.config.params.chartsBaseUrl || "https://graphs.apps.myio-bas.com",
@@ -11606,6 +11677,20 @@ ${rangeText}`;
           this.toggleBarMode();
         });
       }
+      const granularityButtons = document.querySelectorAll(".myio-btn-granularity");
+      if (granularityButtons.length > 0) {
+        this.applyGranularityUI();
+        granularityButtons.forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            const target = e.currentTarget;
+            const newGranularity = target.dataset.granularity;
+            if (newGranularity) {
+              this.setGranularity(newGranularity);
+            }
+          });
+        });
+        console.log("[EnergyModalView] [RFC-0097] Granularity selector initialized with:", this.currentGranularity);
+      }
       try {
         this.dateRangePicker = await attach(dateRangeInput, {
           presetStart: this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate,
@@ -11708,6 +11793,37 @@ ${rangeText}`;
         background: #e5e7eb;
       }
 
+      /* RFC-0097: Granularity selector buttons */
+      .myio-btn-granularity {
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: 6px;
+        border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        min-width: 36px;
+      }
+
+      .myio-btn-granularity:hover:not(.active) {
+        background: #f3f4f6;
+        border-color: var(--myio-energy-primary);
+        color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-granularity.active {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+      }
+
+      .myio-granularity-selector {
+        border: 1px solid var(--myio-energy-border);
+      }
+
       .myio-modal-scope {
         height: 100% !important;
         display: flex !important;
@@ -12088,7 +12204,9 @@ ${rangeText}`;
         return;
       }
       if (!this.context?.resolved.ingestionId) {
-        const error = new Error("ingestionId not found in device attributes. Please configure the device properly.");
+        const error = new Error(
+          "ingestionId not found in device attributes. Please configure the device properly."
+        );
         this.handleError(error);
         return;
       }