myio-js-library 0.1.140 → 0.1.142

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

@@ -17972,13 +17972,13 @@ ${rangeText}`;
     function initializeModal() {
       if (data) {
         modalState.goalsData = data;
-        renderModal();
+        renderModal4();
       } else {
-        renderModal();
+        renderModal4();
         loadGoalsData();
       }
     }
-    function renderModal() {
+    function renderModal4() {
       const existing = document.getElementById("myio-goals-panel-modal");
       if (existing) {
         existing.remove();
@@ -19367,7 +19367,2331 @@ ${rangeText}`;
     }
   }
 
+  // src/components/temperature/utils.ts
+  var DAY_PERIODS = [
+    { id: "madrugada", label: "Madrugada (00h-06h)", startHour: 0, endHour: 6 },
+    { id: "manha", label: "Manh\xE3 (06h-12h)", startHour: 6, endHour: 12 },
+    { id: "tarde", label: "Tarde (12h-18h)", startHour: 12, endHour: 18 },
+    { id: "noite", label: "Noite (18h-24h)", startHour: 18, endHour: 24 }
+  ];
+  var DEFAULT_CLAMP_RANGE = { min: 15, max: 40 };
+  function getTodaySoFar() {
+    const now = /* @__PURE__ */ new Date();
+    const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
+    return {
+      startTs: startOfDay.getTime(),
+      endTs: now.getTime()
+    };
+  }
+  var CHART_COLORS = [
+    "#1976d2",
+    // Blue
+    "#FF6B6B",
+    // Red
+    "#4CAF50",
+    // Green
+    "#FF9800",
+    // Orange
+    "#9C27B0",
+    // Purple
+    "#00BCD4",
+    // Cyan
+    "#E91E63",
+    // Pink
+    "#795548"
+    // Brown
+  ];
+  async function fetchTemperatureData(token, deviceId, startTs, endTs) {
+    const url = `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=temperature&startTs=${encodeURIComponent(startTs)}&endTs=${encodeURIComponent(endTs)}&limit=50000&agg=NONE`;
+    const response = await fetch(url, {
+      headers: {
+        "X-Authorization": `Bearer ${token}`,
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch temperature data: ${response.status}`);
+    }
+    const data = await response.json();
+    return data?.temperature || [];
+  }
+  function clampTemperature(value, range = DEFAULT_CLAMP_RANGE) {
+    const num = Number(value || 0);
+    if (num < range.min) return range.min;
+    if (num > range.max) return range.max;
+    return num;
+  }
+  function calculateStats(data, clampRange = DEFAULT_CLAMP_RANGE) {
+    if (data.length === 0) {
+      return { avg: 0, min: 0, max: 0, count: 0 };
+    }
+    const values = data.map((item) => clampTemperature(item.value, clampRange));
+    const sum = values.reduce((acc, v) => acc + v, 0);
+    return {
+      avg: sum / values.length,
+      min: Math.min(...values),
+      max: Math.max(...values),
+      count: values.length
+    };
+  }
+  function interpolateTemperature(data, options) {
+    const { intervalMinutes, startTs, endTs, clampRange = DEFAULT_CLAMP_RANGE } = options;
+    const intervalMs = intervalMinutes * 60 * 1e3;
+    if (data.length === 0) {
+      return [];
+    }
+    const sortedData = [...data].sort((a, b) => a.ts - b.ts);
+    const result = [];
+    let lastKnownValue = clampTemperature(sortedData[0].value, clampRange);
+    let dataIndex = 0;
+    for (let ts = startTs; ts <= endTs; ts += intervalMs) {
+      while (dataIndex < sortedData.length - 1 && sortedData[dataIndex + 1].ts <= ts) {
+        dataIndex++;
+      }
+      const currentData = sortedData[dataIndex];
+      if (currentData && Math.abs(currentData.ts - ts) < intervalMs) {
+        lastKnownValue = clampTemperature(currentData.value, clampRange);
+      }
+      result.push({
+        ts,
+        value: lastKnownValue
+      });
+    }
+    return result;
+  }
+  function aggregateByDay(data, clampRange = DEFAULT_CLAMP_RANGE) {
+    if (data.length === 0) {
+      return [];
+    }
+    const dayMap = /* @__PURE__ */ new Map();
+    data.forEach((item) => {
+      const date = new Date(item.ts);
+      const dateKey = date.toISOString().split("T")[0];
+      if (!dayMap.has(dateKey)) {
+        dayMap.set(dateKey, []);
+      }
+      dayMap.get(dateKey).push(item);
+    });
+    const result = [];
+    dayMap.forEach((dayData, dateKey) => {
+      const values = dayData.map((item) => clampTemperature(item.value, clampRange));
+      const sum = values.reduce((acc, v) => acc + v, 0);
+      result.push({
+        date: dateKey,
+        dateTs: new Date(dateKey).getTime(),
+        avg: sum / values.length,
+        min: Math.min(...values),
+        max: Math.max(...values),
+        count: values.length
+      });
+    });
+    return result.sort((a, b) => a.dateTs - b.dateTs);
+  }
+  function filterByDayPeriods(data, selectedPeriods) {
+    if (selectedPeriods.length === 0 || selectedPeriods.length === DAY_PERIODS.length) {
+      return data;
+    }
+    return data.filter((item) => {
+      const date = new Date(item.ts);
+      const hour = date.getHours();
+      return selectedPeriods.some((periodId) => {
+        const period = DAY_PERIODS.find((p) => p.id === periodId);
+        if (!period) return false;
+        return hour >= period.startHour && hour < period.endHour;
+      });
+    });
+  }
+  function getSelectedPeriodsLabel(selectedPeriods) {
+    if (selectedPeriods.length === 0 || selectedPeriods.length === DAY_PERIODS.length) {
+      return "Todos os per\xEDodos";
+    }
+    if (selectedPeriods.length === 1) {
+      const period = DAY_PERIODS.find((p) => p.id === selectedPeriods[0]);
+      return period?.label || "";
+    }
+    return `${selectedPeriods.length} per\xEDodos selecionados`;
+  }
+  function formatTemperature(value, decimals = 1) {
+    return `${value.toFixed(decimals)}\xB0C`;
+  }
+  function exportTemperatureCSV(data, deviceLabel, stats, startDate, endDate) {
+    if (data.length === 0) {
+      console.warn("No data to export");
+      return;
+    }
+    const BOM = "\uFEFF";
+    let csvContent = BOM;
+    csvContent += `Relat\xF3rio de Temperatura - ${deviceLabel}
+`;
+    csvContent += `Per\xEDodo: ${startDate} at\xE9 ${endDate}
+`;
+    csvContent += `M\xE9dia: ${formatTemperature(stats.avg)}
+`;
+    csvContent += `M\xEDnima: ${formatTemperature(stats.min)}
+`;
+    csvContent += `M\xE1xima: ${formatTemperature(stats.max)}
+`;
+    csvContent += `Total de leituras: ${stats.count}
+`;
+    csvContent += "\n";
+    csvContent += "Data/Hora,Temperatura (\xB0C)\n";
+    data.forEach((item) => {
+      const date = new Date(item.ts).toLocaleString("pt-BR");
+      const temp = Number(item.value).toFixed(2);
+      csvContent += `"${date}",${temp}
+`;
+    });
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `temperatura_${deviceLabel.replace(/\s+/g, "_")}_${startDate}_${endDate}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  var DARK_THEME = {
+    background: "rgba(0, 0, 0, 0.85)",
+    surface: "#1a1f28",
+    text: "#ffffff",
+    textMuted: "rgba(255, 255, 255, 0.7)",
+    border: "rgba(255, 255, 255, 0.1)",
+    primary: "#1976d2",
+    success: "#4CAF50",
+    warning: "#FF9800",
+    danger: "#f44336",
+    chartLine: "#1976d2",
+    chartGrid: "rgba(255, 255, 255, 0.1)"
+  };
+  var LIGHT_THEME = {
+    background: "rgba(0, 0, 0, 0.6)",
+    surface: "#ffffff",
+    text: "#333333",
+    textMuted: "#666666",
+    border: "#e0e0e0",
+    primary: "#1976d2",
+    success: "#4CAF50",
+    warning: "#FF9800",
+    danger: "#f44336",
+    chartLine: "#1976d2",
+    chartGrid: "#e0e0e0"
+  };
+  function getThemeColors(theme) {
+    return theme === "dark" ? DARK_THEME : LIGHT_THEME;
+  }
+
+  // src/components/temperature/TemperatureModal.ts
+  async function openTemperatureModal(params) {
+    const modalId = `myio-temp-modal-${Date.now()}`;
+    const defaultDateRange = getTodaySoFar();
+    const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
+    const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
+    const state = {
+      token: params.token,
+      deviceId: params.deviceId,
+      label: params.label || "Sensor de Temperatura",
+      currentTemperature: params.currentTemperature ?? null,
+      temperatureMin: params.temperatureMin ?? null,
+      temperatureMax: params.temperatureMax ?? null,
+      temperatureStatus: params.temperatureStatus ?? null,
+      startTs,
+      endTs,
+      granularity: params.granularity || "hour",
+      theme: params.theme || "light",
+      clampRange: params.clampRange || DEFAULT_CLAMP_RANGE,
+      locale: params.locale || "pt-BR",
+      data: [],
+      stats: { avg: 0, min: 0, max: 0, count: 0 },
+      isLoading: true,
+      dateRangePicker: null,
+      selectedPeriods: ["madrugada", "manha", "tarde", "noite"]
+      // All periods selected by default
+    };
+    const savedGranularity = localStorage.getItem("myio-temp-modal-granularity");
+    const savedTheme = localStorage.getItem("myio-temp-modal-theme");
+    if (savedGranularity) state.granularity = savedGranularity;
+    if (savedTheme) state.theme = savedTheme;
+    const modalContainer = document.createElement("div");
+    modalContainer.id = modalId;
+    document.body.appendChild(modalContainer);
+    renderModal(modalContainer, state, modalId);
+    try {
+      state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
+      state.stats = calculateStats(state.data, state.clampRange);
+      state.isLoading = false;
+      renderModal(modalContainer, state, modalId);
+      drawChart(modalId, state);
+    } catch (error) {
+      console.error("[TemperatureModal] Error fetching data:", error);
+      state.isLoading = false;
+      renderModal(modalContainer, state, modalId, error);
+    }
+    await setupEventListeners(modalContainer, state, modalId, params.onClose);
+    return {
+      destroy: () => {
+        modalContainer.remove();
+        params.onClose?.();
+      },
+      updateData: async (startDate, endDate, granularity) => {
+        state.startTs = new Date(startDate).getTime();
+        state.endTs = new Date(endDate).getTime();
+        if (granularity) state.granularity = granularity;
+        state.isLoading = true;
+        renderModal(modalContainer, state, modalId);
+        try {
+          state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
+          state.stats = calculateStats(state.data, state.clampRange);
+          state.isLoading = false;
+          renderModal(modalContainer, state, modalId);
+          drawChart(modalId, state);
+        } catch (error) {
+          console.error("[TemperatureModal] Error updating data:", error);
+          state.isLoading = false;
+          renderModal(modalContainer, state, modalId, error);
+        }
+      }
+    };
+  }
+  function renderModal(container, state, modalId, error) {
+    const colors = getThemeColors(state.theme);
+    const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale);
+    const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale);
+    const statusText = state.temperatureStatus === "ok" ? "Dentro da faixa" : state.temperatureStatus === "above" ? "Acima do limite" : state.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
+    const statusColor = state.temperatureStatus === "ok" ? colors.success : state.temperatureStatus === "above" ? colors.danger : state.temperatureStatus === "below" ? colors.primary : colors.textMuted;
+    const rangeText = state.temperatureMin !== null && state.temperatureMax !== null ? `${state.temperatureMin}\xB0C - ${state.temperatureMax}\xB0C` : "N\xE3o definida";
+    new Date(state.startTs).toISOString().slice(0, 16);
+    new Date(state.endTs).toISOString().slice(0, 16);
+    const isMaximized = container.__isMaximized || false;
+    const contentMaxWidth = isMaximized ? "100%" : "900px";
+    const contentMaxHeight = isMaximized ? "100vh" : "95vh";
+    const contentBorderRadius = isMaximized ? "0" : "10px";
+    container.innerHTML = `
+    <div class="myio-temp-modal-overlay" style="
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0, 0, 0, 0.5); z-index: 9998;
+      display: flex; justify-content: center; align-items: center;
+      backdrop-filter: blur(2px);
+    ">
+      <div class="myio-temp-modal-content" style="
+        background: ${colors.surface}; border-radius: ${contentBorderRadius};
+        max-width: ${contentMaxWidth}; width: ${isMaximized ? "100%" : "95%"};
+        max-height: ${contentMaxHeight}; height: ${isMaximized ? "100%" : "auto"};
+        overflow: hidden; display: flex; flex-direction: column;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        font-family: 'Roboto', Arial, sans-serif;
+      ">
+        <!-- Header - MyIO Premium Style -->
+        <div style="
+          padding: 4px 8px; display: flex; align-items: center; justify-content: space-between;
+          background: #3e1a7d; color: white; border-radius: ${isMaximized ? "0" : "10px 10px 0 0"};
+          min-height: 20px;
+        ">
+          <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
+            \u{1F321}\uFE0F ${state.label} - Hist\xF3rico de Temperatura
+          </h2>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <!-- Theme Toggle -->
+            <button id="${modalId}-theme-toggle" title="Alternar tema" style="
+              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;
+            ">${state.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            <!-- Maximize Button -->
+            <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
+              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;
+            ">${isMaximized ? "\u{1F5D7}" : "\u{1F5D6}"}</button>
+            <!-- Close Button -->
+            <button id="${modalId}-close" title="Fechar" style="
+              background: none; border: none; font-size: 20px; cursor: pointer;
+              padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
+              transition: background-color 0.2s;
+            ">\xD7</button>
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div style="flex: 1; overflow-y: auto; padding: 16px;">
+
+        <!-- Controls Row -->
+        <div style="
+          display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
+          margin-bottom: 16px; padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          border-radius: 6px; border: 1px solid ${colors.border};
+        ">
+          <!-- Granularity Select -->
+          <div>
+            <label style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px;">
+              Granularidade
+            </label>
+            <select id="${modalId}-granularity" style="
+              padding: 8px 12px; border: 1px solid ${colors.border}; border-radius: 6px;
+              font-size: 14px; color: ${colors.text}; background: ${colors.surface};
+              cursor: pointer; min-width: 130px;
+            ">
+              <option value="hour" ${state.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+            </select>
+          </div>
+          <!-- Day Period Filter (Multiselect) -->
+          <div style="position: relative;">
+            <label style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px;">
+              Per\xEDodos do Dia
+            </label>
+            <button id="${modalId}-period-btn" type="button" style="
+              padding: 8px 12px; border: 1px solid ${colors.border}; border-radius: 6px;
+              font-size: 14px; color: ${colors.text}; background: ${colors.surface};
+              cursor: pointer; min-width: 180px; text-align: left;
+              display: flex; align-items: center; justify-content: space-between; gap: 8px;
+            ">
+              <span>${getSelectedPeriodsLabel(state.selectedPeriods)}</span>
+              <span style="font-size: 10px;">\u25BC</span>
+            </button>
+            <div id="${modalId}-period-dropdown" style="
+              display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
+              background: ${colors.surface}; border: 1px solid ${colors.border};
+              border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+              min-width: 200px; margin-top: 4px; padding: 8px 0;
+            ">
+              ${DAY_PERIODS.map((period) => `
+                <label style="
+                  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
+                  cursor: pointer; font-size: 13px; color: ${colors.text};
+                " onmouseover="this.style.background='${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                   onmouseout="this.style.background='transparent'">
+                  <input type="checkbox"
+                    name="${modalId}-period"
+                    value="${period.id}"
+                    ${state.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
+                  ${period.label}
+                </label>
+              `).join("")}
+              <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
+                <button id="${modalId}-period-select-all" type="button" style="
+                  width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
+                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  border: none; border-radius: 4px; cursor: pointer;
+                  font-size: 12px; color: ${colors.text};
+                ">Selecionar Todos</button>
+                <button id="${modalId}-period-clear" type="button" style="
+                  width: calc(100% - 16px); margin: 0 8px; padding: 6px;
+                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  border: none; border-radius: 4px; cursor: pointer;
+                  font-size: 12px; color: ${colors.text};
+                ">Limpar Sele\xE7\xE3o</button>
+              </div>
+            </div>
+          </div>
+          <!-- Date Range Picker -->
+          <div style="flex: 1; min-width: 220px;">
+            <label style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px;">
+              Per\xEDodo
+            </label>
+            <input type="text" id="${modalId}-date-range" readonly placeholder="Selecione o per\xEDodo..." style="
+              padding: 8px 12px; border: 1px solid ${colors.border}; border-radius: 6px;
+              font-size: 14px; color: ${colors.text}; background: ${colors.surface};
+              width: 100%; cursor: pointer; box-sizing: border-box;
+            "/>
+          </div>
+          <!-- Query Button -->
+          <button id="${modalId}-query" style="
+            background: #3e1a7d; color: white; border: none;
+            padding: 8px 16px; border-radius: 6px; cursor: pointer;
+            font-size: 14px; font-weight: 500; height: 38px;
+            display: flex; align-items: center; gap: 8px;
+            font-family: 'Roboto', Arial, sans-serif;
+          " ${state.isLoading ? "disabled" : ""}>
+            ${state.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          </button>
+        </div>
+
+        <!-- Stats Cards -->
+        <div style="
+          display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+          gap: 12px; margin-bottom: 16px;
+        ">
+          <!-- Current Temperature -->
+          <div style="
+            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            border-radius: 12px; border: 1px solid ${colors.border};
+          ">
+            <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Temperatura Atual</span>
+            <div style="font-weight: 700; font-size: 24px; color: ${statusColor}; margin-top: 4px;">
+              ${state.currentTemperature !== null ? formatTemperature(state.currentTemperature) : "N/A"}
+            </div>
+            <div style="font-size: 11px; color: ${statusColor}; margin-top: 2px;">${statusText}</div>
+          </div>
+          <!-- Average -->
+          <div style="
+            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            border-radius: 12px; border: 1px solid ${colors.border};
+          ">
+            <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">M\xE9dia do Per\xEDodo</span>
+            <div id="${modalId}-avg" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
+              ${state.stats.count > 0 ? formatTemperature(state.stats.avg) : "N/A"}
+            </div>
+            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${startDateStr} - ${endDateStr}</div>
+          </div>
+          <!-- Min/Max -->
+          <div style="
+            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            border-radius: 12px; border: 1px solid ${colors.border};
+          ">
+            <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Min / Max</span>
+            <div id="${modalId}-minmax" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
+              ${state.stats.count > 0 ? `${formatTemperature(state.stats.min)} / ${formatTemperature(state.stats.max)}` : "N/A"}
+            </div>
+            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state.stats.count} leituras</div>
+          </div>
+          <!-- Ideal Range -->
+          <div style="
+            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            border-radius: 12px; border: 1px solid ${colors.border};
+          ">
+            <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Faixa Ideal</span>
+            <div style="font-weight: 600; font-size: 20px; color: ${colors.success}; margin-top: 4px;">
+              ${rangeText}
+            </div>
+          </div>
+        </div>
+
+        <!-- Chart Container -->
+        <div style="margin-bottom: 20px;">
+          <h3 style="margin: 0 0 12px 0; font-size: 14px; color: ${colors.textMuted}; font-weight: 500;">
+            Hist\xF3rico de Temperatura
+          </h3>
+          <div id="${modalId}-chart" style="
+            height: 320px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            border-radius: 12px; display: flex; justify-content: center; align-items: center;
+            border: 1px solid ${colors.border}; position: relative;
+          ">
+            ${state.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   <div style="animation: spin 1s linear infinite; font-size: 32px; margin-bottom: 8px;">\u21BB</div>
+                   <div>Carregando dados...</div>
+                 </div>` : error ? `<div style="text-align: center; color: ${colors.danger};">
+                     <div style="font-size: 32px; margin-bottom: 8px;">\u26A0\uFE0F</div>
+                     <div>Erro ao carregar dados</div>
+                     <div style="font-size: 12px; margin-top: 4px;">${error.message}</div>
+                   </div>` : state.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
+                       <div style="font-size: 32px; margin-bottom: 8px;">\u{1F4ED}</div>
+                       <div>Sem dados para o per\xEDodo selecionado</div>
+                     </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div style="display: flex; justify-content: flex-end; gap: 12px;">
+          <button id="${modalId}-export" style="
+            background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            color: ${colors.text}; border: 1px solid ${colors.border};
+            padding: 8px 16px; border-radius: 6px; cursor: pointer;
+            font-size: 14px; display: flex; align-items: center; gap: 8px;
+            font-family: 'Roboto', Arial, sans-serif;
+          " ${state.data.length === 0 ? "disabled" : ""}>
+            \u{1F4E5} Exportar CSV
+          </button>
+          <button id="${modalId}-close-btn" style="
+            background: #3e1a7d; color: white; border: none;
+            padding: 8px 16px; border-radius: 6px; cursor: pointer;
+            font-size: 14px; font-weight: 500;
+            font-family: 'Roboto', Arial, sans-serif;
+          ">
+            Fechar
+          </button>
+        </div>
+        </div><!-- End Body -->
+      </div>
+    </div>
+    <style>
+      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+      #${modalId} select:focus, #${modalId} input:focus {
+        outline: 2px solid #3e1a7d;
+        outline-offset: 2px;
+      }
+      #${modalId} button:hover:not(:disabled) {
+        opacity: 0.9;
+      }
+      #${modalId} button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      #${modalId} .myio-temp-modal-content > div:first-child button:hover {
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: white !important;
+      }
+    </style>
+  `;
+  }
+  function drawChart(modalId, state) {
+    const chartContainer = document.getElementById(`${modalId}-chart`);
+    const canvas = document.getElementById(`${modalId}-canvas`);
+    if (!chartContainer || !canvas || state.data.length === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const colors = getThemeColors(state.theme);
+    const filteredData = filterByDayPeriods(state.data, state.selectedPeriods);
+    if (filteredData.length === 0) {
+      canvas.width = chartContainer.clientWidth;
+      canvas.height = chartContainer.clientHeight;
+      ctx.fillStyle = colors.textMuted;
+      ctx.font = "14px Roboto, Arial, sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText("Nenhum dado para os per\xEDodos selecionados", canvas.width / 2, canvas.height / 2);
+      return;
+    }
+    let chartData;
+    if (state.granularity === "hour") {
+      const interpolated = interpolateTemperature(filteredData, {
+        intervalMinutes: 30,
+        startTs: state.startTs,
+        endTs: state.endTs,
+        clampRange: state.clampRange
+      });
+      const filteredInterpolated = filterByDayPeriods(interpolated, state.selectedPeriods);
+      chartData = filteredInterpolated.map((item) => ({
+        x: item.ts,
+        y: Number(item.value),
+        screenX: 0,
+        screenY: 0
+      }));
+    } else {
+      const daily = aggregateByDay(filteredData, state.clampRange);
+      chartData = daily.map((item) => ({
+        x: item.dateTs,
+        y: item.avg,
+        screenX: 0,
+        screenY: 0,
+        label: item.date
+      }));
+    }
+    if (chartData.length === 0) return;
+    const width = chartContainer.clientWidth - 2;
+    const height = 320;
+    canvas.width = width;
+    canvas.height = height;
+    const paddingLeft = 60;
+    const paddingRight = 20;
+    const paddingTop = 20;
+    const paddingBottom = 55;
+    const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
+    const values = chartData.map((d) => d.y);
+    const dataMin = Math.min(...values);
+    const dataMax = Math.max(...values);
+    const thresholdMin = state.temperatureMin !== null ? state.temperatureMin : dataMin;
+    const thresholdMax = state.temperatureMax !== null ? state.temperatureMax : dataMax;
+    const minY = Math.min(dataMin, thresholdMin) - 1;
+    const maxY = Math.max(dataMax, thresholdMax) + 1;
+    const chartWidth = width - paddingLeft - paddingRight;
+    const chartHeight = height - paddingTop - paddingBottom;
+    const scaleY = chartHeight / (maxY - minY || 1);
+    if (isPeriodsFiltered) {
+      const pointSpacing = chartWidth / Math.max(1, chartData.length - 1);
+      chartData.forEach((point, index) => {
+        point.screenX = paddingLeft + index * pointSpacing;
+        point.screenY = height - paddingBottom - (point.y - minY) * scaleY;
+      });
+    } else {
+      const minX = chartData[0].x;
+      const maxX = chartData[chartData.length - 1].x;
+      const timeRange = maxX - minX || 1;
+      const scaleX = chartWidth / timeRange;
+      chartData.forEach((point) => {
+        point.screenX = paddingLeft + (point.x - minX) * scaleX;
+        point.screenY = height - paddingBottom - (point.y - minY) * scaleY;
+      });
+    }
+    ctx.clearRect(0, 0, width, height);
+    ctx.strokeStyle = colors.chartGrid;
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const y = paddingTop + chartHeight * i / 4;
+      ctx.beginPath();
+      ctx.moveTo(paddingLeft, y);
+      ctx.lineTo(width - paddingRight, y);
+      ctx.stroke();
+    }
+    if (state.temperatureMin !== null && state.temperatureMax !== null) {
+      const rangeMinY = height - paddingBottom - (state.temperatureMin - minY) * scaleY;
+      const rangeMaxY = height - paddingBottom - (state.temperatureMax - minY) * scaleY;
+      ctx.fillStyle = "rgba(76, 175, 80, 0.1)";
+      ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
+      ctx.strokeStyle = colors.success;
+      ctx.setLineDash([5, 5]);
+      ctx.beginPath();
+      ctx.moveTo(paddingLeft, rangeMinY);
+      ctx.lineTo(width - paddingRight, rangeMinY);
+      ctx.moveTo(paddingLeft, rangeMaxY);
+      ctx.lineTo(width - paddingRight, rangeMaxY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    ctx.strokeStyle = colors.chartLine;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    chartData.forEach((point, i) => {
+      if (i === 0) ctx.moveTo(point.screenX, point.screenY);
+      else ctx.lineTo(point.screenX, point.screenY);
+    });
+    ctx.stroke();
+    ctx.fillStyle = colors.chartLine;
+    chartData.forEach((point) => {
+      ctx.beginPath();
+      ctx.arc(point.screenX, point.screenY, 4, 0, Math.PI * 2);
+      ctx.fill();
+    });
+    ctx.fillStyle = colors.textMuted;
+    ctx.font = "11px system-ui, sans-serif";
+    ctx.textAlign = "right";
+    for (let i = 0; i <= 4; i++) {
+      const val = minY + (maxY - minY) * (4 - i) / 4;
+      const y = paddingTop + chartHeight * i / 4;
+      ctx.fillText(val.toFixed(1) + "\xB0C", paddingLeft - 8, y + 4);
+    }
+    ctx.textAlign = "center";
+    const numLabels = Math.min(8, chartData.length);
+    const labelInterval = Math.max(1, Math.floor(chartData.length / numLabels));
+    for (let i = 0; i < chartData.length; i += labelInterval) {
+      const point = chartData[i];
+      const date = new Date(point.x);
+      let label;
+      if (state.granularity === "hour") {
+        label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+      } else {
+        label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+      }
+      ctx.strokeStyle = colors.chartGrid;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(point.screenX, paddingTop);
+      ctx.lineTo(point.screenX, height - paddingBottom);
+      ctx.stroke();
+      ctx.fillStyle = colors.textMuted;
+      ctx.fillText(label, point.screenX, height - paddingBottom + 18);
+    }
+    ctx.strokeStyle = colors.border;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, paddingTop);
+    ctx.lineTo(paddingLeft, height - paddingBottom);
+    ctx.lineTo(width - paddingRight, height - paddingBottom);
+    ctx.stroke();
+    setupChartTooltip(canvas, chartContainer, chartData, state, colors);
+  }
+  function setupChartTooltip(canvas, container, chartData, state, colors) {
+    const existingTooltip = container.querySelector(".myio-chart-tooltip");
+    if (existingTooltip) existingTooltip.remove();
+    const tooltip = document.createElement("div");
+    tooltip.className = "myio-chart-tooltip";
+    tooltip.style.cssText = `
+    position: absolute;
+    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    border: 1px solid ${colors.border};
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-size: 13px;
+    color: ${colors.text};
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    min-width: 140px;
+  `;
+    container.appendChild(tooltip);
+    const findNearestPoint = (mouseX, mouseY) => {
+      const threshold = 20;
+      let nearest = null;
+      let minDist = Infinity;
+      for (const point of chartData) {
+        const dist = Math.sqrt(
+          Math.pow(mouseX - point.screenX, 2) + Math.pow(mouseY - point.screenY, 2)
+        );
+        if (dist < minDist && dist < threshold) {
+          minDist = dist;
+          nearest = point;
+        }
+      }
+      return nearest;
+    };
+    canvas.addEventListener("mousemove", (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const point = findNearestPoint(mouseX, mouseY);
+      if (point) {
+        const date = new Date(point.x);
+        let dateStr;
+        if (state.granularity === "hour") {
+          dateStr = date.toLocaleDateString(state.locale, {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+          }) + " " + date.toLocaleTimeString(state.locale, {
+            hour: "2-digit",
+            minute: "2-digit"
+          });
+        } else {
+          dateStr = date.toLocaleDateString(state.locale, {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+          });
+        }
+        tooltip.innerHTML = `
+        <div style="font-weight: 600; margin-bottom: 6px; color: ${colors.primary};">
+          ${formatTemperature(point.y)}
+        </div>
+        <div style="font-size: 11px; color: ${colors.textMuted};">
+          \u{1F4C5} ${dateStr}
+        </div>
+      `;
+        let tooltipX = point.screenX + 15;
+        let tooltipY = point.screenY - 15;
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        if (tooltipX + tooltipRect.width > containerRect.width - 10) {
+          tooltipX = point.screenX - tooltipRect.width - 15;
+        }
+        if (tooltipY < 10) {
+          tooltipY = point.screenY + 15;
+        }
+        tooltip.style.left = `${tooltipX}px`;
+        tooltip.style.top = `${tooltipY}px`;
+        tooltip.style.opacity = "1";
+        canvas.style.cursor = "pointer";
+      } else {
+        tooltip.style.opacity = "0";
+        canvas.style.cursor = "default";
+      }
+    });
+    canvas.addEventListener("mouseleave", () => {
+      tooltip.style.opacity = "0";
+      canvas.style.cursor = "default";
+    });
+  }
+  async function setupEventListeners(container, state, modalId, onClose) {
+    const closeModal = () => {
+      container.remove();
+      onClose?.();
+    };
+    container.querySelector(".myio-temp-modal-overlay")?.addEventListener("click", (e) => {
+      if (e.target === e.currentTarget) closeModal();
+    });
+    document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
+    document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
+    const dateRangeInput = document.getElementById(`${modalId}-date-range`);
+    if (dateRangeInput && !state.dateRangePicker) {
+      try {
+        state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+          presetStart: new Date(state.startTs).toISOString(),
+          presetEnd: new Date(state.endTs).toISOString(),
+          includeTime: true,
+          timePrecision: "minute",
+          maxRangeDays: 90,
+          locale: state.locale,
+          parentEl: container.querySelector(".myio-temp-modal-content"),
+          onApply: (result) => {
+            state.startTs = new Date(result.startISO).getTime();
+            state.endTs = new Date(result.endISO).getTime();
+            console.log("[TemperatureModal] Date range applied:", result);
+          }
+        });
+      } catch (error) {
+        console.warn("[TemperatureModal] DateRangePicker initialization failed:", error);
+      }
+    }
+    document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
+      state.theme = state.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("myio-temp-modal-theme", state.theme);
+      state.dateRangePicker = null;
+      renderModal(container, state, modalId);
+      if (state.data.length > 0) drawChart(modalId, state);
+      await setupEventListeners(container, state, modalId, onClose);
+    });
+    document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
+      container.__isMaximized = !container.__isMaximized;
+      state.dateRangePicker = null;
+      renderModal(container, state, modalId);
+      if (state.data.length > 0) drawChart(modalId, state);
+      await setupEventListeners(container, state, modalId, onClose);
+    });
+    const periodBtn = document.getElementById(`${modalId}-period-btn`);
+    const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
+    periodBtn?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (periodDropdown) {
+        periodDropdown.style.display = periodDropdown.style.display === "none" ? "block" : "none";
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (periodDropdown && !periodDropdown.contains(e.target) && e.target !== periodBtn) {
+        periodDropdown.style.display = "none";
+      }
+    });
+    const periodCheckboxes = document.querySelectorAll(`input[name="${modalId}-period"]`);
+    periodCheckboxes.forEach((checkbox) => {
+      checkbox.addEventListener("change", () => {
+        const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
+        state.selectedPeriods = checked;
+        const btnLabel = periodBtn?.querySelector("span:first-child");
+        if (btnLabel) {
+          btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        }
+        if (state.data.length > 0) drawChart(modalId, state);
+      });
+    });
+    document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
+      periodCheckboxes.forEach((cb) => {
+        cb.checked = true;
+      });
+      state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+      const btnLabel = periodBtn?.querySelector("span:first-child");
+      if (btnLabel) {
+        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      }
+      if (state.data.length > 0) drawChart(modalId, state);
+    });
+    document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
+      periodCheckboxes.forEach((cb) => {
+        cb.checked = false;
+      });
+      state.selectedPeriods = [];
+      const btnLabel = periodBtn?.querySelector("span:first-child");
+      if (btnLabel) {
+        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      }
+      if (state.data.length > 0) drawChart(modalId, state);
+    });
+    document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
+      state.granularity = e.target.value;
+      localStorage.setItem("myio-temp-modal-granularity", state.granularity);
+      if (state.data.length > 0) drawChart(modalId, state);
+    });
+    document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
+      if (state.startTs >= state.endTs) {
+        alert("Por favor, selecione um per\xEDodo v\xE1lido");
+        return;
+      }
+      state.isLoading = true;
+      state.dateRangePicker = null;
+      renderModal(container, state, modalId);
+      try {
+        state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
+        state.stats = calculateStats(state.data, state.clampRange);
+        state.isLoading = false;
+        renderModal(container, state, modalId);
+        drawChart(modalId, state);
+        await setupEventListeners(container, state, modalId, onClose);
+      } catch (error) {
+        console.error("[TemperatureModal] Error fetching data:", error);
+        state.isLoading = false;
+        renderModal(container, state, modalId, error);
+        await setupEventListeners(container, state, modalId, onClose);
+      }
+    });
+    document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
+      if (state.data.length === 0) return;
+      const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+      const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+      exportTemperatureCSV(
+        state.data,
+        state.label,
+        state.stats,
+        startDateStr,
+        endDateStr
+      );
+    });
+  }
+
+  // src/components/temperature/TemperatureComparisonModal.ts
+  async function openTemperatureComparisonModal(params) {
+    const modalId = `myio-temp-comparison-modal-${Date.now()}`;
+    const defaultDateRange = getTodaySoFar();
+    const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
+    const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
+    const state = {
+      token: params.token,
+      devices: params.devices,
+      startTs,
+      endTs,
+      granularity: params.granularity || "hour",
+      theme: params.theme || "dark",
+      clampRange: params.clampRange || DEFAULT_CLAMP_RANGE,
+      locale: params.locale || "pt-BR",
+      deviceData: [],
+      isLoading: true,
+      dateRangePicker: null,
+      selectedPeriods: ["madrugada", "manha", "tarde", "noite"],
+      // All periods selected by default
+      temperatureMin: params.temperatureMin ?? null,
+      temperatureMax: params.temperatureMax ?? null
+    };
+    const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
+    const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
+    if (savedGranularity) state.granularity = savedGranularity;
+    if (savedTheme) state.theme = savedTheme;
+    const modalContainer = document.createElement("div");
+    modalContainer.id = modalId;
+    document.body.appendChild(modalContainer);
+    renderModal2(modalContainer, state, modalId);
+    await fetchAllDevicesData(state);
+    renderModal2(modalContainer, state, modalId);
+    drawComparisonChart(modalId, state);
+    await setupEventListeners2(modalContainer, state, modalId, params.onClose);
+    return {
+      destroy: () => {
+        modalContainer.remove();
+        params.onClose?.();
+      },
+      updateData: async (startDate, endDate, granularity) => {
+        state.startTs = new Date(startDate).getTime();
+        state.endTs = new Date(endDate).getTime();
+        if (granularity) state.granularity = granularity;
+        state.isLoading = true;
+        renderModal2(modalContainer, state, modalId);
+        await fetchAllDevicesData(state);
+        renderModal2(modalContainer, state, modalId);
+        drawComparisonChart(modalId, state);
+        setupEventListeners2(modalContainer, state, modalId, params.onClose);
+      }
+    };
+  }
+  async function fetchAllDevicesData(state) {
+    state.isLoading = true;
+    state.deviceData = [];
+    try {
+      const results = await Promise.all(
+        state.devices.map(async (device, index) => {
+          const deviceId = device.tbId || device.id;
+          try {
+            const data = await fetchTemperatureData(state.token, deviceId, state.startTs, state.endTs);
+            const stats = calculateStats(data, state.clampRange);
+            return {
+              device,
+              data,
+              stats,
+              color: CHART_COLORS[index % CHART_COLORS.length]
+            };
+          } catch (error) {
+            console.error(`[TemperatureComparisonModal] Error fetching data for ${device.label}:`, error);
+            return {
+              device,
+              data: [],
+              stats: { avg: 0, min: 0, max: 0, count: 0 },
+              color: CHART_COLORS[index % CHART_COLORS.length]
+            };
+          }
+        })
+      );
+      state.deviceData = results;
+    } catch (error) {
+      console.error("[TemperatureComparisonModal] Error fetching data:", error);
+    }
+    state.isLoading = false;
+  }
+  function renderModal2(container, state, modalId) {
+    const colors = getThemeColors(state.theme);
+    new Date(state.startTs).toLocaleDateString(state.locale);
+    new Date(state.endTs).toLocaleDateString(state.locale);
+    new Date(state.startTs).toISOString().slice(0, 16);
+    new Date(state.endTs).toISOString().slice(0, 16);
+    const legendHTML = state.deviceData.map((dd) => `
+    <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px;
+      background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
+      border-radius: 8px;">
+      <span style="width: 12px; height: 12px; border-radius: 50%; background: ${dd.color};"></span>
+      <span style="color: ${colors.text}; font-size: 13px;">${dd.device.label}</span>
+      <span style="color: ${colors.textMuted}; font-size: 11px; margin-left: auto;">
+        ${dd.stats.count > 0 ? formatTemperature(dd.stats.avg) : "N/A"}
+      </span>
+    </div>
+  `).join("");
+    const statsHTML = state.deviceData.map((dd) => `
+    <div style="
+      padding: 12px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+      border-radius: 10px; border-left: 4px solid ${dd.color};
+      min-width: 150px;
+    ">
+      <div style="font-weight: 600; color: ${colors.text}; font-size: 13px; margin-bottom: 8px;">
+        ${dd.device.label}
+      </div>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 11px;">
+        <span style="color: ${colors.textMuted};">M\xE9dia:</span>
+        <span style="color: ${colors.text}; font-weight: 500;">
+          ${dd.stats.count > 0 ? formatTemperature(dd.stats.avg) : "N/A"}
+        </span>
+        <span style="color: ${colors.textMuted};">Min:</span>
+        <span style="color: ${colors.text};">
+          ${dd.stats.count > 0 ? formatTemperature(dd.stats.min) : "N/A"}
+        </span>
+        <span style="color: ${colors.textMuted};">Max:</span>
+        <span style="color: ${colors.text};">
+          ${dd.stats.count > 0 ? formatTemperature(dd.stats.max) : "N/A"}
+        </span>
+        <span style="color: ${colors.textMuted};">Leituras:</span>
+        <span style="color: ${colors.text};">${dd.stats.count}</span>
+      </div>
+    </div>
+  `).join("");
+    const isMaximized = container.__isMaximized || false;
+    const contentMaxWidth = isMaximized ? "100%" : "1100px";
+    const contentMaxHeight = isMaximized ? "100vh" : "95vh";
+    const contentBorderRadius = isMaximized ? "0" : "10px";
+    container.innerHTML = `
+    <div class="myio-temp-comparison-overlay" style="
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0, 0, 0, 0.5); z-index: 9998;
+      display: flex; justify-content: center; align-items: center;
+      backdrop-filter: blur(2px);
+    ">
+      <div class="myio-temp-comparison-content" style="
+        background: ${colors.surface}; border-radius: ${contentBorderRadius};
+        max-width: ${contentMaxWidth}; width: ${isMaximized ? "100%" : "95%"};
+        max-height: ${contentMaxHeight}; height: ${isMaximized ? "100%" : "auto"};
+        overflow: hidden; display: flex; flex-direction: column;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        font-family: 'Roboto', Arial, sans-serif;
+      ">
+        <!-- Header - MyIO Premium Style -->
+        <div style="
+          padding: 4px 8px; display: flex; align-items: center; justify-content: space-between;
+          background: #3e1a7d; color: white; border-radius: ${isMaximized ? "0" : "10px 10px 0 0"};
+          min-height: 20px;
+        ">
+          <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
+            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state.devices.length} sensores
+          </h2>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <!-- Theme Toggle -->
+            <button id="${modalId}-theme-toggle" title="Alternar tema" style="
+              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;
+            ">${state.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            <!-- Maximize Button -->
+            <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
+              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;
+            ">${isMaximized ? "\u{1F5D7}" : "\u{1F5D6}"}</button>
+            <!-- Close Button -->
+            <button id="${modalId}-close" title="Fechar" style="
+              background: none; border: none; font-size: 20px; cursor: pointer;
+              padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
+              transition: background-color 0.2s;
+            ">\xD7</button>
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div style="flex: 1; overflow-y: auto; padding: 16px;">
+
+        <!-- Controls Row -->
+        <div style="
+          display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
+          margin-bottom: 16px; padding: 16px;
+          background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          border-radius: 6px; border: 1px solid ${colors.border};
+        ">
+          <!-- Granularity Select -->
+          <div>
+            <label style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px;">
+              Granularidade
+            </label>
+            <select id="${modalId}-granularity" style="
+              padding: 8px 12px; border: 1px solid ${colors.border}; border-radius: 6px;
+              font-size: 14px; color: ${colors.text}; background: ${colors.surface};
+              cursor: pointer; min-width: 130px;
+            ">
+              <option value="hour" ${state.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+            </select>
+          </div>
+          <!-- Day Period Filter (Multiselect) -->
+          <div style="position: relative;">
+            <label style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px;">
+              Per\xEDodos do Dia
+            </label>
+            <button id="${modalId}-period-btn" type="button" style="
+              padding: 8px 12px; border: 1px solid ${colors.border}; border-radius: 6px;
+              font-size: 14px; color: ${colors.text}; background: ${colors.surface};
+              cursor: pointer; min-width: 180px; text-align: left;
+              display: flex; align-items: center; justify-content: space-between; gap: 8px;
+            ">
+              <span>${getSelectedPeriodsLabel(state.selectedPeriods)}</span>
+              <span style="font-size: 10px;">\u25BC</span>
+            </button>
+            <div id="${modalId}-period-dropdown" style="
+              display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
+              background: ${colors.surface}; border: 1px solid ${colors.border};
+              border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+              min-width: 200px; margin-top: 4px; padding: 8px 0;
+            ">
+              ${DAY_PERIODS.map((period) => `
+                <label style="
+                  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
+                  cursor: pointer; font-size: 13px; color: ${colors.text};
+                " onmouseover="this.style.background='${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                   onmouseout="this.style.background='transparent'">
+                  <input type="checkbox"
+                    name="${modalId}-period"
+                    value="${period.id}"
+                    ${state.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
+                  ${period.label}
+                </label>
+              `).join("")}
+              <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
+                <button id="${modalId}-period-select-all" type="button" style="
+                  width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
+                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  border: none; border-radius: 4px; cursor: pointer;
+                  font-size: 12px; color: ${colors.text};
+                ">Selecionar Todos</button>
+                <button id="${modalId}-period-clear" type="button" style="
+                  width: calc(100% - 16px); margin: 0 8px; padding: 6px;
+                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  border: none; border-radius: 4px; cursor: pointer;
+                  font-size: 12px; color: ${colors.text};
+                ">Limpar Sele\xE7\xE3o</button>
+              </div>
+            </div>
+          </div>
+          <!-- Date Range Picker -->
+          <div style="flex: 1; min-width: 220px;">
+            <label style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500; display: block; margin-bottom: 4px;">
+              Per\xEDodo
+            </label>
+            <input type="text" id="${modalId}-date-range" readonly placeholder="Selecione o per\xEDodo..." style="
+              padding: 8px 12px; border: 1px solid ${colors.border}; border-radius: 6px;
+              font-size: 14px; color: ${colors.text}; background: ${colors.surface};
+              width: 100%; cursor: pointer; box-sizing: border-box;
+            "/>
+          </div>
+          <!-- Query Button -->
+          <button id="${modalId}-query" style="
+            background: #3e1a7d; color: white; border: none;
+            padding: 8px 16px; border-radius: 6px; cursor: pointer;
+            font-size: 14px; font-weight: 500; height: 38px;
+            display: flex; align-items: center; gap: 8px;
+            font-family: 'Roboto', Arial, sans-serif;
+          " ${state.isLoading ? "disabled" : ""}>
+            ${state.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          </button>
+        </div>
+
+        <!-- Legend -->
+        <div style="
+          display: flex; flex-wrap: wrap; gap: 10px;
+          margin-bottom: 20px;
+        ">
+          ${legendHTML}
+        </div>
+
+        <!-- Chart Container -->
+        <div style="margin-bottom: 24px;">
+          <div id="${modalId}-chart" style="
+            height: 380px;
+            background: ${state.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            border-radius: 14px; display: flex; justify-content: center; align-items: center;
+            border: 1px solid ${colors.border}; position: relative;
+          ">
+            ${state.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   <div style="animation: spin 1s linear infinite; font-size: 36px; margin-bottom: 12px;">\u21BB</div>
+                   <div style="font-size: 15px;">Carregando dados de ${state.devices.length} sensores...</div>
+                 </div>` : state.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
+                     <div style="font-size: 48px; margin-bottom: 12px;">\u{1F4ED}</div>
+                     <div style="font-size: 16px;">Sem dados para o per\xEDodo selecionado</div>
+                   </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
+          </div>
+        </div>
+
+        <!-- Stats Cards -->
+        <div style="
+          display: flex; flex-wrap: wrap; gap: 12px;
+          margin-bottom: 24px;
+        ">
+          ${statsHTML}
+        </div>
+
+        <!-- Actions -->
+        <div style="display: flex; justify-content: flex-end; gap: 12px;">
+          <button id="${modalId}-export" style="
+            background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            color: ${colors.text}; border: 1px solid ${colors.border};
+            padding: 8px 16px; border-radius: 6px; cursor: pointer;
+            font-size: 14px; display: flex; align-items: center; gap: 8px;
+            font-family: 'Roboto', Arial, sans-serif;
+          " ${state.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
+            \u{1F4E5} Exportar CSV
+          </button>
+          <button id="${modalId}-close-btn" style="
+            background: #3e1a7d; color: white; border: none;
+            padding: 8px 16px; border-radius: 6px; cursor: pointer;
+            font-size: 14px; font-weight: 500;
+            font-family: 'Roboto', Arial, sans-serif;
+          ">
+            Fechar
+          </button>
+        </div>
+        </div><!-- End Body -->
+      </div>
+    </div>
+    <style>
+      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+      #${modalId} select:focus, #${modalId} input:focus {
+        outline: 2px solid #3e1a7d;
+        outline-offset: 2px;
+      }
+      #${modalId} button:hover:not(:disabled) {
+        opacity: 0.9;
+      }
+      #${modalId} button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      #${modalId} .myio-temp-comparison-content > div:first-child button:hover {
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: white !important;
+      }
+    </style>
+  `;
+  }
+  function drawComparisonChart(modalId, state) {
+    const chartContainer = document.getElementById(`${modalId}-chart`);
+    const canvas = document.getElementById(`${modalId}-canvas`);
+    if (!chartContainer || !canvas) return;
+    const hasData = state.deviceData.some((dd) => dd.data.length > 0);
+    if (!hasData) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const colors = getThemeColors(state.theme);
+    const width = chartContainer.clientWidth - 2;
+    const height = 380;
+    canvas.width = width;
+    canvas.height = height;
+    const paddingLeft = 65;
+    const paddingRight = 25;
+    const paddingTop = 25;
+    const paddingBottom = 55;
+    ctx.clearRect(0, 0, width, height);
+    const processedData = [];
+    state.deviceData.forEach((dd) => {
+      if (dd.data.length === 0) return;
+      const filteredData = filterByDayPeriods(dd.data, state.selectedPeriods);
+      if (filteredData.length === 0) return;
+      let points;
+      if (state.granularity === "hour") {
+        const interpolated = interpolateTemperature(filteredData, {
+          intervalMinutes: 30,
+          startTs: state.startTs,
+          endTs: state.endTs,
+          clampRange: state.clampRange
+        });
+        const filteredInterpolated = filterByDayPeriods(interpolated, state.selectedPeriods);
+        points = filteredInterpolated.map((item) => ({
+          x: item.ts,
+          y: Number(item.value),
+          screenX: 0,
+          screenY: 0,
+          deviceLabel: dd.device.label,
+          deviceColor: dd.color
+        }));
+      } else {
+        const daily = aggregateByDay(filteredData, state.clampRange);
+        points = daily.map((item) => ({
+          x: item.dateTs,
+          y: item.avg,
+          screenX: 0,
+          screenY: 0,
+          deviceLabel: dd.device.label,
+          deviceColor: dd.color
+        }));
+      }
+      if (points.length > 0) {
+        processedData.push({ device: dd, points });
+      }
+    });
+    if (processedData.length === 0) {
+      ctx.fillStyle = colors.textMuted;
+      ctx.font = "14px Roboto, Arial, sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText("Nenhum dado para os per\xEDodos selecionados", width / 2, height / 2);
+      return;
+    }
+    const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
+    let dataMinY = Infinity;
+    let dataMaxY = -Infinity;
+    processedData.forEach(({ points }) => {
+      points.forEach((point) => {
+        if (point.y < dataMinY) dataMinY = point.y;
+        if (point.y > dataMaxY) dataMaxY = point.y;
+      });
+    });
+    const rangeMap = /* @__PURE__ */ new Map();
+    state.deviceData.forEach((dd, index) => {
+      const device = dd.device;
+      const min = device.temperatureMin;
+      const max = device.temperatureMax;
+      if (min !== void 0 && min !== null && max !== void 0 && max !== null) {
+        const key = `${min}-${max}`;
+        if (!rangeMap.has(key)) {
+          rangeMap.set(key, {
+            min,
+            max,
+            customerName: device.customerName || "",
+            color: CHART_COLORS[index % CHART_COLORS.length],
+            deviceLabels: [device.label]
+          });
+        } else {
+          rangeMap.get(key).deviceLabels.push(device.label);
+        }
+      }
+    });
+    if (rangeMap.size === 0 && state.temperatureMin !== null && state.temperatureMax !== null) {
+      rangeMap.set("global", {
+        min: state.temperatureMin,
+        max: state.temperatureMax,
+        customerName: "Global",
+        color: colors.success,
+        deviceLabels: []
+      });
+    }
+    const temperatureRanges = Array.from(rangeMap.values());
+    let thresholdMinY = dataMinY;
+    let thresholdMaxY = dataMaxY;
+    temperatureRanges.forEach((range) => {
+      if (range.min < thresholdMinY) thresholdMinY = range.min;
+      if (range.max > thresholdMaxY) thresholdMaxY = range.max;
+    });
+    const globalMinY = Math.floor(Math.min(dataMinY, thresholdMinY)) - 1;
+    const globalMaxY = Math.ceil(Math.max(dataMaxY, thresholdMaxY)) + 1;
+    const chartWidth = width - paddingLeft - paddingRight;
+    const chartHeight = height - paddingTop - paddingBottom;
+    const scaleY = chartHeight / (globalMaxY - globalMinY || 1);
+    if (isPeriodsFiltered) {
+      const maxPoints = Math.max(...processedData.map(({ points }) => points.length));
+      const pointSpacing = chartWidth / Math.max(1, maxPoints - 1);
+      processedData.forEach(({ points }) => {
+        points.forEach((point, index) => {
+          point.screenX = paddingLeft + index * pointSpacing;
+          point.screenY = height - paddingBottom - (point.y - globalMinY) * scaleY;
+        });
+      });
+    } else {
+      let globalMinX = Infinity;
+      let globalMaxX = -Infinity;
+      processedData.forEach(({ points }) => {
+        points.forEach((point) => {
+          if (point.x < globalMinX) globalMinX = point.x;
+          if (point.x > globalMaxX) globalMaxX = point.x;
+        });
+      });
+      const timeRange = globalMaxX - globalMinX || 1;
+      const scaleX = chartWidth / timeRange;
+      processedData.forEach(({ points }) => {
+        points.forEach((point) => {
+          point.screenX = paddingLeft + (point.x - globalMinX) * scaleX;
+          point.screenY = height - paddingBottom - (point.y - globalMinY) * scaleY;
+        });
+      });
+    }
+    ctx.strokeStyle = colors.chartGrid;
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 5; i++) {
+      const y = paddingTop + chartHeight * i / 5;
+      ctx.beginPath();
+      ctx.moveTo(paddingLeft, y);
+      ctx.lineTo(width - paddingRight, y);
+      ctx.stroke();
+    }
+    const rangeColors = [
+      { fill: "rgba(76, 175, 80, 0.12)", stroke: "#4CAF50" },
+      // Green
+      { fill: "rgba(33, 150, 243, 0.12)", stroke: "#2196F3" },
+      // Blue
+      { fill: "rgba(255, 152, 0, 0.12)", stroke: "#FF9800" },
+      // Orange
+      { fill: "rgba(156, 39, 176, 0.12)", stroke: "#9C27B0" }
+      // Purple
+    ];
+    temperatureRanges.forEach((range, index) => {
+      const rangeMinY = height - paddingBottom - (range.min - globalMinY) * scaleY;
+      const rangeMaxY = height - paddingBottom - (range.max - globalMinY) * scaleY;
+      const colorSet = rangeColors[index % rangeColors.length];
+      ctx.fillStyle = colorSet.fill;
+      ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
+      ctx.strokeStyle = colorSet.stroke;
+      ctx.lineWidth = 1.5;
+      ctx.setLineDash([6, 4]);
+      ctx.beginPath();
+      ctx.moveTo(paddingLeft, rangeMinY);
+      ctx.lineTo(width - paddingRight, rangeMinY);
+      ctx.moveTo(paddingLeft, rangeMaxY);
+      ctx.lineTo(width - paddingRight, rangeMaxY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      if (temperatureRanges.length > 1 || range.customerName) {
+        ctx.fillStyle = colorSet.stroke;
+        ctx.font = "10px system-ui, sans-serif";
+        ctx.textAlign = "left";
+        const labelY = (rangeMinY + rangeMaxY) / 2;
+        const labelText = range.customerName || `${range.min}\xB0-${range.max}\xB0C`;
+        ctx.fillText(labelText, width - paddingRight + 5, labelY + 3);
+      }
+    });
+    processedData.forEach(({ device, points }) => {
+      ctx.strokeStyle = device.color;
+      ctx.lineWidth = 2.5;
+      ctx.beginPath();
+      points.forEach((point, i) => {
+        if (i === 0) ctx.moveTo(point.screenX, point.screenY);
+        else ctx.lineTo(point.screenX, point.screenY);
+      });
+      ctx.stroke();
+      ctx.fillStyle = device.color;
+      points.forEach((point) => {
+        ctx.beginPath();
+        ctx.arc(point.screenX, point.screenY, 4, 0, Math.PI * 2);
+        ctx.fill();
+      });
+    });
+    ctx.fillStyle = colors.textMuted;
+    ctx.font = "12px system-ui, sans-serif";
+    ctx.textAlign = "right";
+    for (let i = 0; i <= 5; i++) {
+      const val = globalMinY + (globalMaxY - globalMinY) * (5 - i) / 5;
+      const y = paddingTop + chartHeight * i / 5;
+      ctx.fillText(val.toFixed(1) + "\xB0C", paddingLeft - 10, y + 4);
+    }
+    ctx.textAlign = "center";
+    const xAxisPoints = processedData[0]?.points || [];
+    const numLabels = Math.min(8, xAxisPoints.length);
+    const labelInterval = Math.max(1, Math.floor(xAxisPoints.length / numLabels));
+    for (let i = 0; i < xAxisPoints.length; i += labelInterval) {
+      const point = xAxisPoints[i];
+      const date = new Date(point.x);
+      let label;
+      if (state.granularity === "hour") {
+        label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+      } else {
+        label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+      }
+      ctx.strokeStyle = colors.chartGrid;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(point.screenX, paddingTop);
+      ctx.lineTo(point.screenX, height - paddingBottom);
+      ctx.stroke();
+      ctx.fillStyle = colors.textMuted;
+      ctx.fillText(label, point.screenX, height - paddingBottom + 18);
+    }
+    ctx.strokeStyle = colors.border;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, paddingTop);
+    ctx.lineTo(paddingLeft, height - paddingBottom);
+    ctx.lineTo(width - paddingRight, height - paddingBottom);
+    ctx.stroke();
+    const allChartPoints = processedData.flatMap((pd) => pd.points);
+    setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state, colors);
+  }
+  function setupComparisonChartTooltip(canvas, container, chartData, state, colors) {
+    const existingTooltip = container.querySelector(".myio-chart-tooltip");
+    if (existingTooltip) existingTooltip.remove();
+    const tooltip = document.createElement("div");
+    tooltip.className = "myio-chart-tooltip";
+    tooltip.style.cssText = `
+    position: absolute;
+    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    border: 1px solid ${colors.border};
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-size: 13px;
+    color: ${colors.text};
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    min-width: 160px;
+  `;
+    container.appendChild(tooltip);
+    const findNearestPoint = (mouseX, mouseY) => {
+      const threshold = 20;
+      let nearest = null;
+      let minDist = Infinity;
+      for (const point of chartData) {
+        const dist = Math.sqrt(
+          Math.pow(mouseX - point.screenX, 2) + Math.pow(mouseY - point.screenY, 2)
+        );
+        if (dist < minDist && dist < threshold) {
+          minDist = dist;
+          nearest = point;
+        }
+      }
+      return nearest;
+    };
+    canvas.addEventListener("mousemove", (e) => {
+      const rect = canvas.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const point = findNearestPoint(mouseX, mouseY);
+      if (point) {
+        const date = new Date(point.x);
+        let dateStr;
+        if (state.granularity === "hour") {
+          dateStr = date.toLocaleDateString(state.locale, {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+          }) + " " + date.toLocaleTimeString(state.locale, {
+            hour: "2-digit",
+            minute: "2-digit"
+          });
+        } else {
+          dateStr = date.toLocaleDateString(state.locale, {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+          });
+        }
+        tooltip.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
+          <span style="width: 10px; height: 10px; border-radius: 50%; background: ${point.deviceColor};"></span>
+          <span style="font-weight: 600;">${point.deviceLabel}</span>
+        </div>
+        <div style="font-weight: 600; font-size: 16px; color: ${point.deviceColor}; margin-bottom: 4px;">
+          ${formatTemperature(point.y)}
+        </div>
+        <div style="font-size: 11px; color: ${colors.textMuted};">
+          \u{1F4C5} ${dateStr}
+        </div>
+      `;
+        let tooltipX = point.screenX + 15;
+        let tooltipY = point.screenY - 15;
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        if (tooltipX + tooltipRect.width > containerRect.width - 10) {
+          tooltipX = point.screenX - tooltipRect.width - 15;
+        }
+        if (tooltipY < 10) {
+          tooltipY = point.screenY + 15;
+        }
+        tooltip.style.left = `${tooltipX}px`;
+        tooltip.style.top = `${tooltipY}px`;
+        tooltip.style.opacity = "1";
+        canvas.style.cursor = "pointer";
+      } else {
+        tooltip.style.opacity = "0";
+        canvas.style.cursor = "default";
+      }
+    });
+    canvas.addEventListener("mouseleave", () => {
+      tooltip.style.opacity = "0";
+      canvas.style.cursor = "default";
+    });
+  }
+  async function setupEventListeners2(container, state, modalId, onClose) {
+    const closeModal = () => {
+      container.remove();
+      onClose?.();
+    };
+    container.querySelector(".myio-temp-comparison-overlay")?.addEventListener("click", (e) => {
+      if (e.target === e.currentTarget) closeModal();
+    });
+    document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
+    document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
+    const dateRangeInput = document.getElementById(`${modalId}-date-range`);
+    if (dateRangeInput && !state.dateRangePicker) {
+      try {
+        state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+          presetStart: new Date(state.startTs).toISOString(),
+          presetEnd: new Date(state.endTs).toISOString(),
+          includeTime: true,
+          timePrecision: "minute",
+          maxRangeDays: 90,
+          locale: state.locale,
+          parentEl: container.querySelector(".myio-temp-comparison-content"),
+          onApply: (result) => {
+            state.startTs = new Date(result.startISO).getTime();
+            state.endTs = new Date(result.endISO).getTime();
+            console.log("[TemperatureComparisonModal] Date range applied:", result);
+          }
+        });
+      } catch (error) {
+        console.warn("[TemperatureComparisonModal] DateRangePicker initialization failed:", error);
+      }
+    }
+    document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
+      state.theme = state.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("myio-temp-comparison-theme", state.theme);
+      state.dateRangePicker = null;
+      renderModal2(container, state, modalId);
+      if (state.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state);
+      }
+      await setupEventListeners2(container, state, modalId, onClose);
+    });
+    document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
+      container.__isMaximized = !container.__isMaximized;
+      state.dateRangePicker = null;
+      renderModal2(container, state, modalId);
+      if (state.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state);
+      }
+      await setupEventListeners2(container, state, modalId, onClose);
+    });
+    const periodBtn = document.getElementById(`${modalId}-period-btn`);
+    const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
+    periodBtn?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (periodDropdown) {
+        periodDropdown.style.display = periodDropdown.style.display === "none" ? "block" : "none";
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (periodDropdown && !periodDropdown.contains(e.target) && e.target !== periodBtn) {
+        periodDropdown.style.display = "none";
+      }
+    });
+    const periodCheckboxes = document.querySelectorAll(`input[name="${modalId}-period"]`);
+    periodCheckboxes.forEach((checkbox) => {
+      checkbox.addEventListener("change", () => {
+        const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
+        state.selectedPeriods = checked;
+        const btnLabel = periodBtn?.querySelector("span:first-child");
+        if (btnLabel) {
+          btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        }
+        if (state.deviceData.some((dd) => dd.data.length > 0)) {
+          drawComparisonChart(modalId, state);
+        }
+      });
+    });
+    document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
+      periodCheckboxes.forEach((cb) => {
+        cb.checked = true;
+      });
+      state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+      const btnLabel = periodBtn?.querySelector("span:first-child");
+      if (btnLabel) {
+        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      }
+      if (state.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state);
+      }
+    });
+    document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
+      periodCheckboxes.forEach((cb) => {
+        cb.checked = false;
+      });
+      state.selectedPeriods = [];
+      const btnLabel = periodBtn?.querySelector("span:first-child");
+      if (btnLabel) {
+        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      }
+      if (state.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state);
+      }
+    });
+    document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
+      state.granularity = e.target.value;
+      localStorage.setItem("myio-temp-comparison-granularity", state.granularity);
+      if (state.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state);
+      }
+    });
+    document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
+      if (state.startTs >= state.endTs) {
+        alert("Por favor, selecione um per\xEDodo v\xE1lido");
+        return;
+      }
+      state.isLoading = true;
+      state.dateRangePicker = null;
+      renderModal2(container, state, modalId);
+      await fetchAllDevicesData(state);
+      renderModal2(container, state, modalId);
+      drawComparisonChart(modalId, state);
+      await setupEventListeners2(container, state, modalId, onClose);
+    });
+    document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
+      if (state.deviceData.every((dd) => dd.data.length === 0)) return;
+      exportComparisonCSV(state);
+    });
+  }
+  function exportComparisonCSV(state) {
+    const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+    const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+    const BOM = "\uFEFF";
+    let csvContent = BOM;
+    csvContent += `Compara\xE7\xE3o de Temperatura
+`;
+    csvContent += `Per\xEDodo: ${startDateStr} at\xE9 ${endDateStr}
+`;
+    csvContent += `Sensores: ${state.devices.map((d) => d.label).join(", ")}
+`;
+    csvContent += "\n";
+    csvContent += "Estat\xEDsticas por Sensor:\n";
+    csvContent += "Sensor,M\xE9dia (\xB0C),Min (\xB0C),Max (\xB0C),Leituras\n";
+    state.deviceData.forEach((dd) => {
+      csvContent += `"${dd.device.label}",${dd.stats.avg.toFixed(2)},${dd.stats.min.toFixed(2)},${dd.stats.max.toFixed(2)},${dd.stats.count}
+`;
+    });
+    csvContent += "\n";
+    csvContent += "Dados Detalhados:\n";
+    csvContent += "Data/Hora,Sensor,Temperatura (\xB0C)\n";
+    state.deviceData.forEach((dd) => {
+      dd.data.forEach((item) => {
+        const date = new Date(item.ts).toLocaleString(state.locale);
+        const temp = Number(item.value).toFixed(2);
+        csvContent += `"${date}","${dd.device.label}",${temp}
+`;
+      });
+    });
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `comparacao_temperatura_${startDateStr}_${endDateStr}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  // src/components/temperature/TemperatureSettingsModal.ts
+  var DARK_THEME2 = {
+    modalBg: "linear-gradient(180deg, #1e1e2e 0%, #151521 100%)",
+    headerBg: "#3e1a7d",
+    textPrimary: "#ffffff",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textMuted: "rgba(255, 255, 255, 0.5)",
+    inputBg: "rgba(255, 255, 255, 0.08)",
+    inputBorder: "rgba(255, 255, 255, 0.2)",
+    inputText: "#ffffff",
+    buttonPrimary: "#3e1a7d",
+    buttonPrimaryHover: "#5a2da8",
+    buttonSecondary: "rgba(255, 255, 255, 0.1)",
+    success: "#4CAF50",
+    error: "#f44336",
+    overlay: "rgba(0, 0, 0, 0.85)"
+  };
+  var LIGHT_THEME2 = {
+    modalBg: "#ffffff",
+    headerBg: "#3e1a7d",
+    textPrimary: "#1a1a2e",
+    textSecondary: "rgba(0, 0, 0, 0.7)",
+    textMuted: "rgba(0, 0, 0, 0.5)",
+    inputBg: "#f5f5f5",
+    inputBorder: "rgba(0, 0, 0, 0.2)",
+    inputText: "#1a1a2e",
+    buttonPrimary: "#3e1a7d",
+    buttonPrimaryHover: "#5a2da8",
+    buttonSecondary: "rgba(0, 0, 0, 0.05)",
+    success: "#4CAF50",
+    error: "#f44336",
+    overlay: "rgba(0, 0, 0, 0.5)"
+  };
+  function getColors(theme) {
+    return theme === "dark" ? DARK_THEME2 : LIGHT_THEME2;
+  }
+  async function fetchCustomerAttributes(customerId, token) {
+    const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Authorization": `Bearer ${token}`
+      }
+    });
+    if (!response.ok) {
+      if (response.status === 404 || response.status === 400) {
+        return { minTemperature: null, maxTemperature: null };
+      }
+      throw new Error(`Failed to fetch attributes: ${response.status}`);
+    }
+    const attributes = await response.json();
+    let minTemperature = null;
+    let maxTemperature = null;
+    if (Array.isArray(attributes)) {
+      for (const attr of attributes) {
+        if (attr.key === "minTemperature") {
+          minTemperature = Number(attr.value);
+        } else if (attr.key === "maxTemperature") {
+          maxTemperature = Number(attr.value);
+        }
+      }
+    }
+    return { minTemperature, maxTemperature };
+  }
+  async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature) {
+    const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/SERVER_SCOPE`;
+    const attributes = {
+      minTemperature,
+      maxTemperature
+    };
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Authorization": `Bearer ${token}`
+      },
+      body: JSON.stringify(attributes)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to save attributes: ${response.status}`);
+    }
+  }
+  function renderModal3(container, state, modalId, onClose, onSave) {
+    const colors = getColors(state.theme);
+    const minValue = state.minTemperature !== null ? state.minTemperature : "";
+    const maxValue = state.maxTemperature !== null ? state.maxTemperature : "";
+    container.innerHTML = `
+    <style>
+      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+      #${modalId} {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: ${colors.overlay};
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: fadeIn 0.2s ease-out;
+      }
+
+      #${modalId} .modal-content {
+        background: ${colors.modalBg};
+        border-radius: 16px;
+        width: 90%;
+        max-width: 480px;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        animation: slideIn 0.3s ease-out;
+        overflow: hidden;
+      }
+
+      #${modalId} .modal-header {
+        background: ${colors.headerBg};
+        padding: 20px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #${modalId} .modal-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      #${modalId} .close-btn {
+        width: 32px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        color: #fff;
+        font-size: 18px;
+      }
+
+      #${modalId} .close-btn:hover {
+        background: rgba(255, 68, 68, 0.25);
+        border-color: rgba(255, 68, 68, 0.5);
+      }
+
+      #${modalId} .modal-body {
+        padding: 24px;
+      }
+
+      #${modalId} .customer-info {
+        margin-bottom: 24px;
+        padding: 12px 16px;
+        background: ${colors.inputBg};
+        border-radius: 8px;
+        border: 1px solid ${colors.inputBorder};
+      }
+
+      #${modalId} .customer-label {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-bottom: 4px;
+      }
+
+      #${modalId} .customer-name {
+        font-size: 16px;
+        font-weight: 500;
+        color: ${colors.textPrimary};
+      }
+
+      #${modalId} .form-group {
+        margin-bottom: 20px;
+      }
+
+      #${modalId} .form-label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${colors.textSecondary};
+        margin-bottom: 8px;
+      }
+
+      #${modalId} .form-input {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 16px;
+        background: ${colors.inputBg};
+        border: 1px solid ${colors.inputBorder};
+        border-radius: 8px;
+        color: ${colors.inputText};
+        outline: none;
+        transition: border-color 0.2s;
+        box-sizing: border-box;
+      }
+
+      #${modalId} .form-input:focus {
+        border-color: ${colors.buttonPrimary};
+      }
+
+      #${modalId} .form-input::placeholder {
+        color: ${colors.textMuted};
+      }
+
+      #${modalId} .form-hint {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-top: 6px;
+      }
+
+      #${modalId} .temperature-range {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+
+      #${modalId} .range-preview {
+        margin-top: 20px;
+        padding: 16px;
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px dashed ${colors.success};
+        border-radius: 8px;
+        text-align: center;
+      }
+
+      #${modalId} .range-preview-label {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-bottom: 8px;
+      }
+
+      #${modalId} .range-preview-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: ${colors.success};
+      }
+
+      #${modalId} .modal-footer {
+        padding: 16px 24px;
+        border-top: 1px solid ${colors.inputBorder};
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+      }
+
+      #${modalId} .btn {
+        padding: 10px 24px;
+        font-size: 14px;
+        font-weight: 500;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      #${modalId} .btn-secondary {
+        background: ${colors.buttonSecondary};
+        color: ${colors.textSecondary};
+        border: 1px solid ${colors.inputBorder};
+      }
+
+      #${modalId} .btn-secondary:hover {
+        background: ${colors.inputBg};
+      }
+
+      #${modalId} .btn-primary {
+        background: ${colors.buttonPrimary};
+        color: #fff;
+      }
+
+      #${modalId} .btn-primary:hover {
+        background: ${colors.buttonPrimaryHover};
+      }
+
+      #${modalId} .btn-primary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      #${modalId} .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255,255,255,0.3);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      #${modalId} .message {
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 14px;
+      }
+
+      #${modalId} .message-error {
+        background: rgba(244, 67, 54, 0.1);
+        border: 1px solid ${colors.error};
+        color: ${colors.error};
+      }
+
+      #${modalId} .message-success {
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px solid ${colors.success};
+        color: ${colors.success};
+      }
+
+      #${modalId} .loading-overlay {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: ${colors.textSecondary};
+      }
+
+      #${modalId} .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid ${colors.inputBorder};
+        border-top-color: ${colors.buttonPrimary};
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 16px;
+      }
+    </style>
+
+    <div id="${modalId}" class="modal-overlay">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 class="modal-title">
+            <span>\u{1F321}\uFE0F</span>
+            Configurar Temperatura
+          </h2>
+          <button class="close-btn" id="${modalId}-close">&times;</button>
+        </div>
+
+        <div class="modal-body">
+          ${state.isLoading ? `
+            <div class="loading-overlay">
+              <div class="loading-spinner"></div>
+              <div>Carregando configura\xE7\xF5es...</div>
+            </div>
+          ` : `
+            ${state.error ? `
+              <div class="message message-error">${state.error}</div>
+            ` : ""}
+
+            ${state.successMessage ? `
+              <div class="message message-success">${state.successMessage}</div>
+            ` : ""}
+
+            <div class="customer-info">
+              <div class="customer-label">Shopping / Cliente</div>
+              <div class="customer-name">${state.customerName || "N\xE3o identificado"}</div>
+            </div>
+
+            <div class="form-group">
+              <label class="form-label">Faixa de Temperatura Ideal</label>
+              <div class="temperature-range">
+                <div>
+                  <input
+                    type="number"
+                    id="${modalId}-min"
+                    class="form-input"
+                    placeholder="M\xEDnima"
+                    value="${minValue}"
+                    step="0.5"
+                    min="0"
+                    max="50"
+                  />
+                  <div class="form-hint">Temperatura m\xEDnima (\xB0C)</div>
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    id="${modalId}-max"
+                    class="form-input"
+                    placeholder="M\xE1xima"
+                    value="${maxValue}"
+                    step="0.5"
+                    min="0"
+                    max="50"
+                  />
+                  <div class="form-hint">Temperatura m\xE1xima (\xB0C)</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="range-preview" id="${modalId}-preview">
+              <div class="range-preview-label">Faixa configurada</div>
+              <div class="range-preview-value" id="${modalId}-preview-value">
+                ${minValue && maxValue ? `${minValue}\xB0C - ${maxValue}\xB0C` : "N\xE3o definida"}
+              </div>
+            </div>
+          `}
+        </div>
+
+        ${!state.isLoading ? `
+          <div class="modal-footer">
+            <button class="btn btn-secondary" id="${modalId}-cancel">Cancelar</button>
+            <button class="btn btn-primary" id="${modalId}-save" ${state.isSaving ? "disabled" : ""}>
+              ${state.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
+            </button>
+          </div>
+        ` : ""}
+      </div>
+    </div>
+  `;
+    const closeBtn = document.getElementById(`${modalId}-close`);
+    const cancelBtn = document.getElementById(`${modalId}-cancel`);
+    const saveBtn = document.getElementById(`${modalId}-save`);
+    const minInput = document.getElementById(`${modalId}-min`);
+    const maxInput = document.getElementById(`${modalId}-max`);
+    const previewValue = document.getElementById(`${modalId}-preview-value`);
+    const overlay = document.getElementById(modalId);
+    closeBtn?.addEventListener("click", onClose);
+    cancelBtn?.addEventListener("click", onClose);
+    overlay?.addEventListener("click", (e) => {
+      if (e.target === overlay) onClose();
+    });
+    const updatePreview = () => {
+      if (previewValue && minInput && maxInput) {
+        const min = minInput.value;
+        const max = maxInput.value;
+        if (min && max) {
+          previewValue.textContent = `${min}\xB0C - ${max}\xB0C`;
+        } else {
+          previewValue.textContent = "N\xE3o definida";
+        }
+      }
+    };
+    minInput?.addEventListener("input", updatePreview);
+    maxInput?.addEventListener("input", updatePreview);
+    saveBtn?.addEventListener("click", async () => {
+      if (!minInput || !maxInput) return;
+      const min = parseFloat(minInput.value);
+      const max = parseFloat(maxInput.value);
+      if (isNaN(min) || isNaN(max)) {
+        state.error = "Por favor, preencha ambos os valores.";
+        renderModal3(container, state, modalId, onClose, onSave);
+        return;
+      }
+      if (min >= max) {
+        state.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
+        renderModal3(container, state, modalId, onClose, onSave);
+        return;
+      }
+      if (min < 0 || max > 50) {
+        state.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
+        renderModal3(container, state, modalId, onClose, onSave);
+        return;
+      }
+      await onSave(min, max);
+    });
+  }
+  function openTemperatureSettingsModal(params) {
+    const modalId = `myio-temp-settings-${Date.now()}`;
+    const state = {
+      customerId: params.customerId,
+      customerName: params.customerName || "",
+      token: params.token,
+      theme: params.theme || "dark",
+      minTemperature: null,
+      maxTemperature: null,
+      isLoading: true,
+      isSaving: false,
+      error: null,
+      successMessage: null
+    };
+    const container = document.createElement("div");
+    container.id = `${modalId}-container`;
+    document.body.appendChild(container);
+    const destroy = () => {
+      container.remove();
+      params.onClose?.();
+    };
+    const handleSave = async (min, max) => {
+      state.isSaving = true;
+      state.error = null;
+      state.successMessage = null;
+      renderModal3(container, state, modalId, destroy, handleSave);
+      try {
+        await saveCustomerAttributes(state.customerId, state.token, min, max);
+        state.minTemperature = min;
+        state.maxTemperature = max;
+        state.isSaving = false;
+        state.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
+        renderModal3(container, state, modalId, destroy, handleSave);
+        params.onSave?.({ minTemperature: min, maxTemperature: max });
+        setTimeout(() => {
+          destroy();
+        }, 1500);
+      } catch (error) {
+        state.isSaving = false;
+        state.error = `Erro ao salvar: ${error.message}`;
+        renderModal3(container, state, modalId, destroy, handleSave);
+      }
+    };
+    renderModal3(container, state, modalId, destroy, handleSave);
+    fetchCustomerAttributes(state.customerId, state.token).then(({ minTemperature, maxTemperature }) => {
+      state.minTemperature = minTemperature;
+      state.maxTemperature = maxTemperature;
+      state.isLoading = false;
+      renderModal3(container, state, modalId, destroy, handleSave);
+    }).catch((error) => {
+      state.isLoading = false;
+      state.error = `Erro ao carregar: ${error.message}`;
+      renderModal3(container, state, modalId, destroy, handleSave);
+    });
+    return { destroy };
+  }
+
+  exports.CHART_COLORS = CHART_COLORS;
   exports.ConnectionStatusType = ConnectionStatusType;
+  exports.DEFAULT_CLAMP_RANGE = DEFAULT_CLAMP_RANGE;
   exports.DeviceStatusType = DeviceStatusType;
   exports.MyIOChartModal = MyIOChartModal;
   exports.MyIODraggableCard = MyIODraggableCard;
@@ -19375,6 +21699,7 @@ ${rangeText}`;
   exports.MyIOToast = MyIOToast;
   exports.addDetectionContext = addDetectionContext;
   exports.addNamespace = addNamespace;
+  exports.aggregateByDay = aggregateByDay;
   exports.averageByDay = averageByDay;
   exports.buildListItemsThingsboardByUniqueDatasource = buildListItemsThingsboardByUniqueDatasource;
   exports.buildMyioIngestionAuth = buildMyioIngestionAuth;
@@ -19383,6 +21708,8 @@ ${rangeText}`;
   exports.calcDeltaPercent = calcDeltaPercent;
   exports.calculateDeviceStatus = calculateDeviceStatus;
   exports.calculateDeviceStatusWithRanges = calculateDeviceStatusWithRanges;
+  exports.calculateStats = calculateStats;
+  exports.clampTemperature = clampTemperature;
   exports.classify = classify;
   exports.classifyWaterLabel = classifyWaterLabel;
   exports.classifyWaterLabels = classifyWaterLabels;
@@ -19395,9 +21722,11 @@ ${rangeText}`;
   exports.detectDeviceType = detectDeviceType;
   exports.determineInterval = determineInterval;
   exports.deviceStatusIcons = deviceStatusIcons;
+  exports.exportTemperatureCSV = exportTemperatureCSV;
   exports.exportToCSV = exportToCSV;
   exports.exportToCSVAll = exportToCSVAll;
   exports.extractMyIOCredentials = extractMyIOCredentials;
+  exports.fetchTemperatureData = fetchTemperatureData;
   exports.fetchThingsboardCustomerAttrsFromStorage = fetchThingsboardCustomerAttrsFromStorage;
   exports.fetchThingsboardCustomerServerScopeAttrs = fetchThingsboardCustomerServerScopeAttrs;
   exports.findValue = findValue;
@@ -19411,6 +21740,7 @@ ${rangeText}`;
   exports.formatEnergy = formatEnergy;
   exports.formatNumberReadable = formatNumberReadable;
   exports.formatTankHeadFromCm = formatTankHeadFromCm;
+  exports.formatTemperature = formatTemperature;
   exports.formatWaterByGroup = formatWaterByGroup;
   exports.formatWaterVolumeM3 = formatWaterVolumeM3;
   exports.getAuthCacheStats = getAuthCacheStats;
@@ -19425,6 +21755,7 @@ ${rangeText}`;
   exports.getValueByDatakeyLegacy = getValueByDatakeyLegacy;
   exports.getWaterCategories = getWaterCategories;
   exports.groupByDay = groupByDay;
+  exports.interpolateTemperature = interpolateTemperature;
   exports.isDeviceOffline = isDeviceOffline;
   exports.isValidConnectionStatus = isValidConnectionStatus;
   exports.isValidDeviceStatus = isValidDeviceStatus;
@@ -19442,6 +21773,9 @@ ${rangeText}`;
   exports.openDemandModal = openDemandModal;
   exports.openGoalsPanel = openGoalsPanel;
   exports.openRealTimeTelemetryModal = openRealTimeTelemetryModal;
+  exports.openTemperatureComparisonModal = openTemperatureComparisonModal;
+  exports.openTemperatureModal = openTemperatureModal;
+  exports.openTemperatureSettingsModal = openTemperatureSettingsModal;
   exports.parseInputDateToDate = parseInputDateToDate;
   exports.renderCardComponent = renderCardComponent;
   exports.renderCardComponentEnhanced = renderCardComponent2;