myio-js-library 0.1.140 → 0.1.141

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

@@ -17972,13 +17972,13 @@ ${rangeText}`;
     function initializeModal() {
       if (data) {
         modalState.goalsData = data;
-        renderModal();
+        renderModal3();
       } else {
-        renderModal();
+        renderModal3();
         loadGoalsData();
       }
     }
-    function renderModal() {
+    function renderModal3() {
       const existing = document.getElementById("myio-goals-panel-modal");
       if (existing) {
         existing.remove();
@@ -19367,7 +19367,1728 @@ ${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 minY = Math.min(...values) - 1;
+    const maxY = Math.max(...values) + 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
+    };
+    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 globalMinY = Infinity;
+    let globalMaxY = -Infinity;
+    processedData.forEach(({ points }) => {
+      points.forEach((point) => {
+        if (point.y < globalMinY) globalMinY = point.y;
+        if (point.y > globalMaxY) globalMaxY = point.y;
+      });
+    });
+    globalMinY = Math.floor(globalMinY) - 1;
+    globalMaxY = Math.ceil(globalMaxY) + 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();
+    }
+    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);
+  }
+
+  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 +21096,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 +21105,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 +21119,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 +21137,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 +21152,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 +21170,8 @@ ${rangeText}`;
   exports.openDemandModal = openDemandModal;
   exports.openGoalsPanel = openGoalsPanel;
   exports.openRealTimeTelemetryModal = openRealTimeTelemetryModal;
+  exports.openTemperatureComparisonModal = openTemperatureComparisonModal;
+  exports.openTemperatureModal = openTemperatureModal;
   exports.parseInputDateToDate = parseInputDateToDate;
   exports.renderCardComponent = renderCardComponent;
   exports.renderCardComponentEnhanced = renderCardComponent2;