myio-js-library 0.1.136 → 0.1.139

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 = `
@@ -7289,6 +7291,8 @@ async function openRealTimeTelemetryModal(params) {
         padding: 20px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         margin-bottom: 20px;
+        max-height: 520px;
+        overflow: hidden;
       }
 
       .myio-telemetry-chart-title {
@@ -7299,7 +7303,29 @@ async function openRealTimeTelemetryModal(params) {
       }
 
       .myio-telemetry-chart {
-        height: 200px;
+        height: 300px;
+        max-height: 450px;
+        width: 100%;
+      }
+
+      .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 +7435,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>
@@ -7440,20 +7475,21 @@ async function openRealTimeTelemetryModal(params) {
     </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");
+  const closeBtn = overlay.querySelector("#close-btn");
+  const pauseBtn = overlay.querySelector("#pause-btn");
+  const pauseBtnIcon = overlay.querySelector("#pause-btn-icon");
+  const pauseBtnText = overlay.querySelector("#pause-btn-text");
+  const exportBtn = overlay.querySelector("#export-btn");
+  const loadingState = overlay.querySelector("#loading-state");
+  const telemetryContent = overlay.querySelector("#telemetry-content");
+  const errorState = overlay.querySelector("#error-state");
+  const telemetryCards = overlay.querySelector("#telemetry-cards");
+  const chartContainer = overlay.querySelector("#chart-container");
+  const chartCanvas = overlay.querySelector("#telemetry-chart");
+  const chartKeySelector = overlay.querySelector("#chart-key-selector");
+  const statusIndicator = overlay.querySelector("#status-indicator");
+  const statusText = overlay.querySelector("#status-text");
+  const lastUpdateText = overlay.querySelector("#last-update-text");
   function closeModal() {
     if (refreshIntervalId) {
       clearInterval(refreshIntervalId);
@@ -7542,16 +7578,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 +7621,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 +7648,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 +7668,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 +7730,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 +7798,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();
@@ -8818,18 +8927,20 @@ var FALLBACK_PATHS = [
   "/assets/vendor/moment.min.js",
   "/assets/vendor/daterangepicker.min.js"
 ];
-var PT_BR_LOCALE = {
-  format: "DD/MM/YY HH:mm",
-  separator: " at\xE9 ",
-  applyLabel: "Aplicar",
-  cancelLabel: "Cancelar",
-  fromLabel: "De",
-  toLabel: "At\xE9",
-  customRangeLabel: "Personalizado",
-  daysOfWeek: ["Do", "Se", "Te", "Qa", "Qi", "Se", "Sa"],
-  monthNames: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
-  firstDay: 1
-};
+function getLocaleConfig(includeTime = false) {
+  return {
+    format: includeTime ? "DD/MM/YY HH:mm" : "DD/MM/YYYY",
+    separator: " at\xE9 ",
+    applyLabel: "Aplicar",
+    cancelLabel: "Cancelar",
+    fromLabel: "De",
+    toLabel: "At\xE9",
+    customRangeLabel: "Personalizado",
+    daysOfWeek: ["Do", "Se", "Te", "Qa", "Qi", "Se", "Sa"],
+    monthNames: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
+    firstDay: 1
+  };
+}
 var CDNLoader = class {
   static jQueryInstance = null;
   static loadingPromise = null;
@@ -8950,14 +9061,46 @@ function createDateRangePicker($2, input, opts) {
   helpText.style.display = "flex";
   helpText.style.alignItems = "center";
   input.parentNode?.appendChild(helpText);
+  const includeTime = opts.includeTime === true;
+  const timePrecision = opts.timePrecision || "minute";
+  const localeConfig = getLocaleConfig(includeTime);
   const moment = window.moment;
-  const startDate = opts.presetStart ? moment(opts.presetStart).startOf("day") : moment().startOf("month");
-  const endDate = opts.presetEnd ? moment(opts.presetEnd).endOf("day") : moment().endOf("day");
+  let startDate, endDate;
+  if (includeTime) {
+    startDate = opts.presetStart ? moment(opts.presetStart) : moment().startOf("day");
+    endDate = opts.presetEnd ? moment(opts.presetEnd) : moment();
+  } else {
+    startDate = opts.presetStart ? moment(opts.presetStart).startOf("day") : moment().startOf("month");
+    endDate = opts.presetEnd ? moment(opts.presetEnd).endOf("day") : moment().endOf("day");
+  }
+  let ranges;
+  if (includeTime) {
+    const now = moment();
+    ranges = {
+      "\xDAltima hora": [moment().subtract(1, "hours"), now.clone()],
+      "\xDAltimas 6 horas": [moment().subtract(6, "hours"), now.clone()],
+      "\xDAltimas 12 horas": [moment().subtract(12, "hours"), now.clone()],
+      "\xDAltimas 24 horas": [moment().subtract(24, "hours"), now.clone()],
+      "Hoje": [moment().startOf("day"), now.clone()],
+      "Ontem": [moment().subtract(1, "day").startOf("day"), moment().subtract(1, "day").endOf("day")],
+      "\xDAltimos 7 dias": [moment().subtract(6, "days").startOf("day"), now.clone()],
+      "Este m\xEAs": [moment().startOf("month"), now.clone()]
+    };
+  } else {
+    ranges = {
+      "Hoje": [moment().startOf("day"), moment().endOf("day")],
+      "\xDAltimos 7 dias": [moment().subtract(6, "days").startOf("day"), moment().endOf("day")],
+      "\xDAltimos 30 dias": [moment().subtract(29, "days").startOf("day"), moment().endOf("day")],
+      "M\xEAs Anterior": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
+    };
+  }
   $input.daterangepicker({
     parentEl: opts.parentEl || document.body,
-    timePicker: true,
+    timePicker: includeTime,
+    // RFC-0086: Conditional time picker
     timePicker24Hour: true,
-    timePickerIncrement: 1,
+    timePickerIncrement: timePrecision === "hour" ? 60 : 1,
+    // RFC-0086: Hour vs minute precision
     autoApply: true,
     autoUpdateInput: true,
     linkedCalendars: true,
@@ -8968,15 +9111,12 @@ function createDateRangePicker($2, input, opts) {
     endDate,
     opens: "right",
     drops: "down",
-    locale: PT_BR_LOCALE,
+    locale: localeConfig,
+    // RFC-0086: Dynamic locale format
     applyButtonClasses: "btn btn-primary",
     cancelClass: "btn btn-muted",
-    ranges: {
-      "Hoje": [moment().startOf("day"), moment().endOf("day")],
-      "\xDAltimos 7 dias": [moment().subtract(6, "days").startOf("day"), moment().endOf("day")],
-      "\xDAltimos 30 dias": [moment().subtract(29, "days").startOf("day"), moment().endOf("day")],
-      "M\xEAs Anterior": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
-    }
+    ranges
+    // RFC-0086: Dynamic ranges
   });
   updateInputDisplay();
   $input.on("apply.daterangepicker.myio", () => {
@@ -8995,7 +9135,7 @@ function createDateRangePicker($2, input, opts) {
   function updateInputDisplay() {
     const picker = $input.data("daterangepicker");
     if (picker) {
-      const formatted = `${picker.startDate.format(PT_BR_LOCALE.format)}${PT_BR_LOCALE.separator}${picker.endDate.format(PT_BR_LOCALE.format)}`;
+      const formatted = `${picker.startDate.format(localeConfig.format)}${localeConfig.separator}${picker.endDate.format(localeConfig.format)}`;
       $input.val(formatted);
     }
   }
@@ -9003,8 +9143,8 @@ function createDateRangePicker($2, input, opts) {
     const picker = $input.data("daterangepicker");
     const startISO = picker.startDate.format("YYYY-MM-DD[T]HH:mm:ssZ");
     const endISO = picker.endDate.format("YYYY-MM-DD[T]HH:mm:ssZ");
-    const startLabel = picker.startDate.format(PT_BR_LOCALE.format);
-    const endLabel = picker.endDate.format(PT_BR_LOCALE.format);
+    const startLabel = picker.startDate.format(localeConfig.format);
+    const endLabel = picker.endDate.format(localeConfig.format);
     return { startISO, endISO, startLabel, endLabel };
   }
   function setDates(startISO, endISO) {
@@ -9975,10 +10115,7 @@ async function openDemandModal(params) {
         <button class="myio-demand-modal-btn-update" type="button">
           ${strings.updatePeriod}
         </button>
-        <button id="realtime-toggle-btn" class="myio-demand-modal-btn-realtime" type="button" title="Ativar modo tempo real (atualiza\xE7\xE3o a cada 8 segundos)">
-          <span class="realtime-indicator"></span>
-          <span class="realtime-text">REAL TIME</span>
-        </button>
+        <!-- RFC-0084: REAL TIME button removed - use RealTimeTelemetryModal instead -->
         <div class="myio-demand-modal-period-error" style="display: none;"></div>
       </div>
 
@@ -10026,7 +10163,6 @@ async function openDemandModal(params) {
   const dateStartInput = overlay.querySelector(".myio-demand-modal-date-start");
   const dateEndInput = overlay.querySelector(".myio-demand-modal-date-end");
   const updateBtn = overlay.querySelector(".myio-demand-modal-btn-update");
-  const realTimeToggleBtn = overlay.querySelector("#realtime-toggle-btn");
   const periodErrorEl = overlay.querySelector(".myio-demand-modal-period-error");
   const telemetryTypeSelect = overlay.querySelector("#telemetry-type-select");
   const intervalSelect = overlay.querySelector("#demand-interval-select");
@@ -10219,7 +10355,6 @@ async function openDemandModal(params) {
           console.error("[DemandModal] Real-time update failed:", error);
         }
       }, intervalMs);
-      realTimeToggleBtn.classList.add("active");
       isRealTimeMode = true;
       console.log(`[DemandModal] Real-time mode started (${intervalMs}ms interval)`);
     } catch (error) {
@@ -10302,7 +10437,6 @@ async function openDemandModal(params) {
     isRealTimeMode = false;
     lastFetchedTimestamp = null;
     realTimeDataBuffer = [];
-    realTimeToggleBtn.classList.remove("active");
     console.log("[DemandModal] Real-time mode stopped");
   }
   function initializeDateInputs() {
@@ -10385,13 +10519,6 @@ async function openDemandModal(params) {
   pdfBtn.addEventListener("click", exportPdf);
   csvBtn.addEventListener("click", exportCsv);
   updateBtn.addEventListener("click", updatePeriod);
-  realTimeToggleBtn.addEventListener("click", async () => {
-    if (isRealTimeMode) {
-      await disableRealTimeMode();
-    } else {
-      await enableRealTimeMode();
-    }
-  });
   if (telemetryTypeSelect && allowTelemetrySwitch) {
     const debouncedSwitch = debounce(switchTelemetryType, 300);
     telemetryTypeSelect.addEventListener("change", (e) => {

package/dist/index.d.cts

@@ -1839,6 +1839,12 @@ interface CreateDateRangePickerOptions {
     parentEl?: HTMLElement;
     /** Callback when date range is applied */
     onApply?: (result: DateRangeResult) => void;
+    /** Enable time selection (default: false) */
+    includeTime?: boolean;
+    /** Time precision: 'minute' or 'hour' (default: 'minute') */
+    timePrecision?: 'minute' | 'hour';
+    /** Locale for formatting (default: 'pt-BR') */
+    locale?: 'pt-BR' | 'en-US';
 }
 /**
  * Creates a MyIO-styled date range picker on the specified input element.