myio-js-library 0.1.135 → 0.1.137

package/dist/index.cjs

@@ -7073,15 +7073,23 @@ if (typeof module !== "undefined" && module.exports) {
 
 // src/components/RealTimeTelemetryModal.ts
 var TELEMETRY_CONFIG = {
-  voltage: { label: "Tens\xE3o", unit: "V", icon: "\u26A1", decimals: 1 },
+  // Voltage phases
+  voltage_a: { label: "Tens\xE3o Fase A", unit: "V", icon: "\u26A1", decimals: 1 },
+  voltage_b: { label: "Tens\xE3o Fase B", unit: "V", icon: "\u26A1", decimals: 1 },
+  voltage_c: { label: "Tens\xE3o Fase C", unit: "V", icon: "\u26A1", decimals: 1 },
+  // Current
+  total_current: { label: "Corrente Total", unit: "A", icon: "\u{1F50C}", decimals: 2 },
   current: { label: "Corrente", unit: "A", icon: "\u{1F50C}", decimals: 2 },
-  power: { label: "Pot\xEAncia", unit: "kW", icon: "\u2699\uFE0F", decimals: 2 },
+  // Power and Energy
+  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 },
-  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 }
+  powerFactor: { label: "Fator de Pot\xEAncia", unit: "", icon: "\u{1F4D0}", decimals: 3 },
+  // Temperature
+  temperature: { label: "Temperatura", unit: "\xB0C", icon: "\u{1F321}\uFE0F", decimals: 1 }
 };
 var STRINGS = {
   "pt-BR": {
@@ -7120,7 +7128,7 @@ async function openRealTimeTelemetryModal(params) {
     token,
     deviceId,
     deviceLabel = "Dispositivo",
-    telemetryKeys = ["voltage", "current", "power", "energy"],
+    telemetryKeys = ["voltage_a", "voltage_b", "voltage_c", "total_current", "consumption"],
     refreshInterval = 8e3,
     historyPoints = 50,
     onClose,
@@ -7130,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 = `
@@ -7291,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 {
@@ -7401,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>
@@ -7443,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");
@@ -7534,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) {
@@ -7551,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: {
@@ -7575,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);
               }
             }
           }
@@ -7587,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();
@@ -7615,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);
@@ -7685,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();
@@ -11537,7 +11650,7 @@ var EnergyModalView = class {
           let startDate;
           let endDate;
           if (this.dateRangePicker) {
-            const dates = this.dateRangePicker.getRange();
+            const dates = this.dateRangePicker.getDates();
             startDate = dates.startISO;
             endDate = dates.endISO;
           } else {
@@ -11575,7 +11688,7 @@ var EnergyModalView = class {
             token: jwtToken,
             deviceId: this.config.params.deviceId,
             deviceLabel: this.config.params.deviceLabel || "Dispositivo",
-            telemetryKeys: ["voltage", "current", "power", "energy"],
+            telemetryKeys: ["voltage_a", "voltage_b", "voltage_c", "total_current", "consumption"],
             refreshInterval: 8e3,
             // 8 seconds
             historyPoints: 50,

package/dist/index.js

@@ -6977,15 +6977,23 @@ if (typeof module !== "undefined" && module.exports) {
 
 // src/components/RealTimeTelemetryModal.ts
 var TELEMETRY_CONFIG = {
-  voltage: { label: "Tens\xE3o", unit: "V", icon: "\u26A1", decimals: 1 },
+  // Voltage phases
+  voltage_a: { label: "Tens\xE3o Fase A", unit: "V", icon: "\u26A1", decimals: 1 },
+  voltage_b: { label: "Tens\xE3o Fase B", unit: "V", icon: "\u26A1", decimals: 1 },
+  voltage_c: { label: "Tens\xE3o Fase C", unit: "V", icon: "\u26A1", decimals: 1 },
+  // Current
+  total_current: { label: "Corrente Total", unit: "A", icon: "\u{1F50C}", decimals: 2 },
   current: { label: "Corrente", unit: "A", icon: "\u{1F50C}", decimals: 2 },
-  power: { label: "Pot\xEAncia", unit: "kW", icon: "\u2699\uFE0F", decimals: 2 },
+  // Power and Energy
+  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 },
-  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 }
+  powerFactor: { label: "Fator de Pot\xEAncia", unit: "", icon: "\u{1F4D0}", decimals: 3 },
+  // Temperature
+  temperature: { label: "Temperatura", unit: "\xB0C", icon: "\u{1F321}\uFE0F", decimals: 1 }
 };
 var STRINGS = {
   "pt-BR": {
@@ -7024,7 +7032,7 @@ async function openRealTimeTelemetryModal(params) {
     token,
     deviceId,
     deviceLabel = "Dispositivo",
-    telemetryKeys = ["voltage", "current", "power", "energy"],
+    telemetryKeys = ["voltage_a", "voltage_b", "voltage_c", "total_current", "consumption"],
     refreshInterval = 8e3,
     historyPoints = 50,
     onClose,
@@ -7034,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 = `
@@ -7195,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 {
@@ -7305,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>
@@ -7347,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");
@@ -7438,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) {
@@ -7455,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: {
@@ -7479,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);
               }
             }
           }
@@ -7491,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();
@@ -7519,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);
@@ -7589,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();
@@ -11441,7 +11554,7 @@ var EnergyModalView = class {
           let startDate;
           let endDate;
           if (this.dateRangePicker) {
-            const dates = this.dateRangePicker.getRange();
+            const dates = this.dateRangePicker.getDates();
             startDate = dates.startISO;
             endDate = dates.endISO;
           } else {
@@ -11479,7 +11592,7 @@ var EnergyModalView = class {
             token: jwtToken,
             deviceId: this.config.params.deviceId,
             deviceLabel: this.config.params.deviceLabel || "Dispositivo",
-            telemetryKeys: ["voltage", "current", "power", "energy"],
+            telemetryKeys: ["voltage_a", "voltage_b", "voltage_c", "total_current", "consumption"],
             refreshInterval: 8e3,
             // 8 seconds
             historyPoints: 50,