myio-js-library 0.1.140 → 0.1.142

package/dist/index.cjs

@@ -568,7 +568,9 @@ var init_template_card = __esm({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CHART_COLORS: () => CHART_COLORS,
   ConnectionStatusType: () => ConnectionStatusType,
+  DEFAULT_CLAMP_RANGE: () => DEFAULT_CLAMP_RANGE,
   DeviceStatusType: () => DeviceStatusType,
   MyIOChartModal: () => MyIOChartModal,
   MyIODraggableCard: () => MyIODraggableCard,
@@ -577,6 +579,7 @@ __export(index_exports, {
   MyIOToast: () => MyIOToast,
   addDetectionContext: () => addDetectionContext,
   addNamespace: () => addNamespace,
+  aggregateByDay: () => aggregateByDay,
   averageByDay: () => averageByDay,
   buildListItemsThingsboardByUniqueDatasource: () => buildListItemsThingsboardByUniqueDatasource,
   buildMyioIngestionAuth: () => buildMyioIngestionAuth,
@@ -585,6 +588,8 @@ __export(index_exports, {
   calcDeltaPercent: () => calcDeltaPercent,
   calculateDeviceStatus: () => calculateDeviceStatus,
   calculateDeviceStatusWithRanges: () => calculateDeviceStatusWithRanges,
+  calculateStats: () => calculateStats,
+  clampTemperature: () => clampTemperature,
   classify: () => classify,
   classifyWaterLabel: () => classifyWaterLabel,
   classifyWaterLabels: () => classifyWaterLabels,
@@ -597,9 +602,11 @@ __export(index_exports, {
   detectDeviceType: () => detectDeviceType,
   determineInterval: () => determineInterval,
   deviceStatusIcons: () => deviceStatusIcons,
+  exportTemperatureCSV: () => exportTemperatureCSV,
   exportToCSV: () => exportToCSV,
   exportToCSVAll: () => exportToCSVAll,
   extractMyIOCredentials: () => extractMyIOCredentials,
+  fetchTemperatureData: () => fetchTemperatureData,
   fetchThingsboardCustomerAttrsFromStorage: () => fetchThingsboardCustomerAttrsFromStorage,
   fetchThingsboardCustomerServerScopeAttrs: () => fetchThingsboardCustomerServerScopeAttrs,
   findValue: () => findValue,
@@ -613,6 +620,7 @@ __export(index_exports, {
   formatEnergy: () => formatEnergy,
   formatNumberReadable: () => formatNumberReadable,
   formatTankHeadFromCm: () => formatTankHeadFromCm,
+  formatTemperature: () => formatTemperature,
   formatWaterByGroup: () => formatWaterByGroup,
   formatWaterVolumeM3: () => formatWaterVolumeM3,
   getAuthCacheStats: () => getAuthCacheStats,
@@ -627,6 +635,7 @@ __export(index_exports, {
   getValueByDatakeyLegacy: () => getValueByDatakeyLegacy,
   getWaterCategories: () => getWaterCategories,
   groupByDay: () => groupByDay,
+  interpolateTemperature: () => interpolateTemperature,
   isDeviceOffline: () => isDeviceOffline,
   isValidConnectionStatus: () => isValidConnectionStatus,
   isValidDeviceStatus: () => isValidDeviceStatus,
@@ -644,6 +653,9 @@ __export(index_exports, {
   openDemandModal: () => openDemandModal,
   openGoalsPanel: () => openGoalsPanel,
   openRealTimeTelemetryModal: () => openRealTimeTelemetryModal,
+  openTemperatureComparisonModal: () => openTemperatureComparisonModal,
+  openTemperatureModal: () => openTemperatureModal,
+  openTemperatureSettingsModal: () => openTemperatureSettingsModal,
   parseInputDateToDate: () => parseInputDateToDate,
   renderCardComponent: () => renderCardComponent,
   renderCardComponentEnhanced: () => renderCardComponent2,
@@ -18244,13 +18256,13 @@ function openGoalsPanel(params) {
   function initializeModal() {
     if (data) {
       modalState.goalsData = data;
-      renderModal();
+      renderModal4();
     } else {
-      renderModal();
+      renderModal4();
       loadGoalsData();
     }
   }
-  function renderModal() {
+  function renderModal4() {
     const existing = document.getElementById("myio-goals-panel-modal");
     if (existing) {
       existing.remove();
@@ -19638,9 +19650,2333 @@ 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 dataMin = Math.min(...values);
+  const dataMax = Math.max(...values);
+  const thresholdMin = state.temperatureMin !== null ? state.temperatureMin : dataMin;
+  const thresholdMax = state.temperatureMax !== null ? state.temperatureMax : dataMax;
+  const minY = Math.min(dataMin, thresholdMin) - 1;
+  const maxY = Math.max(dataMax, thresholdMax) + 1;
+  const chartWidth = width - paddingLeft - paddingRight;
+  const chartHeight = height - paddingTop - paddingBottom;
+  const scaleY = chartHeight / (maxY - minY || 1);
+  if (isPeriodsFiltered) {
+    const pointSpacing = chartWidth / Math.max(1, chartData.length - 1);
+    chartData.forEach((point, index) => {
+      point.screenX = paddingLeft + index * pointSpacing;
+      point.screenY = height - paddingBottom - (point.y - minY) * scaleY;
+    });
+  } else {
+    const minX = chartData[0].x;
+    const maxX = chartData[chartData.length - 1].x;
+    const timeRange = maxX - minX || 1;
+    const scaleX = chartWidth / timeRange;
+    chartData.forEach((point) => {
+      point.screenX = paddingLeft + (point.x - minX) * scaleX;
+      point.screenY = height - paddingBottom - (point.y - minY) * scaleY;
+    });
+  }
+  ctx.clearRect(0, 0, width, height);
+  ctx.strokeStyle = colors.chartGrid;
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 4; i++) {
+    const y = paddingTop + chartHeight * i / 4;
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, y);
+    ctx.lineTo(width - paddingRight, y);
+    ctx.stroke();
+  }
+  if (state.temperatureMin !== null && state.temperatureMax !== null) {
+    const rangeMinY = height - paddingBottom - (state.temperatureMin - minY) * scaleY;
+    const rangeMaxY = height - paddingBottom - (state.temperatureMax - minY) * scaleY;
+    ctx.fillStyle = "rgba(76, 175, 80, 0.1)";
+    ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
+    ctx.strokeStyle = colors.success;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, rangeMinY);
+    ctx.lineTo(width - paddingRight, rangeMinY);
+    ctx.moveTo(paddingLeft, rangeMaxY);
+    ctx.lineTo(width - paddingRight, rangeMaxY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+  }
+  ctx.strokeStyle = colors.chartLine;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  chartData.forEach((point, i) => {
+    if (i === 0) ctx.moveTo(point.screenX, point.screenY);
+    else ctx.lineTo(point.screenX, point.screenY);
+  });
+  ctx.stroke();
+  ctx.fillStyle = colors.chartLine;
+  chartData.forEach((point) => {
+    ctx.beginPath();
+    ctx.arc(point.screenX, point.screenY, 4, 0, Math.PI * 2);
+    ctx.fill();
+  });
+  ctx.fillStyle = colors.textMuted;
+  ctx.font = "11px system-ui, sans-serif";
+  ctx.textAlign = "right";
+  for (let i = 0; i <= 4; i++) {
+    const val = minY + (maxY - minY) * (4 - i) / 4;
+    const y = paddingTop + chartHeight * i / 4;
+    ctx.fillText(val.toFixed(1) + "\xB0C", paddingLeft - 8, y + 4);
+  }
+  ctx.textAlign = "center";
+  const numLabels = Math.min(8, chartData.length);
+  const labelInterval = Math.max(1, Math.floor(chartData.length / numLabels));
+  for (let i = 0; i < chartData.length; i += labelInterval) {
+    const point = chartData[i];
+    const date = new Date(point.x);
+    let label;
+    if (state.granularity === "hour") {
+      label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+    } else {
+      label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+    }
+    ctx.strokeStyle = colors.chartGrid;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(point.screenX, paddingTop);
+    ctx.lineTo(point.screenX, height - paddingBottom);
+    ctx.stroke();
+    ctx.fillStyle = colors.textMuted;
+    ctx.fillText(label, point.screenX, height - paddingBottom + 18);
+  }
+  ctx.strokeStyle = colors.border;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(paddingLeft, paddingTop);
+  ctx.lineTo(paddingLeft, height - paddingBottom);
+  ctx.lineTo(width - paddingRight, height - paddingBottom);
+  ctx.stroke();
+  setupChartTooltip(canvas, chartContainer, chartData, state, colors);
+}
+function setupChartTooltip(canvas, container, chartData, state, colors) {
+  const existingTooltip = container.querySelector(".myio-chart-tooltip");
+  if (existingTooltip) existingTooltip.remove();
+  const tooltip = document.createElement("div");
+  tooltip.className = "myio-chart-tooltip";
+  tooltip.style.cssText = `
+    position: absolute;
+    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    border: 1px solid ${colors.border};
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-size: 13px;
+    color: ${colors.text};
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    min-width: 140px;
+  `;
+  container.appendChild(tooltip);
+  const findNearestPoint = (mouseX, mouseY) => {
+    const threshold = 20;
+    let nearest = null;
+    let minDist = Infinity;
+    for (const point of chartData) {
+      const dist = Math.sqrt(
+        Math.pow(mouseX - point.screenX, 2) + Math.pow(mouseY - point.screenY, 2)
+      );
+      if (dist < minDist && dist < threshold) {
+        minDist = dist;
+        nearest = point;
+      }
+    }
+    return nearest;
+  };
+  canvas.addEventListener("mousemove", (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const point = findNearestPoint(mouseX, mouseY);
+    if (point) {
+      const date = new Date(point.x);
+      let dateStr;
+      if (state.granularity === "hour") {
+        dateStr = date.toLocaleDateString(state.locale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        }) + " " + date.toLocaleTimeString(state.locale, {
+          hour: "2-digit",
+          minute: "2-digit"
+        });
+      } else {
+        dateStr = date.toLocaleDateString(state.locale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        });
+      }
+      tooltip.innerHTML = `
+        <div style="font-weight: 600; margin-bottom: 6px; color: ${colors.primary};">
+          ${formatTemperature(point.y)}
+        </div>
+        <div style="font-size: 11px; color: ${colors.textMuted};">
+          \u{1F4C5} ${dateStr}
+        </div>
+      `;
+      let tooltipX = point.screenX + 15;
+      let tooltipY = point.screenY - 15;
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      if (tooltipX + tooltipRect.width > containerRect.width - 10) {
+        tooltipX = point.screenX - tooltipRect.width - 15;
+      }
+      if (tooltipY < 10) {
+        tooltipY = point.screenY + 15;
+      }
+      tooltip.style.left = `${tooltipX}px`;
+      tooltip.style.top = `${tooltipY}px`;
+      tooltip.style.opacity = "1";
+      canvas.style.cursor = "pointer";
+    } else {
+      tooltip.style.opacity = "0";
+      canvas.style.cursor = "default";
+    }
+  });
+  canvas.addEventListener("mouseleave", () => {
+    tooltip.style.opacity = "0";
+    canvas.style.cursor = "default";
+  });
+}
+async function setupEventListeners(container, state, modalId, onClose) {
+  const closeModal = () => {
+    container.remove();
+    onClose?.();
+  };
+  container.querySelector(".myio-temp-modal-overlay")?.addEventListener("click", (e) => {
+    if (e.target === e.currentTarget) closeModal();
+  });
+  document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
+  document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
+  const dateRangeInput = document.getElementById(`${modalId}-date-range`);
+  if (dateRangeInput && !state.dateRangePicker) {
+    try {
+      state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+        presetStart: new Date(state.startTs).toISOString(),
+        presetEnd: new Date(state.endTs).toISOString(),
+        includeTime: true,
+        timePrecision: "minute",
+        maxRangeDays: 90,
+        locale: state.locale,
+        parentEl: container.querySelector(".myio-temp-modal-content"),
+        onApply: (result) => {
+          state.startTs = new Date(result.startISO).getTime();
+          state.endTs = new Date(result.endISO).getTime();
+          console.log("[TemperatureModal] Date range applied:", result);
+        }
+      });
+    } catch (error) {
+      console.warn("[TemperatureModal] DateRangePicker initialization failed:", error);
+    }
+  }
+  document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
+    state.theme = state.theme === "dark" ? "light" : "dark";
+    localStorage.setItem("myio-temp-modal-theme", state.theme);
+    state.dateRangePicker = null;
+    renderModal(container, state, modalId);
+    if (state.data.length > 0) drawChart(modalId, state);
+    await setupEventListeners(container, state, modalId, onClose);
+  });
+  document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
+    container.__isMaximized = !container.__isMaximized;
+    state.dateRangePicker = null;
+    renderModal(container, state, modalId);
+    if (state.data.length > 0) drawChart(modalId, state);
+    await setupEventListeners(container, state, modalId, onClose);
+  });
+  const periodBtn = document.getElementById(`${modalId}-period-btn`);
+  const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
+  periodBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (periodDropdown) {
+      periodDropdown.style.display = periodDropdown.style.display === "none" ? "block" : "none";
+    }
+  });
+  document.addEventListener("click", (e) => {
+    if (periodDropdown && !periodDropdown.contains(e.target) && e.target !== periodBtn) {
+      periodDropdown.style.display = "none";
+    }
+  });
+  const periodCheckboxes = document.querySelectorAll(`input[name="${modalId}-period"]`);
+  periodCheckboxes.forEach((checkbox) => {
+    checkbox.addEventListener("change", () => {
+      const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
+      state.selectedPeriods = checked;
+      const btnLabel = periodBtn?.querySelector("span:first-child");
+      if (btnLabel) {
+        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      }
+      if (state.data.length > 0) drawChart(modalId, state);
+    });
+  });
+  document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
+    periodCheckboxes.forEach((cb) => {
+      cb.checked = true;
+    });
+    state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+    const btnLabel = periodBtn?.querySelector("span:first-child");
+    if (btnLabel) {
+      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+    }
+    if (state.data.length > 0) drawChart(modalId, state);
+  });
+  document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
+    periodCheckboxes.forEach((cb) => {
+      cb.checked = false;
+    });
+    state.selectedPeriods = [];
+    const btnLabel = periodBtn?.querySelector("span:first-child");
+    if (btnLabel) {
+      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+    }
+    if (state.data.length > 0) drawChart(modalId, state);
+  });
+  document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
+    state.granularity = e.target.value;
+    localStorage.setItem("myio-temp-modal-granularity", state.granularity);
+    if (state.data.length > 0) drawChart(modalId, state);
+  });
+  document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
+    if (state.startTs >= state.endTs) {
+      alert("Por favor, selecione um per\xEDodo v\xE1lido");
+      return;
+    }
+    state.isLoading = true;
+    state.dateRangePicker = null;
+    renderModal(container, state, modalId);
+    try {
+      state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
+      state.stats = calculateStats(state.data, state.clampRange);
+      state.isLoading = false;
+      renderModal(container, state, modalId);
+      drawChart(modalId, state);
+      await setupEventListeners(container, state, modalId, onClose);
+    } catch (error) {
+      console.error("[TemperatureModal] Error fetching data:", error);
+      state.isLoading = false;
+      renderModal(container, state, modalId, error);
+      await setupEventListeners(container, state, modalId, onClose);
+    }
+  });
+  document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
+    if (state.data.length === 0) return;
+    const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+    const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+    exportTemperatureCSV(
+      state.data,
+      state.label,
+      state.stats,
+      startDateStr,
+      endDateStr
+    );
+  });
+}
+
+// src/components/temperature/TemperatureComparisonModal.ts
+async function openTemperatureComparisonModal(params) {
+  const modalId = `myio-temp-comparison-modal-${Date.now()}`;
+  const defaultDateRange = getTodaySoFar();
+  const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
+  const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
+  const state = {
+    token: params.token,
+    devices: params.devices,
+    startTs,
+    endTs,
+    granularity: params.granularity || "hour",
+    theme: params.theme || "dark",
+    clampRange: params.clampRange || DEFAULT_CLAMP_RANGE,
+    locale: params.locale || "pt-BR",
+    deviceData: [],
+    isLoading: true,
+    dateRangePicker: null,
+    selectedPeriods: ["madrugada", "manha", "tarde", "noite"],
+    // All periods selected by default
+    temperatureMin: params.temperatureMin ?? null,
+    temperatureMax: params.temperatureMax ?? null
+  };
+  const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
+  const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
+  if (savedGranularity) state.granularity = savedGranularity;
+  if (savedTheme) state.theme = savedTheme;
+  const modalContainer = document.createElement("div");
+  modalContainer.id = modalId;
+  document.body.appendChild(modalContainer);
+  renderModal2(modalContainer, state, modalId);
+  await fetchAllDevicesData(state);
+  renderModal2(modalContainer, state, modalId);
+  drawComparisonChart(modalId, state);
+  await setupEventListeners2(modalContainer, state, modalId, params.onClose);
+  return {
+    destroy: () => {
+      modalContainer.remove();
+      params.onClose?.();
+    },
+    updateData: async (startDate, endDate, granularity) => {
+      state.startTs = new Date(startDate).getTime();
+      state.endTs = new Date(endDate).getTime();
+      if (granularity) state.granularity = granularity;
+      state.isLoading = true;
+      renderModal2(modalContainer, state, modalId);
+      await fetchAllDevicesData(state);
+      renderModal2(modalContainer, state, modalId);
+      drawComparisonChart(modalId, state);
+      setupEventListeners2(modalContainer, state, modalId, params.onClose);
+    }
+  };
+}
+async function fetchAllDevicesData(state) {
+  state.isLoading = true;
+  state.deviceData = [];
+  try {
+    const results = await Promise.all(
+      state.devices.map(async (device, index) => {
+        const deviceId = device.tbId || device.id;
+        try {
+          const data = await fetchTemperatureData(state.token, deviceId, state.startTs, state.endTs);
+          const stats = calculateStats(data, state.clampRange);
+          return {
+            device,
+            data,
+            stats,
+            color: CHART_COLORS[index % CHART_COLORS.length]
+          };
+        } catch (error) {
+          console.error(`[TemperatureComparisonModal] Error fetching data for ${device.label}:`, error);
+          return {
+            device,
+            data: [],
+            stats: { avg: 0, min: 0, max: 0, count: 0 },
+            color: CHART_COLORS[index % CHART_COLORS.length]
+          };
+        }
+      })
+    );
+    state.deviceData = results;
+  } catch (error) {
+    console.error("[TemperatureComparisonModal] Error fetching data:", error);
+  }
+  state.isLoading = false;
+}
+function renderModal2(container, state, modalId) {
+  const colors = getThemeColors(state.theme);
+  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 dataMinY = Infinity;
+  let dataMaxY = -Infinity;
+  processedData.forEach(({ points }) => {
+    points.forEach((point) => {
+      if (point.y < dataMinY) dataMinY = point.y;
+      if (point.y > dataMaxY) dataMaxY = point.y;
+    });
+  });
+  const rangeMap = /* @__PURE__ */ new Map();
+  state.deviceData.forEach((dd, index) => {
+    const device = dd.device;
+    const min = device.temperatureMin;
+    const max = device.temperatureMax;
+    if (min !== void 0 && min !== null && max !== void 0 && max !== null) {
+      const key = `${min}-${max}`;
+      if (!rangeMap.has(key)) {
+        rangeMap.set(key, {
+          min,
+          max,
+          customerName: device.customerName || "",
+          color: CHART_COLORS[index % CHART_COLORS.length],
+          deviceLabels: [device.label]
+        });
+      } else {
+        rangeMap.get(key).deviceLabels.push(device.label);
+      }
+    }
+  });
+  if (rangeMap.size === 0 && state.temperatureMin !== null && state.temperatureMax !== null) {
+    rangeMap.set("global", {
+      min: state.temperatureMin,
+      max: state.temperatureMax,
+      customerName: "Global",
+      color: colors.success,
+      deviceLabels: []
+    });
+  }
+  const temperatureRanges = Array.from(rangeMap.values());
+  let thresholdMinY = dataMinY;
+  let thresholdMaxY = dataMaxY;
+  temperatureRanges.forEach((range) => {
+    if (range.min < thresholdMinY) thresholdMinY = range.min;
+    if (range.max > thresholdMaxY) thresholdMaxY = range.max;
+  });
+  const globalMinY = Math.floor(Math.min(dataMinY, thresholdMinY)) - 1;
+  const globalMaxY = Math.ceil(Math.max(dataMaxY, thresholdMaxY)) + 1;
+  const chartWidth = width - paddingLeft - paddingRight;
+  const chartHeight = height - paddingTop - paddingBottom;
+  const scaleY = chartHeight / (globalMaxY - globalMinY || 1);
+  if (isPeriodsFiltered) {
+    const maxPoints = Math.max(...processedData.map(({ points }) => points.length));
+    const pointSpacing = chartWidth / Math.max(1, maxPoints - 1);
+    processedData.forEach(({ points }) => {
+      points.forEach((point, index) => {
+        point.screenX = paddingLeft + index * pointSpacing;
+        point.screenY = height - paddingBottom - (point.y - globalMinY) * scaleY;
+      });
+    });
+  } else {
+    let globalMinX = Infinity;
+    let globalMaxX = -Infinity;
+    processedData.forEach(({ points }) => {
+      points.forEach((point) => {
+        if (point.x < globalMinX) globalMinX = point.x;
+        if (point.x > globalMaxX) globalMaxX = point.x;
+      });
+    });
+    const timeRange = globalMaxX - globalMinX || 1;
+    const scaleX = chartWidth / timeRange;
+    processedData.forEach(({ points }) => {
+      points.forEach((point) => {
+        point.screenX = paddingLeft + (point.x - globalMinX) * scaleX;
+        point.screenY = height - paddingBottom - (point.y - globalMinY) * scaleY;
+      });
+    });
+  }
+  ctx.strokeStyle = colors.chartGrid;
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 5; i++) {
+    const y = paddingTop + chartHeight * i / 5;
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, y);
+    ctx.lineTo(width - paddingRight, y);
+    ctx.stroke();
+  }
+  const rangeColors = [
+    { fill: "rgba(76, 175, 80, 0.12)", stroke: "#4CAF50" },
+    // Green
+    { fill: "rgba(33, 150, 243, 0.12)", stroke: "#2196F3" },
+    // Blue
+    { fill: "rgba(255, 152, 0, 0.12)", stroke: "#FF9800" },
+    // Orange
+    { fill: "rgba(156, 39, 176, 0.12)", stroke: "#9C27B0" }
+    // Purple
+  ];
+  temperatureRanges.forEach((range, index) => {
+    const rangeMinY = height - paddingBottom - (range.min - globalMinY) * scaleY;
+    const rangeMaxY = height - paddingBottom - (range.max - globalMinY) * scaleY;
+    const colorSet = rangeColors[index % rangeColors.length];
+    ctx.fillStyle = colorSet.fill;
+    ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
+    ctx.strokeStyle = colorSet.stroke;
+    ctx.lineWidth = 1.5;
+    ctx.setLineDash([6, 4]);
+    ctx.beginPath();
+    ctx.moveTo(paddingLeft, rangeMinY);
+    ctx.lineTo(width - paddingRight, rangeMinY);
+    ctx.moveTo(paddingLeft, rangeMaxY);
+    ctx.lineTo(width - paddingRight, rangeMaxY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    if (temperatureRanges.length > 1 || range.customerName) {
+      ctx.fillStyle = colorSet.stroke;
+      ctx.font = "10px system-ui, sans-serif";
+      ctx.textAlign = "left";
+      const labelY = (rangeMinY + rangeMaxY) / 2;
+      const labelText = range.customerName || `${range.min}\xB0-${range.max}\xB0C`;
+      ctx.fillText(labelText, width - paddingRight + 5, labelY + 3);
+    }
+  });
+  processedData.forEach(({ device, points }) => {
+    ctx.strokeStyle = device.color;
+    ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    points.forEach((point, i) => {
+      if (i === 0) ctx.moveTo(point.screenX, point.screenY);
+      else ctx.lineTo(point.screenX, point.screenY);
+    });
+    ctx.stroke();
+    ctx.fillStyle = device.color;
+    points.forEach((point) => {
+      ctx.beginPath();
+      ctx.arc(point.screenX, point.screenY, 4, 0, Math.PI * 2);
+      ctx.fill();
+    });
+  });
+  ctx.fillStyle = colors.textMuted;
+  ctx.font = "12px system-ui, sans-serif";
+  ctx.textAlign = "right";
+  for (let i = 0; i <= 5; i++) {
+    const val = globalMinY + (globalMaxY - globalMinY) * (5 - i) / 5;
+    const y = paddingTop + chartHeight * i / 5;
+    ctx.fillText(val.toFixed(1) + "\xB0C", paddingLeft - 10, y + 4);
+  }
+  ctx.textAlign = "center";
+  const xAxisPoints = processedData[0]?.points || [];
+  const numLabels = Math.min(8, xAxisPoints.length);
+  const labelInterval = Math.max(1, Math.floor(xAxisPoints.length / numLabels));
+  for (let i = 0; i < xAxisPoints.length; i += labelInterval) {
+    const point = xAxisPoints[i];
+    const date = new Date(point.x);
+    let label;
+    if (state.granularity === "hour") {
+      label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+    } else {
+      label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+    }
+    ctx.strokeStyle = colors.chartGrid;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(point.screenX, paddingTop);
+    ctx.lineTo(point.screenX, height - paddingBottom);
+    ctx.stroke();
+    ctx.fillStyle = colors.textMuted;
+    ctx.fillText(label, point.screenX, height - paddingBottom + 18);
+  }
+  ctx.strokeStyle = colors.border;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(paddingLeft, paddingTop);
+  ctx.lineTo(paddingLeft, height - paddingBottom);
+  ctx.lineTo(width - paddingRight, height - paddingBottom);
+  ctx.stroke();
+  const allChartPoints = processedData.flatMap((pd) => pd.points);
+  setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state, colors);
+}
+function setupComparisonChartTooltip(canvas, container, chartData, state, colors) {
+  const existingTooltip = container.querySelector(".myio-chart-tooltip");
+  if (existingTooltip) existingTooltip.remove();
+  const tooltip = document.createElement("div");
+  tooltip.className = "myio-chart-tooltip";
+  tooltip.style.cssText = `
+    position: absolute;
+    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    border: 1px solid ${colors.border};
+    border-radius: 8px;
+    padding: 10px 14px;
+    font-size: 13px;
+    color: ${colors.text};
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    min-width: 160px;
+  `;
+  container.appendChild(tooltip);
+  const findNearestPoint = (mouseX, mouseY) => {
+    const threshold = 20;
+    let nearest = null;
+    let minDist = Infinity;
+    for (const point of chartData) {
+      const dist = Math.sqrt(
+        Math.pow(mouseX - point.screenX, 2) + Math.pow(mouseY - point.screenY, 2)
+      );
+      if (dist < minDist && dist < threshold) {
+        minDist = dist;
+        nearest = point;
+      }
+    }
+    return nearest;
+  };
+  canvas.addEventListener("mousemove", (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const point = findNearestPoint(mouseX, mouseY);
+    if (point) {
+      const date = new Date(point.x);
+      let dateStr;
+      if (state.granularity === "hour") {
+        dateStr = date.toLocaleDateString(state.locale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        }) + " " + date.toLocaleTimeString(state.locale, {
+          hour: "2-digit",
+          minute: "2-digit"
+        });
+      } else {
+        dateStr = date.toLocaleDateString(state.locale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        });
+      }
+      tooltip.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
+          <span style="width: 10px; height: 10px; border-radius: 50%; background: ${point.deviceColor};"></span>
+          <span style="font-weight: 600;">${point.deviceLabel}</span>
+        </div>
+        <div style="font-weight: 600; font-size: 16px; color: ${point.deviceColor}; margin-bottom: 4px;">
+          ${formatTemperature(point.y)}
+        </div>
+        <div style="font-size: 11px; color: ${colors.textMuted};">
+          \u{1F4C5} ${dateStr}
+        </div>
+      `;
+      let tooltipX = point.screenX + 15;
+      let tooltipY = point.screenY - 15;
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      if (tooltipX + tooltipRect.width > containerRect.width - 10) {
+        tooltipX = point.screenX - tooltipRect.width - 15;
+      }
+      if (tooltipY < 10) {
+        tooltipY = point.screenY + 15;
+      }
+      tooltip.style.left = `${tooltipX}px`;
+      tooltip.style.top = `${tooltipY}px`;
+      tooltip.style.opacity = "1";
+      canvas.style.cursor = "pointer";
+    } else {
+      tooltip.style.opacity = "0";
+      canvas.style.cursor = "default";
+    }
+  });
+  canvas.addEventListener("mouseleave", () => {
+    tooltip.style.opacity = "0";
+    canvas.style.cursor = "default";
+  });
+}
+async function setupEventListeners2(container, state, modalId, onClose) {
+  const closeModal = () => {
+    container.remove();
+    onClose?.();
+  };
+  container.querySelector(".myio-temp-comparison-overlay")?.addEventListener("click", (e) => {
+    if (e.target === e.currentTarget) closeModal();
+  });
+  document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
+  document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
+  const dateRangeInput = document.getElementById(`${modalId}-date-range`);
+  if (dateRangeInput && !state.dateRangePicker) {
+    try {
+      state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+        presetStart: new Date(state.startTs).toISOString(),
+        presetEnd: new Date(state.endTs).toISOString(),
+        includeTime: true,
+        timePrecision: "minute",
+        maxRangeDays: 90,
+        locale: state.locale,
+        parentEl: container.querySelector(".myio-temp-comparison-content"),
+        onApply: (result) => {
+          state.startTs = new Date(result.startISO).getTime();
+          state.endTs = new Date(result.endISO).getTime();
+          console.log("[TemperatureComparisonModal] Date range applied:", result);
+        }
+      });
+    } catch (error) {
+      console.warn("[TemperatureComparisonModal] DateRangePicker initialization failed:", error);
+    }
+  }
+  document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
+    state.theme = state.theme === "dark" ? "light" : "dark";
+    localStorage.setItem("myio-temp-comparison-theme", state.theme);
+    state.dateRangePicker = null;
+    renderModal2(container, state, modalId);
+    if (state.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state);
+    }
+    await setupEventListeners2(container, state, modalId, onClose);
+  });
+  document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
+    container.__isMaximized = !container.__isMaximized;
+    state.dateRangePicker = null;
+    renderModal2(container, state, modalId);
+    if (state.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state);
+    }
+    await setupEventListeners2(container, state, modalId, onClose);
+  });
+  const periodBtn = document.getElementById(`${modalId}-period-btn`);
+  const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
+  periodBtn?.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (periodDropdown) {
+      periodDropdown.style.display = periodDropdown.style.display === "none" ? "block" : "none";
+    }
+  });
+  document.addEventListener("click", (e) => {
+    if (periodDropdown && !periodDropdown.contains(e.target) && e.target !== periodBtn) {
+      periodDropdown.style.display = "none";
+    }
+  });
+  const periodCheckboxes = document.querySelectorAll(`input[name="${modalId}-period"]`);
+  periodCheckboxes.forEach((checkbox) => {
+    checkbox.addEventListener("change", () => {
+      const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
+      state.selectedPeriods = checked;
+      const btnLabel = periodBtn?.querySelector("span:first-child");
+      if (btnLabel) {
+        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+      }
+      if (state.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state);
+      }
+    });
+  });
+  document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
+    periodCheckboxes.forEach((cb) => {
+      cb.checked = true;
+    });
+    state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+    const btnLabel = periodBtn?.querySelector("span:first-child");
+    if (btnLabel) {
+      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+    }
+    if (state.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state);
+    }
+  });
+  document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
+    periodCheckboxes.forEach((cb) => {
+      cb.checked = false;
+    });
+    state.selectedPeriods = [];
+    const btnLabel = periodBtn?.querySelector("span:first-child");
+    if (btnLabel) {
+      btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+    }
+    if (state.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state);
+    }
+  });
+  document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
+    state.granularity = e.target.value;
+    localStorage.setItem("myio-temp-comparison-granularity", state.granularity);
+    if (state.deviceData.some((dd) => dd.data.length > 0)) {
+      drawComparisonChart(modalId, state);
+    }
+  });
+  document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
+    if (state.startTs >= state.endTs) {
+      alert("Por favor, selecione um per\xEDodo v\xE1lido");
+      return;
+    }
+    state.isLoading = true;
+    state.dateRangePicker = null;
+    renderModal2(container, state, modalId);
+    await fetchAllDevicesData(state);
+    renderModal2(container, state, modalId);
+    drawComparisonChart(modalId, state);
+    await setupEventListeners2(container, state, modalId, onClose);
+  });
+  document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
+    if (state.deviceData.every((dd) => dd.data.length === 0)) return;
+    exportComparisonCSV(state);
+  });
+}
+function exportComparisonCSV(state) {
+  const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+  const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+  const BOM = "\uFEFF";
+  let csvContent = BOM;
+  csvContent += `Compara\xE7\xE3o de Temperatura
+`;
+  csvContent += `Per\xEDodo: ${startDateStr} at\xE9 ${endDateStr}
+`;
+  csvContent += `Sensores: ${state.devices.map((d) => d.label).join(", ")}
+`;
+  csvContent += "\n";
+  csvContent += "Estat\xEDsticas por Sensor:\n";
+  csvContent += "Sensor,M\xE9dia (\xB0C),Min (\xB0C),Max (\xB0C),Leituras\n";
+  state.deviceData.forEach((dd) => {
+    csvContent += `"${dd.device.label}",${dd.stats.avg.toFixed(2)},${dd.stats.min.toFixed(2)},${dd.stats.max.toFixed(2)},${dd.stats.count}
+`;
+  });
+  csvContent += "\n";
+  csvContent += "Dados Detalhados:\n";
+  csvContent += "Data/Hora,Sensor,Temperatura (\xB0C)\n";
+  state.deviceData.forEach((dd) => {
+    dd.data.forEach((item) => {
+      const date = new Date(item.ts).toLocaleString(state.locale);
+      const temp = Number(item.value).toFixed(2);
+      csvContent += `"${date}","${dd.device.label}",${temp}
+`;
+    });
+  });
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `comparacao_temperatura_${startDateStr}_${endDateStr}.csv`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+// src/components/temperature/TemperatureSettingsModal.ts
+var DARK_THEME2 = {
+  modalBg: "linear-gradient(180deg, #1e1e2e 0%, #151521 100%)",
+  headerBg: "#3e1a7d",
+  textPrimary: "#ffffff",
+  textSecondary: "rgba(255, 255, 255, 0.7)",
+  textMuted: "rgba(255, 255, 255, 0.5)",
+  inputBg: "rgba(255, 255, 255, 0.08)",
+  inputBorder: "rgba(255, 255, 255, 0.2)",
+  inputText: "#ffffff",
+  buttonPrimary: "#3e1a7d",
+  buttonPrimaryHover: "#5a2da8",
+  buttonSecondary: "rgba(255, 255, 255, 0.1)",
+  success: "#4CAF50",
+  error: "#f44336",
+  overlay: "rgba(0, 0, 0, 0.85)"
+};
+var LIGHT_THEME2 = {
+  modalBg: "#ffffff",
+  headerBg: "#3e1a7d",
+  textPrimary: "#1a1a2e",
+  textSecondary: "rgba(0, 0, 0, 0.7)",
+  textMuted: "rgba(0, 0, 0, 0.5)",
+  inputBg: "#f5f5f5",
+  inputBorder: "rgba(0, 0, 0, 0.2)",
+  inputText: "#1a1a2e",
+  buttonPrimary: "#3e1a7d",
+  buttonPrimaryHover: "#5a2da8",
+  buttonSecondary: "rgba(0, 0, 0, 0.05)",
+  success: "#4CAF50",
+  error: "#f44336",
+  overlay: "rgba(0, 0, 0, 0.5)"
+};
+function getColors(theme) {
+  return theme === "dark" ? DARK_THEME2 : LIGHT_THEME2;
+}
+async function fetchCustomerAttributes(customerId, token) {
+  const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/values/attributes/SERVER_SCOPE`;
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Authorization": `Bearer ${token}`
+    }
+  });
+  if (!response.ok) {
+    if (response.status === 404 || response.status === 400) {
+      return { minTemperature: null, maxTemperature: null };
+    }
+    throw new Error(`Failed to fetch attributes: ${response.status}`);
+  }
+  const attributes = await response.json();
+  let minTemperature = null;
+  let maxTemperature = null;
+  if (Array.isArray(attributes)) {
+    for (const attr of attributes) {
+      if (attr.key === "minTemperature") {
+        minTemperature = Number(attr.value);
+      } else if (attr.key === "maxTemperature") {
+        maxTemperature = Number(attr.value);
+      }
+    }
+  }
+  return { minTemperature, maxTemperature };
+}
+async function saveCustomerAttributes(customerId, token, minTemperature, maxTemperature) {
+  const url = `/api/plugins/telemetry/CUSTOMER/${customerId}/SERVER_SCOPE`;
+  const attributes = {
+    minTemperature,
+    maxTemperature
+  };
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Authorization": `Bearer ${token}`
+    },
+    body: JSON.stringify(attributes)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to save attributes: ${response.status}`);
+  }
+}
+function renderModal3(container, state, modalId, onClose, onSave) {
+  const colors = getColors(state.theme);
+  const minValue = state.minTemperature !== null ? state.minTemperature : "";
+  const maxValue = state.maxTemperature !== null ? state.maxTemperature : "";
+  container.innerHTML = `
+    <style>
+      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+      @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+      @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+      #${modalId} {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: ${colors.overlay};
+        z-index: 10000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: fadeIn 0.2s ease-out;
+      }
+
+      #${modalId} .modal-content {
+        background: ${colors.modalBg};
+        border-radius: 16px;
+        width: 90%;
+        max-width: 480px;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        animation: slideIn 0.3s ease-out;
+        overflow: hidden;
+      }
+
+      #${modalId} .modal-header {
+        background: ${colors.headerBg};
+        padding: 20px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #${modalId} .modal-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #fff;
+        font-family: 'Roboto', sans-serif;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      #${modalId} .close-btn {
+        width: 32px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        color: #fff;
+        font-size: 18px;
+      }
+
+      #${modalId} .close-btn:hover {
+        background: rgba(255, 68, 68, 0.25);
+        border-color: rgba(255, 68, 68, 0.5);
+      }
+
+      #${modalId} .modal-body {
+        padding: 24px;
+      }
+
+      #${modalId} .customer-info {
+        margin-bottom: 24px;
+        padding: 12px 16px;
+        background: ${colors.inputBg};
+        border-radius: 8px;
+        border: 1px solid ${colors.inputBorder};
+      }
+
+      #${modalId} .customer-label {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-bottom: 4px;
+      }
+
+      #${modalId} .customer-name {
+        font-size: 16px;
+        font-weight: 500;
+        color: ${colors.textPrimary};
+      }
+
+      #${modalId} .form-group {
+        margin-bottom: 20px;
+      }
+
+      #${modalId} .form-label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${colors.textSecondary};
+        margin-bottom: 8px;
+      }
+
+      #${modalId} .form-input {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 16px;
+        background: ${colors.inputBg};
+        border: 1px solid ${colors.inputBorder};
+        border-radius: 8px;
+        color: ${colors.inputText};
+        outline: none;
+        transition: border-color 0.2s;
+        box-sizing: border-box;
+      }
+
+      #${modalId} .form-input:focus {
+        border-color: ${colors.buttonPrimary};
+      }
+
+      #${modalId} .form-input::placeholder {
+        color: ${colors.textMuted};
+      }
+
+      #${modalId} .form-hint {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-top: 6px;
+      }
+
+      #${modalId} .temperature-range {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+      }
+
+      #${modalId} .range-preview {
+        margin-top: 20px;
+        padding: 16px;
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px dashed ${colors.success};
+        border-radius: 8px;
+        text-align: center;
+      }
+
+      #${modalId} .range-preview-label {
+        font-size: 12px;
+        color: ${colors.textMuted};
+        margin-bottom: 8px;
+      }
+
+      #${modalId} .range-preview-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: ${colors.success};
+      }
+
+      #${modalId} .modal-footer {
+        padding: 16px 24px;
+        border-top: 1px solid ${colors.inputBorder};
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+      }
+
+      #${modalId} .btn {
+        padding: 10px 24px;
+        font-size: 14px;
+        font-weight: 500;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      #${modalId} .btn-secondary {
+        background: ${colors.buttonSecondary};
+        color: ${colors.textSecondary};
+        border: 1px solid ${colors.inputBorder};
+      }
+
+      #${modalId} .btn-secondary:hover {
+        background: ${colors.inputBg};
+      }
+
+      #${modalId} .btn-primary {
+        background: ${colors.buttonPrimary};
+        color: #fff;
+      }
+
+      #${modalId} .btn-primary:hover {
+        background: ${colors.buttonPrimaryHover};
+      }
+
+      #${modalId} .btn-primary:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      #${modalId} .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255,255,255,0.3);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      #${modalId} .message {
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin-bottom: 16px;
+        font-size: 14px;
+      }
+
+      #${modalId} .message-error {
+        background: rgba(244, 67, 54, 0.1);
+        border: 1px solid ${colors.error};
+        color: ${colors.error};
+      }
+
+      #${modalId} .message-success {
+        background: rgba(76, 175, 80, 0.1);
+        border: 1px solid ${colors.success};
+        color: ${colors.success};
+      }
+
+      #${modalId} .loading-overlay {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 48px;
+        color: ${colors.textSecondary};
+      }
+
+      #${modalId} .loading-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid ${colors.inputBorder};
+        border-top-color: ${colors.buttonPrimary};
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 16px;
+      }
+    </style>
+
+    <div id="${modalId}" class="modal-overlay">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 class="modal-title">
+            <span>\u{1F321}\uFE0F</span>
+            Configurar Temperatura
+          </h2>
+          <button class="close-btn" id="${modalId}-close">&times;</button>
+        </div>
+
+        <div class="modal-body">
+          ${state.isLoading ? `
+            <div class="loading-overlay">
+              <div class="loading-spinner"></div>
+              <div>Carregando configura\xE7\xF5es...</div>
+            </div>
+          ` : `
+            ${state.error ? `
+              <div class="message message-error">${state.error}</div>
+            ` : ""}
+
+            ${state.successMessage ? `
+              <div class="message message-success">${state.successMessage}</div>
+            ` : ""}
+
+            <div class="customer-info">
+              <div class="customer-label">Shopping / Cliente</div>
+              <div class="customer-name">${state.customerName || "N\xE3o identificado"}</div>
+            </div>
+
+            <div class="form-group">
+              <label class="form-label">Faixa de Temperatura Ideal</label>
+              <div class="temperature-range">
+                <div>
+                  <input
+                    type="number"
+                    id="${modalId}-min"
+                    class="form-input"
+                    placeholder="M\xEDnima"
+                    value="${minValue}"
+                    step="0.5"
+                    min="0"
+                    max="50"
+                  />
+                  <div class="form-hint">Temperatura m\xEDnima (\xB0C)</div>
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    id="${modalId}-max"
+                    class="form-input"
+                    placeholder="M\xE1xima"
+                    value="${maxValue}"
+                    step="0.5"
+                    min="0"
+                    max="50"
+                  />
+                  <div class="form-hint">Temperatura m\xE1xima (\xB0C)</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="range-preview" id="${modalId}-preview">
+              <div class="range-preview-label">Faixa configurada</div>
+              <div class="range-preview-value" id="${modalId}-preview-value">
+                ${minValue && maxValue ? `${minValue}\xB0C - ${maxValue}\xB0C` : "N\xE3o definida"}
+              </div>
+            </div>
+          `}
+        </div>
+
+        ${!state.isLoading ? `
+          <div class="modal-footer">
+            <button class="btn btn-secondary" id="${modalId}-cancel">Cancelar</button>
+            <button class="btn btn-primary" id="${modalId}-save" ${state.isSaving ? "disabled" : ""}>
+              ${state.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
+            </button>
+          </div>
+        ` : ""}
+      </div>
+    </div>
+  `;
+  const closeBtn = document.getElementById(`${modalId}-close`);
+  const cancelBtn = document.getElementById(`${modalId}-cancel`);
+  const saveBtn = document.getElementById(`${modalId}-save`);
+  const minInput = document.getElementById(`${modalId}-min`);
+  const maxInput = document.getElementById(`${modalId}-max`);
+  const previewValue = document.getElementById(`${modalId}-preview-value`);
+  const overlay = document.getElementById(modalId);
+  closeBtn?.addEventListener("click", onClose);
+  cancelBtn?.addEventListener("click", onClose);
+  overlay?.addEventListener("click", (e) => {
+    if (e.target === overlay) onClose();
+  });
+  const updatePreview = () => {
+    if (previewValue && minInput && maxInput) {
+      const min = minInput.value;
+      const max = maxInput.value;
+      if (min && max) {
+        previewValue.textContent = `${min}\xB0C - ${max}\xB0C`;
+      } else {
+        previewValue.textContent = "N\xE3o definida";
+      }
+    }
+  };
+  minInput?.addEventListener("input", updatePreview);
+  maxInput?.addEventListener("input", updatePreview);
+  saveBtn?.addEventListener("click", async () => {
+    if (!minInput || !maxInput) return;
+    const min = parseFloat(minInput.value);
+    const max = parseFloat(maxInput.value);
+    if (isNaN(min) || isNaN(max)) {
+      state.error = "Por favor, preencha ambos os valores.";
+      renderModal3(container, state, modalId, onClose, onSave);
+      return;
+    }
+    if (min >= max) {
+      state.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
+      renderModal3(container, state, modalId, onClose, onSave);
+      return;
+    }
+    if (min < 0 || max > 50) {
+      state.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
+      renderModal3(container, state, modalId, onClose, onSave);
+      return;
+    }
+    await onSave(min, max);
+  });
+}
+function openTemperatureSettingsModal(params) {
+  const modalId = `myio-temp-settings-${Date.now()}`;
+  const state = {
+    customerId: params.customerId,
+    customerName: params.customerName || "",
+    token: params.token,
+    theme: params.theme || "dark",
+    minTemperature: null,
+    maxTemperature: null,
+    isLoading: true,
+    isSaving: false,
+    error: null,
+    successMessage: null
+  };
+  const container = document.createElement("div");
+  container.id = `${modalId}-container`;
+  document.body.appendChild(container);
+  const destroy = () => {
+    container.remove();
+    params.onClose?.();
+  };
+  const handleSave = async (min, max) => {
+    state.isSaving = true;
+    state.error = null;
+    state.successMessage = null;
+    renderModal3(container, state, modalId, destroy, handleSave);
+    try {
+      await saveCustomerAttributes(state.customerId, state.token, min, max);
+      state.minTemperature = min;
+      state.maxTemperature = max;
+      state.isSaving = false;
+      state.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
+      renderModal3(container, state, modalId, destroy, handleSave);
+      params.onSave?.({ minTemperature: min, maxTemperature: max });
+      setTimeout(() => {
+        destroy();
+      }, 1500);
+    } catch (error) {
+      state.isSaving = false;
+      state.error = `Erro ao salvar: ${error.message}`;
+      renderModal3(container, state, modalId, destroy, handleSave);
+    }
+  };
+  renderModal3(container, state, modalId, destroy, handleSave);
+  fetchCustomerAttributes(state.customerId, state.token).then(({ minTemperature, maxTemperature }) => {
+    state.minTemperature = minTemperature;
+    state.maxTemperature = maxTemperature;
+    state.isLoading = false;
+    renderModal3(container, state, modalId, destroy, handleSave);
+  }).catch((error) => {
+    state.isLoading = false;
+    state.error = `Erro ao carregar: ${error.message}`;
+    renderModal3(container, state, modalId, destroy, handleSave);
+  });
+  return { destroy };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CHART_COLORS,
   ConnectionStatusType,
+  DEFAULT_CLAMP_RANGE,
   DeviceStatusType,
   MyIOChartModal,
   MyIODraggableCard,
@@ -19649,6 +21985,7 @@ function openGoalsPanel(params) {
   MyIOToast,
   addDetectionContext,
   addNamespace,
+  aggregateByDay,
   averageByDay,
   buildListItemsThingsboardByUniqueDatasource,
   buildMyioIngestionAuth,
@@ -19657,6 +21994,8 @@ function openGoalsPanel(params) {
   calcDeltaPercent,
   calculateDeviceStatus,
   calculateDeviceStatusWithRanges,
+  calculateStats,
+  clampTemperature,
   classify,
   classifyWaterLabel,
   classifyWaterLabels,
@@ -19669,9 +22008,11 @@ function openGoalsPanel(params) {
   detectDeviceType,
   determineInterval,
   deviceStatusIcons,
+  exportTemperatureCSV,
   exportToCSV,
   exportToCSVAll,
   extractMyIOCredentials,
+  fetchTemperatureData,
   fetchThingsboardCustomerAttrsFromStorage,
   fetchThingsboardCustomerServerScopeAttrs,
   findValue,
@@ -19685,6 +22026,7 @@ function openGoalsPanel(params) {
   formatEnergy,
   formatNumberReadable,
   formatTankHeadFromCm,
+  formatTemperature,
   formatWaterByGroup,
   formatWaterVolumeM3,
   getAuthCacheStats,
@@ -19699,6 +22041,7 @@ function openGoalsPanel(params) {
   getValueByDatakeyLegacy,
   getWaterCategories,
   groupByDay,
+  interpolateTemperature,
   isDeviceOffline,
   isValidConnectionStatus,
   isValidDeviceStatus,
@@ -19716,6 +22059,9 @@ function openGoalsPanel(params) {
   openDemandModal,
   openGoalsPanel,
   openRealTimeTelemetryModal,
+  openTemperatureComparisonModal,
+  openTemperatureModal,
+  openTemperatureSettingsModal,
   parseInputDateToDate,
   renderCardComponent,
   renderCardComponentEnhanced,