myio-js-library 0.1.133 → 0.1.135

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

@@ -6973,6 +6973,632 @@ ${rangeText}`;
     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 {
@@ -8411,7 +9037,7 @@ ${rangeText}`;
   var jsPdfLoaded = false;
   var _jspdfPromise = null;
   var cssInjected = false;
-  var STRINGS = {
+  var STRINGS2 = {
     "pt-BR": {
       title: "Demanda",
       period: "Per\xEDodo",
@@ -8998,6 +9624,32 @@ ${rangeText}`;
       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();
@@ -9136,7 +9788,7 @@ ${rangeText}`;
     }
     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;
@@ -9702,6 +10354,12 @@ ${rangeText}`;
           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;
@@ -9733,11 +10391,21 @@ ${rangeText}`;
             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 || "";
@@ -9745,6 +10413,20 @@ ${rangeText}`;
               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, {
@@ -9776,11 +10458,21 @@ ${rangeText}`;
                     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 || "";
@@ -9814,10 +10506,17 @@ ${rangeText}`;
                   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"
+                        });
+                      }
                     }
                   }
                 },
@@ -10082,6 +10781,16 @@ ${rangeText}`;
               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;
@@ -10707,42 +11416,64 @@ ${rangeText}`;
       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);
           }
         });
@@ -18694,6 +19425,7 @@ ${rangeText}`;
   exports.openDashboardPopupWaterTank = openDashboardPopupWaterTank;
   exports.openDemandModal = openDemandModal;
   exports.openGoalsPanel = openGoalsPanel;
+  exports.openRealTimeTelemetryModal = openRealTimeTelemetryModal;
   exports.parseInputDateToDate = parseInputDateToDate;
   exports.renderCardComponent = renderCardComponent;
   exports.renderCardComponentEnhanced = renderCardComponent2;