myio-js-library 0.1.213 → 0.1.214

package/dist/index.cjs

@@ -21471,26 +21471,26 @@ var WaterTankModalView = class {
    */
   getI18n() {
     const defaults = {
-      title: "Water Tank",
-      loading: "Loading...",
-      error: "Error loading data",
-      noData: "No data available",
-      exportCsv: "Export CSV",
-      close: "Close",
-      currentLevel: "Current Level",
-      averageLevel: "Average Level",
-      minLevel: "Minimum Level",
-      maxLevel: "Maximum Level",
-      dateRange: "Date Range",
-      deviceInfo: "Device Information",
-      levelChart: "Water Level History (m.c.a)",
+      title: "Caixa d'\xC1gua",
+      loading: "Carregando...",
+      error: "Erro ao carregar dados",
+      noData: "Nenhum dado dispon\xEDvel",
+      exportCsv: "Exportar CSV",
+      close: "Fechar",
+      currentLevel: "N\xEDvel Atual",
+      averageLevel: "N\xEDvel M\xE9dio",
+      minLevel: "N\xEDvel M\xEDnimo",
+      maxLevel: "N\xEDvel M\xE1ximo",
+      dateRange: "Per\xEDodo",
+      deviceInfo: "Informa\xE7\xF5es do Dispositivo",
+      levelChart: "Hist\xF3rico de N\xEDvel (m.c.a)",
       percentUnit: "%",
       status: {
-        critical: "Critical",
-        low: "Low",
-        medium: "Medium",
-        good: "Good",
-        full: "Full"
+        critical: "Cr\xEDtico",
+        low: "Baixo",
+        medium: "M\xE9dio",
+        good: "Bom",
+        full: "Cheio"
       }
     };
     return {
@@ -21591,62 +21591,327 @@ var WaterTankModalView = class {
     this.attachEventListeners();
   }
   /**
-   * Render modal header
+   * Render modal header - MyIO Premium Style
    */
   renderHeader() {
     const { context, params } = this.config;
     const title = params.ui?.title || `${this.i18n.title} - ${context.device.label}`;
     return `
       <div class="myio-water-tank-modal-header" style="
-        padding: 20px 24px;
-        border-bottom: 1px solid #e0e0e0;
+        padding: 4px 8px;
         display: flex;
         align-items: center;
         justify-content: space-between;
+        background: #3e1a7d;
+        color: white;
+        border-radius: 12px 12px 0 0;
+        min-height: 20px;
       ">
         <h2 style="
-          margin: 0;
-          font-size: 20px;
+          margin: 6px;
+          font-size: 18px;
           font-weight: 600;
-          color: #2c3e50;
-        ">${title}</h2>
-        <button class="myio-water-tank-modal-close" style="
-          background: none;
-          border: none;
-          font-size: 24px;
-          color: #7f8c8d;
-          cursor: pointer;
-          padding: 0;
-          width: 32px;
-          height: 32px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 4px;
-          transition: background 0.2s ease;
-        " title="${this.i18n.close}">
-          \xD7
-        </button>
+          color: white;
+          line-height: 2;
+        ">\u{1F4A7} ${title}</h2>
+        <div style="display: flex; gap: 4px; align-items: center;">
+          <button class="myio-water-tank-modal-close" title="${this.i18n.close}" style="
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 6px;
+            color: rgba(255,255,255,0.8);
+            transition: background-color 0.2s;
+          ">\xD7</button>
+        </div>
       </div>
     `;
   }
   /**
-   * Render modal body
+   * RFC-0107: Render modal body with new layout
+   * Left side: Tank visualization with percentage
+   * Right side: Chart with controls (larger area)
    */
   renderBody() {
     return `
       <div class="myio-water-tank-modal-body" style="
-        padding: 24px;
+        padding: 20px;
         overflow-y: auto;
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
       ">
-        ${this.renderDateRangePicker()}
-        ${this.renderTankVisualization()}
-        ${this.renderChart()}
+        ${this.renderControlsBar()}
+        <div style="
+          display: flex;
+          gap: 20px;
+          flex: 1;
+          min-height: 400px;
+        ">
+          ${this.renderTankPanel()}
+          ${this.renderChartPanel()}
+        </div>
       </div>
       ${this.renderFooter()}
     `;
   }
+  /**
+   * RFC-0107: Render controls bar with date range, aggregation, and limit
+   */
+  renderControlsBar() {
+    const { params } = this.config;
+    const startDate = this.formatDateForInput(params.startTs);
+    const endDate = this.formatDateForInput(params.endTs);
+    const currentAggregation = params.aggregation || "NONE";
+    const currentLimit = params.limit || 1e3;
+    return `
+      <div style="
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      ">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">De:</label>
+          <input type="date" id="myio-water-tank-start-date" value="${startDate}" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            cursor: pointer;
+          "/>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">At\xE9:</label>
+          <input type="date" id="myio-water-tank-end-date" value="${endDate}" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            cursor: pointer;
+          "/>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">Agrega\xE7\xE3o:</label>
+          <select id="myio-water-tank-aggregation" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            background: white;
+            cursor: pointer;
+          ">
+            <option value="NONE" ${currentAggregation === "NONE" ? "selected" : ""}>Nenhuma</option>
+            <option value="AVG" ${currentAggregation === "AVG" ? "selected" : ""}>M\xE9dia</option>
+            <option value="MIN" ${currentAggregation === "MIN" ? "selected" : ""}>M\xEDnimo</option>
+            <option value="MAX" ${currentAggregation === "MAX" ? "selected" : ""}>M\xE1ximo</option>
+            <option value="SUM" ${currentAggregation === "SUM" ? "selected" : ""}>Soma</option>
+            <option value="COUNT" ${currentAggregation === "COUNT" ? "selected" : ""}>Contagem</option>
+          </select>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 13px; font-weight: 500; color: #2c3e50;">Limite:</label>
+          <select id="myio-water-tank-limit" style="
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 13px;
+            color: #2c3e50;
+            background: white;
+            cursor: pointer;
+          ">
+            <option value="100" ${currentLimit === 100 ? "selected" : ""}>100</option>
+            <option value="500" ${currentLimit === 500 ? "selected" : ""}>500</option>
+            <option value="1000" ${currentLimit === 1e3 ? "selected" : ""}>1000</option>
+            <option value="2000" ${currentLimit === 2e3 ? "selected" : ""}>2000</option>
+            <option value="5000" ${currentLimit === 5e3 ? "selected" : ""}>5000</option>
+          </select>
+        </div>
+        <button id="myio-water-tank-apply-dates" style="
+          background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+          color: white;
+          border: none;
+          padding: 6px 16px;
+          border-radius: 6px;
+          font-size: 13px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        ">
+          Aplicar
+        </button>
+      </div>
+    `;
+  }
+  /**
+   * RFC-0107: Render tank panel (left side)
+   */
+  renderTankPanel() {
+    const { data, context } = this.config;
+    let percentage = 0;
+    const percentagePoints = data.telemetry.filter((p) => p.key === "water_percentage");
+    if (percentagePoints.length > 0) {
+      const latestPercentage = percentagePoints[percentagePoints.length - 1].value;
+      percentage = latestPercentage <= 1.5 ? latestPercentage * 100 : latestPercentage;
+    } else if (context.device.currentLevel !== void 0) {
+      const level = context.device.currentLevel;
+      percentage = level <= 1.5 ? level * 100 : level;
+    }
+    const levelStatus = this.getLevelStatus(Math.min(percentage, 100));
+    const tankImageUrl = this.getTankImageUrl(Math.min(percentage, 100));
+    const displayPercentage = percentage.toFixed(1);
+    return `
+      <div style="
+        width: 200px;
+        min-width: 200px;
+        background: linear-gradient(135deg, ${levelStatus.color}10 0%, ${levelStatus.color}05 100%);
+        border: 1px solid ${levelStatus.color}30;
+        border-radius: 12px;
+        padding: 24px 16px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+      ">
+        <img src="${tankImageUrl}" alt="Water Tank" style="
+          width: 100px;
+          height: auto;
+          filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+        "/>
+        <div style="
+          font-size: 42px;
+          font-weight: 700;
+          color: ${levelStatus.color};
+          line-height: 1;
+        ">${displayPercentage}%</div>
+        <div style="
+          background: ${levelStatus.color};
+          color: white;
+          padding: 4px 12px;
+          border-radius: 20px;
+          font-size: 11px;
+          font-weight: 600;
+          text-transform: uppercase;
+        ">${levelStatus.label}</div>
+        <div style="
+          font-size: 12px;
+          color: #7f8c8d;
+          text-align: center;
+        ">${this.i18n.currentLevel}</div>
+      </div>
+    `;
+  }
+  /**
+   * RFC-0107: Render chart panel (right side) with maximize button
+   */
+  renderChartPanel() {
+    const chartPoints = this.getChartDataPoints();
+    const chartTitle = this.chartDisplayMode === "water_percentage" ? "Hist\xF3rico de N\xEDvel (%)" : this.i18n.levelChart;
+    if (chartPoints.length === 0) {
+      const displayLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
+      return `
+        <div style="
+          flex: 1;
+          background: #f8f9fa;
+          border: 1px solid #e0e0e0;
+          border-radius: 12px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+        ">
+          <div style="font-size: 48px; margin-bottom: 16px; opacity: 0.3;">\u{1F4CA}</div>
+          <div style="color: #7f8c8d; font-size: 16px;">${this.i18n.noData}</div>
+          <div style="color: #bdc3c7; font-size: 13px; margin-top: 8px;">
+            Sem dados de ${this.chartDisplayMode === "water_percentage" ? "percentual" : "n\xEDvel"} (${displayLabel}) dispon\xEDveis
+          </div>
+        </div>
+      `;
+    }
+    const firstTs = chartPoints[0]?.ts;
+    const lastTs = chartPoints[chartPoints.length - 1]?.ts;
+    return `
+      <div id="myio-water-tank-chart-panel" style="
+        flex: 1;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      ">
+        <div style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 12px;
+        ">
+          <h3 style="
+            margin: 0;
+            font-size: 15px;
+            font-weight: 600;
+            color: #2c3e50;
+          ">${chartTitle}</h3>
+          <div style="
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          ">
+            <select id="myio-water-tank-display-mode" style="
+              padding: 4px 8px;
+              border: 1px solid #ddd;
+              border-radius: 4px;
+              font-size: 12px;
+              color: #2c3e50;
+              background: white;
+              cursor: pointer;
+            ">
+              <option value="water_level" ${this.chartDisplayMode === "water_level" ? "selected" : ""}>N\xEDvel (m.c.a)</option>
+              <option value="water_percentage" ${this.chartDisplayMode === "water_percentage" ? "selected" : ""}>Percentual (%)</option>
+            </select>
+            <button id="myio-water-tank-maximize" title="Maximizar gr\xE1fico" style="
+              background: #f0f0f0;
+              border: 1px solid #ddd;
+              border-radius: 4px;
+              padding: 4px 8px;
+              cursor: pointer;
+              font-size: 14px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            ">\u26F6</button>
+          </div>
+        </div>
+        <div style="flex: 1; min-height: 300px;">
+          <canvas id="myio-water-tank-chart" style="width: 100%; height: 100%;"></canvas>
+        </div>
+        ${firstTs && lastTs ? `
+          <div style="
+            margin-top: 8px;
+            font-size: 11px;
+            color: #7f8c8d;
+            text-align: center;
+          ">
+            ${this.formatDate(firstTs, false)} \u2014 ${this.formatDate(lastTs, false)}
+            (${chartPoints.length} leituras)
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
   /**
    * Render date range picker
    */
@@ -21667,7 +21932,7 @@ var WaterTankModalView = class {
         flex-wrap: wrap;
       ">
         <div style="display: flex; align-items: center; gap: 8px;">
-          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">From:</label>
+          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">De:</label>
           <input type="date" id="myio-water-tank-start-date" value="${startDate}" style="
             padding: 8px 12px;
             border: 1px solid #ddd;
@@ -21678,7 +21943,7 @@ var WaterTankModalView = class {
           "/>
         </div>
         <div style="display: flex; align-items: center; gap: 8px;">
-          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">To:</label>
+          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">At\xE9:</label>
           <input type="date" id="myio-water-tank-end-date" value="${endDate}" style="
             padding: 8px 12px;
             border: 1px solid #ddd;
@@ -21699,7 +21964,7 @@ var WaterTankModalView = class {
           cursor: pointer;
           transition: all 0.2s ease;
         ">
-          Apply
+          Aplicar
         </button>
       </div>
     `;
@@ -21921,7 +22186,7 @@ var WaterTankModalView = class {
     }
     const applyDatesBtn = this.modal.querySelector("#myio-water-tank-apply-dates");
     if (applyDatesBtn) {
-      applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
+      applyDatesBtn.addEventListener("click", () => this.handleApplyParams());
     }
     const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
     if (displayModeSelect) {
@@ -21930,6 +22195,10 @@ var WaterTankModalView = class {
         this.refreshChart();
       });
     }
+    const maximizeBtn = this.modal.querySelector("#myio-water-tank-maximize");
+    if (maximizeBtn) {
+      maximizeBtn.addEventListener("click", () => this.handleMaximize());
+    }
     this.overlay.addEventListener("click", (e) => {
       if (e.target === this.overlay) {
         this.config.onClose();
@@ -21944,12 +22213,20 @@ var WaterTankModalView = class {
     });
   }
   /**
-   * Handle date range change
+   * Handle date range change (legacy - kept for compatibility)
    */
   handleDateRangeChange() {
+    this.handleApplyParams();
+  }
+  /**
+   * RFC-0107: Handle apply params (date range, aggregation, limit)
+   */
+  handleApplyParams() {
     if (!this.modal) return;
     const startInput = this.modal.querySelector("#myio-water-tank-start-date");
     const endInput = this.modal.querySelector("#myio-water-tank-end-date");
+    const aggregationSelect = this.modal.querySelector("#myio-water-tank-aggregation");
+    const limitSelect = this.modal.querySelector("#myio-water-tank-limit");
     if (startInput && endInput) {
       const startTs = new Date(startInput.value).setHours(0, 0, 0, 0);
       const endTs = new Date(endInput.value).setHours(23, 59, 59, 999);
@@ -21957,17 +22234,77 @@ var WaterTankModalView = class {
         alert("Start date must be before end date");
         return;
       }
-      console.log("[WaterTankModalView] Date range changed:", {
+      const aggregation = aggregationSelect?.value || "NONE";
+      const limit = parseInt(limitSelect?.value || "1000", 10);
+      console.log("[WaterTankModalView] Params changed:", {
         startTs,
         endTs,
+        aggregation,
+        limit,
         startDate: new Date(startTs).toISOString(),
         endDate: new Date(endTs).toISOString()
       });
-      if (this.config.onDateRangeChange) {
+      this.config.params.startTs = startTs;
+      this.config.params.endTs = endTs;
+      this.config.params.aggregation = aggregation;
+      this.config.params.limit = limit;
+      if (this.config.onParamsChange) {
+        this.config.onParamsChange({ startTs, endTs, aggregation, limit });
+      } else if (this.config.onDateRangeChange) {
         this.config.onDateRangeChange(startTs, endTs);
       }
     }
   }
+  /**
+   * RFC-0107: Handle maximize/restore chart
+   */
+  isMaximized = false;
+  originalModalStyle = "";
+  handleMaximize() {
+    if (!this.modal) return;
+    const chartPanel = this.modal.querySelector("#myio-water-tank-chart-panel");
+    const tankPanel = chartPanel?.previousElementSibling;
+    const maximizeBtn = this.modal.querySelector("#myio-water-tank-maximize");
+    if (!chartPanel) return;
+    if (this.isMaximized) {
+      this.modal.style.cssText = this.originalModalStyle;
+      if (tankPanel) tankPanel.style.display = "";
+      chartPanel.style.cssText = `
+        flex: 1;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      `;
+      if (maximizeBtn) maximizeBtn.textContent = "\u26F6";
+      this.isMaximized = false;
+    } else {
+      this.originalModalStyle = this.modal.style.cssText;
+      this.modal.style.width = "95vw";
+      this.modal.style.height = "90vh";
+      this.modal.style.maxWidth = "95vw";
+      if (tankPanel) tankPanel.style.display = "none";
+      chartPanel.style.cssText = `
+        flex: 1;
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        min-height: 100%;
+      `;
+      if (maximizeBtn) maximizeBtn.textContent = "\u26F6";
+      this.isMaximized = true;
+    }
+    requestAnimationFrame(() => {
+      this.renderCanvasChart();
+    });
+  }
   handleEscapeKey(e) {
     if (e.key === "Escape") {
       this.config.onClose();
@@ -22106,7 +22443,7 @@ var WaterTankModalView = class {
     }
   }
   /**
-   * Update data and re-render chart
+   * Update data and re-render chart with new layout
    */
   updateData(data) {
     this.config.data = data;
@@ -22114,13 +22451,20 @@ var WaterTankModalView = class {
       const bodyEl = this.modal.querySelector(".myio-water-tank-modal-body");
       if (bodyEl) {
         bodyEl.innerHTML = `
-          ${this.renderDateRangePicker()}
-          ${this.renderTankVisualization()}
-          ${this.renderChart()}
+          ${this.renderControlsBar()}
+          <div style="
+            display: flex;
+            gap: 20px;
+            flex: 1;
+            min-height: 400px;
+          ">
+            ${this.renderTankPanel()}
+            ${this.renderChartPanel()}
+          </div>
         `;
         const applyDatesBtn = this.modal.querySelector("#myio-water-tank-apply-dates");
         if (applyDatesBtn) {
-          applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
+          applyDatesBtn.addEventListener("click", () => this.handleApplyParams());
         }
         const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
         if (displayModeSelect) {
@@ -22129,6 +22473,10 @@ var WaterTankModalView = class {
             this.refreshChart();
           });
         }
+        const maximizeBtn = this.modal.querySelector("#myio-water-tank-maximize");
+        if (maximizeBtn) {
+          maximizeBtn.addEventListener("click", () => this.handleMaximize());
+        }
         requestAnimationFrame(() => {
           this.renderCanvasChart();
         });
@@ -22408,7 +22756,8 @@ var WaterTankModal = class {
         onError: (error) => this.handleError(error),
         onClose: () => this.close(),
         // Call close() to destroy view and trigger user callback
-        onDateRangeChange: (startTs, endTs) => this.handleDateRangeChange(startTs, endTs)
+        onDateRangeChange: (startTs, endTs) => this.handleDateRangeChange(startTs, endTs),
+        onParamsChange: (params) => this.handleParamsChange(params)
       });
       this.view.render();
       this.view.show();
@@ -22473,6 +22822,43 @@ var WaterTankModal = class {
       this.handleError(error);
     }
   }
+  /**
+   * RFC-0107: Handle params change (date range, aggregation, limit)
+   */
+  async handleParamsChange(params) {
+    console.log("[WaterTankModal] Params changed:", {
+      startTs: params.startTs,
+      endTs: params.endTs,
+      aggregation: params.aggregation,
+      limit: params.limit,
+      startDate: new Date(params.startTs).toISOString(),
+      endDate: new Date(params.endTs).toISOString()
+    });
+    this.options.startTs = params.startTs;
+    this.options.endTs = params.endTs;
+    this.options.aggregation = params.aggregation;
+    this.options.limit = params.limit;
+    this.context.timeRange.startTs = params.startTs;
+    this.context.timeRange.endTs = params.endTs;
+    try {
+      console.log("[WaterTankModal] Fetching data with new params...");
+      this.data = await this.fetchTelemetryData();
+      if (this.view) {
+        this.view.updateData(this.data);
+      }
+      if (this.options.onDataLoaded) {
+        try {
+          this.options.onDataLoaded(this.data);
+        } catch (callbackError) {
+          console.warn("[WaterTankModal] onDataLoaded callback error:", callbackError);
+        }
+      }
+      console.log("[WaterTankModal] Data refreshed with new params successfully");
+    } catch (error) {
+      console.error("[WaterTankModal] Failed to fetch data with new params:", error);
+      this.handleError(error);
+    }
+  }
   /**
    * Handle export functionality
    */
@@ -22594,8 +22980,8 @@ function validateOptions2(options) {
   }
   if (options.currentLevel !== void 0) {
     const level = Number(options.currentLevel);
-    if (isNaN(level) || level < 0 || level > 100) {
-      errors.push("currentLevel must be a number between 0 and 100");
+    if (isNaN(level) || level < 0) {
+      errors.push("currentLevel must be a non-negative number");
     }
   }
   if (options.limit !== void 0) {