myio-js-library 0.1.137 → 0.1.139

package/dist/index.cjs

@@ -7291,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 {
@@ -7301,7 +7303,9 @@ async function openRealTimeTelemetryModal(params) {
       }
 
       .myio-telemetry-chart {
-        height: 250px;
+        height: 300px;
+        max-height: 450px;
+        width: 100%;
       }
 
       .myio-telemetry-selector {
@@ -7471,21 +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 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");
+  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);
@@ -8923,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;
@@ -9055,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,
@@ -9073,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", () => {
@@ -9100,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);
     }
   }
@@ -9108,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) {
@@ -10080,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>
 
@@ -10131,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");
@@ -10324,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) {
@@ -10407,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() {
@@ -10490,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.

package/dist/index.js

@@ -7195,6 +7195,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 {
@@ -7205,7 +7207,9 @@ async function openRealTimeTelemetryModal(params) {
       }
 
       .myio-telemetry-chart {
-        height: 250px;
+        height: 300px;
+        max-height: 450px;
+        width: 100%;
       }
 
       .myio-telemetry-selector {
@@ -7375,21 +7379,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 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");
+  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);
@@ -8827,18 +8831,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;
@@ -8959,14 +8965,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,
@@ -8977,15 +9015,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", () => {
@@ -9004,7 +9039,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);
     }
   }
@@ -9012,8 +9047,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) {
@@ -9984,10 +10019,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>
 
@@ -10035,7 +10067,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");
@@ -10228,7 +10259,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) {
@@ -10311,7 +10341,6 @@ async function openDemandModal(params) {
     isRealTimeMode = false;
     lastFetchedTimestamp = null;
     realTimeDataBuffer = [];
-    realTimeToggleBtn.classList.remove("active");
     console.log("[DemandModal] Real-time mode stopped");
   }
   function initializeDateInputs() {
@@ -10394,13 +10423,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) => {