myio-js-library 0.1.137 → 0.1.140

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

@@ -7193,6 +7193,8 @@ ${rangeText}`;
         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 {
@@ -7203,7 +7205,9 @@ ${rangeText}`;
       }
 
       .myio-telemetry-chart {
-        height: 250px;
+        height: 300px;
+        max-height: 450px;
+        width: 100%;
       }
 
       .myio-telemetry-selector {
@@ -7373,21 +7377,21 @@ ${rangeText}`;
     </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);
@@ -8822,18 +8826,20 @@ ${rangeText}`;
     "/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;
@@ -8954,14 +8960,46 @@ ${rangeText}`;
     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,
@@ -8972,15 +9010,12 @@ ${rangeText}`;
       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", () => {
@@ -8999,7 +9034,7 @@ ${rangeText}`;
     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);
       }
     }
@@ -9007,8 +9042,8 @@ ${rangeText}`;
       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) {
@@ -9804,7 +9839,7 @@ ${rangeText}`;
       isEmpty = false;
       const sortedData = rawSeries.sort((a, b) => a.ts - b.ts);
       const points = [];
-      const isAggregated = aggregation && aggregation !== "NONE";
+      const isAggregated = aggregation !== "NONE";
       if (isAggregated) {
         for (let i = 0; i < sortedData.length; i++) {
           const current = sortedData[i];
@@ -9979,10 +10014,7 @@ ${rangeText}`;
         <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>
 
@@ -10030,7 +10062,6 @@ ${rangeText}`;
     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");
@@ -10041,16 +10072,10 @@ ${rangeText}`;
     let currentStartDate = params.startDate;
     let currentEndDate = params.endDate;
     let activeTelemetryType = currentTelemetryType;
-    let isRealTimeMode = false;
-    let realTimeIntervalId = null;
-    let lastFetchedTimestamp = null;
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const releaseFocusTrap = createFocusTrap(overlay);
     function closeModal() {
-      if (isRealTimeMode && realTimeIntervalId) {
-        window.clearInterval(realTimeIntervalId);
-      }
       if (chart) {
         chart.destroy();
       }
@@ -10183,124 +10208,6 @@ ${rangeText}`;
         btn.innerHTML = originalHtml;
       }
     }
-    function getTodayStart() {
-      const today = /* @__PURE__ */ new Date();
-      today.setHours(0, 0, 0, 0);
-      return today.toISOString();
-    }
-    async function enableRealTimeMode() {
-      try {
-        currentStartDate = getTodayStart();
-        currentEndDate = (/* @__PURE__ */ new Date()).toISOString();
-        initializeDateInputs();
-        dateStartInput.disabled = true;
-        dateEndInput.disabled = true;
-        dateStartInput.style.opacity = "0.5";
-        dateEndInput.style.opacity = "0.5";
-        if (intervalSelect) {
-          intervalSelect.disabled = true;
-          intervalSelect.style.opacity = "0.5";
-        }
-        if (aggSelect) {
-          aggSelect.disabled = true;
-          aggSelect.style.opacity = "0.5";
-        }
-        if (intervalSelect) intervalSelect.value = "8000";
-        if (aggSelect) aggSelect.value = "AVG";
-        await loadData();
-        lastFetchedTimestamp = Date.now();
-        const intervalMs = params.realTimeInterval || 8e3;
-        realTimeIntervalId = window.setInterval(async () => {
-          try {
-            await fetchIncrementalData();
-          } catch (error) {
-            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) {
-        console.error("[DemandModal] Failed to enable real-time mode:", error);
-        await disableRealTimeMode();
-        alert("Erro ao ativar modo tempo real. Tente novamente.");
-      }
-    }
-    async function fetchIncrementalData() {
-      if (!lastFetchedTimestamp) {
-        throw new Error("No last fetched timestamp available");
-      }
-      const startTs = lastFetchedTimestamp;
-      const endTs = Date.now();
-      const startDate = new Date(startTs).toISOString();
-      const endDate = new Date(endTs).toISOString();
-      const keysStr = Array.isArray(activeTelemetryType.keys) ? activeTelemetryType.keys.join(",") : activeTelemetryType.keys;
-      const telemetryQuery = {
-        keys: keysStr,
-        interval: 8e3,
-        // 8 seconds (fixed for real-time mode)
-        agg: "AVG",
-        // Average (fixed for real-time mode)
-        intervalType: "MILLISECONDS",
-        orderBy: "ASC"
-      };
-      const newRawData = params.fetcher ? await params.fetcher({ token: params.token, deviceId: params.deviceId, startDate, endDate, telemetryQuery }) : await fetchTelemetryData(params.token, params.deviceId, startDate, endDate, telemetryQuery);
-      const newChartData = processMultiSeriesChartData(
-        newRawData,
-        keysStr,
-        params.correctionFactor || 1,
-        locale,
-        "AVG",
-        params.timezoneOffset
-      );
-      if (!newChartData.isEmpty && chart && chartData) {
-        newChartData.series.forEach((newSeries, seriesIndex) => {
-          if (newSeries.points.length > 0 && chart.data.datasets[seriesIndex]) {
-            newSeries.points.forEach((point) => {
-              chart.data.datasets[seriesIndex].data.push({
-                x: point.x,
-                y: point.y
-              });
-              chart.data.labels.push(point.x);
-            });
-          }
-        });
-        chart.update("none");
-        if (params.realTimeAutoScroll !== false) {
-          const latestTimestamp = newChartData.series[0]?.points[newChartData.series[0].points.length - 1]?.x;
-          if (latestTimestamp && chart.options.scales?.x) {
-            const visibleRange = 3e5;
-            chart.options.scales.x.min = latestTimestamp - visibleRange;
-            chart.options.scales.x.max = latestTimestamp;
-            chart.update("none");
-          }
-        }
-      }
-      lastFetchedTimestamp = endTs;
-      console.log(`[DemandModal] Incremental fetch completed (${newChartData.series.reduce((sum, s) => sum + s.points.length, 0)} new points)`);
-    }
-    async function disableRealTimeMode() {
-      if (realTimeIntervalId) {
-        window.clearInterval(realTimeIntervalId);
-        realTimeIntervalId = null;
-      }
-      dateStartInput.disabled = false;
-      dateEndInput.disabled = false;
-      dateStartInput.style.opacity = "1";
-      dateEndInput.style.opacity = "1";
-      if (intervalSelect) {
-        intervalSelect.disabled = false;
-        intervalSelect.style.opacity = "1";
-      }
-      if (aggSelect) {
-        aggSelect.disabled = false;
-        aggSelect.style.opacity = "1";
-      }
-      isRealTimeMode = false;
-      lastFetchedTimestamp = null;
-      realTimeToggleBtn.classList.remove("active");
-      console.log("[DemandModal] Real-time mode stopped");
-    }
     function initializeDateInputs() {
       const startDate = new Date(currentStartDate);
       const endDate = new Date(currentEndDate);
@@ -10381,13 +10288,6 @@ ${rangeText}`;
     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) => {
@@ -10813,8 +10713,11 @@ ${rangeText}`;
      */
     reRenderChart() {
       const mode = this.config.params.mode || "single";
+      console.log("[EnergyModalView] reRenderChart called, mode:", mode, "barMode:", this.currentBarMode, "theme:", this.currentTheme);
       if (mode === "comparison") {
-        this.renderComparisonChart();
+        console.log("[EnergyModalView] Calling renderComparisonChart...");
+        const result = this.renderComparisonChart();
+        console.log("[EnergyModalView] renderComparisonChart result:", result);
       } else {
         if (this.currentEnergyData) {
           this.renderChart(this.currentEnergyData);