myio-js-library 0.1.140 → 0.1.141

package/dist/index.js

@@ -18148,13 +18148,13 @@ function openGoalsPanel(params) {
   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();
@@ -19542,8 +19542,1729 @@ function openGoalsPanel(params) {
     };
   }
 }
+
+// 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";
+  const startDateInput = new Date(state.startTs).toISOString().slice(0, 16);
+  const endDateInput = 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);
+  const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale);
+  const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale);
+  const startDateInput = new Date(state.startTs).toISOString().slice(0, 16);
+  const endDateInput = 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);
+}
 export {
+  CHART_COLORS,
   ConnectionStatusType,
+  DEFAULT_CLAMP_RANGE,
   DeviceStatusType,
   MyIOChartModal,
   MyIODraggableCard,
@@ -19552,6 +21273,7 @@ export {
   MyIOToast,
   addDetectionContext,
   addNamespace,
+  aggregateByDay,
   averageByDay,
   buildListItemsThingsboardByUniqueDatasource,
   buildMyioIngestionAuth,
@@ -19560,6 +21282,8 @@ export {
   calcDeltaPercent,
   calculateDeviceStatus,
   calculateDeviceStatusWithRanges,
+  calculateStats,
+  clampTemperature,
   classify,
   classifyWaterLabel,
   classifyWaterLabels,
@@ -19572,9 +21296,11 @@ export {
   detectDeviceType,
   determineInterval,
   deviceStatusIcons,
+  exportTemperatureCSV,
   exportToCSV,
   exportToCSVAll,
   extractMyIOCredentials,
+  fetchTemperatureData,
   fetchThingsboardCustomerAttrsFromStorage,
   fetchThingsboardCustomerServerScopeAttrs,
   findValue,
@@ -19588,6 +21314,7 @@ export {
   formatEnergy,
   formatNumberReadable,
   formatTankHeadFromCm,
+  formatTemperature,
   formatWaterByGroup,
   formatWaterVolumeM3,
   getAuthCacheStats,
@@ -19602,6 +21329,7 @@ export {
   getValueByDatakeyLegacy,
   getWaterCategories,
   groupByDay,
+  interpolateTemperature,
   isDeviceOffline,
   isValidConnectionStatus,
   isValidDeviceStatus,
@@ -19619,6 +21347,8 @@ export {
   openDemandModal,
   openGoalsPanel,
   openRealTimeTelemetryModal,
+  openTemperatureComparisonModal,
+  openTemperatureModal,
   parseInputDateToDate,
   renderCardComponent,
   renderCardComponent2 as renderCardComponentEnhanced,