myio-js-library 0.1.136 → 0.1.137

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

@@ -6983,8 +6983,8 @@ ${rangeText}`;
     total_current: { label: "Corrente Total", unit: "A", icon: "\u{1F50C}", decimals: 2 },
     current: { label: "Corrente", unit: "A", icon: "\u{1F50C}", decimals: 2 },
     // Power and Energy
-    consumption: { label: "Consumo", unit: "kW", icon: "\u2699\uFE0F", decimals: 2 },
-    power: { label: "Pot\xEAncia", unit: "kW", icon: "\u2699\uFE0F", decimals: 2 },
+    consumption: { label: "Pot\xEAncia", unit: "W", icon: "\u2699\uFE0F", decimals: 0 },
+    power: { label: "Pot\xEAncia", unit: "W", icon: "\u2699\uFE0F", decimals: 0 },
     energy: { label: "Energia", unit: "kWh", icon: "\u{1F4CA}", 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 },
@@ -7040,7 +7040,9 @@ ${rangeText}`;
     let refreshIntervalId = null;
     let isPaused = false;
     let telemetryHistory = /* @__PURE__ */ new Map();
+    let lastKnownValues = /* @__PURE__ */ new Map();
     let chart = null;
+    let selectedChartKey = "consumption";
     const overlay = document.createElement("div");
     overlay.className = "myio-realtime-telemetry-overlay";
     overlay.innerHTML = `
@@ -7201,7 +7203,27 @@ ${rangeText}`;
       }
 
       .myio-telemetry-chart {
-        height: 200px;
+        height: 250px;
+      }
+
+      .myio-telemetry-selector {
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        background: white;
+        cursor: pointer;
+        transition: border-color 0.2s;
+      }
+
+      .myio-telemetry-selector:hover {
+        border-color: #667eea;
+      }
+
+      .myio-telemetry-selector:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
       }
 
       .myio-realtime-telemetry-footer {
@@ -7311,7 +7333,16 @@ ${rangeText}`;
           <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>
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+              <h3 class="myio-telemetry-chart-title" id="chart-title" style="margin: 0;">Hist\xF3rico de Telemetria</h3>
+              <select id="chart-key-selector" class="myio-telemetry-selector">
+                <option value="consumption">Pot\xEAncia</option>
+                <option value="total_current">Corrente Total</option>
+                <option value="voltage_a">Tens\xE3o Fase A</option>
+                <option value="voltage_b">Tens\xE3o Fase B</option>
+                <option value="voltage_c">Tens\xE3o Fase C</option>
+              </select>
+            </div>
             <canvas class="myio-telemetry-chart" id="telemetry-chart"></canvas>
           </div>
         </div>
@@ -7353,6 +7384,7 @@ ${rangeText}`;
     const telemetryCards = document.getElementById("telemetry-cards");
     const chartContainer = document.getElementById("chart-container");
     const chartCanvas = document.getElementById("telemetry-chart");
+    const chartKeySelector = document.getElementById("chart-key-selector");
     const statusIndicator = document.getElementById("status-indicator");
     const statusText = document.getElementById("status-text");
     const lastUpdateText = document.getElementById("last-update-text");
@@ -7444,16 +7476,42 @@ ${rangeText}`;
         }
         const history = telemetryHistory.get(tel.key);
         history.push({ x: now, y: tel.value });
+        lastKnownValues.set(tel.key, tel.value);
         if (history.length > historyPoints) {
           history.shift();
         }
       }
-      if (telemetryHistory.has("power") && chart) {
-        const powerHistory = telemetryHistory.get("power");
-        chart.data.datasets[0].data = powerHistory;
+      for (const key of telemetryKeys) {
+        const receivedKeys = values.map((v) => v.key);
+        if (!receivedKeys.includes(key) && lastKnownValues.has(key)) {
+          if (!telemetryHistory.has(key)) {
+            telemetryHistory.set(key, []);
+          }
+          const history = telemetryHistory.get(key);
+          const lastValue = lastKnownValues.get(key);
+          history.push({ x: now, y: lastValue });
+          if (history.length > historyPoints) {
+            history.shift();
+          }
+        }
+      }
+      if (telemetryHistory.has(selectedChartKey) && chart) {
+        const selectedHistory = telemetryHistory.get(selectedChartKey);
+        chart.data.datasets[0].data = selectedHistory;
         chart.update("none");
       }
     }
+    function getFormattedValue(key, value) {
+      const config = TELEMETRY_CONFIG[key];
+      if (!config) return value.toFixed(2);
+      if (key === "consumption" || key === "power") {
+        if (value >= 1e3) {
+          return `${(value / 1e3).toFixed(2)} kW`;
+        }
+        return `${value.toFixed(0)} W`;
+      }
+      return `${value.toFixed(config.decimals)} ${config.unit}`;
+    }
     function initializeChart() {
       const Chart = window.Chart;
       if (!Chart) {
@@ -7461,23 +7519,26 @@ ${rangeText}`;
         return;
       }
       chartContainer.style.display = "block";
+      const config = TELEMETRY_CONFIG[selectedChartKey] || { label: selectedChartKey, unit: "" };
       chart = new Chart(chartCanvas, {
         type: "line",
         data: {
           datasets: [{
-            label: "Pot\xEAncia",
+            label: config.label,
             data: [],
             borderColor: "#667eea",
             backgroundColor: "rgba(102, 126, 234, 0.1)",
             borderWidth: 2,
             fill: true,
             tension: 0.4,
-            pointRadius: 0
+            pointRadius: 3,
+            pointHoverRadius: 5
           }]
         },
         options: {
           responsive: true,
           maintainAspectRatio: false,
+          animation: false,
           plugins: {
             legend: { display: false },
             tooltip: {
@@ -7485,10 +7546,18 @@ ${rangeText}`;
                 title: function(context) {
                   const timestamp = context[0].parsed.x;
                   const date = new Date(timestamp);
-                  return date.toLocaleTimeString(locale);
+                  return date.toLocaleString(locale, {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit"
+                  });
                 },
                 label: function(context) {
-                  return `${context.parsed.y.toFixed(2)} kW`;
+                  const value = context.parsed.y;
+                  return getFormattedValue(selectedChartKey, value);
                 }
               }
             }
@@ -7497,23 +7566,57 @@ ${rangeText}`;
             x: {
               type: "linear",
               ticks: {
+                maxRotation: 45,
+                minRotation: 0,
                 callback: function(value) {
                   const date = new Date(value);
-                  return date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
+                  return date.toLocaleTimeString(locale, {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit"
+                  });
                 }
+              },
+              title: {
+                display: true,
+                text: "Hora"
               }
             },
             y: {
               beginAtZero: true,
+              ticks: {
+                callback: function(value) {
+                  if (selectedChartKey === "consumption" || selectedChartKey === "power") {
+                    if (value >= 1e3) {
+                      return `${(value / 1e3).toFixed(1)} kW`;
+                    }
+                    return `${value} W`;
+                  }
+                  return `${value} ${config.unit}`;
+                }
+              },
               title: {
                 display: true,
-                text: "kW"
+                text: selectedChartKey === "consumption" || selectedChartKey === "power" ? "W" : config.unit
               }
             }
           }
         }
       });
     }
+    function updateChartKey(newKey) {
+      selectedChartKey = newKey;
+      if (chart) {
+        chart.destroy();
+        chart = null;
+      }
+      initializeChart();
+      if (telemetryHistory.has(selectedChartKey)) {
+        const selectedHistory = telemetryHistory.get(selectedChartKey);
+        chart.data.datasets[0].data = selectedHistory;
+        chart.update("none");
+      }
+    }
     async function refreshData() {
       try {
         const data = await fetchLatestTelemetry();
@@ -7525,9 +7628,7 @@ ${rangeText}`;
         if (loadingState.style.display !== "none") {
           loadingState.style.display = "none";
           telemetryContent.style.display = "block";
-          if (telemetryKeys.includes("power")) {
-            initializeChart();
-          }
+          initializeChart();
         }
       } catch (error) {
         console.error("[RealTimeTelemetry] Error fetching data:", error);
@@ -7595,6 +7696,10 @@ ${rangeText}`;
     closeBtn.addEventListener("click", closeModal);
     pauseBtn.addEventListener("click", togglePause);
     exportBtn.addEventListener("click", exportToCSV2);
+    chartKeySelector.addEventListener("change", (e) => {
+      const newKey = e.target.value;
+      updateChartKey(newKey);
+    });
     overlay.addEventListener("click", (e) => {
       if (e.target === overlay) {
         closeModal();