myio-js-library 0.1.161 → 0.1.163

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

@@ -650,6 +650,10 @@
   }
 
   // src/format/water.ts
+  function formatWater(value) {
+    const num = Number(value) || 0;
+    return `${num.toFixed(2)} m\xB3`;
+  }
   function formatWaterVolumeM3(value, locale = "pt-BR") {
     if (value === null || value === void 0 || isNaN(value)) {
       return "-";
@@ -727,6 +731,76 @@
     };
   }
 
+  // src/format/time.ts
+  function formatRelativeTime(timestamp) {
+    if (!timestamp || timestamp <= 0) {
+      return "\u2014";
+    }
+    const now = Date.now();
+    const diffSeconds = Math.round((now - timestamp) / 1e3);
+    if (diffSeconds < 10) {
+      return "agora";
+    }
+    if (diffSeconds < 60) {
+      return `h\xE1 ${diffSeconds}s`;
+    }
+    const diffMinutes = Math.round(diffSeconds / 60);
+    if (diffMinutes === 1) {
+      return "h\xE1 1 min";
+    }
+    if (diffMinutes < 60) {
+      return `h\xE1 ${diffMinutes} mins`;
+    }
+    const diffHours = Math.round(diffMinutes / 60);
+    if (diffHours === 1) {
+      return "h\xE1 1 hora";
+    }
+    if (diffHours < 24) {
+      return `h\xE1 ${diffHours} horas`;
+    }
+    const diffDays = Math.round(diffHours / 24);
+    if (diffDays === 1) {
+      return "ontem";
+    }
+    if (diffDays <= 30) {
+      return `h\xE1 ${diffDays} dias`;
+    }
+    return new Date(timestamp).toLocaleDateString("pt-BR");
+  }
+  function formatarDuracao(ms) {
+    if (typeof ms !== "number" || ms < 0 || !isFinite(ms)) {
+      return "0s";
+    }
+    if (ms === 0) {
+      return "0s";
+    }
+    const segundos = Math.floor(ms / 1e3 % 60);
+    const minutos = Math.floor(ms / (1e3 * 60) % 60);
+    const horas = Math.floor(ms / (1e3 * 60 * 60) % 24);
+    const dias = Math.floor(ms / (1e3 * 60 * 60 * 24));
+    const parts = [];
+    if (dias > 0) {
+      parts.push(`${dias}d`);
+      if (horas > 0) {
+        parts.push(`${horas}h`);
+      }
+    } else if (horas > 0) {
+      parts.push(`${horas}h`);
+      if (minutos > 0) {
+        parts.push(`${minutos}m`);
+      }
+    } else if (minutos > 0) {
+      parts.push(`${minutos}m`);
+      if (segundos > 0) {
+        parts.push(`${segundos}s`);
+      }
+    } else {
+      parts.push(`${segundos}s`);
+    }
+    return parts.length > 0 ? parts.join(" ") : "0s";
+  }
+  var formatDuration = formatarDuracao;
+
   // src/date/ymd.ts
   function formatDateToYMD(date) {
     if (!date) {
@@ -1235,6 +1309,11 @@
     }
     return getValueByDatakey(data, keyOrPath);
   }
+  function findValueWithDefault(values, key, defaultValue = null) {
+    if (!Array.isArray(values)) return defaultValue;
+    const found = values.find((v) => v.key === key || v.dataType === key);
+    return found ? found.value : defaultValue;
+  }
 
   // src/utils/deviceStatus.js
   var DeviceStatusType = {
@@ -1291,6 +1370,16 @@
     }
     return ConnectionStatusType.CONNECTED;
   }
+  function mapConnectionStatus(rawStatus) {
+    const statusLower = String(rawStatus || "").toLowerCase().trim();
+    if (statusLower === "online" || statusLower === "ok" || statusLower === "running") {
+      return "online";
+    }
+    if (statusLower === "waiting" || statusLower === "connecting" || statusLower === "pending") {
+      return "waiting";
+    }
+    return "offline";
+  }
   function mapDeviceStatusToCardStatus(deviceStatus) {
     const statusMap = {
       [DeviceStatusType.POWER_ON]: "ok",
@@ -7690,14 +7779,14 @@ ${rangeText}`;
       return `${value.toFixed(config.decimals)} ${config.unit}`;
     }
     function initializeChart() {
-      const Chart = window.Chart;
-      if (!Chart) {
+      const Chart2 = window.Chart;
+      if (!Chart2) {
         console.warn("[RealTimeTelemetry] Chart.js not loaded");
         return;
       }
       chartContainer.style.display = "block";
       const config = TELEMETRY_CONFIG[selectedChartKey] || { label: selectedChartKey, unit: "" };
-      chart = new Chart(chartCanvas, {
+      chart = new Chart2(chartCanvas, {
         type: "line",
         data: {
           datasets: [{
@@ -10562,8 +10651,8 @@ ${rangeText}`;
           peakEl.textContent = `${strings.maximum}: ${peak.formattedValue} kW ${peak.key ? `(${peak.key}) ` : ""}${strings.at} ${dateStr}`;
           peakEl.style.display = "block";
         }
-        const Chart = window.Chart;
-        Chart.register(window.ChartZoom);
+        const Chart2 = window.Chart;
+        Chart2.register(window.ChartZoom);
         if (chart) {
           chart.data.datasets = chartData.series.map((series) => ({
             label: series.label,
@@ -10615,7 +10704,7 @@ ${rangeText}`;
           };
           chart.update();
         } else {
-          chart = new Chart(chartCanvas, {
+          chart = new Chart2(chartCanvas, {
             type: "line",
             data: {
               datasets: chartData.series.map((series) => ({
@@ -18747,8 +18836,8 @@ ${rangeText}`;
             <div class="myio-goals-progress-fill" style="width: ${Math.min(progress, 100)}%"></div>
           </div>
           <div class="myio-goals-progress-text">
-            <span>${formatNumber2(monthlySum, locale)} ${annual.unit}</span>
-            <span>${formatNumber2(annual.total, locale)} ${annual.unit}</span>
+            <span>${formatNumber3(monthlySum, locale)} ${annual.unit}</span>
+            <span>${formatNumber3(annual.total, locale)} ${annual.unit}</span>
           </div>
 
           <!-- Monthly Grid -->
@@ -18822,7 +18911,7 @@ ${rangeText}`;
             <span>${assetData.label || assetId}</span>
           </div>
           <div class="myio-goals-asset-total">
-            ${formatNumber2(assetData.annual?.total || 0, locale)} ${assetData.annual?.unit || "kWh"}
+            ${formatNumber3(assetData.annual?.total || 0, locale)} ${assetData.annual?.unit || "kWh"}
           </div>
           <button class="myio-goals-btn-icon" data-action="delete-asset" data-asset-id="${assetId}" aria-label="${i18n.deleteAsset}">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -19137,7 +19226,7 @@ ${rangeText}`;
           monthlySum += value;
         }
         if (monthlySum > annualTotal && annualTotal > 0) {
-          errors.push(`${i18n.errorMonthlyExceedsAnnual} (${formatNumber2(monthlySum, locale)} > ${formatNumber2(annualTotal, locale)})`);
+          errors.push(`${i18n.errorMonthlyExceedsAnnual} (${formatNumber3(monthlySum, locale)} > ${formatNumber3(annualTotal, locale)})`);
         }
       }
       return errors;
@@ -19228,8 +19317,8 @@ ${rangeText}`;
       }
       if (progressTexts.length === 2) {
         const unit = document.getElementById("unit-select")?.value || "kWh";
-        progressTexts[0].textContent = `${formatNumber2(monthlySum, locale)} ${unit}`;
-        progressTexts[1].textContent = `${formatNumber2(annualTotal, locale)} ${unit}`;
+        progressTexts[0].textContent = `${formatNumber3(monthlySum, locale)} ${unit}`;
+        progressTexts[1].textContent = `${formatNumber3(annualTotal, locale)} ${unit}`;
       }
     }
     function updateMonthlyUnits(unit) {
@@ -19327,7 +19416,7 @@ ${rangeText}`;
       modal.addEventListener("keydown", handleTab);
       firstElement.focus();
     }
-    function formatNumber2(value, locale2) {
+    function formatNumber3(value, locale2) {
       return new Intl.NumberFormat(locale2, {
         minimumFractionDigits: 0,
         maximumFractionDigits: 2
@@ -22278,10 +22367,3006 @@ ${rangeText}`;
     return { destroy };
   }
 
+  // src/components/ModalHeader/index.ts
+  var DEFAULT_BG_COLOR = "#3e1a7d";
+  var DEFAULT_TEXT_COLOR = "white";
+  var DEFAULT_BORDER_RADIUS = "10px 10px 0 0";
+  var EXPORT_FORMAT_LABELS = {
+    csv: "CSV",
+    xls: "Excel (XLS)",
+    pdf: "PDF"
+  };
+  var EXPORT_FORMAT_ICONS = {
+    csv: "\u{1F4C4}",
+    xls: "\u{1F4CA}",
+    pdf: "\u{1F4D1}"
+  };
+  function createModalHeader(config) {
+    let currentTheme = config.theme || "light";
+    let currentIsMaximized = config.isMaximized || false;
+    let currentTitle = config.title;
+    let themeBtn = null;
+    let maximizeBtn = null;
+    let closeBtn = null;
+    let exportBtn = null;
+    let exportDropdown = null;
+    const cleanupHandlers = [];
+    const handleThemeClick = () => {
+      currentTheme = currentTheme === "light" ? "dark" : "light";
+      config.onThemeToggle?.(currentTheme);
+      updateButtonIcons();
+    };
+    const handleMaximizeClick = () => {
+      currentIsMaximized = !currentIsMaximized;
+      config.onMaximize?.(currentIsMaximized);
+      updateButtonIcons();
+    };
+    const handleCloseClick = () => {
+      config.onClose?.();
+    };
+    const handleExportClick = (format) => {
+      config.onExport?.(format);
+      if (exportDropdown) {
+        exportDropdown.style.display = "none";
+      }
+    };
+    function updateButtonIcons() {
+      if (themeBtn) {
+        themeBtn.textContent = currentTheme === "dark" ? "\u2600\uFE0F" : "\u{1F319}";
+        themeBtn.title = currentTheme === "dark" ? "Modo claro" : "Modo escuro";
+      }
+      if (maximizeBtn) {
+        maximizeBtn.textContent = currentIsMaximized ? "\u{1F5D7}" : "\u{1F5D6}";
+        maximizeBtn.title = currentIsMaximized ? "Restaurar" : "Maximizar";
+      }
+    }
+    function getButtonStyle() {
+      return `
+      background: none;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 6px;
+      color: rgba(255, 255, 255, 0.8);
+      transition: background-color 0.2s, color 0.2s;
+    `.replace(/\s+/g, " ").trim();
+    }
+    function renderExportDropdown() {
+      const formats = config.exportFormats || [];
+      if (formats.length === 0) return "";
+      if (formats.length === 1) {
+        return `
+        <button id="${config.id}-export" title="Exportar ${EXPORT_FORMAT_LABELS[formats[0]]}" style="${getButtonStyle()}">
+          \u{1F4E5}
+        </button>
+      `;
+      }
+      return `
+      <div style="position: relative; display: inline-block;">
+        <button id="${config.id}-export-btn" title="Exportar" style="${getButtonStyle()}">
+          \u{1F4E5}
+        </button>
+        <div id="${config.id}-export-dropdown" style="
+          display: none;
+          position: absolute;
+          top: 100%;
+          right: 0;
+          background: white;
+          border-radius: 6px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+          min-width: 140px;
+          z-index: 10001;
+          margin-top: 4px;
+          overflow: hidden;
+        ">
+          ${formats.map((format) => `
+            <button
+              id="${config.id}-export-${format}"
+              class="myio-export-option"
+              data-format="${format}"
+              style="
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                width: 100%;
+                padding: 10px 14px;
+                border: none;
+                background: white;
+                cursor: pointer;
+                font-size: 13px;
+                color: #333;
+                text-align: left;
+                transition: background-color 0.2s;
+              "
+            >
+              ${EXPORT_FORMAT_ICONS[format]} ${EXPORT_FORMAT_LABELS[format]}
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    `;
+    }
+    const instance = {
+      render() {
+        const bgColor = config.backgroundColor || DEFAULT_BG_COLOR;
+        const textColor = config.textColor || DEFAULT_TEXT_COLOR;
+        const borderRadius = currentIsMaximized ? "0" : config.borderRadius || DEFAULT_BORDER_RADIUS;
+        const showTheme = config.showThemeToggle !== false;
+        const showMax = config.showMaximize !== false;
+        const showClose = config.showClose !== false;
+        const showExport = config.exportFormats && config.exportFormats.length > 0;
+        const iconHtml = config.icon ? `<span style="margin-right: 8px;">${config.icon}</span>` : "";
+        const buttonStyle = getButtonStyle();
+        return `
+        <div class="myio-modal-header" style="
+          padding: 4px 8px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background: ${bgColor};
+          color: ${textColor};
+          border-radius: ${borderRadius};
+          min-height: 20px;
+          font-family: 'Roboto', Arial, sans-serif;
+        ">
+          <h2 id="${config.id}-header-title" style="
+            margin: 6px;
+            font-size: 18px;
+            font-weight: 600;
+            color: ${textColor};
+            line-height: 2;
+            display: flex;
+            align-items: center;
+          ">
+            ${iconHtml}${currentTitle}
+          </h2>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            ${showExport ? renderExportDropdown() : ""}
+            ${showTheme ? `
+              <button id="${config.id}-theme-toggle" title="${currentTheme === "dark" ? "Modo claro" : "Modo escuro"}" style="${buttonStyle}">
+                ${currentTheme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}
+              </button>
+            ` : ""}
+            ${showMax ? `
+              <button id="${config.id}-maximize" title="${currentIsMaximized ? "Restaurar" : "Maximizar"}" style="${buttonStyle}">
+                ${currentIsMaximized ? "\u{1F5D7}" : "\u{1F5D6}"}
+              </button>
+            ` : ""}
+            ${showClose ? `
+              <button id="${config.id}-close" title="Fechar" style="${buttonStyle}; font-size: 20px;">
+                \xD7
+              </button>
+            ` : ""}
+          </div>
+        </div>
+      `;
+      },
+      attachListeners() {
+        themeBtn = document.getElementById(`${config.id}-theme-toggle`);
+        maximizeBtn = document.getElementById(`${config.id}-maximize`);
+        closeBtn = document.getElementById(`${config.id}-close`);
+        const singleExportBtn = document.getElementById(`${config.id}-export`);
+        if (singleExportBtn && config.exportFormats?.length === 1) {
+          exportBtn = singleExportBtn;
+          const format = config.exportFormats[0];
+          const clickHandler = () => handleExportClick(format);
+          exportBtn.addEventListener("click", clickHandler);
+          cleanupHandlers.push(() => exportBtn?.removeEventListener("click", clickHandler));
+          const enterHandler = () => {
+            exportBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          };
+          const leaveHandler = () => {
+            exportBtn.style.backgroundColor = "transparent";
+          };
+          exportBtn.addEventListener("mouseenter", enterHandler);
+          exportBtn.addEventListener("mouseleave", leaveHandler);
+          cleanupHandlers.push(() => {
+            exportBtn?.removeEventListener("mouseenter", enterHandler);
+            exportBtn?.removeEventListener("mouseleave", leaveHandler);
+          });
+        }
+        const exportDropdownBtn = document.getElementById(`${config.id}-export-btn`);
+        exportDropdown = document.getElementById(`${config.id}-export-dropdown`);
+        if (exportDropdownBtn && exportDropdown) {
+          exportBtn = exportDropdownBtn;
+          const toggleHandler = (e) => {
+            e.stopPropagation();
+            if (exportDropdown) {
+              exportDropdown.style.display = exportDropdown.style.display === "none" ? "block" : "none";
+            }
+          };
+          exportDropdownBtn.addEventListener("click", toggleHandler);
+          cleanupHandlers.push(() => exportDropdownBtn.removeEventListener("click", toggleHandler));
+          const outsideClickHandler = (e) => {
+            if (exportDropdown && !exportDropdown.contains(e.target) && e.target !== exportDropdownBtn) {
+              exportDropdown.style.display = "none";
+            }
+          };
+          document.addEventListener("click", outsideClickHandler);
+          cleanupHandlers.push(() => document.removeEventListener("click", outsideClickHandler));
+          config.exportFormats?.forEach((format) => {
+            const btn = document.getElementById(`${config.id}-export-${format}`);
+            if (btn) {
+              const clickHandler = () => handleExportClick(format);
+              btn.addEventListener("click", clickHandler);
+              cleanupHandlers.push(() => btn.removeEventListener("click", clickHandler));
+              const enterHandler2 = () => {
+                btn.style.backgroundColor = "#f0f0f0";
+              };
+              const leaveHandler2 = () => {
+                btn.style.backgroundColor = "white";
+              };
+              btn.addEventListener("mouseenter", enterHandler2);
+              btn.addEventListener("mouseleave", leaveHandler2);
+              cleanupHandlers.push(() => {
+                btn.removeEventListener("mouseenter", enterHandler2);
+                btn.removeEventListener("mouseleave", leaveHandler2);
+              });
+            }
+          });
+          const enterHandler = () => {
+            exportDropdownBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          };
+          const leaveHandler = () => {
+            exportDropdownBtn.style.backgroundColor = "transparent";
+          };
+          exportDropdownBtn.addEventListener("mouseenter", enterHandler);
+          exportDropdownBtn.addEventListener("mouseleave", leaveHandler);
+          cleanupHandlers.push(() => {
+            exportDropdownBtn.removeEventListener("mouseenter", enterHandler);
+            exportDropdownBtn.removeEventListener("mouseleave", leaveHandler);
+          });
+        }
+        if (themeBtn && config.showThemeToggle !== false) {
+          themeBtn.addEventListener("click", handleThemeClick);
+          cleanupHandlers.push(() => themeBtn?.removeEventListener("click", handleThemeClick));
+          const enterHandler = () => {
+            themeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          };
+          const leaveHandler = () => {
+            themeBtn.style.backgroundColor = "transparent";
+          };
+          themeBtn.addEventListener("mouseenter", enterHandler);
+          themeBtn.addEventListener("mouseleave", leaveHandler);
+          cleanupHandlers.push(() => {
+            themeBtn?.removeEventListener("mouseenter", enterHandler);
+            themeBtn?.removeEventListener("mouseleave", leaveHandler);
+          });
+        }
+        if (maximizeBtn && config.showMaximize !== false) {
+          maximizeBtn.addEventListener("click", handleMaximizeClick);
+          cleanupHandlers.push(() => maximizeBtn?.removeEventListener("click", handleMaximizeClick));
+          const enterHandler = () => {
+            maximizeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          };
+          const leaveHandler = () => {
+            maximizeBtn.style.backgroundColor = "transparent";
+          };
+          maximizeBtn.addEventListener("mouseenter", enterHandler);
+          maximizeBtn.addEventListener("mouseleave", leaveHandler);
+          cleanupHandlers.push(() => {
+            maximizeBtn?.removeEventListener("mouseenter", enterHandler);
+            maximizeBtn?.removeEventListener("mouseleave", leaveHandler);
+          });
+        }
+        if (closeBtn && config.showClose !== false) {
+          closeBtn.addEventListener("click", handleCloseClick);
+          cleanupHandlers.push(() => closeBtn?.removeEventListener("click", handleCloseClick));
+          const enterHandler = () => {
+            closeBtn.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+          };
+          const leaveHandler = () => {
+            closeBtn.style.backgroundColor = "transparent";
+          };
+          closeBtn.addEventListener("mouseenter", enterHandler);
+          closeBtn.addEventListener("mouseleave", leaveHandler);
+          cleanupHandlers.push(() => {
+            closeBtn?.removeEventListener("mouseenter", enterHandler);
+            closeBtn?.removeEventListener("mouseleave", leaveHandler);
+          });
+        }
+      },
+      update(updates) {
+        if (updates.theme !== void 0) {
+          currentTheme = updates.theme;
+          updateButtonIcons();
+        }
+        if (updates.isMaximized !== void 0) {
+          currentIsMaximized = updates.isMaximized;
+          updateButtonIcons();
+        }
+        if (updates.title !== void 0) {
+          currentTitle = updates.title;
+          const titleEl = document.getElementById(`${config.id}-header-title`);
+          if (titleEl) {
+            const iconHtml = config.icon ? `<span style="margin-right: 8px;">${config.icon}</span>` : "";
+            titleEl.innerHTML = `${iconHtml}${currentTitle}`;
+          }
+        }
+      },
+      getState() {
+        return {
+          theme: currentTheme,
+          isMaximized: currentIsMaximized
+        };
+      },
+      destroy() {
+        cleanupHandlers.forEach((handler) => handler());
+        cleanupHandlers.length = 0;
+        themeBtn = null;
+        maximizeBtn = null;
+        closeBtn = null;
+        exportBtn = null;
+        exportDropdown = null;
+      }
+    };
+    return instance;
+  }
+  function getModalHeaderStyles() {
+    return `
+    .myio-modal-header button:hover {
+      background-color: rgba(255, 255, 255, 0.2) !important;
+    }
+    .myio-modal-header button:active {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+    .myio-export-option:hover {
+      background-color: #f0f0f0 !important;
+    }
+  `;
+  }
+
+  // src/components/Consumption7DaysChart/types.ts
+  var DEFAULT_COLORS = {
+    energy: {
+      primary: "#2563eb",
+      background: "rgba(37, 99, 235, 0.1)",
+      gradient: ["#f0fdf4", "#dcfce7"],
+      pointBackground: "#2563eb",
+      pointBorder: "#ffffff"
+    },
+    water: {
+      primary: "#0288d1",
+      background: "rgba(2, 136, 209, 0.1)",
+      gradient: ["#f0f9ff", "#bae6fd"],
+      pointBackground: "#0288d1",
+      pointBorder: "#ffffff"
+    },
+    gas: {
+      primary: "#ea580c",
+      background: "rgba(234, 88, 12, 0.1)",
+      gradient: ["#fff7ed", "#fed7aa"],
+      pointBackground: "#ea580c",
+      pointBorder: "#ffffff"
+    },
+    temperature: {
+      primary: "#dc2626",
+      background: "rgba(220, 38, 38, 0.1)",
+      gradient: ["#fef2f2", "#fecaca"],
+      pointBackground: "#dc2626",
+      pointBorder: "#ffffff"
+    }
+  };
+  var THEME_COLORS = {
+    light: {
+      chartBackground: "#ffffff",
+      text: "#1f2937",
+      textMuted: "#6b7280",
+      grid: "rgba(0, 0, 0, 0.1)",
+      border: "#e5e7eb",
+      tooltipBackground: "#ffffff",
+      tooltipText: "#1f2937"
+    },
+    dark: {
+      chartBackground: "#1f2937",
+      text: "#f9fafb",
+      textMuted: "#9ca3af",
+      grid: "rgba(255, 255, 255, 0.1)",
+      border: "#374151",
+      tooltipBackground: "#374151",
+      tooltipText: "#f9fafb"
+    }
+  };
+  var DEFAULT_CONFIG = {
+    defaultPeriod: 7,
+    defaultChartType: "line",
+    defaultVizMode: "total",
+    defaultTheme: "light",
+    cacheTTL: 3e5,
+    // 5 minutes
+    decimalPlaces: 1,
+    lineTension: 0.4,
+    pointRadius: 4,
+    borderWidth: 2,
+    fill: true,
+    showLegend: false,
+    enableExport: true
+  };
+
+  // src/components/Consumption7DaysChart/createConsumption7DaysChart.ts
+  function createConsumption7DaysChart(config) {
+    let chartInstance = null;
+    let cachedData = null;
+    let currentPeriod = config.defaultPeriod ?? DEFAULT_CONFIG.defaultPeriod;
+    let currentChartType = config.defaultChartType ?? DEFAULT_CONFIG.defaultChartType;
+    let currentVizMode = config.defaultVizMode ?? DEFAULT_CONFIG.defaultVizMode;
+    let currentTheme = config.theme ?? DEFAULT_CONFIG.defaultTheme;
+    let currentIdealRange = config.idealRange ?? null;
+    let isRendered = false;
+    let autoRefreshTimer = null;
+    const colors = {
+      ...DEFAULT_COLORS[config.domain] ?? DEFAULT_COLORS.energy,
+      ...config.colors
+    };
+    function $id(id) {
+      if (config.$container && config.$container[0]) {
+        return config.$container[0].querySelector(`#${id}`);
+      }
+      return document.getElementById(id);
+    }
+    function log(level, ...args) {
+      const prefix = `[${config.domain.toUpperCase()}]`;
+      console[level](prefix, ...args);
+    }
+    function calculateYAxisMax(values) {
+      const maxValue = Math.max(...values, 0);
+      if (config.domain === "temperature") {
+        const tempConfig = config.temperatureConfig;
+        if (tempConfig?.clampRange) {
+          return tempConfig.clampRange.max;
+        }
+        const maxWithThreshold = Math.max(
+          maxValue,
+          tempConfig?.maxThreshold?.value ?? 0,
+          tempConfig?.idealRange?.max ?? 0
+        );
+        return Math.ceil(maxWithThreshold + 5);
+      }
+      if (maxValue === 0) {
+        return config.thresholdForLargeUnit ? config.thresholdForLargeUnit / 2 : 500;
+      }
+      let roundTo;
+      if (config.thresholdForLargeUnit && maxValue >= config.thresholdForLargeUnit) {
+        roundTo = config.thresholdForLargeUnit / 10;
+      } else if (maxValue >= 1e3) {
+        roundTo = 100;
+      } else if (maxValue >= 100) {
+        roundTo = 50;
+      } else if (maxValue >= 10) {
+        roundTo = 10;
+      } else {
+        roundTo = 5;
+      }
+      return Math.ceil(maxValue * 1.1 / roundTo) * roundTo;
+    }
+    function calculateYAxisMin(values) {
+      if (config.domain !== "temperature") {
+        return 0;
+      }
+      const tempConfig = config.temperatureConfig;
+      if (tempConfig?.clampRange) {
+        return tempConfig.clampRange.min;
+      }
+      const minValue = Math.min(...values);
+      const minWithThreshold = Math.min(
+        minValue,
+        tempConfig?.minThreshold?.value ?? minValue,
+        tempConfig?.idealRange?.min ?? minValue
+      );
+      return Math.floor(minWithThreshold - 5);
+    }
+    function buildTemperatureAnnotations() {
+      const tempConfig = config.temperatureConfig;
+      if (!tempConfig || config.domain !== "temperature") {
+        return {};
+      }
+      const annotations = {};
+      const createLineAnnotation = (line, id) => {
+        const borderDash = line.lineStyle === "dashed" ? [6, 6] : line.lineStyle === "dotted" ? [2, 2] : [];
+        return {
+          type: "line",
+          yMin: line.value,
+          yMax: line.value,
+          borderColor: line.color,
+          borderWidth: line.lineWidth ?? 2,
+          borderDash,
+          label: {
+            display: true,
+            content: line.label,
+            position: "end",
+            backgroundColor: line.color,
+            color: "#fff",
+            font: { size: 10, weight: "bold" },
+            padding: { x: 4, y: 2 }
+          }
+        };
+      };
+      if (tempConfig.minThreshold) {
+        annotations["minThreshold"] = createLineAnnotation(tempConfig.minThreshold);
+      }
+      if (tempConfig.maxThreshold) {
+        annotations["maxThreshold"] = createLineAnnotation(tempConfig.maxThreshold);
+      }
+      if (tempConfig.idealRange) {
+        annotations["idealRange"] = {
+          type: "box",
+          yMin: tempConfig.idealRange.min,
+          yMax: tempConfig.idealRange.max,
+          backgroundColor: tempConfig.idealRange.color,
+          borderWidth: 0,
+          label: tempConfig.idealRange.label ? {
+            display: true,
+            content: tempConfig.idealRange.label,
+            position: { x: "start", y: "center" },
+            color: "#666",
+            font: { size: 10 }
+          } : void 0
+        };
+      }
+      return annotations;
+    }
+    function buildIdealRangeAnnotation() {
+      if (!currentIdealRange) {
+        return {};
+      }
+      const { min, max, enabled = true } = currentIdealRange;
+      if (!enabled || min === 0 && max === 0 || min >= max) {
+        return {};
+      }
+      const defaultColors = {
+        temperature: { bg: "rgba(34, 197, 94, 0.15)", border: "rgba(34, 197, 94, 0.4)" },
+        energy: { bg: "rgba(37, 99, 235, 0.1)", border: "rgba(37, 99, 235, 0.3)" },
+        water: { bg: "rgba(2, 136, 209, 0.1)", border: "rgba(2, 136, 209, 0.3)" },
+        gas: { bg: "rgba(234, 88, 12, 0.1)", border: "rgba(234, 88, 12, 0.3)" }
+      };
+      const domainDefaults = defaultColors[config.domain] || defaultColors.energy;
+      return {
+        idealRangeBox: {
+          type: "box",
+          yMin: min,
+          yMax: max,
+          backgroundColor: currentIdealRange.color || domainDefaults.bg,
+          borderColor: currentIdealRange.borderColor || domainDefaults.border,
+          borderWidth: 1,
+          label: currentIdealRange.label ? {
+            display: true,
+            content: currentIdealRange.label,
+            position: { x: "start", y: "center" },
+            color: "#666",
+            font: { size: 10, style: "italic" },
+            backgroundColor: "rgba(255, 255, 255, 0.8)",
+            padding: { x: 4, y: 2 }
+          } : void 0
+        }
+      };
+    }
+    function formatValue(value, includeUnit = true) {
+      const decimals = config.decimalPlaces ?? DEFAULT_CONFIG.decimalPlaces;
+      if (config.unitLarge && config.thresholdForLargeUnit && value >= config.thresholdForLargeUnit) {
+        const converted = value / config.thresholdForLargeUnit;
+        return includeUnit ? `${converted.toFixed(decimals)} ${config.unitLarge}` : converted.toFixed(decimals);
+      }
+      return includeUnit ? `${value.toFixed(decimals)} ${config.unit}` : value.toFixed(decimals);
+    }
+    function formatTickValue(value) {
+      if (config.unitLarge && config.thresholdForLargeUnit && value >= config.thresholdForLargeUnit) {
+        return `${(value / config.thresholdForLargeUnit).toFixed(1)}`;
+      }
+      return value.toFixed(0);
+    }
+    function buildChartConfig(data) {
+      const yAxisMax = calculateYAxisMax(data.dailyTotals);
+      const yAxisMin = calculateYAxisMin(data.dailyTotals);
+      const tension = config.lineTension ?? DEFAULT_CONFIG.lineTension;
+      const pointRadius = config.pointRadius ?? DEFAULT_CONFIG.pointRadius;
+      const borderWidth = config.borderWidth ?? DEFAULT_CONFIG.borderWidth;
+      const fill = config.fill ?? DEFAULT_CONFIG.fill;
+      const showLegend = config.showLegend ?? DEFAULT_CONFIG.showLegend;
+      const themeColors = THEME_COLORS[currentTheme];
+      const isTemperature = config.domain === "temperature";
+      let datasets;
+      if (currentVizMode === "separate" && data.shoppingData && data.shoppingNames) {
+        const shoppingColors = colors.shoppingColors || [
+          "#2563eb",
+          "#16a34a",
+          "#ea580c",
+          "#dc2626",
+          "#8b5cf6",
+          "#0891b2",
+          "#65a30d",
+          "#d97706",
+          "#be185d",
+          "#0d9488"
+        ];
+        datasets = Object.entries(data.shoppingData).map(([shoppingId, values], index) => ({
+          label: data.shoppingNames?.[shoppingId] || shoppingId,
+          data: values,
+          borderColor: shoppingColors[index % shoppingColors.length],
+          backgroundColor: currentChartType === "line" ? `${shoppingColors[index % shoppingColors.length]}20` : shoppingColors[index % shoppingColors.length],
+          fill: currentChartType === "line" && fill,
+          tension,
+          borderWidth,
+          pointRadius: currentChartType === "line" ? pointRadius : 0,
+          pointBackgroundColor: shoppingColors[index % shoppingColors.length],
+          pointBorderColor: "#fff",
+          pointBorderWidth: 2
+        }));
+      } else {
+        const datasetLabel = isTemperature ? `Temperatura (${config.unit})` : `Consumo (${config.unit})`;
+        datasets = [
+          {
+            label: datasetLabel,
+            data: data.dailyTotals,
+            borderColor: colors.primary,
+            backgroundColor: currentChartType === "line" ? colors.background : colors.primary,
+            fill: currentChartType === "line" && fill,
+            tension,
+            borderWidth,
+            pointRadius: currentChartType === "line" ? pointRadius : 0,
+            pointBackgroundColor: colors.pointBackground || colors.primary,
+            pointBorderColor: colors.pointBorder || "#fff",
+            pointBorderWidth: 2,
+            borderRadius: currentChartType === "bar" ? 4 : 0
+          }
+        ];
+      }
+      const temperatureAnnotations = buildTemperatureAnnotations();
+      const idealRangeAnnotations = buildIdealRangeAnnotation();
+      const allAnnotations = { ...temperatureAnnotations, ...idealRangeAnnotations };
+      const yAxisLabel = config.unitLarge && config.thresholdForLargeUnit && yAxisMax >= config.thresholdForLargeUnit ? config.unitLarge : config.unit;
+      return {
+        type: currentChartType,
+        data: {
+          labels: data.labels,
+          datasets
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          animation: false,
+          // CRITICAL: Prevents infinite growth bug
+          plugins: {
+            legend: {
+              display: showLegend || currentVizMode === "separate",
+              position: "bottom",
+              labels: {
+                color: themeColors.text
+              }
+            },
+            tooltip: {
+              backgroundColor: themeColors.tooltipBackground,
+              titleColor: themeColors.tooltipText,
+              bodyColor: themeColors.tooltipText,
+              borderColor: themeColors.border,
+              borderWidth: 1,
+              callbacks: {
+                label: function(context) {
+                  const value = context.parsed.y || 0;
+                  const label = context.dataset.label || "";
+                  return `${label}: ${formatValue(value)}`;
+                }
+              }
+            },
+            // Reference lines and ideal range (requires chartjs-plugin-annotation)
+            annotation: Object.keys(allAnnotations).length > 0 ? {
+              annotations: allAnnotations
+            } : void 0
+          },
+          scales: {
+            y: {
+              beginAtZero: !isTemperature,
+              // Temperature can have negative values
+              min: yAxisMin,
+              max: yAxisMax,
+              // CRITICAL: Fixed max prevents animation loop
+              grid: {
+                color: themeColors.grid
+              },
+              title: {
+                display: true,
+                text: yAxisLabel,
+                font: { size: 12 },
+                color: themeColors.text
+              },
+              ticks: {
+                font: { size: 11 },
+                color: themeColors.textMuted,
+                callback: function(value) {
+                  return formatTickValue(value);
+                }
+              }
+            },
+            x: {
+              grid: {
+                color: themeColors.grid
+              },
+              ticks: {
+                font: { size: 11 },
+                color: themeColors.textMuted
+              }
+            }
+          }
+        }
+      };
+    }
+    function validateChartJs() {
+      if (typeof Chart === "undefined") {
+        log("error", "Chart.js not loaded. Cannot initialize chart.");
+        config.onError?.(new Error("Chart.js not loaded"));
+        return false;
+      }
+      return true;
+    }
+    function validateCanvas() {
+      const canvas = $id(config.containerId);
+      if (!canvas) {
+        log("error", `Canvas #${config.containerId} not found`);
+        config.onError?.(new Error(`Canvas #${config.containerId} not found`));
+        return null;
+      }
+      return canvas;
+    }
+    function setupAutoRefresh() {
+      if (config.autoRefreshInterval && config.autoRefreshInterval > 0) {
+        if (autoRefreshTimer) {
+          clearInterval(autoRefreshTimer);
+        }
+        autoRefreshTimer = setInterval(async () => {
+          log("log", "Auto-refreshing data...");
+          await instance.refresh(true);
+        }, config.autoRefreshInterval);
+      }
+    }
+    function cleanupAutoRefresh() {
+      if (autoRefreshTimer) {
+        clearInterval(autoRefreshTimer);
+        autoRefreshTimer = null;
+      }
+    }
+    function setupButtonHandlers() {
+      if (config.settingsButtonId && config.onSettingsClick) {
+        const settingsBtn = $id(config.settingsButtonId);
+        if (settingsBtn) {
+          settingsBtn.addEventListener("click", () => {
+            log("log", "Settings button clicked");
+            config.onSettingsClick?.();
+          });
+          log("log", "Settings button handler attached");
+        }
+      }
+      if (config.maximizeButtonId && config.onMaximizeClick) {
+        const maximizeBtn = $id(config.maximizeButtonId);
+        if (maximizeBtn) {
+          maximizeBtn.addEventListener("click", () => {
+            log("log", "Maximize button clicked");
+            config.onMaximizeClick?.();
+          });
+          log("log", "Maximize button handler attached");
+        }
+      }
+      const enableExport = config.enableExport ?? DEFAULT_CONFIG.enableExport;
+      if (enableExport && config.exportButtonId) {
+        const exportBtn = $id(config.exportButtonId);
+        if (exportBtn) {
+          exportBtn.addEventListener("click", () => {
+            log("log", "Export button clicked");
+            if (config.onExportCSV && cachedData) {
+              config.onExportCSV(cachedData);
+            } else {
+              instance.exportCSV();
+            }
+          });
+          log("log", "Export button handler attached");
+        }
+      }
+    }
+    function generateCSVContent(data) {
+      const rows = [];
+      const decimals = config.decimalPlaces ?? DEFAULT_CONFIG.decimalPlaces;
+      if (currentVizMode === "separate" && data.shoppingData && data.shoppingNames) {
+        const shoppingHeaders = Object.keys(data.shoppingData).map(
+          (id) => data.shoppingNames?.[id] || id
+        );
+        rows.push(["Data", ...shoppingHeaders, "Total"].join(";"));
+        data.labels.forEach((label, index) => {
+          const shoppingValues = Object.keys(data.shoppingData).map(
+            (id) => data.shoppingData[id][index].toFixed(decimals)
+          );
+          rows.push([label, ...shoppingValues, data.dailyTotals[index].toFixed(decimals)].join(";"));
+        });
+      } else {
+        rows.push(["Data", `Consumo (${config.unit})`].join(";"));
+        data.labels.forEach((label, index) => {
+          rows.push([label, data.dailyTotals[index].toFixed(decimals)].join(";"));
+        });
+      }
+      const total = data.dailyTotals.reduce((sum, v) => sum + v, 0);
+      const avg = total / data.dailyTotals.length;
+      rows.push("");
+      rows.push(["Total", total.toFixed(decimals)].join(";"));
+      rows.push(["M\xE9dia", avg.toFixed(decimals)].join(";"));
+      return rows.join("\n");
+    }
+    function downloadCSV(content, filename) {
+      const BOM = "\uFEFF";
+      const blob = new Blob([BOM + content], { type: "text/csv;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${filename}.csv`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      log("log", `CSV exported: ${filename}.csv`);
+    }
+    function updateTitle() {
+      if (config.titleElementId) {
+        const titleEl = $id(config.titleElementId);
+        if (titleEl) {
+          if (currentPeriod === 0) {
+            titleEl.textContent = `Consumo - Per\xEDodo Personalizado`;
+          } else {
+            titleEl.textContent = `Consumo dos \xFAltimos ${currentPeriod} dias`;
+          }
+        }
+      }
+    }
+    const instance = {
+      async render() {
+        log("log", "Rendering chart...");
+        if (!validateChartJs()) return;
+        const canvas = validateCanvas();
+        if (!canvas) return;
+        try {
+          log("log", `Fetching ${currentPeriod} days of data...`);
+          cachedData = await config.fetchData(currentPeriod);
+          cachedData.fetchTimestamp = Date.now();
+          if (config.onBeforeRender) {
+            cachedData = config.onBeforeRender(cachedData);
+          }
+          if (chartInstance) {
+            chartInstance.destroy();
+            chartInstance = null;
+          }
+          const ctx = canvas.getContext("2d");
+          const chartConfig = buildChartConfig(cachedData);
+          chartInstance = new Chart(ctx, chartConfig);
+          isRendered = true;
+          const yAxisMax = calculateYAxisMax(cachedData.dailyTotals);
+          log("log", `Chart initialized with yAxisMax: ${yAxisMax}`);
+          config.onDataLoaded?.(cachedData);
+          config.onAfterRender?.(chartInstance);
+          setupButtonHandlers();
+          updateTitle();
+          setupAutoRefresh();
+        } catch (error) {
+          log("error", "Failed to render chart:", error);
+          config.onError?.(error instanceof Error ? error : new Error(String(error)));
+        }
+      },
+      async update(data) {
+        if (data) {
+          cachedData = data;
+          cachedData.fetchTimestamp = Date.now();
+        }
+        if (!chartInstance || !cachedData) {
+          log("warn", "Cannot update: chart not initialized or no data");
+          return;
+        }
+        let renderData = cachedData;
+        if (config.onBeforeRender) {
+          renderData = config.onBeforeRender(cachedData);
+        }
+        const chartConfig = buildChartConfig(renderData);
+        chartInstance.data = chartConfig.data;
+        chartInstance.options = chartConfig.options;
+        chartInstance.update("none");
+        log("log", "Chart updated");
+      },
+      setChartType(type) {
+        if (currentChartType === type) return;
+        log("log", `Changing chart type to: ${type}`);
+        currentChartType = type;
+        if (cachedData && chartInstance) {
+          const canvas = validateCanvas();
+          if (canvas) {
+            chartInstance.destroy();
+            const ctx = canvas.getContext("2d");
+            chartInstance = new Chart(ctx, buildChartConfig(cachedData));
+          }
+        }
+      },
+      setVizMode(mode) {
+        if (currentVizMode === mode) return;
+        log("log", `Changing viz mode to: ${mode}`);
+        currentVizMode = mode;
+        if (cachedData) {
+          this.update();
+        }
+      },
+      async setPeriod(days) {
+        if (currentPeriod === days) return;
+        log("log", `Changing period to: ${days} days`);
+        currentPeriod = days;
+        updateTitle();
+        await this.refresh(true);
+      },
+      async refresh(forceRefresh = false) {
+        if (!forceRefresh && cachedData?.fetchTimestamp) {
+          const age = Date.now() - cachedData.fetchTimestamp;
+          const ttl = config.cacheTTL ?? DEFAULT_CONFIG.cacheTTL;
+          if (age < ttl) {
+            log("log", `Using cached data (age: ${Math.round(age / 1e3)}s)`);
+            return;
+          }
+        }
+        log("log", "Refreshing data...");
+        await this.render();
+      },
+      destroy() {
+        log("log", "Destroying chart...");
+        cleanupAutoRefresh();
+        if (chartInstance) {
+          chartInstance.destroy();
+          chartInstance = null;
+        }
+        cachedData = null;
+        isRendered = false;
+      },
+      getChartInstance() {
+        return chartInstance;
+      },
+      getCachedData() {
+        return cachedData;
+      },
+      getState() {
+        return {
+          period: currentPeriod,
+          chartType: currentChartType,
+          vizMode: currentVizMode,
+          theme: currentTheme,
+          isRendered
+        };
+      },
+      exportCSV(filename) {
+        if (!cachedData) {
+          log("warn", "Cannot export: no data available");
+          return;
+        }
+        const defaultFilename = config.exportFilename || `${config.domain}-consumo-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
+        const csvContent = generateCSVContent(cachedData);
+        downloadCSV(csvContent, filename || defaultFilename);
+      },
+      setTheme(theme) {
+        if (currentTheme === theme) return;
+        log("log", `Changing theme to: ${theme}`);
+        currentTheme = theme;
+        if (cachedData && chartInstance) {
+          const canvas = validateCanvas();
+          if (canvas) {
+            chartInstance.destroy();
+            const ctx = canvas.getContext("2d");
+            chartInstance = new Chart(ctx, buildChartConfig(cachedData));
+          }
+        }
+      },
+      setIdealRange(range) {
+        const rangeChanged = JSON.stringify(currentIdealRange) !== JSON.stringify(range);
+        if (!rangeChanged) return;
+        if (range) {
+          log("log", `Setting ideal range: ${range.min} - ${range.max}`);
+        } else {
+          log("log", "Clearing ideal range");
+        }
+        currentIdealRange = range;
+        if (cachedData && chartInstance) {
+          const canvas = validateCanvas();
+          if (canvas) {
+            chartInstance.destroy();
+            const ctx = canvas.getContext("2d");
+            chartInstance = new Chart(ctx, buildChartConfig(cachedData));
+          }
+        }
+      },
+      getIdealRange() {
+        return currentIdealRange;
+      }
+    };
+    return instance;
+  }
+
+  // src/components/Consumption7DaysChart/createConsumptionModal.ts
+  var DOMAIN_CONFIG3 = {
+    energy: { name: "Energia", icon: "\u26A1" },
+    water: { name: "\xC1gua", icon: "\u{1F4A7}" },
+    gas: { name: "G\xE1s", icon: "\u{1F525}" },
+    temperature: { name: "Temperatura", icon: "\u{1F321}\uFE0F" }
+  };
+  function createConsumptionModal(config) {
+    const modalId = `myio-consumption-modal-${Date.now()}`;
+    let modalElement = null;
+    let chartInstance = null;
+    let headerInstance = null;
+    let currentTheme = config.theme ?? "light";
+    let currentChartType = config.defaultChartType ?? "line";
+    let currentVizMode = config.defaultVizMode ?? "total";
+    let isMaximized = false;
+    const domainCfg = DOMAIN_CONFIG3[config.domain] || { name: config.domain, icon: "\u{1F4CA}" };
+    const title = config.title || `${domainCfg.name} - Hist\xF3rico de Consumo`;
+    function getThemeColors2() {
+      return THEME_COLORS[currentTheme];
+    }
+    function renderModal4() {
+      const colors = getThemeColors2();
+      const exportFormats = config.exportFormats || ["csv"];
+      headerInstance = createModalHeader({
+        id: modalId,
+        title,
+        icon: domainCfg.icon,
+        theme: currentTheme,
+        isMaximized,
+        exportFormats,
+        onExport: (format) => {
+          if (config.onExport) {
+            config.onExport(format);
+          } else {
+            if (format === "csv") {
+              chartInstance?.exportCSV();
+            } else {
+              console.warn(`[ConsumptionModal] Export format "${format}" requires custom onExport handler`);
+            }
+          }
+        },
+        onThemeToggle: (theme) => {
+          currentTheme = theme;
+          chartInstance?.setTheme(currentTheme);
+          updateModal();
+        },
+        onMaximize: (maximized) => {
+          isMaximized = maximized;
+          updateModal();
+        },
+        onClose: () => {
+          instance.close();
+        }
+      });
+      return `
+      <div class="myio-consumption-modal-overlay" style="
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(2px);
+        z-index: 99998;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      ">
+        <div class="myio-consumption-modal-content" style="
+          background: ${colors.chartBackground};
+          border-radius: ${isMaximized ? "0" : "10px"};
+          width: ${isMaximized ? "100%" : "95%"};
+          max-width: ${isMaximized ? "100%" : "1200px"};
+          height: ${isMaximized ? "100%" : "85vh"};
+          display: flex;
+          flex-direction: column;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          overflow: hidden;
+        ">
+          <!-- MyIO Premium Header (using ModalHeader component) -->
+          ${headerInstance.render()}
+
+          <!-- Controls Bar -->
+          <div class="myio-consumption-modal-controls" style="
+            display: flex;
+            gap: 16px;
+            padding: 12px 16px;
+            background: ${currentTheme === "dark" ? "#374151" : "#f7f7f7"};
+            border-bottom: 1px solid ${colors.border};
+            align-items: center;
+            flex-wrap: wrap;
+          ">
+            <!-- Viz Mode Tabs -->
+            <div style="display: flex; gap: 2px; background: ${currentTheme === "dark" ? "#4b5563" : "#e5e7eb"}; border-radius: 8px; padding: 2px;">
+              <button id="${modalId}-viz-total" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentVizMode === "total" ? "#3e1a7d" : "transparent"};
+                color: ${currentVizMode === "total" ? "white" : colors.text};
+              ">Consolidado</button>
+              <button id="${modalId}-viz-separate" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentVizMode === "separate" ? "#3e1a7d" : "transparent"};
+                color: ${currentVizMode === "separate" ? "white" : colors.text};
+              ">Por Shopping</button>
+            </div>
+
+            <!-- Chart Type Tabs -->
+            <div style="display: flex; gap: 2px; background: ${currentTheme === "dark" ? "#4b5563" : "#e5e7eb"}; border-radius: 8px; padding: 2px;">
+              <button id="${modalId}-type-line" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentChartType === "line" ? "#3e1a7d" : "transparent"};
+                color: ${currentChartType === "line" ? "white" : colors.text};
+              ">Linhas</button>
+              <button id="${modalId}-type-bar" style="
+                padding: 6px 12px;
+                border: none;
+                border-radius: 6px;
+                font-size: 13px;
+                cursor: pointer;
+                transition: all 0.2s;
+                background: ${currentChartType === "bar" ? "#3e1a7d" : "transparent"};
+                color: ${currentChartType === "bar" ? "white" : colors.text};
+              ">Barras</button>
+            </div>
+          </div>
+
+          <!-- Chart Container -->
+          <div style="
+            flex: 1;
+            padding: 16px;
+            min-height: 0;
+            position: relative;
+            background: ${colors.chartBackground};
+          ">
+            <canvas id="${modalId}-chart" style="width: 100%; height: 100%;"></canvas>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function setupListeners() {
+      if (!modalElement) return;
+      headerInstance?.attachListeners();
+      document.getElementById(`${modalId}-viz-total`)?.addEventListener("click", () => {
+        currentVizMode = "total";
+        chartInstance?.setVizMode("total");
+        updateControlStyles();
+      });
+      document.getElementById(`${modalId}-viz-separate`)?.addEventListener("click", () => {
+        currentVizMode = "separate";
+        chartInstance?.setVizMode("separate");
+        updateControlStyles();
+      });
+      document.getElementById(`${modalId}-type-line`)?.addEventListener("click", () => {
+        currentChartType = "line";
+        chartInstance?.setChartType("line");
+        updateControlStyles();
+      });
+      document.getElementById(`${modalId}-type-bar`)?.addEventListener("click", () => {
+        currentChartType = "bar";
+        chartInstance?.setChartType("bar");
+        updateControlStyles();
+      });
+      modalElement.querySelector(".myio-consumption-modal-overlay")?.addEventListener("click", (e) => {
+        if (e.target.classList.contains("myio-consumption-modal-overlay")) {
+          instance.close();
+        }
+      });
+      const handleKeydown = (e) => {
+        if (e.key === "Escape") {
+          instance.close();
+        }
+      };
+      document.addEventListener("keydown", handleKeydown);
+      modalElement.__handleKeydown = handleKeydown;
+    }
+    function updateControlStyles() {
+      const colors = getThemeColors2();
+      const vizTotalBtn = document.getElementById(`${modalId}-viz-total`);
+      const vizSeparateBtn = document.getElementById(`${modalId}-viz-separate`);
+      if (vizTotalBtn) {
+        vizTotalBtn.style.background = currentVizMode === "total" ? "#3e1a7d" : "transparent";
+        vizTotalBtn.style.color = currentVizMode === "total" ? "white" : colors.text;
+      }
+      if (vizSeparateBtn) {
+        vizSeparateBtn.style.background = currentVizMode === "separate" ? "#3e1a7d" : "transparent";
+        vizSeparateBtn.style.color = currentVizMode === "separate" ? "white" : colors.text;
+      }
+      const typeLineBtn = document.getElementById(`${modalId}-type-line`);
+      const typeBarBtn = document.getElementById(`${modalId}-type-bar`);
+      if (typeLineBtn) {
+        typeLineBtn.style.background = currentChartType === "line" ? "#3e1a7d" : "transparent";
+        typeLineBtn.style.color = currentChartType === "line" ? "white" : colors.text;
+      }
+      if (typeBarBtn) {
+        typeBarBtn.style.background = currentChartType === "bar" ? "#3e1a7d" : "transparent";
+        typeBarBtn.style.color = currentChartType === "bar" ? "white" : colors.text;
+      }
+    }
+    function updateModal() {
+      if (!modalElement) return;
+      const cachedData = chartInstance?.getCachedData();
+      headerInstance?.destroy();
+      chartInstance?.destroy();
+      modalElement.innerHTML = renderModal4();
+      setupListeners();
+      if (cachedData) {
+        chartInstance = createConsumption7DaysChart({
+          ...config,
+          containerId: `${modalId}-chart`,
+          theme: currentTheme,
+          defaultChartType: currentChartType,
+          defaultVizMode: currentVizMode
+        });
+        chartInstance.update(cachedData);
+      }
+    }
+    const instance = {
+      async open() {
+        modalElement = document.createElement("div");
+        modalElement.id = modalId;
+        modalElement.innerHTML = renderModal4();
+        const container = config.container || document.body;
+        container.appendChild(modalElement);
+        setupListeners();
+        chartInstance = createConsumption7DaysChart({
+          ...config,
+          containerId: `${modalId}-chart`,
+          theme: currentTheme,
+          defaultChartType: currentChartType,
+          defaultVizMode: currentVizMode
+        });
+        await chartInstance.render();
+      },
+      close() {
+        if (modalElement) {
+          const handleKeydown = modalElement.__handleKeydown;
+          if (handleKeydown) {
+            document.removeEventListener("keydown", handleKeydown);
+          }
+          headerInstance?.destroy();
+          headerInstance = null;
+          chartInstance?.destroy();
+          chartInstance = null;
+          modalElement.remove();
+          modalElement = null;
+          config.onClose?.();
+        }
+      },
+      getChart() {
+        return chartInstance;
+      },
+      destroy() {
+        instance.close();
+      }
+    };
+    return instance;
+  }
+
+  // src/components/Consumption7DaysChart/createConsumptionChartWidget.ts
+  var DOMAIN_CONFIG4 = {
+    energy: {
+      name: "Energia",
+      icon: "\u26A1",
+      color: "#6c2fbf",
+      colors: ["#2563eb", "#16a34a", "#8b5cf6", "#ea580c", "#dc2626"]
+    },
+    water: {
+      name: "\xC1gua",
+      icon: "\u{1F4A7}",
+      color: "#0288d1",
+      colors: ["#0288d1", "#06b6d4", "#0891b2", "#22d3ee", "#67e8f9"]
+    },
+    gas: {
+      name: "G\xE1s",
+      icon: "\u{1F525}",
+      color: "#ea580c",
+      colors: ["#ea580c", "#f97316", "#fb923c", "#fdba74", "#fed7aa"]
+    },
+    temperature: {
+      name: "Temperatura",
+      icon: "\u{1F321}\uFE0F",
+      color: "#e65100",
+      colors: ["#dc2626", "#059669", "#0ea5e9", "#f59e0b", "#8b5cf6"]
+    }
+  };
+  function getWidgetStyles(theme, primaryColor) {
+    const colors = THEME_COLORS[theme];
+    return `
+    .myio-chart-widget {
+      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+      background: ${colors.chartBackground};
+      border: 1px solid ${colors.border};
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .myio-chart-widget.dark {
+      background: ${THEME_COLORS.dark.chartBackground};
+      border-color: ${THEME_COLORS.dark.border};
+    }
+
+    .myio-chart-widget-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid ${colors.border};
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .myio-chart-widget-title-group {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .myio-chart-widget-title {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: ${colors.text};
+    }
+
+    .myio-chart-widget-controls {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .myio-chart-widget-tabs {
+      display: flex;
+      gap: 2px;
+      background: ${theme === "dark" ? "#374151" : "#f3f4f6"};
+      padding: 3px;
+      border-radius: 8px;
+    }
+
+    .myio-chart-widget-tab {
+      padding: 6px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: ${colors.textMuted};
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+
+    .myio-chart-widget-tab:hover {
+      color: ${colors.text};
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+    }
+
+    .myio-chart-widget-tab.active {
+      background: ${primaryColor};
+      color: white;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+
+    .myio-chart-widget-btn {
+      background: transparent;
+      border: 1px solid ${colors.border};
+      font-size: 16px;
+      cursor: pointer;
+      padding: 6px 10px;
+      border-radius: 6px;
+      transition: all 0.2s;
+      color: ${colors.text};
+    }
+
+    .myio-chart-widget-btn:hover {
+      background: ${primaryColor};
+      border-color: ${primaryColor};
+      color: white;
+    }
+
+    .myio-chart-widget-body {
+      position: relative;
+      padding: 16px 20px;
+    }
+
+    .myio-chart-widget-canvas-container {
+      position: relative;
+      width: 100%;
+    }
+
+    .myio-chart-widget-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      border-radius: 8px;
+    }
+
+    .myio-chart-widget.dark .myio-chart-widget-loading {
+      background: rgba(31, 41, 55, 0.9);
+    }
+
+    .myio-chart-widget-spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid ${colors.border};
+      border-top-color: ${primaryColor};
+      border-radius: 50%;
+      animation: myio-spin 1s linear infinite;
+    }
+
+    @keyframes myio-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .myio-chart-widget-footer {
+      display: flex;
+      justify-content: space-around;
+      padding: 16px 20px;
+      border-top: 1px solid ${colors.border};
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+
+    .myio-chart-widget-stat {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      min-width: 100px;
+    }
+
+    .myio-chart-widget-stat-label {
+      font-size: 11px;
+      font-weight: 500;
+      color: ${colors.textMuted};
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 4px;
+    }
+
+    .myio-chart-widget-stat-value {
+      font-size: 20px;
+      font-weight: 700;
+      color: ${colors.text};
+    }
+
+    .myio-chart-widget-stat-value.primary {
+      color: ${primaryColor};
+    }
+
+    .myio-chart-widget-stat-sub {
+      font-size: 11px;
+      color: ${colors.textMuted};
+      margin-top: 2px;
+    }
+
+    /* Settings Modal Overlay */
+    .myio-settings-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 99999;
+      backdrop-filter: blur(4px);
+    }
+
+    .myio-settings-overlay.hidden {
+      display: none;
+    }
+
+    .myio-settings-card {
+      background: ${colors.chartBackground};
+      border-radius: 10px;
+      width: 90%;
+      max-width: 600px;
+      max-height: 90vh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      overflow: hidden;
+    }
+
+    .myio-settings-card .myio-modal-header {
+      border-radius: 10px 10px 0 0;
+    }
+
+    .myio-settings-body {
+      padding: 20px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .myio-settings-section {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.05)" : "#f8fafc"};
+      border-radius: 10px;
+      padding: 16px;
+      border: 1px solid ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#e2e8f0"};
+    }
+
+    .myio-settings-section-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: ${colors.text};
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .myio-settings-row {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      align-items: flex-end;
+    }
+
+    .myio-settings-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .myio-settings-field-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: ${colors.textMuted};
+    }
+
+    .myio-settings-input,
+    .myio-settings-select {
+      padding: 10px 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      font-size: 14px;
+      background: ${colors.chartBackground};
+      color: ${colors.text};
+      width: 100%;
+    }
+
+    .myio-settings-input:focus,
+    .myio-settings-select:focus {
+      outline: 2px solid ${primaryColor};
+      outline-offset: 1px;
+    }
+
+    .myio-settings-tabs {
+      display: flex;
+      gap: 2px;
+      background: ${theme === "dark" ? "#374151" : "#e5e7eb"};
+      padding: 3px;
+      border-radius: 8px;
+    }
+
+    .myio-settings-tab {
+      flex: 1;
+      padding: 8px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: ${colors.textMuted};
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+
+    .myio-settings-tab:hover {
+      color: ${colors.text};
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+    }
+
+    .myio-settings-tab.active {
+      background: ${primaryColor};
+      color: white;
+    }
+
+    .myio-settings-footer {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      padding: 16px 20px;
+      border-top: 1px solid ${colors.border};
+      background: ${theme === "dark" ? "rgba(0,0,0,0.2)" : "#fafafa"};
+    }
+
+    .myio-settings-btn {
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .myio-settings-btn-secondary {
+      background: transparent;
+      border: 1px solid ${colors.border};
+      color: ${colors.text};
+    }
+
+    .myio-settings-btn-secondary:hover {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
+    }
+
+    .myio-settings-btn-primary {
+      background: ${primaryColor};
+      border: none;
+      color: white;
+    }
+
+    .myio-settings-btn-primary:hover {
+      filter: brightness(1.1);
+    }
+
+    .myio-settings-hint {
+      font-size: 11px;
+      color: ${colors.textMuted};
+      font-weight: normal;
+    }
+
+    .myio-settings-context-group {
+      margin-bottom: 8px;
+    }
+
+    .myio-settings-context-group:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Dropdown styles */
+    .myio-settings-dropdown-container {
+      position: relative;
+    }
+
+    .myio-settings-dropdown-btn {
+      padding: 10px 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      font-size: 14px;
+      background: ${colors.chartBackground};
+      color: ${colors.text};
+      cursor: pointer;
+      min-width: 180px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .myio-settings-dropdown-btn:hover {
+      border-color: ${primaryColor};
+    }
+
+    .myio-settings-dropdown-arrow {
+      font-size: 10px;
+      color: ${colors.textMuted};
+    }
+
+    .myio-settings-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 100001;
+      background: ${colors.chartBackground};
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      min-width: 220px;
+      padding: 8px 0;
+    }
+
+    .myio-settings-dropdown.hidden {
+      display: none;
+    }
+
+    .myio-settings-dropdown-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+      font-size: 13px;
+      color: ${colors.text};
+      transition: background 0.15s;
+    }
+
+    .myio-settings-dropdown-option:hover {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
+    }
+
+    .myio-settings-dropdown-option input {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: ${primaryColor};
+    }
+
+    .myio-settings-dropdown-actions {
+      border-top: 1px solid ${colors.border};
+      margin-top: 8px;
+      padding: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .myio-settings-dropdown-actions button {
+      width: 100%;
+      padding: 8px;
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: ${colors.text};
+      transition: background 0.15s;
+    }
+
+    .myio-settings-dropdown-actions button:hover {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.15)" : "#e5e7eb"};
+    }
+
+    /* Suggestion icon styles */
+    .myio-settings-section-label span[id$="-settings-suggestion"] {
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .myio-settings-section-label span[id$="-settings-suggestion"]:hover {
+      opacity: 1 !important;
+      transform: scale(1.2);
+    }
+  `;
+  }
+  function createConsumptionChartWidget(config) {
+    const widgetId = `myio-widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    let containerElement = null;
+    let chartInstance = null;
+    let styleElement = null;
+    let settingsModalElement = null;
+    let settingsHeaderInstance = null;
+    let currentTheme = config.theme ?? "light";
+    let currentChartType = config.defaultChartType ?? "line";
+    let currentVizMode = config.defaultVizMode ?? "total";
+    let currentPeriod = config.defaultPeriod ?? 7;
+    let currentIdealRange = config.idealRange ?? null;
+    let tempPeriod = currentPeriod;
+    let tempChartType = currentChartType;
+    let tempVizMode = currentVizMode;
+    let tempTheme = currentTheme;
+    let tempIdealRange = currentIdealRange;
+    let currentSuggestion = null;
+    const domainCfg = DOMAIN_CONFIG4[config.domain] || DOMAIN_CONFIG4.energy;
+    const primaryColor = config.colors?.primary || domainCfg.color;
+    const domainColors = config.colors?.shoppingColors || domainCfg.colors;
+    const showSettingsButton = config.showSettingsButton ?? true;
+    const showMaximizeButton = config.showMaximizeButton ?? true;
+    const showVizModeTabs = config.showVizModeTabs ?? true;
+    const showChartTypeTabs = config.showChartTypeTabs ?? true;
+    const chartHeight = typeof config.chartHeight === "number" ? `${config.chartHeight}px` : config.chartHeight ?? "300px";
+    function getTitle() {
+      if (config.title) return config.title;
+      const domainName = config.domain === "temperature" ? "Temperatura" : "Consumo";
+      return `${domainName} dos \xFAltimos ${currentPeriod} dias`;
+    }
+    function renderHTML() {
+      return `
+      <div id="${widgetId}" class="myio-chart-widget ${currentTheme === "dark" ? "dark" : ""} ${config.className || ""}">
+        <div class="myio-chart-widget-header">
+          <div class="myio-chart-widget-title-group">
+            ${showSettingsButton ? `
+              <button id="${widgetId}-settings-btn" class="myio-chart-widget-btn" title="Configura\xE7\xF5es">\u2699\uFE0F</button>
+            ` : ""}
+            <h4 id="${widgetId}-title" class="myio-chart-widget-title">${getTitle()}</h4>
+          </div>
+          <div class="myio-chart-widget-controls">
+            ${showVizModeTabs ? `
+              <div class="myio-chart-widget-tabs" id="${widgetId}-viz-tabs">
+                <button class="myio-chart-widget-tab ${currentVizMode === "total" ? "active" : ""}" data-viz="total">Consolidado</button>
+                <button class="myio-chart-widget-tab ${currentVizMode === "separate" ? "active" : ""}" data-viz="separate">Por Shopping</button>
+              </div>
+            ` : ""}
+            ${showChartTypeTabs ? `
+              <div class="myio-chart-widget-tabs" id="${widgetId}-type-tabs">
+                <button class="myio-chart-widget-tab ${currentChartType === "line" ? "active" : ""}" data-type="line">Linhas</button>
+                <button class="myio-chart-widget-tab ${currentChartType === "bar" ? "active" : ""}" data-type="bar">Barras</button>
+              </div>
+            ` : ""}
+            ${showMaximizeButton ? `
+              <button id="${widgetId}-maximize-btn" class="myio-chart-widget-btn" title="Maximizar">\u26F6</button>
+            ` : ""}
+          </div>
+        </div>
+        <div class="myio-chart-widget-body">
+          <div id="${widgetId}-loading" class="myio-chart-widget-loading" style="display: none;">
+            <div class="myio-chart-widget-spinner"></div>
+          </div>
+          <div class="myio-chart-widget-canvas-container" style="height: ${chartHeight};">
+            <canvas id="${widgetId}-canvas"></canvas>
+          </div>
+        </div>
+        <div class="myio-chart-widget-footer" id="${widgetId}-footer">
+          <div class="myio-chart-widget-stat">
+            <span class="myio-chart-widget-stat-label">Total Per\xEDodo</span>
+            <span id="${widgetId}-stat-total" class="myio-chart-widget-stat-value primary">--</span>
+          </div>
+          <div class="myio-chart-widget-stat">
+            <span class="myio-chart-widget-stat-label">M\xE9dia Di\xE1ria</span>
+            <span id="${widgetId}-stat-avg" class="myio-chart-widget-stat-value">--</span>
+          </div>
+          <div class="myio-chart-widget-stat">
+            <span class="myio-chart-widget-stat-label">Dia de Pico</span>
+            <span id="${widgetId}-stat-peak" class="myio-chart-widget-stat-value">--</span>
+            <span id="${widgetId}-stat-peak-date" class="myio-chart-widget-stat-sub"></span>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function renderSettingsModal() {
+      const unit = config.unit ?? "";
+      const isTemperature = config.domain === "temperature";
+      settingsHeaderInstance = createModalHeader({
+        id: `${widgetId}-settings`,
+        title: "Configura\xE7\xF5es",
+        icon: "\u2699\uFE0F",
+        theme: tempTheme,
+        backgroundColor: primaryColor,
+        showThemeToggle: false,
+        showMaximize: false,
+        showClose: true,
+        onClose: () => closeSettingsModal()
+      });
+      return `
+      <div id="${widgetId}-settings-overlay" class="myio-settings-overlay hidden">
+        <div class="myio-settings-card">
+          ${settingsHeaderInstance.render()}
+          <div class="myio-settings-body">
+            <!-- CONTEXT 1: Per\xEDodo e Dados -->
+            <div class="myio-settings-context-group">
+              <!-- Per\xEDodo -->
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">\u{1F4C5} Per\xEDodo</div>
+                <div class="myio-settings-row">
+                  <div class="myio-settings-field" style="flex: 1;">
+                    <select id="${widgetId}-settings-period" class="myio-settings-select">
+                      <option value="7" ${tempPeriod === 7 ? "selected" : ""}>\xDAltimos 7 dias</option>
+                      <option value="14" ${tempPeriod === 14 ? "selected" : ""}>\xDAltimos 14 dias</option>
+                      <option value="30" ${tempPeriod === 30 ? "selected" : ""}>\xDAltimos 30 dias</option>
+                      <option value="60" ${tempPeriod === 60 ? "selected" : ""}>\xDAltimos 60 dias</option>
+                      <option value="90" ${tempPeriod === 90 ? "selected" : ""}>\xDAltimos 90 dias</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Dados -->
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">\u{1F4CA} Dados</div>
+                <div class="myio-settings-row">
+                  <!-- Granularity Select -->
+                  <div class="myio-settings-field">
+                    <label class="myio-settings-field-label">Granularidade</label>
+                    <select id="${widgetId}-settings-granularity" class="myio-settings-select">
+                      <option value="1d" selected>\u{1F4C6} Por Dia</option>
+                      <option value="1h">\u{1F550} Por Hora</option>
+                    </select>
+                  </div>
+
+                  <!-- Weekday Filter -->
+                  <div class="myio-settings-field">
+                    <label class="myio-settings-field-label">Dias da Semana</label>
+                    <div class="myio-settings-dropdown-container">
+                      <button type="button" id="${widgetId}-settings-weekday-btn" class="myio-settings-dropdown-btn">
+                        <span id="${widgetId}-settings-weekday-label">Todos os dias</span>
+                        <span class="myio-settings-dropdown-arrow">\u25BC</span>
+                      </button>
+                      <div id="${widgetId}-settings-weekday-dropdown" class="myio-settings-dropdown hidden">
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="dom" checked /> Domingo
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="seg" checked /> Segunda-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="ter" checked /> Ter\xE7a-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="qua" checked /> Quarta-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="qui" checked /> Quinta-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="sex" checked /> Sexta-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="sab" checked /> S\xE1bado
+                        </label>
+                        <div class="myio-settings-dropdown-actions">
+                          <button type="button" id="${widgetId}-settings-weekday-all">Selecionar Todos</button>
+                          <button type="button" id="${widgetId}-settings-weekday-clear">Limpar</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Day Period Filter (only visible when hourly) -->
+                  <div class="myio-settings-field" id="${widgetId}-settings-dayperiod-field" style="display: none;">
+                    <label class="myio-settings-field-label">Per\xEDodos do Dia</label>
+                    <div class="myio-settings-dropdown-container">
+                      <button type="button" id="${widgetId}-settings-dayperiod-btn" class="myio-settings-dropdown-btn">
+                        <span id="${widgetId}-settings-dayperiod-label">Todos os per\xEDodos</span>
+                        <span class="myio-settings-dropdown-arrow">\u25BC</span>
+                      </button>
+                      <div id="${widgetId}-settings-dayperiod-dropdown" class="myio-settings-dropdown hidden">
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="madrugada" checked /> Madrugada (00h-06h)
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="manha" checked /> Manh\xE3 (06h-12h)
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="tarde" checked /> Tarde (12h-18h)
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="noite" checked /> Noite (18h-24h)
+                        </label>
+                        <div class="myio-settings-dropdown-actions">
+                          <button type="button" id="${widgetId}-settings-dayperiod-all">Selecionar Todos</button>
+                          <button type="button" id="${widgetId}-settings-dayperiod-clear">Limpar</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- CONTEXT 2: Faixa Ideal -->
+            <div class="myio-settings-context-group">
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">
+                  \u{1F3AF} Faixa Ideal
+                  <span class="myio-settings-hint" id="${widgetId}-settings-range-hint">(opcional - deixe zerado para n\xE3o exibir)</span>
+                  <span
+                    id="${widgetId}-settings-suggestion"
+                    title=""
+                    style="cursor: pointer; font-size: 16px; opacity: 0.7; transition: opacity 0.2s; margin-left: 4px;"
+                  >\u{1F4A1}</span>
+                </div>
+                <div class="myio-settings-row">
+                  <div class="myio-settings-field" style="min-width: 100px;">
+                    <label class="myio-settings-field-label">M\xEDnimo (${unit})</label>
+                    <input type="number" id="${widgetId}-settings-range-min" class="myio-settings-input"
+                      value="${tempIdealRange?.min ?? ""}" placeholder="0" step="0.1">
+                  </div>
+                  <div class="myio-settings-field" style="min-width: 100px;">
+                    <label class="myio-settings-field-label">M\xE1ximo (${unit})</label>
+                    <input type="number" id="${widgetId}-settings-range-max" class="myio-settings-input"
+                      value="${tempIdealRange?.max ?? ""}" placeholder="0" step="0.1">
+                  </div>
+                  <div class="myio-settings-field" style="flex: 1;">
+                    <label class="myio-settings-field-label">R\xF3tulo</label>
+                    <input type="text" id="${widgetId}-settings-range-label" class="myio-settings-input"
+                      value="${tempIdealRange?.label ?? ""}" placeholder="${isTemperature ? "Faixa Ideal" : "Meta de Consumo"}">
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- CONTEXT 3: Visualiza\xE7\xE3o -->
+            <div class="myio-settings-context-group">
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">\u{1F3A8} Visualiza\xE7\xE3o</div>
+                <div class="myio-settings-row" style="gap: 20px; flex-wrap: wrap;">
+                  <!-- Chart Type -->
+                  <div class="myio-settings-field" style="flex: 1; min-width: 180px;">
+                    <label class="myio-settings-field-label">Tipo de Gr\xE1fico</label>
+                    <div class="myio-settings-tabs" id="${widgetId}-settings-chart-type">
+                      <button class="myio-settings-tab ${tempChartType === "line" ? "active" : ""}" data-type="line">\u{1F4C8} Linhas</button>
+                      <button class="myio-settings-tab ${tempChartType === "bar" ? "active" : ""}" data-type="bar">\u{1F4CA} Barras</button>
+                    </div>
+                  </div>
+
+                  <!-- Viz Mode -->
+                  <div class="myio-settings-field" style="flex: 1; min-width: 200px;">
+                    <label class="myio-settings-field-label">Agrupamento</label>
+                    <div class="myio-settings-tabs" id="${widgetId}-settings-viz-mode">
+                      <button class="myio-settings-tab ${tempVizMode === "total" ? "active" : ""}" data-viz="total">\u{1F517} Consolidado</button>
+                      <button class="myio-settings-tab ${tempVizMode === "separate" ? "active" : ""}" data-viz="separate">\u{1F3EC} Por Shopping</button>
+                    </div>
+                  </div>
+
+                  <!-- Theme -->
+                  <div class="myio-settings-field" style="flex: 1; min-width: 160px;">
+                    <label class="myio-settings-field-label">Tema</label>
+                    <div class="myio-settings-tabs" id="${widgetId}-settings-theme">
+                      <button class="myio-settings-tab ${tempTheme === "light" ? "active" : ""}" data-theme="light">\u2600\uFE0F Light</button>
+                      <button class="myio-settings-tab ${tempTheme === "dark" ? "active" : ""}" data-theme="dark">\u{1F319} Dark</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="myio-settings-footer">
+            <button id="${widgetId}-settings-reset" class="myio-settings-btn myio-settings-btn-secondary">Resetar</button>
+            <button id="${widgetId}-settings-apply" class="myio-settings-btn myio-settings-btn-primary">Carregar</button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function injectStyles() {
+      if (styleElement) return;
+      styleElement = document.createElement("style");
+      styleElement.id = `${widgetId}-styles`;
+      styleElement.textContent = getWidgetStyles(currentTheme, primaryColor);
+      document.head.appendChild(styleElement);
+    }
+    function updateStyles() {
+      if (styleElement) {
+        styleElement.textContent = getWidgetStyles(currentTheme, primaryColor);
+      }
+    }
+    function setupListeners() {
+      if (showSettingsButton) {
+        document.getElementById(`${widgetId}-settings-btn`)?.addEventListener("click", () => {
+          openSettingsModal();
+          config.onSettingsClick?.();
+        });
+      }
+      if (showMaximizeButton && config.onMaximizeClick) {
+        document.getElementById(`${widgetId}-maximize-btn`)?.addEventListener("click", () => {
+          config.onMaximizeClick?.();
+        });
+      }
+      if (showVizModeTabs) {
+        document.getElementById(`${widgetId}-viz-tabs`)?.addEventListener("click", (e) => {
+          const target = e.target;
+          if (target.classList.contains("myio-chart-widget-tab")) {
+            const mode = target.dataset.viz;
+            if (mode) {
+              instance.setVizMode(mode);
+            }
+          }
+        });
+      }
+      if (showChartTypeTabs) {
+        document.getElementById(`${widgetId}-type-tabs`)?.addEventListener("click", (e) => {
+          const target = e.target;
+          if (target.classList.contains("myio-chart-widget-tab")) {
+            const type = target.dataset.type;
+            if (type) {
+              instance.setChartType(type);
+            }
+          }
+        });
+      }
+    }
+    function updateTabStates() {
+      document.querySelectorAll(`#${widgetId}-viz-tabs .myio-chart-widget-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.viz === currentVizMode);
+      });
+      document.querySelectorAll(`#${widgetId}-type-tabs .myio-chart-widget-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.type === currentChartType);
+      });
+    }
+    function updateTitle() {
+      const titleEl = document.getElementById(`${widgetId}-title`);
+      if (titleEl) {
+        titleEl.textContent = getTitle();
+      }
+    }
+    function setLoading(loading) {
+      const loadingEl = document.getElementById(`${widgetId}-loading`);
+      if (loadingEl) {
+        loadingEl.style.display = loading ? "flex" : "none";
+      }
+    }
+    function formatValue(value) {
+      const unit = config.unit ?? "";
+      const unitLarge = config.unitLarge;
+      const threshold = config.thresholdForLargeUnit ?? 1e3;
+      if (unitLarge && Math.abs(value) >= threshold) {
+        return `${(value / threshold).toFixed(2)} ${unitLarge}`;
+      }
+      return `${value.toFixed(2)} ${unit}`;
+    }
+    function updateFooterStats(data) {
+      const totalEl = document.getElementById(`${widgetId}-stat-total`);
+      const avgEl = document.getElementById(`${widgetId}-stat-avg`);
+      const peakEl = document.getElementById(`${widgetId}-stat-peak`);
+      const peakDateEl = document.getElementById(`${widgetId}-stat-peak-date`);
+      if (!data.dailyTotals || data.dailyTotals.length === 0) {
+        if (totalEl) totalEl.textContent = "--";
+        if (avgEl) avgEl.textContent = "--";
+        if (peakEl) peakEl.textContent = "--";
+        if (peakDateEl) peakDateEl.textContent = "";
+        return;
+      }
+      const isTemperature = config.domain === "temperature";
+      const totals = data.dailyTotals;
+      const labels = data.labels ?? [];
+      const total = totals.reduce((a, b) => a + b, 0);
+      const avg = total / totals.length;
+      const peakValue = Math.max(...totals);
+      const peakIndex = totals.indexOf(peakValue);
+      const peakDate = labels[peakIndex] ?? "";
+      if (totalEl) {
+        if (isTemperature) {
+          totalEl.textContent = formatValue(avg);
+          const labelEl = totalEl.previousElementSibling;
+          if (labelEl) labelEl.textContent = "M\xE9dia Per\xEDodo";
+        } else {
+          totalEl.textContent = formatValue(total);
+        }
+      }
+      if (avgEl) {
+        avgEl.textContent = formatValue(avg);
+      }
+      if (peakEl) {
+        peakEl.textContent = formatValue(peakValue);
+      }
+      if (peakDateEl) {
+        peakDateEl.textContent = peakDate;
+      }
+    }
+    function openSettingsModal() {
+      tempPeriod = currentPeriod;
+      tempChartType = currentChartType;
+      tempVizMode = currentVizMode;
+      tempTheme = currentTheme;
+      tempIdealRange = currentIdealRange ? { ...currentIdealRange } : null;
+      if (!settingsModalElement) {
+        settingsModalElement = document.createElement("div");
+        settingsModalElement.innerHTML = renderSettingsModal();
+        document.body.appendChild(settingsModalElement.firstElementChild);
+        settingsModalElement = document.getElementById(`${widgetId}-settings-overlay`);
+        setupSettingsModalListeners();
+      }
+      updateSettingsModalValues();
+      updateIdealRangeSuggestionTooltip();
+      settingsModalElement?.classList.remove("hidden");
+    }
+    function closeSettingsModal() {
+      settingsModalElement?.classList.add("hidden");
+    }
+    function updateSettingsModalValues() {
+      const periodSelect = document.getElementById(`${widgetId}-settings-period`);
+      if (periodSelect) periodSelect.value = String(tempPeriod);
+      const minInput = document.getElementById(`${widgetId}-settings-range-min`);
+      const maxInput = document.getElementById(`${widgetId}-settings-range-max`);
+      const labelInput = document.getElementById(`${widgetId}-settings-range-label`);
+      if (minInput) minInput.value = tempIdealRange?.min?.toString() ?? "";
+      if (maxInput) maxInput.value = tempIdealRange?.max?.toString() ?? "";
+      if (labelInput) labelInput.value = tempIdealRange?.label ?? "";
+      updateSettingsModalTabs();
+    }
+    function updateSettingsModalTabs() {
+      document.querySelectorAll(`#${widgetId}-settings-chart-type .myio-settings-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.type === tempChartType);
+      });
+      document.querySelectorAll(`#${widgetId}-settings-viz-mode .myio-settings-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.viz === tempVizMode);
+      });
+      document.querySelectorAll(`#${widgetId}-settings-theme .myio-settings-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.theme === tempTheme);
+      });
+    }
+    function updateWeekdayLabel() {
+      const checkboxes = document.querySelectorAll(`input[name="${widgetId}-weekday"]`);
+      const checked = Array.from(checkboxes).filter((cb) => cb.checked);
+      const label = document.getElementById(`${widgetId}-settings-weekday-label`);
+      if (label) {
+        if (checked.length === 0) {
+          label.textContent = "Nenhum dia";
+        } else if (checked.length === checkboxes.length) {
+          label.textContent = "Todos os dias";
+        } else {
+          label.textContent = `${checked.length} dias selecionados`;
+        }
+      }
+    }
+    function updateDayPeriodLabel() {
+      const checkboxes = document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`);
+      const checked = Array.from(checkboxes).filter((cb) => cb.checked);
+      const label = document.getElementById(`${widgetId}-settings-dayperiod-label`);
+      if (label) {
+        if (checked.length === 0) {
+          label.textContent = "Nenhum per\xEDodo";
+        } else if (checked.length === checkboxes.length) {
+          label.textContent = "Todos os per\xEDodos";
+        } else {
+          label.textContent = `${checked.length} per\xEDodos selecionados`;
+        }
+      }
+    }
+    function calculateIdealRangeSuggestion() {
+      const data = chartInstance?.getCachedData();
+      if (!data || !data.dailyTotals || data.dailyTotals.length === 0) {
+        return { min: 0, max: 0, avg: 0 };
+      }
+      const total = data.dailyTotals.reduce((a, b) => a + b, 0);
+      const avg = total / data.dailyTotals.length;
+      const min = avg * 0.85;
+      const max = avg * 1.15;
+      return {
+        min: Math.round(min * 10) / 10,
+        max: Math.round(max * 10) / 10,
+        avg: Math.round(avg * 10) / 10
+      };
+    }
+    function updateIdealRangeSuggestionTooltip() {
+      const suggestion = calculateIdealRangeSuggestion();
+      const suggestionEl = document.getElementById(`${widgetId}-settings-suggestion`);
+      const hintEl = document.getElementById(`${widgetId}-settings-range-hint`);
+      const unit = config.unit ?? "";
+      const isTemperature = config.domain === "temperature";
+      currentSuggestion = suggestion;
+      if (hintEl) {
+        if (isTemperature) {
+          hintEl.textContent = "(valores carregados do cliente)";
+        } else {
+          hintEl.textContent = "(opcional - deixe zerado para n\xE3o exibir)";
+        }
+      }
+      if (suggestionEl) {
+        if (suggestion.avg > 0) {
+          const tooltipText = `Sugest\xE3o: ${suggestion.min} - ${suggestion.max} ${unit} (m\xE9dia \xB115%). Clique para aplicar.`;
+          suggestionEl.title = tooltipText;
+          suggestionEl.style.display = "inline";
+        } else {
+          suggestionEl.style.display = "none";
+        }
+      }
+    }
+    function applyIdealRangeSuggestion() {
+      if (!currentSuggestion || currentSuggestion.min === 0 && currentSuggestion.max === 0) {
+        return;
+      }
+      const minInput = document.getElementById(`${widgetId}-settings-range-min`);
+      const maxInput = document.getElementById(`${widgetId}-settings-range-max`);
+      const labelInput = document.getElementById(`${widgetId}-settings-range-label`);
+      if (minInput) minInput.value = String(currentSuggestion.min);
+      if (maxInput) maxInput.value = String(currentSuggestion.max);
+      if (labelInput) labelInput.value = "Faixa Sugerida";
+      tempIdealRange = {
+        min: currentSuggestion.min,
+        max: currentSuggestion.max,
+        label: "Faixa Sugerida"
+      };
+    }
+    function setupSettingsModalListeners() {
+      settingsHeaderInstance?.attachListeners();
+      document.getElementById(`${widgetId}-settings-overlay`)?.addEventListener("click", (e) => {
+        if (e.target.classList.contains("myio-settings-overlay")) {
+          closeSettingsModal();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-granularity`)?.addEventListener("change", (e) => {
+        const select = e.target;
+        const dayPeriodField = document.getElementById(`${widgetId}-settings-dayperiod-field`);
+        if (dayPeriodField) {
+          dayPeriodField.style.display = select.value === "1h" ? "block" : "none";
+        }
+      });
+      document.getElementById(`${widgetId}-settings-suggestion`)?.addEventListener("click", () => {
+        applyIdealRangeSuggestion();
+      });
+      document.getElementById(`${widgetId}-settings-weekday-btn`)?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const dropdown = document.getElementById(`${widgetId}-settings-weekday-dropdown`);
+        dropdown?.classList.toggle("hidden");
+      });
+      document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+        cb.addEventListener("change", updateWeekdayLabel);
+      });
+      document.getElementById(`${widgetId}-settings-weekday-all`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateWeekdayLabel();
+      });
+      document.getElementById(`${widgetId}-settings-weekday-clear`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+          cb.checked = false;
+        });
+        updateWeekdayLabel();
+      });
+      document.getElementById(`${widgetId}-settings-dayperiod-btn`)?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const dropdown = document.getElementById(`${widgetId}-settings-dayperiod-dropdown`);
+        dropdown?.classList.toggle("hidden");
+      });
+      document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+        cb.addEventListener("change", updateDayPeriodLabel);
+      });
+      document.getElementById(`${widgetId}-settings-dayperiod-all`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateDayPeriodLabel();
+      });
+      document.getElementById(`${widgetId}-settings-dayperiod-clear`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+          cb.checked = false;
+        });
+        updateDayPeriodLabel();
+      });
+      document.addEventListener("click", (e) => {
+        const target = e.target;
+        const weekdayDropdown = document.getElementById(`${widgetId}-settings-weekday-dropdown`);
+        const dayperiodDropdown = document.getElementById(`${widgetId}-settings-dayperiod-dropdown`);
+        if (weekdayDropdown && !target.closest(`#${widgetId}-settings-weekday-btn`) && !target.closest(`#${widgetId}-settings-weekday-dropdown`)) {
+          weekdayDropdown.classList.add("hidden");
+        }
+        if (dayperiodDropdown && !target.closest(`#${widgetId}-settings-dayperiod-btn`) && !target.closest(`#${widgetId}-settings-dayperiod-dropdown`)) {
+          dayperiodDropdown.classList.add("hidden");
+        }
+      });
+      document.getElementById(`${widgetId}-settings-chart-type`)?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("myio-settings-tab")) {
+          tempChartType = target.dataset.type;
+          updateSettingsModalTabs();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-viz-mode`)?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("myio-settings-tab")) {
+          tempVizMode = target.dataset.viz;
+          updateSettingsModalTabs();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-theme`)?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("myio-settings-tab")) {
+          tempTheme = target.dataset.theme;
+          updateSettingsModalTabs();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-reset`)?.addEventListener("click", () => {
+        tempPeriod = config.defaultPeriod ?? 7;
+        tempChartType = config.defaultChartType ?? "line";
+        tempVizMode = config.defaultVizMode ?? "total";
+        tempTheme = config.theme ?? "light";
+        tempIdealRange = config.idealRange ?? null;
+        const granularitySelect = document.getElementById(`${widgetId}-settings-granularity`);
+        if (granularitySelect) granularitySelect.value = "1d";
+        const dayPeriodField = document.getElementById(`${widgetId}-settings-dayperiod-field`);
+        if (dayPeriodField) dayPeriodField.style.display = "none";
+        document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateWeekdayLabel();
+        document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateDayPeriodLabel();
+        updateSettingsModalValues();
+      });
+      document.getElementById(`${widgetId}-settings-apply`)?.addEventListener("click", async () => {
+        const minInput = document.getElementById(`${widgetId}-settings-range-min`);
+        const maxInput = document.getElementById(`${widgetId}-settings-range-max`);
+        const labelInput = document.getElementById(`${widgetId}-settings-range-label`);
+        const periodSelect = document.getElementById(`${widgetId}-settings-period`);
+        const min = parseFloat(minInput?.value || "0");
+        const max = parseFloat(maxInput?.value || "0");
+        const label = labelInput?.value || "";
+        tempPeriod = parseInt(periodSelect?.value || "7", 10);
+        if (min > 0 || max > 0) {
+          tempIdealRange = { min, max, label };
+        } else {
+          tempIdealRange = null;
+        }
+        closeSettingsModal();
+        if (tempTheme !== currentTheme) {
+          instance.setTheme(tempTheme);
+        }
+        if (tempChartType !== currentChartType) {
+          instance.setChartType(tempChartType);
+        }
+        if (tempVizMode !== currentVizMode) {
+          instance.setVizMode(tempVizMode);
+        }
+        if (JSON.stringify(tempIdealRange) !== JSON.stringify(currentIdealRange)) {
+          instance.setIdealRange(tempIdealRange);
+        }
+        if (tempPeriod !== currentPeriod) {
+          await instance.setPeriod(tempPeriod);
+        }
+      });
+    }
+    const instance = {
+      async render() {
+        containerElement = document.getElementById(config.containerId);
+        if (!containerElement) {
+          console.error(`[ConsumptionWidget] Container #${config.containerId} not found`);
+          return;
+        }
+        injectStyles();
+        containerElement.innerHTML = renderHTML();
+        setupListeners();
+        setLoading(true);
+        chartInstance = createConsumption7DaysChart({
+          ...config,
+          containerId: `${widgetId}-canvas`,
+          theme: currentTheme,
+          defaultChartType: currentChartType,
+          defaultVizMode: currentVizMode,
+          defaultPeriod: currentPeriod,
+          idealRange: currentIdealRange,
+          colors: {
+            primary: primaryColor,
+            background: `${primaryColor}20`,
+            shoppingColors: domainColors,
+            ...config.colors
+          },
+          onDataLoaded: (data) => {
+            setLoading(false);
+            updateFooterStats(data);
+            config.onDataLoaded?.(data);
+          },
+          onError: (error) => {
+            setLoading(false);
+            config.onError?.(error);
+          }
+        });
+        await chartInstance.render();
+        setLoading(false);
+      },
+      async refresh(forceRefresh = false) {
+        if (!chartInstance) return;
+        setLoading(true);
+        await chartInstance.refresh(forceRefresh);
+        setLoading(false);
+      },
+      setChartType(type) {
+        if (currentChartType === type) return;
+        currentChartType = type;
+        chartInstance?.setChartType(type);
+        updateTabStates();
+      },
+      setVizMode(mode) {
+        if (currentVizMode === mode) return;
+        currentVizMode = mode;
+        chartInstance?.setVizMode(mode);
+        updateTabStates();
+      },
+      setTheme(theme) {
+        if (currentTheme === theme) return;
+        currentTheme = theme;
+        chartInstance?.setTheme(theme);
+        const widget = document.getElementById(widgetId);
+        if (widget) {
+          widget.classList.toggle("dark", theme === "dark");
+        }
+        updateStyles();
+      },
+      async setPeriod(days) {
+        if (currentPeriod === days) return;
+        currentPeriod = days;
+        updateTitle();
+        setLoading(true);
+        await chartInstance?.setPeriod(days);
+        setLoading(false);
+      },
+      setIdealRange(range) {
+        currentIdealRange = range;
+        chartInstance?.setIdealRange(range);
+      },
+      getChart() {
+        return chartInstance;
+      },
+      getCachedData() {
+        return chartInstance?.getCachedData() ?? null;
+      },
+      exportCSV(filename) {
+        chartInstance?.exportCSV(filename);
+      },
+      destroy() {
+        chartInstance?.destroy();
+        chartInstance = null;
+        if (styleElement) {
+          styleElement.remove();
+          styleElement = null;
+        }
+        settingsHeaderInstance?.destroy();
+        settingsHeaderInstance = null;
+        if (settingsModalElement) {
+          settingsModalElement.remove();
+          settingsModalElement = null;
+        }
+        if (containerElement) {
+          containerElement.innerHTML = "";
+          containerElement = null;
+        }
+      }
+    };
+    return instance;
+  }
+
+  // src/components/ExportData/index.ts
+  var DEFAULT_COLORS4 = {
+    primary: "#3e1a7d",
+    // MyIO purple
+    secondary: "#6b4c9a",
+    // Light purple
+    accent: "#00bcd4",
+    // Cyan accent
+    background: "#ffffff",
+    // White
+    text: "#333333",
+    // Dark gray
+    chartColors: ["#3e1a7d", "#00bcd4", "#4caf50", "#ff9800", "#e91e63", "#9c27b0"]
+  };
+  var DOMAIN_ICONS = {
+    energy: "\u26A1",
+    // Lightning bolt
+    water: "\u{1F4A7}",
+    // Water drop
+    temperature: "\u{1F321}\uFE0F"
+    // Thermometer
+  };
+  var DOMAIN_LABELS = {
+    energy: "Energia",
+    water: "\xC1gua",
+    temperature: "Temperatura"
+  };
+  var DOMAIN_LABELS_EN = {
+    energy: "Energy",
+    water: "Water",
+    temperature: "Temperature"
+  };
+  var DOMAIN_UNITS = {
+    energy: "kWh",
+    water: "m\xB3",
+    temperature: "\xB0C"
+  };
+  var CSV_SEPARATORS = {
+    "pt-BR": ";",
+    "en-US": ",",
+    "default": ";"
+  };
+  function formatDateForFilename(date) {
+    const pad = (n) => n.toString().padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}-${pad(date.getHours())}-${pad(date.getMinutes())}-${pad(date.getSeconds())}`;
+  }
+  function sanitizeFilename(str) {
+    return str.replace(/[<>:"/\\|?*]/g, "").replace(/\s+/g, "_").substring(0, 50);
+  }
+  function generateFilename(data, config) {
+    const timestamp = formatDateForFilename(/* @__PURE__ */ new Date());
+    const domainLabel = DOMAIN_LABELS_EN[config.domain].toUpperCase();
+    const ext = config.formatExport;
+    let baseName = "export";
+    if ("device" in data && data.device) {
+      const device = data.device;
+      const label = device.label || device.name || "device";
+      const identifier = device.identifier ? `-${device.identifier}` : "";
+      baseName = `${sanitizeFilename(label)}${identifier}`;
+    } else if ("customer" in data && data.customer?.customerName) {
+      baseName = sanitizeFilename(data.customer.customerName);
+    } else if ("groupName" in data) {
+      baseName = sanitizeFilename(data.groupName);
+    }
+    return `${baseName}-${domainLabel}-${timestamp}.${ext}`;
+  }
+  function normalizeTimestamp(ts) {
+    if (ts instanceof Date) return ts;
+    if (typeof ts === "number") return new Date(ts);
+    return new Date(ts);
+  }
+  function calculateStats2(dataPoints) {
+    if (dataPoints.length === 0) {
+      return { min: 0, max: 0, average: 0, sum: 0, count: 0 };
+    }
+    const values = dataPoints.map((d) => d.value);
+    const sum = values.reduce((a, b) => a + b, 0);
+    return {
+      min: Math.min(...values),
+      max: Math.max(...values),
+      average: sum / values.length,
+      sum,
+      count: values.length
+    };
+  }
+  function formatNumber2(value, locale, decimals = 2) {
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    }).format(value);
+  }
+  function formatDate3(date, locale) {
+    return new Intl.DateTimeFormat(locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).format(date);
+  }
+  function generateCSV(data, config) {
+    const sep = CSV_SEPARATORS[config.locale] || CSV_SEPARATORS["default"];
+    const rows = [];
+    const escapeCSV = (val) => {
+      const str = String(val ?? "");
+      if (str.includes(sep) || str.includes('"') || str.includes("\n")) {
+        return `"${str.replace(/"/g, '""')}"`;
+      }
+      return str;
+    };
+    const formatNumCSV = (val) => {
+      return formatNumber2(val, config.locale);
+    };
+    if ("device" in data && "data" in data && Array.isArray(data.data)) {
+      const deviceData = data;
+      rows.push(["Timestamp", config.domainLabel, `Unit (${config.domainUnit})`]);
+      for (const point of deviceData.data) {
+        const ts = normalizeTimestamp(point.timestamp);
+        rows.push([
+          formatDate3(ts, config.locale),
+          formatNumCSV(point.value),
+          point.unit || config.domainUnit
+        ]);
+      }
+      if (config.includeStats) {
+        const stats = calculateStats2(deviceData.data);
+        rows.push([]);
+        rows.push(["Statistics", "", ""]);
+        rows.push(["Minimum", formatNumCSV(stats.min), config.domainUnit]);
+        rows.push(["Maximum", formatNumCSV(stats.max), config.domainUnit]);
+        rows.push(["Average", formatNumCSV(stats.average), config.domainUnit]);
+        rows.push(["Total", formatNumCSV(stats.sum), config.domainUnit]);
+        rows.push(["Count", String(stats.count), "points"]);
+      }
+    } else if ("devices" in data && Array.isArray(data.devices)) {
+      const compData = data;
+      const deviceHeaders = compData.devices.map(
+        (d) => d.device.label || d.device.name || "Device"
+      );
+      rows.push(["Timestamp", ...deviceHeaders]);
+      const allTimestamps = /* @__PURE__ */ new Set();
+      compData.devices.forEach((d) => {
+        d.data.forEach((point) => {
+          allTimestamps.add(normalizeTimestamp(point.timestamp).getTime());
+        });
+      });
+      const sortedTimestamps = Array.from(allTimestamps).sort((a, b) => a - b);
+      for (const ts of sortedTimestamps) {
+        const row = [formatDate3(new Date(ts), config.locale)];
+        for (const device of compData.devices) {
+          const point = device.data.find(
+            (p) => normalizeTimestamp(p.timestamp).getTime() === ts
+          );
+          row.push(point ? formatNumCSV(point.value) : "");
+        }
+        rows.push(row);
+      }
+    }
+    return rows.map((row) => row.map(escapeCSV).join(sep)).join("\r\n");
+  }
+  function generateXLSX(data, config) {
+    return generateCSV(data, config);
+  }
+  function generatePDFContent(data, config) {
+    const { colors, domainIcon, domainLabel, domainUnit, locale, includeStats, includeChart } = config;
+    let deviceLabel = "Export";
+    let customerName = "";
+    let identifier = "";
+    let dataPoints = [];
+    if ("device" in data && "data" in data) {
+      const deviceData = data;
+      deviceLabel = deviceData.device.label || deviceData.device.name || "Device";
+      identifier = deviceData.device.identifier || "";
+      customerName = deviceData.customer?.customerName || "";
+      dataPoints = deviceData.data;
+    }
+    const stats = calculateStats2(dataPoints);
+    const tableRows = dataPoints.slice(0, 100).map((point) => {
+      const ts = normalizeTimestamp(point.timestamp);
+      return `
+      <tr>
+        <td style="padding: 8px; border-bottom: 1px solid #eee;">${formatDate3(ts, locale)}</td>
+        <td style="padding: 8px; border-bottom: 1px solid #eee; text-align: right;">${formatNumber2(point.value, locale)}</td>
+        <td style="padding: 8px; border-bottom: 1px solid #eee;">${point.unit || domainUnit}</td>
+      </tr>
+    `;
+    }).join("");
+    const statsSection = includeStats ? `
+    <div style="margin-top: 24px; padding: 16px; background: #f5f5f5; border-radius: 8px;">
+      <h3 style="margin: 0 0 12px 0; color: ${colors.primary};">Statistics</h3>
+      <table style="width: 100%;">
+        <tr>
+          <td><strong>Minimum:</strong></td>
+          <td>${formatNumber2(stats.min, locale)} ${domainUnit}</td>
+          <td><strong>Maximum:</strong></td>
+          <td>${formatNumber2(stats.max, locale)} ${domainUnit}</td>
+        </tr>
+        <tr>
+          <td><strong>Average:</strong></td>
+          <td>${formatNumber2(stats.average, locale)} ${domainUnit}</td>
+          <td><strong>Total:</strong></td>
+          <td>${formatNumber2(stats.sum, locale)} ${domainUnit}</td>
+        </tr>
+      </table>
+    </div>
+  ` : "";
+    return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="UTF-8">
+      <title>${deviceLabel} - ${domainLabel} Report</title>
+      <style>
+        body {
+          font-family: 'Roboto', Arial, sans-serif;
+          margin: 0;
+          padding: 24px;
+          color: ${colors.text};
+          background: ${colors.background};
+        }
+        .header {
+          background: ${colors.primary};
+          color: white;
+          padding: 20px;
+          border-radius: 8px;
+          margin-bottom: 24px;
+        }
+        .header h1 {
+          margin: 0;
+          font-size: 24px;
+        }
+        .header .subtitle {
+          opacity: 0.9;
+          margin-top: 8px;
+        }
+        .device-info {
+          display: flex;
+          gap: 16px;
+          margin-bottom: 16px;
+          padding: 12px;
+          background: #f5f5f5;
+          border-radius: 8px;
+        }
+        .device-info span {
+          padding: 4px 12px;
+          background: ${colors.secondary};
+          color: white;
+          border-radius: 4px;
+          font-size: 14px;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        th {
+          background: ${colors.primary};
+          color: white;
+          padding: 12px 8px;
+          text-align: left;
+        }
+        th:nth-child(2) {
+          text-align: right;
+        }
+        .footer {
+          margin-top: 24px;
+          padding-top: 16px;
+          border-top: 1px solid #eee;
+          text-align: center;
+          font-size: 12px;
+          color: #999;
+        }
+        @media print {
+          body { padding: 0; }
+          .header { border-radius: 0; }
+        }
+      </style>
+    </head>
+    <body>
+      <div class="header">
+        <h1>${domainIcon} ${deviceLabel}</h1>
+        <div class="subtitle">${domainLabel} Report - Generated ${formatDate3(/* @__PURE__ */ new Date(), locale)}</div>
+      </div>
+
+      ${customerName ? `<div class="customer-name" style="margin-bottom: 16px; font-size: 18px;"><strong>Customer:</strong> ${customerName}</div>` : ""}
+
+      ${identifier ? `
+        <div class="device-info">
+          <span>ID: ${identifier}</span>
+          <span>Domain: ${domainLabel}</span>
+          <span>Unit: ${domainUnit}</span>
+        </div>
+      ` : ""}
+
+      <table>
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>${domainLabel} (${domainUnit})</th>
+            <th>Unit</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${tableRows}
+          ${dataPoints.length > 100 ? `<tr><td colspan="3" style="text-align: center; padding: 16px; color: #999;">... and ${dataPoints.length - 100} more rows</td></tr>` : ""}
+        </tbody>
+      </table>
+
+      ${statsSection}
+
+      <div class="footer">
+        <p>${config.footerText || "Generated by MyIO Platform"}</p>
+      </div>
+    </body>
+    </html>
+  `;
+  }
+  function buildTemplateExport(params) {
+    const {
+      domain,
+      formatExport,
+      typeExport,
+      colorsPallet,
+      locale = "pt-BR",
+      includeChart = formatExport === "pdf",
+      includeStats = true,
+      headerText,
+      footerText
+    } = params;
+    const colors = {
+      ...DEFAULT_COLORS4,
+      ...colorsPallet,
+      chartColors: colorsPallet?.chartColors || DEFAULT_COLORS4.chartColors
+    };
+    return {
+      domain,
+      formatExport,
+      typeExport,
+      colors,
+      locale,
+      includeChart,
+      includeStats,
+      headerText: headerText || `${DOMAIN_LABELS[domain]} Report`,
+      footerText: footerText || "Generated by MyIO Platform",
+      domainIcon: DOMAIN_ICONS[domain],
+      domainLabel: DOMAIN_LABELS[domain],
+      domainUnit: DOMAIN_UNITS[domain]
+    };
+  }
+  function myioExportData(data, config, options) {
+    const filename = generateFilename(data, config);
+    let allDataPoints = [];
+    if ("data" in data && Array.isArray(data.data)) {
+      allDataPoints = data.data;
+    } else if ("devices" in data && Array.isArray(data.devices)) {
+      allDataPoints = data.devices.flatMap((d) => d.data);
+    }
+    const stats = calculateStats2(allDataPoints);
+    const instance = {
+      async export() {
+        try {
+          options?.onProgress?.(10, "Generating content...");
+          let content;
+          let mimeType;
+          let finalFilename = filename;
+          switch (config.formatExport) {
+            case "csv":
+              content = generateCSV(data, config);
+              mimeType = "text/csv;charset=utf-8;";
+              break;
+            case "xlsx":
+              content = generateXLSX(data, config);
+              mimeType = "text/csv;charset=utf-8;";
+              finalFilename = filename.replace(".xlsx", ".csv");
+              break;
+            case "pdf":
+              content = generatePDFContent(data, config);
+              mimeType = "text/html;charset=utf-8;";
+              finalFilename = filename.replace(".pdf", ".html");
+              break;
+            default:
+              throw new Error(`Unsupported format: ${config.formatExport}`);
+          }
+          options?.onProgress?.(80, "Creating file...");
+          const bom = config.formatExport === "csv" ? "\uFEFF" : "";
+          const blob = new Blob([bom + content], { type: mimeType });
+          options?.onProgress?.(100, "Export complete");
+          return {
+            success: true,
+            filename: finalFilename,
+            blob,
+            dataUrl: URL.createObjectURL(blob)
+          };
+        } catch (error) {
+          return {
+            success: false,
+            filename,
+            error: error instanceof Error ? error.message : "Unknown error"
+          };
+        }
+      },
+      async download() {
+        const result = await this.export();
+        if (!result.success || !result.blob) {
+          console.error("Export failed:", result.error);
+          return;
+        }
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(result.blob);
+        link.download = result.filename;
+        link.style.display = "none";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+      },
+      async preview() {
+        if (config.formatExport !== "pdf") {
+          return null;
+        }
+        const result = await this.export();
+        return result.dataUrl || null;
+      },
+      getStats() {
+        return stats;
+      },
+      getFilename() {
+        return filename;
+      }
+    };
+    if (options?.autoDownload) {
+      instance.download();
+    }
+    return instance;
+  }
+  var EXPORT_DEFAULT_COLORS = DEFAULT_COLORS4;
+  var EXPORT_DOMAIN_ICONS = DOMAIN_ICONS;
+  var EXPORT_DOMAIN_LABELS = DOMAIN_LABELS;
+  var EXPORT_DOMAIN_UNITS = DOMAIN_UNITS;
+
   exports.CHART_COLORS = CHART_COLORS;
+  exports.CONSUMPTION_CHART_COLORS = DEFAULT_COLORS;
+  exports.CONSUMPTION_CHART_DEFAULTS = DEFAULT_CONFIG;
+  exports.CONSUMPTION_THEME_COLORS = THEME_COLORS;
   exports.ConnectionStatusType = ConnectionStatusType;
   exports.DEFAULT_CLAMP_RANGE = DEFAULT_CLAMP_RANGE;
   exports.DeviceStatusType = DeviceStatusType;
+  exports.EXPORT_DEFAULT_COLORS = EXPORT_DEFAULT_COLORS;
+  exports.EXPORT_DOMAIN_ICONS = EXPORT_DOMAIN_ICONS;
+  exports.EXPORT_DOMAIN_LABELS = EXPORT_DOMAIN_LABELS;
+  exports.EXPORT_DOMAIN_UNITS = EXPORT_DOMAIN_UNITS;
   exports.MyIOChartModal = MyIOChartModal;
   exports.MyIODraggableCard = MyIODraggableCard;
   exports.MyIOSelectionStoreClass = MyIOSelectionStoreClass;
@@ -22292,11 +25377,13 @@ ${rangeText}`;
   exports.averageByDay = averageByDay;
   exports.buildListItemsThingsboardByUniqueDatasource = buildListItemsThingsboardByUniqueDatasource;
   exports.buildMyioIngestionAuth = buildMyioIngestionAuth;
+  exports.buildTemplateExport = buildTemplateExport;
   exports.buildWaterReportCSV = buildWaterReportCSV;
   exports.buildWaterStoresCSV = buildWaterStoresCSV;
   exports.calcDeltaPercent = calcDeltaPercent;
   exports.calculateDeviceStatus = calculateDeviceStatus;
   exports.calculateDeviceStatusWithRanges = calculateDeviceStatusWithRanges;
+  exports.calculateExportStats = calculateStats2;
   exports.calculateStats = calculateStats;
   exports.clampTemperature = clampTemperature;
   exports.classify = classify;
@@ -22304,8 +25391,12 @@ ${rangeText}`;
   exports.classifyWaterLabels = classifyWaterLabels;
   exports.clearAllAuthCaches = clearAllAuthCaches;
   exports.connectionStatusIcons = connectionStatusIcons;
+  exports.createConsumption7DaysChart = createConsumption7DaysChart;
+  exports.createConsumptionChartWidget = createConsumptionChartWidget;
+  exports.createConsumptionModal = createConsumptionModal;
   exports.createDateRangePicker = createDateRangePicker2;
   exports.createInputDateRangePickerInsideDIV = createInputDateRangePickerInsideDIV;
+  exports.createModalHeader = createModalHeader;
   exports.decodePayload = decodePayload;
   exports.decodePayloadBase64Xor = decodePayloadBase64Xor;
   exports.detectDeviceType = detectDeviceType;
@@ -22319,6 +25410,7 @@ ${rangeText}`;
   exports.fetchThingsboardCustomerAttrsFromStorage = fetchThingsboardCustomerAttrsFromStorage;
   exports.fetchThingsboardCustomerServerScopeAttrs = fetchThingsboardCustomerServerScopeAttrs;
   exports.findValue = findValue;
+  exports.findValueWithDefault = findValueWithDefault;
   exports.fmtPerc = fmtPerc;
   exports.fmtPercLegacy = fmtPerc2;
   exports.formatAllInSameUnit = formatAllInSameUnit;
@@ -22326,18 +25418,24 @@ ${rangeText}`;
   exports.formatDateForInput = formatDateForInput;
   exports.formatDateToYMD = formatDateToYMD;
   exports.formatDateWithTimezoneOffset = formatDateWithTimezoneOffset;
+  exports.formatDuration = formatDuration;
   exports.formatEnergy = formatEnergy;
   exports.formatNumberReadable = formatNumberReadable;
+  exports.formatRelativeTime = formatRelativeTime;
   exports.formatTankHeadFromCm = formatTankHeadFromCm;
   exports.formatTemperature = formatTemperature2;
+  exports.formatWater = formatWater;
   exports.formatWaterByGroup = formatWaterByGroup;
   exports.formatWaterVolumeM3 = formatWaterVolumeM3;
+  exports.formatarDuracao = formatarDuracao;
+  exports.generateExportFilename = generateFilename;
   exports.getAuthCacheStats = getAuthCacheStats;
   exports.getAvailableContexts = getAvailableContexts;
   exports.getConnectionStatusIcon = getConnectionStatusIcon;
   exports.getDateRangeArray = getDateRangeArray;
   exports.getDeviceStatusIcon = getDeviceStatusIcon;
   exports.getDeviceStatusInfo = getDeviceStatusInfo;
+  exports.getModalHeaderStyles = getModalHeaderStyles;
   exports.getSaoPauloISOString = getSaoPauloISOString;
   exports.getSaoPauloISOStringFixed = getSaoPauloISOStringFixed;
   exports.getValueByDatakey = getValueByDatakey;
@@ -22349,8 +25447,10 @@ ${rangeText}`;
   exports.isValidConnectionStatus = isValidConnectionStatus;
   exports.isValidDeviceStatus = isValidDeviceStatus;
   exports.isWaterCategory = isWaterCategory;
+  exports.mapConnectionStatus = mapConnectionStatus;
   exports.mapDeviceStatusToCardStatus = mapDeviceStatusToCardStatus;
   exports.mapDeviceToConnectionStatus = mapDeviceToConnectionStatus;
+  exports.myioExportData = myioExportData;
   exports.normalizeRecipients = normalizeRecipients;
   exports.numbers = numbers_exports;
   exports.openDashboardPopup = openDashboardPopup;