myio-js-library 0.1.136 → 0.1.137

package/dist/index.cjs

@@ -7081,8 +7081,8 @@ var TELEMETRY_CONFIG = {
   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 },
@@ -7138,7 +7138,9 @@ async function openRealTimeTelemetryModal(params) {
   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 = `
@@ -7299,7 +7301,27 @@ async function openRealTimeTelemetryModal(params) {
       }
 
       .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 {
@@ -7409,7 +7431,16 @@ async function openRealTimeTelemetryModal(params) {
           <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>
@@ -7451,6 +7482,7 @@ async function openRealTimeTelemetryModal(params) {
   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");
@@ -7542,16 +7574,42 @@ async function openRealTimeTelemetryModal(params) {
       }
       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) {
@@ -7559,23 +7617,26 @@ async function openRealTimeTelemetryModal(params) {
       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: {
@@ -7583,10 +7644,18 @@ async function openRealTimeTelemetryModal(params) {
               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);
               }
             }
           }
@@ -7595,23 +7664,57 @@ async function openRealTimeTelemetryModal(params) {
           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();
@@ -7623,9 +7726,7 @@ async function openRealTimeTelemetryModal(params) {
       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);
@@ -7693,6 +7794,10 @@ async function openRealTimeTelemetryModal(params) {
   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();

package/dist/index.js

@@ -6985,8 +6985,8 @@ var TELEMETRY_CONFIG = {
   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 },
@@ -7042,7 +7042,9 @@ async function openRealTimeTelemetryModal(params) {
   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 = `
@@ -7203,7 +7205,27 @@ async function openRealTimeTelemetryModal(params) {
       }
 
       .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 {
@@ -7313,7 +7335,16 @@ async function openRealTimeTelemetryModal(params) {
           <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>
@@ -7355,6 +7386,7 @@ async function openRealTimeTelemetryModal(params) {
   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");
@@ -7446,16 +7478,42 @@ async function openRealTimeTelemetryModal(params) {
       }
       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) {
@@ -7463,23 +7521,26 @@ async function openRealTimeTelemetryModal(params) {
       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: {
@@ -7487,10 +7548,18 @@ async function openRealTimeTelemetryModal(params) {
               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);
               }
             }
           }
@@ -7499,23 +7568,57 @@ async function openRealTimeTelemetryModal(params) {
           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();
@@ -7527,9 +7630,7 @@ async function openRealTimeTelemetryModal(params) {
       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);
@@ -7597,6 +7698,10 @@ async function openRealTimeTelemetryModal(params) {
   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();