myio-js-library 0.1.63 → 0.1.64

package/dist/index.cjs

@@ -5171,7 +5171,7 @@ var MODAL_STYLES = `
 }
 
 .myio-modal-header {
-  padding: var(--myio-spacing);
+  padding: 4px;
   border-bottom: none;
   display: flex;
   align-items: center;
@@ -5179,13 +5179,15 @@ var MODAL_STYLES = `
   background: var(--myio-brand-700);
   color: white;
   border-radius: var(--myio-radius) var(--myio-radius) 0 0;
+  min-height: 20px;
 }
 
 .myio-modal-title {
-  font-size: var(--myio-font-size-lg);
+  font-size: 18px !important;
   font-weight: 600;
-  margin: 0;
+  margin: 6px !important;
   color: white;
+  line-height: 2 !important;
 }
 
 .myio-modal-close {
@@ -6408,15 +6410,11 @@ var EnergyModalView = class {
     this.setupEventListeners();
   }
   /**
-   * Creates the main modal content structure - CLEAN LAYOUT, NO BLUR ON MODAL
+   * Creates the main modal content structure
    */
   createModalContent() {
     const container = document.createElement("div");
-    container.id = "dashboard-popup";
-    container.className = "myio-modal-overlay";
-    container.setAttribute("role", "dialog");
-    container.setAttribute("aria-modal", "true");
-    container.setAttribute("aria-labelledby", "modal-title");
+    container.className = "myio-energy-modal-scope";
     const { device } = this.config.context;
     const identifier = device.attributes.identifier || "SEM IDENTIFICADOR";
     const label = device.label || "SEM ETIQUETA";
@@ -6424,48 +6422,48 @@ var EnergyModalView = class {
       <style>
         ${this.getModalStyles()}
       </style>
-      
-      <div class="myio-modal energy-report-modal">
-        <!-- SINGLE HEADER ONLY -->
-        <header class="myio-modal__header">
-          <h2 id="modal-title">Relat\xF3rio de Energia \u2013 ${identifier} \u2013 ${label}</h2>
-          <button id="close-btn" class="myio-modal__close" aria-label="Fechar">\xD7</button>
-        </header>
-
-        <!-- TOOLBAR -->
-        <div class="myio-modal__toolbar">
-          <div class="tb-start">
-            <input type="text" id="energy-date-range" readonly placeholder="Selecione o per\xEDodo">
-            <button id="btn-load" class="btn btn-ghost">
+      <div class="myio-modal-scope" style="height: 100%; display: flex; flex-direction: column;">
+        <!-- Controls Section -->
+        <div style="margin-bottom: 16px; flex-shrink: 0;">
+          <div style="display: flex; gap: 16px; align-items: end; margin-bottom: 16px;">
+            <div class="myio-form-group" style="margin-bottom: 0;">
+              <label class="myio-label" for="date-range">Per\xEDodo</label>
+              <input type="text" id="date-range" class="myio-input" readonly placeholder="Selecione o per\xEDodo" style="width: 300px;">
+            </div>
+            <button id="load-btn" class="myio-btn myio-btn-primary">
               <span class="myio-spinner" id="load-spinner" style="display: none;"></span>
               Carregar
             </button>
-          </div>
-          <div class="tb-end">
-            <button id="btn-csv" class="btn btn-ghost" disabled>Exportar CSV</button>
-            <button id="btn-pdf" class="btn btn-premium">Exportar PDF</button>
-            <button id="btn-close" class="btn btn-ghost">Fechar</button>
+            <button id="export-csv-btn" class="myio-btn myio-btn-secondary" disabled>
+              Exportar CSV
+            </button>
+            <button id="close-btn" class="myio-btn myio-btn-secondary">
+              Fechar
+            </button>
           </div>
         </div>
-
-        <!-- ERROR CONTAINER -->
-        <div id="energy-error" class="myio-energy-error" style="display: none;">
+        
+        <!-- Error Container -->
+        <div id="energy-error" class="myio-energy-error" style="display: none; flex-shrink: 0;">
           <!-- Error messages will be displayed here -->
         </div>
-
-        <!-- MAIN CHART CONTAINER - FULL HEIGHT -->
-        <main class="myio-modal__body">
-          <div class="chart-iframe-wrap">
-            <iframe id="energy-report-iframe" src="" loading="lazy" title="Energy Chart" style="display: none;">
-            </iframe>
-            <div id="energy-chart-container" class="myio-energy-chart-container">
-              <div class="myio-loading-state">
-                <div class="myio-spinner"></div>
-                <p>${this.getI18nText("loading")}</p>
-              </div>
-            </div>
+        
+        <!-- Main Chart Container - Full Width -->
+        <div id="energy-chart-container" class="myio-energy-chart-container" style="width: 100%; flex: 1; box-sizing: border-box;">
+          <div class="myio-loading-state">
+            <div class="myio-spinner"></div>
+            <p>${this.getI18nText("loading")}</p>
           </div>
-        </main>
+        </div>
+        
+        <!-- KPI Button Section -->
+        <div id="energy-kpi-btn" style="display: none; margin-top: 16px; text-align: center; flex-shrink: 0;">
+          <button id="show-kpis-btn" class="myio-btn myio-btn-secondary" title="Show detailed metrics" style="display: none;">
+            <span style="font-size: 16px; font-weight: bold;">+</span>
+            <span style="margin-left: 8px;">Show Metrics</span>
+          </button>
+        </div>
+        
       </div>
     `;
     this.container = container;
@@ -6483,13 +6481,9 @@ var EnergyModalView = class {
           <p>${this.getI18nText("loading")}</p>
         </div>
       `;
-      this.chartContainer.style.display = "flex";
-    }
-    const iframe = document.getElementById("energy-report-iframe");
-    if (iframe) {
-      iframe.style.display = "none";
     }
     this.hideError();
+    this.hideKPIButton();
   }
   /**
    * Shows error message
@@ -6508,20 +6502,21 @@ var EnergyModalView = class {
     this.hideLoadingState();
   }
   /**
-   * Renders energy data (charts only - NO KPIs, NO TABLE)
+   * Renders energy data (charts, KPIs, table)
    */
   renderEnergyData(energyData) {
     this.currentEnergyData = energyData;
     this.hideLoadingState();
     this.hideError();
     this.renderChart(energyData);
-    const exportCsvBtn = document.getElementById("btn-csv");
-    const exportPdfBtn = document.getElementById("btn-pdf");
-    if (exportCsvBtn) exportCsvBtn.disabled = false;
-    if (exportPdfBtn) exportPdfBtn.disabled = false;
+    this.showKPIButton();
+    const exportBtn = document.getElementById("export-csv-btn");
+    if (exportBtn) {
+      exportBtn.disabled = false;
+    }
   }
   /**
-   * Renders the energy chart with full height
+   * Renders the energy chart
    */
   renderChart(energyData) {
     if (!this.chartContainer) return;
@@ -6535,44 +6530,66 @@ var EnergyModalView = class {
    */
   tryRenderWithSDK(energyData) {
     try {
-      if (typeof window !== "undefined" && window.EnergyChartSDK) {
-        let startISO, endISO;
-        if (this.dateRangePicker) {
-          const dates = this.dateRangePicker.getDates();
-          startISO = dates.startISO;
-          endISO = dates.endISO;
-        } else {
-          startISO = this.normalizeToSaoPauloISO(this.config.params.startDate, false);
-          endISO = this.normalizeToSaoPauloISO(this.config.params.endDate, true);
+      if (this.chartInstance && typeof this.chartInstance.destroy === "function") {
+        this.chartInstance.destroy();
+        this.chartInstance = null;
+      }
+      if (this.chartContainer) {
+        this.chartContainer.innerHTML = "";
+      }
+      let renderTelemetryChart;
+      if (typeof window !== "undefined" && window.EnergyChartSDK && typeof window.EnergyChartSDK.renderTelemetryChart === "function") {
+        renderTelemetryChart = window.EnergyChartSDK.renderTelemetryChart;
+      } else {
+        console.error("[EnergyModalView] EnergyChartSDK v2 (renderTelemetryChart) not loaded!");
+        if (this.chartContainer) {
+          this.chartContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: red;">EnergyChartSDK v2 (renderTelemetryChart) not loaded. Check widget configuration and browser console.</div>';
         }
-        const chartConfig = {
-          version: "v2",
-          clientId: this.config.params.clientId || "ADMIN_DASHBOARD_CLIENT",
-          clientSecret: this.config.params.clientSecret || "admin_dashboard_secret_2025",
-          deviceId: this.config.context.resolved.ingestionId,
-          readingType: "energy",
-          startDate: startISO,
-          endDate: endISO,
-          granularity: this.config.params.granularity || "1d",
-          theme: this.config.params.theme || "light",
-          timezone: this.config.params.timezone || "America/Sao_Paulo",
-          iframeBaseUrl: this.config.params.chartsBaseUrl || "https://graphs.apps.myio-bas.com",
-          apiBaseUrl: this.config.params.dataApiHost || "https://api.data.apps.myio-bas.com"
-        };
-        console.log("[EnergyModalView] Rendering chart with SDK config:", {
-          deviceId: chartConfig.deviceId,
-          startDate: chartConfig.startDate,
-          endDate: chartConfig.endDate,
-          granularity: chartConfig.granularity
+        return false;
+      }
+      let startISO, endISO;
+      if (this.dateRangePicker) {
+        const dates = this.dateRangePicker.getDates();
+        startISO = dates.startISO;
+        endISO = dates.endISO;
+      } else {
+        startISO = this.normalizeToSaoPauloISO(this.config.params.startDate, false);
+        endISO = this.normalizeToSaoPauloISO(this.config.params.endDate, true);
+      }
+      const tzIdentifier = this.config.params.timezone || "America/Sao_Paulo";
+      const granularity = this.config.params.granularity || "1d";
+      const theme = this.config.params.theme || "light";
+      const ingestionId = this.config.context.resolved.ingestionId;
+      console.log(`[EnergyModalView] Initializing v2 chart with: deviceId=${ingestionId}, startDate=${startISO}, endDate=${endISO}, granularity=${granularity}, theme=${theme}, timezone=${tzIdentifier}`);
+      const chartConfig = {
+        version: "v2",
+        clientId: this.config.params.clientId || "ADMIN_DASHBOARD_CLIENT",
+        clientSecret: this.config.params.clientSecret || "admin_dashboard_secret_2025",
+        deviceId: ingestionId,
+        readingType: "energy",
+        startDate: startISO,
+        endDate: endISO,
+        granularity,
+        theme,
+        timezone: tzIdentifier,
+        iframeBaseUrl: this.config.params.chartsBaseUrl || "https://graphs.apps.myio-bas.com",
+        apiBaseUrl: this.config.params.dataApiHost || "https://api.data.apps.myio-bas.com"
+      };
+      this.chartInstance = renderTelemetryChart(this.chartContainer, chartConfig);
+      if (this.chartInstance && typeof this.chartInstance.on === "function") {
+        this.chartInstance.on("drilldown", (data) => {
+          console.log("[EnergyModalView] v2 SDK Drilldown Event:", data);
         });
-        this.chartContainer.style.display = "none";
-        const iframe = document.getElementById("energy-report-iframe");
-        if (iframe) {
-          iframe.style.display = "block";
-          window.EnergyChartSDK.renderTelemetryChart(iframe.parentElement, chartConfig);
-        }
-        return true;
+        this.chartInstance.on("error", (errorData) => {
+          console.error("[EnergyModalView] v2 SDK Error Event:", errorData);
+          if (this.chartContainer) {
+            this.chartContainer.innerHTML = `<div style="padding: 20px; text-align: center; color: red;">v2 Chart Error: ${errorData.message || "Unknown error"}</div>`;
+          }
+        });
+      } else if (this.chartInstance) {
+        console.warn("[EnergyModalView] EnergyChartSDK v2 instance does not have an 'on' method for event listeners.");
       }
+      return true;
     } catch (error) {
       console.warn("[EnergyModalView] EnergyChartSDK failed, using fallback:", error);
     }
@@ -6604,26 +6621,51 @@ var EnergyModalView = class {
    */
   renderFallbackChart(energyData) {
     if (!this.chartContainer) return;
-    this.chartContainer.style.display = "flex";
-    const iframe = document.getElementById("energy-report-iframe");
-    if (iframe) {
-      iframe.style.display = "none";
-    }
+    const maxValue = Math.max(...energyData.consumption.map((p) => p.value));
+    const chartHeight = 300;
     const chartHTML = `
-      <div class="myio-fallback-chart" style="height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
-        <div style="text-align: center; color: #666;">
-          <div style="font-size: 48px; margin-bottom: 16px;">\u{1F4CA}</div>
-          <h3 style="margin: 0 0 8px 0; color: #2D1458;">Full-Height Energy Chart</h3>
-          <p style="margin: 0; color: #6b7280; line-height: 1.5;">
-            EnergyChartSDK iframe renders here at 100% height<br>
-            Data points: ${energyData.consumption.length}<br>
-            <strong style="color: #2D1458;">Chart takes all available space</strong>
-          </p>
+      <div class="myio-fallback-chart">
+        <h4>${this.getI18nText("energyChart")}</h4>
+        <div class="myio-chart-container" style="height: ${chartHeight}px;">
+          <svg width="100%" height="100%" viewBox="0 0 800 ${chartHeight}">
+            ${energyData.consumption.map((point, index) => {
+      const x = index / (energyData.consumption.length - 1) * 750 + 25;
+      const y = chartHeight - 50 - point.value / maxValue * (chartHeight - 100);
+      const barWidth = Math.max(2, 750 / energyData.consumption.length - 2);
+      return `
+                <rect x="${x - barWidth / 2}" y="${y}" width="${barWidth}" height="${chartHeight - 50 - y}" 
+                      fill="var(--myio-energy-primary, #6366f1)" opacity="0.7">
+                  <title>${formatDate(point.timestamp)}: ${formatNumber(point.value)} kWh</title>
+                </rect>
+              `;
+    }).join("")}
+            
+            <!-- Y-axis -->
+            <line x1="25" y1="25" x2="25" y2="${chartHeight - 25}" stroke="#ccc" stroke-width="1"/>
+            <!-- X-axis -->
+            <line x1="25" y1="${chartHeight - 25}" x2="775" y2="${chartHeight - 25}" stroke="#ccc" stroke-width="1"/>
+            
+            <!-- Y-axis labels -->
+            <text x="15" y="30" text-anchor="end" font-size="12" fill="#666">${formatNumber(maxValue)}</text>
+            <text x="15" y="${chartHeight - 30}" text-anchor="end" font-size="12" fill="#666">0</text>
+          </svg>
         </div>
+        <p class="myio-chart-note">
+          ${this.getI18nText("kwhUnit")} consumption over time. Hover over bars for details.
+        </p>
       </div>
     `;
     this.chartContainer.innerHTML = chartHTML;
   }
+  /**
+   * Shows the KPI button
+   */
+  showKPIButton() {
+    const kpiButtonContainer = document.getElementById("energy-kpi-btn");
+    if (kpiButtonContainer) {
+      kpiButtonContainer.style.display = "block";
+    }
+  }
   /**
    * Exports data to CSV
    */
@@ -6652,116 +6694,6 @@ var EnergyModalView = class {
     const csvContent = toCsv(csvData);
     this.downloadCSV(csvContent, `energy-report-${device.id}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`);
   }
-  /**
-   * Robust PDF export using UMD libraries and iframe handshake
-   */
-  async exportToPdf() {
-    try {
-      await this.ensurePdfLibs();
-      const iframe = document.getElementById("energy-report-iframe");
-      const requestId = "energy-pdf:" + Date.now();
-      const png = await this.requestIframePng(iframe, requestId, 1400).catch(() => null);
-      const { jsPDF } = window.jspdf;
-      const pdf = new jsPDF({ orientation: "landscape", unit: "px", format: "a4" });
-      const W = pdf.internal.pageSize.getWidth();
-      pdf.setFillColor(45, 20, 88);
-      pdf.rect(0, 0, W, 56, "F");
-      pdf.setTextColor(255, 255, 255);
-      pdf.setFontSize(18);
-      const title = document.getElementById("modal-title")?.textContent || "Relat\xF3rio de Energia";
-      pdf.text(title, 20, 34);
-      if (png) {
-        const img = new Image();
-        img.src = png;
-        await img.decode();
-        const maxW = W - 40;
-        const ratio = img.height / img.width;
-        const drawW = maxW;
-        const drawH = drawW * ratio;
-        pdf.addImage(png, "PNG", 20, 76, drawW, drawH, void 0, "FAST");
-      } else {
-        const toolbar = document.querySelector(".myio-modal__toolbar");
-        if (toolbar) {
-          const cap = await window.html2canvas(toolbar, {
-            backgroundColor: "#ffffff",
-            scale: Math.min(window.devicePixelRatio || 1, 2)
-          });
-          const dataUrl = cap.toDataURL("image/png", 0.92);
-          pdf.addImage(dataUrl, "PNG", 20, 76, W - 40, (W - 40) * (cap.height / cap.width));
-        }
-        pdf.setTextColor(85, 85, 85);
-        pdf.setFontSize(12);
-        pdf.text("Nota: o gr\xE1fico est\xE1 hospedado em iframe cross-origin; use a vers\xE3o integrada/same-origin para exportar o gr\xE1fico completo.", 20, 70);
-      }
-      const fname = this.buildEnergyFileName();
-      pdf.save(fname);
-    } catch (error) {
-      console.error("[EnergyModalView] PDF export error:", error);
-      throw new Error("Failed to export PDF. Please try again.");
-    }
-  }
-  /**
-   * Build energy filename
-   */
-  buildEnergyFileName() {
-    const { device } = this.config.context;
-    const identifier = device.attributes.identifier || "SEM_IDENTIFICADOR";
-    const startDate = this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate;
-    const endDate = this.config.params.endDate instanceof Date ? this.config.params.endDate.toISOString().split("T")[0] : this.config.params.endDate;
-    return `EnergyReport_${identifier}_${startDate}_to_${endDate}.pdf`;
-  }
-  /**
-   * Ensure PDF libraries are loaded from CDN (UMD)
-   */
-  async ensurePdfLibs() {
-    const tasks = [];
-    if (!window.html2canvas) {
-      tasks.push(this.loadScript("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"));
-    }
-    if (!(window.jspdf && window.jspdf.jsPDF)) {
-      tasks.push(this.loadScript("https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"));
-    }
-    await Promise.all(tasks);
-  }
-  /**
-   * Load script from CDN
-   */
-  loadScript(src) {
-    return new Promise((resolve, reject) => {
-      const script = document.createElement("script");
-      script.src = src;
-      script.async = true;
-      script.onload = () => resolve();
-      script.onerror = reject;
-      document.head.appendChild(script);
-    });
-  }
-  /**
-   * Request PNG from iframe via postMessage (same-origin)
-   */
-  requestIframePng(iframe, requestId, targetWidth = 1400) {
-    return new Promise((resolve, reject) => {
-      const timeout = setTimeout(() => {
-        cleanup();
-        reject(new Error("iframe timeout"));
-      }, 6e3);
-      function cleanup() {
-        clearTimeout(timeout);
-        window.removeEventListener("message", onMessage);
-      }
-      function onMessage(ev) {
-        if (!ev.data || ev.data.type !== "energy-report:png" || ev.data.requestId !== requestId) return;
-        cleanup();
-        resolve(ev.data.dataUrl);
-      }
-      window.addEventListener("message", onMessage);
-      iframe?.contentWindow?.postMessage({
-        type: "energy-report:render-png",
-        requestId,
-        targetWidth
-      }, "*");
-    });
-  }
   /**
    * Downloads CSV file
    */
@@ -6779,14 +6711,27 @@ var EnergyModalView = class {
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   }
+  /**
+   * Gets default start date (first day of current month)
+   */
+  getDefaultStartDate() {
+    const date = /* @__PURE__ */ new Date();
+    date.setDate(1);
+    return date.toISOString().split("T")[0];
+  }
+  /**
+   * Gets default end date (today)
+   */
+  getDefaultEndDate() {
+    return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+  }
   /**
    * Loads data with new date range
    */
   async loadData() {
     if (this.isLoading) return;
-    const loadBtn = document.getElementById("btn-load");
-    const exportCsvBtn = document.getElementById("btn-csv");
-    const exportPdfBtn = document.getElementById("btn-pdf");
+    const loadBtn = document.getElementById("load-btn");
+    const exportBtn = document.getElementById("export-csv-btn");
     const spinner = document.getElementById("load-spinner");
     if (!this.dateRangePicker) {
       this.showError("Seletor de data n\xE3o inicializado");
@@ -6794,8 +6739,7 @@ var EnergyModalView = class {
     }
     this.isLoading = true;
     loadBtn.disabled = true;
-    exportCsvBtn.disabled = true;
-    exportPdfBtn.disabled = true;
+    exportBtn.disabled = true;
     spinner.style.display = "inline-block";
     try {
       const { startISO, endISO } = this.dateRangePicker.getDates();
@@ -6820,35 +6764,20 @@ var EnergyModalView = class {
    * Sets up event listeners
    */
   async setupEventListeners() {
-    const exportCsvBtn = document.getElementById("btn-csv");
-    const exportPdfBtn = document.getElementById("btn-pdf");
+    const exportBtn = document.getElementById("export-csv-btn");
     const closeBtn = document.getElementById("close-btn");
-    const closeBtnToolbar = document.getElementById("btn-close");
-    const loadBtn = document.getElementById("btn-load");
-    const dateRangeInput = document.getElementById("energy-date-range");
-    if (exportCsvBtn) {
-      exportCsvBtn.addEventListener("click", () => {
+    const loadBtn = document.getElementById("load-btn");
+    const showKpisBtn = document.getElementById("show-kpis-btn");
+    const dateRangeInput = document.getElementById("date-range");
+    if (exportBtn) {
+      exportBtn.addEventListener("click", () => {
         try {
           this.exportToCsv();
         } catch (error) {
-          console.error("[EnergyModalView] CSV export error:", error);
-          this.config.onError({
-            code: "UNKNOWN_ERROR",
-            message: "Failed to export CSV",
-            cause: error
-          });
-        }
-      });
-    }
-    if (exportPdfBtn) {
-      exportPdfBtn.addEventListener("click", async () => {
-        try {
-          await this.exportToPdf();
-        } catch (error) {
-          console.error("[EnergyModalView] PDF export error:", error);
+          console.error("[EnergyModalView] Export error:", error);
           this.config.onError({
             code: "UNKNOWN_ERROR",
-            message: "Failed to export PDF",
+            message: "Failed to export data",
             cause: error
           });
         }
@@ -6859,14 +6788,15 @@ var EnergyModalView = class {
         this.modal.close();
       });
     }
-    if (closeBtnToolbar) {
-      closeBtnToolbar.addEventListener("click", () => {
-        this.modal.close();
-      });
-    }
     if (loadBtn) {
       loadBtn.addEventListener("click", () => this.loadData());
     }
+    if (showKpisBtn) {
+      showKpisBtn.addEventListener("click", () => {
+        console.log("[EnergyModalView] Show KPIs modal clicked");
+        alert("KPI modal functionality to be implemented");
+      });
+    }
     try {
       this.dateRangePicker = await attach(dateRangeInput, {
         presetStart: this.config.params.startDate instanceof Date ? this.config.params.startDate.toISOString().split("T")[0] : this.config.params.startDate,
@@ -6881,23 +6811,14 @@ var EnergyModalView = class {
     } catch (error) {
       console.warn("DateRangePicker initialization failed, using fallback:", error);
     }
-    this.applyDynamicHeights();
-  }
-  /**
-   * Apply dynamic heights to prevent iframe squashing
-   */
-  applyDynamicHeights() {
-    const modal = document.querySelector(".energy-report-modal");
-    const body = document.querySelector(".myio-modal__body");
-    if (!modal || !body) return;
-    body.style.minHeight = "0px";
   }
   /**
    * Helper methods for hiding/showing sections
    */
   hideLoadingState() {
-    if (this.chartContainer) {
-      this.chartContainer.style.display = "none";
+    const loadingState = this.chartContainer?.querySelector(".myio-loading-state");
+    if (loadingState) {
+      loadingState.remove();
     }
   }
   hideError() {
@@ -6906,6 +6827,12 @@ var EnergyModalView = class {
       errorContainer.style.display = "none";
     }
   }
+  hideKPIButton() {
+    const kpiButtonContainer = document.getElementById("energy-kpi-btn");
+    if (kpiButtonContainer) {
+      kpiButtonContainer.style.display = "none";
+    }
+  }
   /**
    * Gets internationalized text
    */
@@ -6914,202 +6841,112 @@ var EnergyModalView = class {
     return i18n[key] || DEFAULT_I18N2[key];
   }
   /**
-   * Gets modal styles - FIXED BLUR ISSUE + PROPER LAYOUT
+   * Gets modal styles with header color matching openDashboardPopupEnergy
    */
   getModalStyles() {
+    const styles = this.config.params.styles || {};
     return `
-      /* === Overlay: blur ONLY the background, NOT the modal === */
-      .myio-modal-overlay {
-        position: fixed; 
-        inset: 0; 
-        z-index: 9998;
-        /* Use the requested brand tint but semi-transparent */
-        background: rgba(150,132,181,0.35);           /* #9684B5 @ 35% */
-        backdrop-filter: blur(6px);                    /* blur the page behind */
-        display: grid; 
-        place-items: center;
-      }
-
-      /* Modal sits ABOVE overlay */
-      .myio-modal {
-        position: relative; 
-        z-index: 9999;            /* ensure not blurred */
-        background: #fff; 
-        color: #111;
-        border-radius: 16px; 
-        overflow: hidden;
-        box-shadow: 0 24px 64px rgba(0,0,0,.25);
-      }
-
-      /* Fullscreen-ish layout */
-      .energy-report-modal {
-        width: 96vw; 
-        max-width: 96vw;
-        max-height: calc(100vh - 48px);
-        display: flex; 
-        flex-direction: column;
-      }
-
-      /* Header */
-      .myio-modal__header {
-        background: #2D1458; 
-        color: #fff;
-        padding: 16px 20px;
-        display: flex; 
-        align-items: center; 
-        justify-content: space-between;
-        flex-shrink: 0;
-      }
-
-      .myio-modal__header h2 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
+      .myio-energy-modal-scope {
+        --myio-energy-primary: ${styles.primaryColor || "#4A148C"};
+        --myio-energy-bg: ${styles.backgroundColor || "#ffffff"};
+        --myio-energy-text: ${styles.textColor || "#1f2937"};
+        --myio-energy-border: ${styles.borderColor || "#e5e7eb"};
+        --myio-energy-radius: ${styles.borderRadius || "8px"};
+        --myio-energy-font: ${styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+        
+        font-family: var(--myio-energy-font);
+        color: var(--myio-energy-text);
       }
 
-      .myio-modal__close {
-        background: none;
-        border: none;
-        color: #fff;
-        font-size: 24px;
+      .myio-btn {
+        padding: 8px 16px;
+        border-radius: var(--myio-energy-radius);
+        border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-bg);
+        color: var(--myio-energy-text);
         cursor: pointer;
-        padding: 4px;
-        border-radius: 4px;
-        transition: background-color 0.2s;
-      }
-
-      .myio-modal__close:hover {
-        background: rgba(255,255,255,0.1);
-      }
-
-      /* Toolbar */
-      .myio-modal__toolbar {
-        display: flex; 
-        align-items: center; 
-        justify-content: space-between;
-        gap: 12px; 
-        padding: 12px 16px;
-        border-bottom: 1px solid rgba(45,20,88,.12);
-        flex-shrink: 0;
-      }
-
-      .tb-start, .tb-end {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-
-      /* Body must grow; enable internal scroll only */
-      .myio-modal__body {
-        flex: 1 1 auto; 
-        min-height: 0;                /* critical to avoid squashing */
-        padding: 12px 16px 16px;
-        overflow: auto;
-      }
-
-      /* Chart area fills the remaining height */
-      .chart-iframe-wrap {
-        flex: 1 1 auto; 
-        min-height: 0; 
-        height: 100%;
-        display: flex;
+        font-size: 14px;
+        transition: all 0.2s;
       }
 
-      .chart-iframe-wrap iframe,
-      .myio-energy-chart-container {
-        flex: 1 1 auto; 
-        min-height: 0;
-        width: 100%; 
-        height: 100%;
-        border: 0; 
-        border-radius: 12px;
-        background: #f8f8fb;
+      .myio-btn:hover:not(:disabled) {
+        background: #f3f4f6;
       }
 
-      .myio-energy-chart-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      .myio-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
       }
 
-      /* Premium buttons */
-      .btn {
-        padding: 8px 12px; 
-        border-radius: 10px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s;
-        border: 1px solid transparent;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        background: transparent;
+      .myio-btn-primary {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
       }
 
-      .btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+      .myio-btn-primary:hover:not(:disabled) {
+        background: #6A1B9A;
       }
 
-      .btn-premium {
-        background: #2D1458; 
-        color: #fff;
-        border: 1px solid rgba(255,255,255,.08);
+      .myio-btn-secondary {
+        background: #f3f4f6;
+        color: var(--myio-energy-text);
+        border-color: var(--myio-energy-border);
       }
 
-      .btn-premium:hover:not(:disabled) { 
-        background: #3A1A6F; 
+      .myio-btn-secondary:hover:not(:disabled) {
+        background: #e5e7eb;
       }
 
-      .btn-premium:focus { 
-        outline: 3px solid rgba(45,20,88,.35); 
-        outline-offset: 2px; 
+      .myio-modal-scope {
+        height: 100% !important;
+        display: flex !important;
+        flex-direction: column !important;
       }
 
-      .btn-ghost {
-        background: transparent;
-        color: #2D1458;
-        border: 1px solid rgba(45,20,88,0.12);
+      .myio-energy-chart-container {
+        flex: 1 !important;
+        min-height: 353px !important;
+        height: 353px !important;
+        background: var(--myio-energy-bg);
+        border-radius: var(--myio-energy-radius);
+        border: 1px solid var(--myio-energy-border);
+        padding: 10px !important;
+        display: block !important;
+        overflow: hidden !important;
       }
 
-      .btn-ghost:hover:not(:disabled) {
-        background: rgba(45,20,88,0.05);
+      .myio-energy-chart-container > iframe {
+        width: 100% !important;
+        height: 100% !important;
+        min-height: 408px !important;
+        border: none !important;
       }
 
-      /* Input styling */
-      #energy-date-range {
-        padding: 8px 12px;
-        border: 1px solid rgba(45,20,88,0.12);
-        border-radius: 8px;
-        font-size: 14px;
-        background: #fff;
-        color: #111;
-        width: 300px;
+      .myio-energy-chart-container iframe,
+      .myio-energy-chart-container iframe body,
+      .myio-energy-chart-container iframe html {
+        height: 100% !important;
+        min-height: 408px !important;
       }
 
-      #energy-date-range:focus {
-        outline: none;
-        border-color: #2D1458;
-        box-shadow: 0 0 0 3px rgba(45,20,88,0.1);
+      .myio-energy-chart-container .chart-wrapper,
+      .myio-energy-chart-container .chart-container,
+      .myio-energy-chart-container canvas,
+      .myio-energy-chart-container svg {
+        height: 408px !important;
+        min-height: 408px !important;
       }
 
-      /* Loading and error states */
       .myio-loading-state {
         text-align: center;
-        padding: 40px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
       }
 
       .myio-spinner {
         width: 40px;
         height: 40px;
-        border: 4px solid rgba(45,20,88,0.12);
-        border-top: 4px solid #2D1458;
+        border: 4px solid var(--myio-energy-border);
+        border-top: 4px solid var(--myio-energy-primary);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin: 0 auto 16px;
@@ -7123,9 +6960,8 @@ var EnergyModalView = class {
       .myio-energy-error {
         background: #fef2f2;
         border: 1px solid #fecaca;
-        border-radius: 8px;
+        border-radius: var(--myio-energy-radius);
         padding: 16px;
-        margin: 8px 16px;
       }
 
       .myio-error-content {
@@ -7143,20 +6979,62 @@ var EnergyModalView = class {
         font-weight: 500;
       }
 
-      /* Responsive */
+
+
+      .myio-fallback-chart h4 {
+        margin: 0 0 16px 0;
+        text-align: center;
+      }
+
+      .myio-chart-container {
+        border: 1px solid var(--myio-energy-border);
+        border-radius: var(--myio-energy-radius);
+        overflow: hidden;
+      }
+
+      .myio-chart-note {
+        margin: 12px 0 0 0;
+        font-size: 12px;
+        color: #666;
+        text-align: center;
+      }
+
+      .myio-form-group {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .myio-label {
+        font-weight: 500;
+        margin-bottom: 5px;
+        color: var(--myio-energy-text);
+      }
+
+      .myio-input {
+        padding: 8px 12px;
+        border: 1px solid var(--myio-energy-border);
+        border-radius: var(--myio-energy-radius);
+        font-size: 14px;
+        background: var(--myio-energy-bg);
+        color: var(--myio-energy-text);
+      }
+
+      .myio-input:focus {
+        outline: none;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.1);
+      }
+
       @media (max-width: 768px) {
-        .myio-modal__toolbar {
-          flex-direction: column;
-          align-items: stretch;
-          gap: 8px;
+        .myio-energy-modal-layout {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
         }
         
-        .tb-start, .tb-end {
-          justify-content: center;
-        }
-
-        #energy-date-range {
-          width: 100%;
+        .myio-energy-header {
+          flex-direction: column;
+          gap: 12px;
+          align-items: stretch;
         }
       }
     `;
@@ -7165,10 +7043,17 @@ var EnergyModalView = class {
    * Destroys the view and cleans up resources
    */
   destroy() {
+    if (this.chartInstance && typeof this.chartInstance.destroy === "function") {
+      this.chartInstance.destroy();
+      this.chartInstance = null;
+    }
     if (this.dateRangePicker) {
       this.dateRangePicker.destroy();
       this.dateRangePicker = null;
     }
+    if (this.chartContainer) {
+      this.chartContainer.innerHTML = "";
+    }
     this.currentEnergyData = null;
     this.container = null;
     this.chartContainer = null;
@@ -7212,8 +7097,8 @@ var EnergyModal = class {
       const identifier = this.context.device.attributes.identifier || "SEM IDENTIFICADOR";
       const label = this.context.device.label || "SEM ETIQUETA";
       this.modal = createModal({
-        title: `Relat\xF3rio de Energia - ${identifier} - ${label}`,
-        width: "96vw",
+        title: `Energy Report - ${identifier} - ${label}`,
+        width: "80vw",
         height: "90vh",
         theme: this.params.theme === "dark" ? "dark" : "light"
       });
@@ -7221,7 +7106,7 @@ var EnergyModal = class {
         context: this.context,
         params: this.params,
         onExport: () => this.handleExport(),
-        onError: (error) => this.handleError(error),
+        onError: (error) => this.handleEnergyModalError(error),
         onDateRangeChange: (startISO, endISO) => this.handleDateRangeChange(startISO, endISO)
       });
       this.setupModalEventHandlers();
@@ -7454,6 +7339,23 @@ var EnergyModal = class {
       this.handleError(new Error("Failed to export data to CSV"));
     }
   }
+  /**
+   * Handles EnergyModalError types from the view
+   */
+  handleEnergyModalError(error) {
+    console.error("[EnergyModal] EnergyModalError occurred:", error);
+    if (this.view) {
+      this.view.showError(error.message);
+    }
+    if (this.params.onError) {
+      try {
+        this.params.onError(error);
+      } catch (callbackError) {
+        console.warn("[EnergyModal] onError callback error:", callbackError);
+      }
+    }
+    this.emit("error", { message: error.message, error });
+  }
   /**
    * Handles errors with user feedback
    */