myio-js-library 0.1.133 → 0.1.135

package/dist/index.cjs

@@ -643,6 +643,7 @@ __export(index_exports, {
   openDashboardPopupWaterTank: () => openDashboardPopupWaterTank,
   openDemandModal: () => openDemandModal,
   openGoalsPanel: () => openGoalsPanel,
+  openRealTimeTelemetryModal: () => openRealTimeTelemetryModal,
   parseInputDateToDate: () => parseInputDateToDate,
   renderCardComponent: () => renderCardComponent,
   renderCardComponentEnhanced: () => renderCardComponent2,
@@ -7070,6 +7071,632 @@ if (typeof module !== "undefined" && module.exports) {
   module.exports = { MyIOToast };
 }
 
+// src/components/RealTimeTelemetryModal.ts
+var TELEMETRY_CONFIG = {
+  voltage: { label: "Tens\xE3o", unit: "V", icon: "\u26A1", decimals: 1 },
+  current: { label: "Corrente", unit: "A", icon: "\u{1F50C}", decimals: 2 },
+  power: { label: "Pot\xEAncia", unit: "kW", icon: "\u2699\uFE0F", decimals: 2 },
+  energy: { label: "Energia", unit: "kWh", icon: "\u{1F4CA}", decimals: 1 },
+  temperature: { label: "Temperatura", unit: "\xB0C", icon: "\u{1F321}\uFE0F", decimals: 1 },
+  activePower: { label: "Pot\xEAncia Ativa", unit: "kW", icon: "\u2699\uFE0F", decimals: 2 },
+  reactivePower: { label: "Pot\xEAncia Reativa", unit: "kVAr", icon: "\u{1F504}", decimals: 2 },
+  apparentPower: { label: "Pot\xEAncia Aparente", unit: "kVA", icon: "\u{1F4C8}", decimals: 2 },
+  powerFactor: { label: "Fator de Pot\xEAncia", unit: "", icon: "\u{1F4D0}", decimals: 3 }
+};
+var STRINGS = {
+  "pt-BR": {
+    title: "Telemetrias em Tempo Real",
+    close: "Fechar",
+    pause: "Pausar",
+    resume: "Retomar",
+    export: "Exportar CSV",
+    autoUpdate: "Atualiza\xE7\xE3o autom\xE1tica",
+    lastUpdate: "\xDAltima atualiza\xE7\xE3o",
+    noData: "Sem dados",
+    loading: "Carregando...",
+    error: "Erro ao carregar telemetrias",
+    trend_up: "Aumentando",
+    trend_down: "Diminuindo",
+    trend_stable: "Est\xE1vel"
+  },
+  "en-US": {
+    title: "Real-Time Telemetry",
+    close: "Close",
+    pause: "Pause",
+    resume: "Resume",
+    export: "Export CSV",
+    autoUpdate: "Auto-update",
+    lastUpdate: "Last update",
+    noData: "No data",
+    loading: "Loading...",
+    error: "Error loading telemetry",
+    trend_up: "Increasing",
+    trend_down: "Decreasing",
+    trend_stable: "Stable"
+  }
+};
+async function openRealTimeTelemetryModal(params) {
+  const {
+    token,
+    deviceId,
+    deviceLabel = "Dispositivo",
+    telemetryKeys = ["voltage", "current", "power", "energy"],
+    refreshInterval = 8e3,
+    historyPoints = 50,
+    onClose,
+    locale = "pt-BR"
+  } = params;
+  const strings = STRINGS[locale] || STRINGS["pt-BR"];
+  let refreshIntervalId = null;
+  let isPaused = false;
+  let telemetryHistory = /* @__PURE__ */ new Map();
+  let chart = null;
+  const overlay = document.createElement("div");
+  overlay.className = "myio-realtime-telemetry-overlay";
+  overlay.innerHTML = `
+    <style>
+      .myio-realtime-telemetry-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        padding: 20px;
+        animation: fadeIn 0.2s ease;
+      }
+
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      .myio-realtime-telemetry-container {
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+        max-width: 1200px;
+        width: 100%;
+        max-height: 90vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        animation: slideUp 0.3s ease;
+      }
+
+      @keyframes slideUp {
+        from { transform: translateY(20px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+
+      .myio-realtime-telemetry-header {
+        padding: 20px 24px;
+        border-bottom: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+      }
+
+      .myio-realtime-telemetry-title {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .myio-realtime-telemetry-close {
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        color: white;
+        font-size: 24px;
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+      }
+
+      .myio-realtime-telemetry-close:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: scale(1.1);
+      }
+
+      .myio-realtime-telemetry-body {
+        padding: 24px;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      .myio-telemetry-cards-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      .myio-telemetry-card {
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        border-radius: 12px;
+        padding: 16px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+      }
+
+      .myio-telemetry-card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      }
+
+      .myio-telemetry-card-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+        font-size: 14px;
+        color: #555;
+        font-weight: 500;
+      }
+
+      .myio-telemetry-card-icon {
+        font-size: 20px;
+      }
+
+      .myio-telemetry-card-value {
+        font-size: 28px;
+        font-weight: 700;
+        color: #2c3e50;
+        margin-bottom: 4px;
+      }
+
+      .myio-telemetry-card-trend {
+        font-size: 12px;
+        color: #777;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .myio-telemetry-card-trend.up {
+        color: #27ae60;
+      }
+
+      .myio-telemetry-card-trend.down {
+        color: #e74c3c;
+      }
+
+      .myio-telemetry-chart-container {
+        background: white;
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-bottom: 20px;
+      }
+
+      .myio-telemetry-chart-title {
+        font-size: 16px;
+        font-weight: 600;
+        margin: 0 0 16px 0;
+        color: #2c3e50;
+      }
+
+      .myio-telemetry-chart {
+        height: 200px;
+      }
+
+      .myio-realtime-telemetry-footer {
+        padding: 16px 24px;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: #f8f9fa;
+      }
+
+      .myio-telemetry-status {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-size: 14px;
+        color: #555;
+      }
+
+      .myio-telemetry-status-indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #27ae60;
+        animation: pulse 2s infinite;
+      }
+
+      .myio-telemetry-status-indicator.paused {
+        background: #e74c3c;
+        animation: none;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      .myio-telemetry-actions {
+        display: flex;
+        gap: 12px;
+      }
+
+      .myio-telemetry-btn {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .myio-telemetry-btn-primary {
+        background: #667eea;
+        color: white;
+      }
+
+      .myio-telemetry-btn-primary:hover {
+        background: #5568d3;
+        transform: translateY(-1px);
+      }
+
+      .myio-telemetry-btn-secondary {
+        background: #e0e0e0;
+        color: #333;
+      }
+
+      .myio-telemetry-btn-secondary:hover {
+        background: #d0d0d0;
+        transform: translateY(-1px);
+      }
+
+      .myio-telemetry-loading {
+        text-align: center;
+        padding: 40px;
+        color: #999;
+        font-size: 16px;
+      }
+
+      .myio-telemetry-error {
+        text-align: center;
+        padding: 40px;
+        color: #e74c3c;
+        font-size: 16px;
+      }
+    </style>
+
+    <div class="myio-realtime-telemetry-container">
+      <div class="myio-realtime-telemetry-header">
+        <h2 class="myio-realtime-telemetry-title">
+          \u26A1 ${strings.title} - ${deviceLabel}
+        </h2>
+        <button class="myio-realtime-telemetry-close" id="close-btn" title="${strings.close}">
+          \xD7
+        </button>
+      </div>
+
+      <div class="myio-realtime-telemetry-body">
+        <div class="myio-telemetry-loading" id="loading-state">
+          ${strings.loading}
+        </div>
+
+        <div id="telemetry-content" style="display: none;">
+          <div class="myio-telemetry-cards-grid" id="telemetry-cards"></div>
+
+          <div class="myio-telemetry-chart-container" id="chart-container" style="display: none;">
+            <h3 class="myio-telemetry-chart-title" id="chart-title">Pot\xEAncia (\xFAltimos 5 min)</h3>
+            <canvas class="myio-telemetry-chart" id="telemetry-chart"></canvas>
+          </div>
+        </div>
+
+        <div class="myio-telemetry-error" id="error-state" style="display: none;">
+          ${strings.error}
+        </div>
+      </div>
+
+      <div class="myio-realtime-telemetry-footer">
+        <div class="myio-telemetry-status">
+          <span class="myio-telemetry-status-indicator" id="status-indicator"></span>
+          <span id="status-text">${strings.autoUpdate}: ON</span>
+          <span>\u2022</span>
+          <span id="last-update-text">${strings.lastUpdate}: --:--:--</span>
+        </div>
+
+        <div class="myio-telemetry-actions">
+          <button class="myio-telemetry-btn myio-telemetry-btn-secondary" id="pause-btn">
+            <span id="pause-btn-icon">\u23F8\uFE0F</span>
+            <span id="pause-btn-text">${strings.pause}</span>
+          </button>
+          <button class="myio-telemetry-btn myio-telemetry-btn-primary" id="export-btn">
+            \u2B07\uFE0F ${strings.export}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  const closeBtn = document.getElementById("close-btn");
+  const pauseBtn = document.getElementById("pause-btn");
+  const pauseBtnIcon = document.getElementById("pause-btn-icon");
+  const pauseBtnText = document.getElementById("pause-btn-text");
+  const exportBtn = document.getElementById("export-btn");
+  const loadingState = document.getElementById("loading-state");
+  const telemetryContent = document.getElementById("telemetry-content");
+  const errorState = document.getElementById("error-state");
+  const telemetryCards = document.getElementById("telemetry-cards");
+  const chartContainer = document.getElementById("chart-container");
+  const chartCanvas = document.getElementById("telemetry-chart");
+  const statusIndicator = document.getElementById("status-indicator");
+  const statusText = document.getElementById("status-text");
+  const lastUpdateText = document.getElementById("last-update-text");
+  function closeModal() {
+    if (refreshIntervalId) {
+      clearInterval(refreshIntervalId);
+      refreshIntervalId = null;
+    }
+    if (chart) {
+      chart.destroy();
+      chart = null;
+    }
+    overlay.remove();
+    if (onClose) {
+      onClose();
+    }
+  }
+  async function fetchLatestTelemetry() {
+    const keys = telemetryKeys.join(",");
+    const url = `/api/plugins/telemetry/DEVICE/${deviceId}/values/timeseries?keys=${keys}&limit=1&agg=NONE`;
+    const response = await fetch(url, {
+      headers: {
+        "X-Authorization": `Bearer ${token}`
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch telemetry: ${response.statusText}`);
+    }
+    return await response.json();
+  }
+  function processTelemetryData(data) {
+    const values = [];
+    for (const key of telemetryKeys) {
+      const telemetryData = data[key];
+      if (!telemetryData || telemetryData.length === 0) continue;
+      const latest = telemetryData[0];
+      const config = TELEMETRY_CONFIG[key] || { label: key, unit: "", icon: "\u{1F4CA}", decimals: 2 };
+      const numValue = Number(latest.value) || 0;
+      const formatted = numValue.toFixed(config.decimals);
+      values.push({
+        key,
+        value: numValue,
+        timestamp: latest.ts,
+        formatted: `${formatted} ${config.unit}`,
+        unit: config.unit,
+        icon: config.icon,
+        label: config.label,
+        trend: "stable"
+        // Will be calculated based on history
+      });
+    }
+    return values;
+  }
+  function calculateTrend(key, currentValue) {
+    const history = telemetryHistory.get(key);
+    if (!history || history.length < 2) return "stable";
+    const previousValue = history[history.length - 2].y;
+    const diff = currentValue - previousValue;
+    const threshold = previousValue * 0.02;
+    if (diff > threshold) return "up";
+    if (diff < -threshold) return "down";
+    return "stable";
+  }
+  function updateTelemetryCards(values) {
+    telemetryCards.innerHTML = values.map((tel) => {
+      const trend = calculateTrend(tel.key, tel.value);
+      const trendIcon = trend === "up" ? "\u2197" : trend === "down" ? "\u2198" : "\u2192";
+      const trendClass = trend;
+      const trendLabel = strings[`trend_${trend}`] || "";
+      return `
+        <div class="myio-telemetry-card">
+          <div class="myio-telemetry-card-header">
+            <span class="myio-telemetry-card-icon">${tel.icon}</span>
+            <span>${tel.label}</span>
+          </div>
+          <div class="myio-telemetry-card-value">${tel.formatted}</div>
+          <div class="myio-telemetry-card-trend ${trendClass}">
+            ${trendIcon} ${trendLabel}
+          </div>
+        </div>
+      `;
+    }).join("");
+  }
+  function updateHistory(values) {
+    const now = Date.now();
+    for (const tel of values) {
+      if (!telemetryHistory.has(tel.key)) {
+        telemetryHistory.set(tel.key, []);
+      }
+      const history = telemetryHistory.get(tel.key);
+      history.push({ x: now, y: tel.value });
+      if (history.length > historyPoints) {
+        history.shift();
+      }
+    }
+    if (telemetryHistory.has("power") && chart) {
+      const powerHistory = telemetryHistory.get("power");
+      chart.data.datasets[0].data = powerHistory;
+      chart.update("none");
+    }
+  }
+  function initializeChart() {
+    const Chart = window.Chart;
+    if (!Chart) {
+      console.warn("[RealTimeTelemetry] Chart.js not loaded");
+      return;
+    }
+    chartContainer.style.display = "block";
+    chart = new Chart(chartCanvas, {
+      type: "line",
+      data: {
+        datasets: [{
+          label: "Pot\xEAncia",
+          data: [],
+          borderColor: "#667eea",
+          backgroundColor: "rgba(102, 126, 234, 0.1)",
+          borderWidth: 2,
+          fill: true,
+          tension: 0.4,
+          pointRadius: 0
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            callbacks: {
+              title: function(context) {
+                const timestamp = context[0].parsed.x;
+                const date = new Date(timestamp);
+                return date.toLocaleTimeString(locale);
+              },
+              label: function(context) {
+                return `${context.parsed.y.toFixed(2)} kW`;
+              }
+            }
+          }
+        },
+        scales: {
+          x: {
+            type: "linear",
+            ticks: {
+              callback: function(value) {
+                const date = new Date(value);
+                return date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
+              }
+            }
+          },
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: "kW"
+            }
+          }
+        }
+      }
+    });
+  }
+  async function refreshData() {
+    try {
+      const data = await fetchLatestTelemetry();
+      const values = processTelemetryData(data);
+      updateHistory(values);
+      updateTelemetryCards(values);
+      const now = /* @__PURE__ */ new Date();
+      lastUpdateText.textContent = `${strings.lastUpdate}: ${now.toLocaleTimeString(locale)}`;
+      if (loadingState.style.display !== "none") {
+        loadingState.style.display = "none";
+        telemetryContent.style.display = "block";
+        if (telemetryKeys.includes("power")) {
+          initializeChart();
+        }
+      }
+    } catch (error) {
+      console.error("[RealTimeTelemetry] Error fetching data:", error);
+      errorState.style.display = "block";
+      loadingState.style.display = "none";
+      telemetryContent.style.display = "none";
+    }
+  }
+  function togglePause() {
+    isPaused = !isPaused;
+    if (isPaused) {
+      if (refreshIntervalId) {
+        clearInterval(refreshIntervalId);
+        refreshIntervalId = null;
+      }
+      pauseBtnIcon.textContent = "\u25B6\uFE0F";
+      pauseBtnText.textContent = strings.resume;
+      statusIndicator.classList.add("paused");
+      statusText.textContent = `${strings.autoUpdate}: OFF`;
+    } else {
+      refreshIntervalId = window.setInterval(refreshData, refreshInterval);
+      pauseBtnIcon.textContent = "\u23F8\uFE0F";
+      pauseBtnText.textContent = strings.pause;
+      statusIndicator.classList.remove("paused");
+      statusText.textContent = `${strings.autoUpdate}: ON`;
+    }
+  }
+  function exportToCSV2() {
+    const rows = [];
+    rows.push("Timestamp," + telemetryKeys.map((k) => TELEMETRY_CONFIG[k]?.label || k).join(","));
+    let maxLength = 0;
+    for (const key of telemetryKeys) {
+      const history = telemetryHistory.get(key);
+      if (history && history.length > maxLength) {
+        maxLength = history.length;
+      }
+    }
+    for (let i = 0; i < maxLength; i++) {
+      const row = [];
+      let timestamp = "";
+      for (const key of telemetryKeys) {
+        const history = telemetryHistory.get(key);
+        if (history && history[i]) {
+          if (!timestamp) {
+            timestamp = new Date(history[i].x).toISOString();
+          }
+          row.push(history[i].y.toFixed(2));
+        } else {
+          row.push("");
+        }
+      }
+      if (timestamp) {
+        rows.push(timestamp + "," + row.join(","));
+      }
+    }
+    const csv = rows.join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `telemetry_${deviceLabel}_${(/* @__PURE__ */ new Date()).toISOString()}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  closeBtn.addEventListener("click", closeModal);
+  pauseBtn.addEventListener("click", togglePause);
+  exportBtn.addEventListener("click", exportToCSV2);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) {
+      closeModal();
+    }
+  });
+  await refreshData();
+  refreshIntervalId = window.setInterval(refreshData, refreshInterval);
+  return {
+    destroy: closeModal
+  };
+}
+
 // src/components/premium-modals/internal/styles/tokens.ts
 var CSS_TOKENS = `
 :root {
@@ -8511,7 +9138,7 @@ var zoomPluginLoaded = false;
 var jsPdfLoaded = false;
 var _jspdfPromise = null;
 var cssInjected = false;
-var STRINGS = {
+var STRINGS2 = {
   "pt-BR": {
     title: "Demanda",
     period: "Per\xEDodo",
@@ -9098,6 +9725,32 @@ function formatDateTime(date, locale) {
     year: "numeric"
   });
 }
+function interpolateTemperatureData(rawPoints) {
+  if (rawPoints.length === 0) return [];
+  const interpolated = [];
+  const interval = 30 * 60 * 1e3;
+  const sorted = [...rawPoints].sort((a, b) => a.x - b.x);
+  const startTime = sorted[0].x;
+  const endTime = sorted[sorted.length - 1].x;
+  let lastKnownValue = sorted[0].y;
+  let dataIndex = 0;
+  for (let time = startTime; time <= endTime; time += interval) {
+    const actualPoint = sorted.find((p, idx) => {
+      if (idx >= dataIndex && Math.abs(p.x - time) < 5 * 60 * 1e3) {
+        dataIndex = idx + 1;
+        return true;
+      }
+      return false;
+    });
+    if (actualPoint) {
+      lastKnownValue = actualPoint.y;
+      interpolated.push({ x: time, y: lastKnownValue });
+    } else {
+      interpolated.push({ x: time, y: lastKnownValue });
+    }
+  }
+  return interpolated;
+}
 async function fetchTelemetryData(token, deviceId, startDate, endDate, queryParams) {
   const startTs = new Date(startDate).getTime();
   const endTs = new Date(endDate).getTime();
@@ -9236,7 +9889,7 @@ async function openDemandModal(params) {
   }
   const styles = { ...DEFAULT_STYLES, ...params.styles };
   const locale = params.locale || "pt-BR";
-  const strings = STRINGS[locale] || STRINGS["pt-BR"];
+  const strings = STRINGS2[locale] || STRINGS2["pt-BR"];
   await loadExternalLibraries();
   injectCSS(styles);
   const container = typeof params.container === "string" ? document.querySelector(params.container) : params.container || document.body;
@@ -9810,6 +10463,12 @@ async function openDemandModal(params) {
         params.timezoneOffset
         // Pass timezone offset (default: -3)
       );
+      if (params.readingType === "temperature" && !chartData.isEmpty) {
+        chartData.series = chartData.series.map((series) => ({
+          ...series,
+          points: interpolateTemperatureData(series.points)
+        }));
+      }
       if (chartData.isEmpty) {
         errorEl.style.display = "flex";
         errorText.textContent = strings.noData;
@@ -9841,11 +10500,21 @@ async function openDemandModal(params) {
           title: function(context) {
             const timestamp = context[0].parsed.x;
             const date = new Date(timestamp);
-            return date.toLocaleDateString(locale, {
-              day: "2-digit",
-              month: "2-digit",
-              year: "numeric"
-            });
+            if (params.readingType === "temperature") {
+              return date.toLocaleString(locale, {
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric",
+                hour: "2-digit",
+                minute: "2-digit"
+              });
+            } else {
+              return date.toLocaleDateString(locale, {
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric"
+              });
+            }
           },
           label: function(context) {
             const seriesLabel = context.dataset.label || "";
@@ -9853,6 +10522,20 @@ async function openDemandModal(params) {
             return `${seriesLabel}: ${value.toFixed(2)} kW`;
           }
         };
+        chart.options.scales.x.ticks.callback = function(value) {
+          const date = new Date(value);
+          if (params.readingType === "temperature") {
+            return date.toLocaleTimeString(locale, {
+              hour: "2-digit",
+              minute: "2-digit"
+            });
+          } else {
+            return date.toLocaleDateString(locale, {
+              day: "2-digit",
+              month: "2-digit"
+            });
+          }
+        };
         chart.update();
       } else {
         chart = new Chart(chartCanvas, {
@@ -9884,11 +10567,21 @@ async function openDemandModal(params) {
                   title: function(context) {
                     const timestamp = context[0].parsed.x;
                     const date = new Date(timestamp);
-                    return date.toLocaleDateString(locale, {
-                      day: "2-digit",
-                      month: "2-digit",
-                      year: "numeric"
-                    });
+                    if (params.readingType === "temperature") {
+                      return date.toLocaleString(locale, {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit"
+                      });
+                    } else {
+                      return date.toLocaleDateString(locale, {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric"
+                      });
+                    }
                   },
                   label: function(context) {
                     const seriesLabel = context.dataset.label || "";
@@ -9922,10 +10615,17 @@ async function openDemandModal(params) {
                 ticks: {
                   callback: function(value) {
                     const date = new Date(value);
-                    return date.toLocaleDateString(locale, {
-                      day: "2-digit",
-                      month: "2-digit"
-                    });
+                    if (params.readingType === "temperature") {
+                      return date.toLocaleTimeString(locale, {
+                        hour: "2-digit",
+                        minute: "2-digit"
+                      });
+                    } else {
+                      return date.toLocaleDateString(locale, {
+                        day: "2-digit",
+                        month: "2-digit"
+                      });
+                    }
                   }
                 }
               },
@@ -10190,6 +10890,16 @@ var EnergyModalView = class {
               Exportar CSV
             </button>
             ${this.config.params.readingType === "energy" && this.config.params.mode !== "comparison" ? `
+            <button id="view-demand-btn" class="myio-btn myio-btn-secondary" style="
+              background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
+              color: white;
+              border: none;
+              transition: all 0.3s ease;
+              box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
+            ">
+              <span style="font-size: 16px; margin-right: 4px;">\u{1F4CA}</span>
+              Pico de Demanda
+            </button>
             <button id="view-telemetry-btn" class="myio-btn myio-btn-secondary" style="
               background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 100%);
               color: white;
@@ -10815,42 +11525,64 @@ var EnergyModalView = class {
     if (loadBtn) {
       loadBtn.addEventListener("click", () => this.loadData());
     }
-    const viewTelemetryBtn = document.getElementById("view-telemetry-btn");
-    if (viewTelemetryBtn) {
-      viewTelemetryBtn.addEventListener("click", async () => {
+    const viewDemandBtn = document.getElementById("view-demand-btn");
+    if (viewDemandBtn) {
+      viewDemandBtn.addEventListener("click", async () => {
         try {
-          console.log("[EnergyModalView] Opening demand modal");
+          console.log("[EnergyModalView] Opening demand modal (Pico de Demanda)");
           const jwtToken = localStorage.getItem("jwt_token");
           if (!jwtToken) {
             throw new Error("Token de autentica\xE7\xE3o n\xE3o encontrado");
           }
-          let startDate = this.config.params.startDate;
-          let endDate = this.config.params.endDate;
+          let startDate;
+          let endDate;
           if (this.dateRangePicker) {
-            const dates = this.dateRangePicker.getDates();
-            if (dates.startISO && dates.endISO) {
-              startDate = dates.startISO.split("T")[0];
-              endDate = dates.endISO.split("T")[0];
-            }
+            const dates = this.dateRangePicker.getRange();
+            startDate = dates.startISO;
+            endDate = dates.endISO;
+          } else {
+            startDate = this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString() : this.config.params.startDate;
+            endDate = this.config.params.endDate instanceof Date ? this.config.params.endDate.toISOString() : this.config.params.endDate;
           }
           await openDemandModal({
             token: jwtToken,
             deviceId: this.config.params.deviceId,
-            startDate: startDate instanceof Date ? startDate.toISOString().split("T")[0] : startDate,
-            endDate: endDate instanceof Date ? endDate.toISOString().split("T")[0] : endDate,
-            label: this.config.params.label || "Dispositivo",
-            telemetryQuery: {
-              keys: "consumption",
-              intervalType: "MILLISECONDS",
-              interval: 864e5,
-              // 24 hours - default, can be changed inside modal
-              agg: "MAX",
-              // default, can be changed inside modal
-              limit: 1e4
-            }
+            startDate,
+            endDate,
+            label: this.config.params.deviceLabel || "Dispositivo",
+            locale: "pt-BR",
+            readingType: this.config.params.readingType || "energy",
+            enableRealTimeMode: true,
+            realTimeInterval: 8e3,
+            realTimeAutoScroll: true
           });
         } catch (error) {
           console.error("[EnergyModalView] Error opening demand modal:", error);
+          this.showError("Erro ao abrir pico de demanda: " + error.message);
+        }
+      });
+    }
+    const viewTelemetryBtn = document.getElementById("view-telemetry-btn");
+    if (viewTelemetryBtn) {
+      viewTelemetryBtn.addEventListener("click", async () => {
+        try {
+          console.log("[EnergyModalView] Opening real-time telemetry modal");
+          const jwtToken = localStorage.getItem("jwt_token");
+          if (!jwtToken) {
+            throw new Error("Token de autentica\xE7\xE3o n\xE3o encontrado");
+          }
+          await openRealTimeTelemetryModal({
+            token: jwtToken,
+            deviceId: this.config.params.deviceId,
+            deviceLabel: this.config.params.deviceLabel || "Dispositivo",
+            telemetryKeys: ["voltage", "current", "power", "energy"],
+            refreshInterval: 8e3,
+            // 8 seconds
+            historyPoints: 50,
+            locale: "pt-BR"
+          });
+        } catch (error) {
+          console.error("[EnergyModalView] Error opening real-time telemetry modal:", error);
           this.showError("Erro ao abrir telemetrias: " + error.message);
         }
       });
@@ -18845,6 +19577,7 @@ function openGoalsPanel(params) {
   openDashboardPopupWaterTank,
   openDemandModal,
   openGoalsPanel,
+  openRealTimeTelemetryModal,
   parseInputDateToDate,
   renderCardComponent,
   renderCardComponentEnhanced,