myio-js-library 0.1.157 → 0.1.159

package/dist/index.js

@@ -5026,8 +5026,14 @@ function verifyOfflineStatus(entityObject, delayTimeInMins = 15) {
 }
 function paint(root, state) {
   const { entityObject, i18n, delayTimeConnectionInMins } = state;
-  if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
-    entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+  if (entityObject.connectionStatus) {
+    if (entityObject.connectionStatus === "offline") {
+      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    }
+  } else {
+    if (verifyOfflineStatus(entityObject, delayTimeConnectionInMins) === false) {
+      entityObject.deviceStatus = DeviceStatusType.NO_INFO;
+    }
   }
   const stateClass = getCardStateClass(entityObject.deviceStatus);
   root.className = `myio-ho-card ${stateClass}`;
@@ -10837,11 +10843,14 @@ var EnergyModalView = class {
   isLoading = false;
   currentTheme = "dark";
   currentBarMode = "stacked";
+  // RFC-0097: Granularity selector state (only 1h and 1d supported)
+  currentGranularity = "1d";
   constructor(modal, config) {
     this.modal = modal;
     this.config = config;
     this.initializeTheme();
     this.initializeBarMode();
+    this.initializeGranularity();
     this.validateConfiguration();
     this.render();
   }
@@ -10859,6 +10868,59 @@ var EnergyModalView = class {
     const savedBarMode = localStorage.getItem("myio-modal-bar-mode");
     this.currentBarMode = savedBarMode || "stacked";
   }
+  /**
+   * RFC-0097: Initializes granularity from config or localStorage
+   */
+  initializeGranularity() {
+    const savedGranularity = localStorage.getItem("myio-modal-granularity");
+    const configGranularity = this.config.params.granularity;
+    const candidate = savedGranularity || configGranularity || "1d";
+    this.currentGranularity = candidate === "1h" || candidate === "1d" ? candidate : "1d";
+  }
+  /**
+   * RFC-0097: Sets granularity and re-renders chart
+   */
+  setGranularity(granularity) {
+    if (this.currentGranularity === granularity) return;
+    this.currentGranularity = granularity;
+    const buttons = document.querySelectorAll(".myio-btn-granularity");
+    buttons.forEach((btn) => {
+      const btnEl = btn;
+      if (btnEl.dataset.granularity === granularity) {
+        btnEl.classList.add("active");
+      } else {
+        btnEl.classList.remove("active");
+      }
+    });
+    localStorage.setItem("myio-modal-granularity", granularity);
+    this.reRenderChart();
+    console.log("[EnergyModalView] [RFC-0097] Granularity changed to:", granularity);
+  }
+  /**
+   * RFC-0097: Calculates suggested granularity based on date range
+   * Only supports '1h' (hour) and '1d' (day)
+   */
+  calculateSuggestedGranularity(startDate, endDate) {
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24));
+    if (diffDays <= 1) return "1h";
+    return "1d";
+  }
+  /**
+   * RFC-0097: Applies granularity UI state (highlights correct button)
+   */
+  applyGranularityUI() {
+    const buttons = document.querySelectorAll(".myio-btn-granularity");
+    buttons.forEach((btn) => {
+      const btnEl = btn;
+      if (btnEl.dataset.granularity === this.currentGranularity) {
+        btnEl.classList.add("active");
+      } else {
+        btnEl.classList.remove("active");
+      }
+    });
+  }
   /**
    * Toggles between dark and light theme
    */
@@ -11129,6 +11191,14 @@ var EnergyModalView = class {
               </svg>
             </button>
             ` : ""}
+            ${this.config.params.mode === "comparison" ? `
+            <!-- RFC-0097: Granularity Selector (only 1h and 1d supported) -->
+            <div class="myio-granularity-selector" style="display: flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 8px; background: rgba(0,0,0,0.05); border-radius: 8px;">
+              <span style="font-size: 11px; color: #666; margin-right: 4px; white-space: nowrap;">Granularidade:</span>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1h" ? "active" : ""}" data-granularity="1h" title="Hora">1h</button>
+              <button class="myio-btn myio-btn-granularity ${this.currentGranularity === "1d" ? "active" : ""}" data-granularity="1d" title="Dia">1d</button>
+            </div>
+            ` : ""}
             <button id="close-btn" class="myio-btn myio-btn-secondary">
               Fechar
             </button>
@@ -11351,8 +11421,8 @@ var EnergyModalView = class {
         // ← NO TIME (YYYY-MM-DD)
         endDate: endDateStr,
         // ← NO TIME (YYYY-MM-DD)
-        granularity: this.config.params.granularity,
-        // ← REQUIRED
+        granularity: this.currentGranularity,
+        // RFC-0097: Use current granularity from selector
         theme: this.currentTheme,
         // ← Use current theme (dynamic)
         bar_mode: this.currentBarMode,
@@ -11424,7 +11494,8 @@ var EnergyModalView = class {
         readingType: "temperature",
         startDate: startDateStr,
         endDate: endDateStr,
-        granularity: this.config.params.granularity,
+        granularity: this.currentGranularity,
+        // RFC-0097: Use current granularity from selector
         theme: this.currentTheme,
         timezone: tzIdentifier,
         iframeBaseUrl: this.config.params.chartsBaseUrl || "https://graphs.apps.myio-bas.com",
@@ -11747,6 +11818,20 @@ var EnergyModalView = class {
         this.toggleBarMode();
       });
     }
+    const granularityButtons = document.querySelectorAll(".myio-btn-granularity");
+    if (granularityButtons.length > 0) {
+      this.applyGranularityUI();
+      granularityButtons.forEach((btn) => {
+        btn.addEventListener("click", (e) => {
+          const target = e.currentTarget;
+          const newGranularity = target.dataset.granularity;
+          if (newGranularity) {
+            this.setGranularity(newGranularity);
+          }
+        });
+      });
+      console.log("[EnergyModalView] [RFC-0097] Granularity selector initialized with:", this.currentGranularity);
+    }
     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,
@@ -11849,6 +11934,37 @@ var EnergyModalView = class {
         background: #e5e7eb;
       }
 
+      /* RFC-0097: Granularity selector buttons */
+      .myio-btn-granularity {
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: 6px;
+        border: 1px solid var(--myio-energy-border);
+        background: var(--myio-energy-bg);
+        color: var(--myio-energy-text);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        min-width: 36px;
+      }
+
+      .myio-btn-granularity:hover:not(.active) {
+        background: #f3f4f6;
+        border-color: var(--myio-energy-primary);
+        color: var(--myio-energy-primary);
+      }
+
+      .myio-btn-granularity.active {
+        background: var(--myio-energy-primary);
+        color: white;
+        border-color: var(--myio-energy-primary);
+        box-shadow: 0 2px 4px rgba(74, 20, 140, 0.25);
+      }
+
+      .myio-granularity-selector {
+        border: 1px solid var(--myio-energy-border);
+      }
+
       .myio-modal-scope {
         height: 100% !important;
         display: flex !important;
@@ -12229,7 +12345,9 @@ var EnergyModal = class {
       return;
     }
     if (!this.context?.resolved.ingestionId) {
-      const error = new Error("ingestionId not found in device attributes. Please configure the device properly.");
+      const error = new Error(
+        "ingestionId not found in device attributes. Please configure the device properly."
+      );
       this.handleError(error);
       return;
     }
@@ -14493,7 +14611,7 @@ var WaterTankModalView = class {
       maxLevel: "Maximum Level",
       dateRange: "Date Range",
       deviceInfo: "Device Information",
-      levelChart: "Level Chart",
+      levelChart: "Water Level History (m.c.a)",
       percentUnit: "%",
       status: {
         critical: "Critical",
@@ -14524,6 +14642,20 @@ var WaterTankModalView = class {
       return { status: "full", color: "#3498db", label: this.i18n.status.full };
     }
   }
+  /**
+   * Get tank image URL based on level percentage (same logic as device card)
+   */
+  getTankImageUrl(percentage) {
+    if (percentage >= 70) {
+      return "https://dashboard.myio-bas.com/api/images/public/3t6WVhMQJFsrKA8bSZmrngDsNPkZV7fq";
+    } else if (percentage >= 40) {
+      return "https://dashboard.myio-bas.com/api/images/public/4UBbShfXCVWR9wcw6IzVMNran4x1EW5n";
+    } else if (percentage >= 20) {
+      return "https://dashboard.myio-bas.com/api/images/public/aB9nX28F54fBBQs1Ht8jKUdYAMcq9QSm";
+    } else {
+      return "https://dashboard.myio-bas.com/api/images/public/qLdwhV4qw295poSCa7HinpnmXoN7dAPO";
+    }
+  }
   /**
    * Format timestamp to readable date
    */
@@ -14536,13 +14668,18 @@ var WaterTankModalView = class {
     }
     return dateStr;
   }
+  /**
+   * Format timestamp to ISO date string for input
+   */
+  formatDateForInput(ts) {
+    const date = new Date(ts);
+    return date.toISOString().split("T")[0];
+  }
   /**
    * Render the modal HTML
    */
   render() {
-    const { context, params, data } = this.config;
-    const currentLevel = data.summary.currentLevel ?? context.device.currentLevel ?? 0;
-    const levelStatus = this.getLevelStatus(currentLevel);
+    const { params } = this.config;
     this.overlay = document.createElement("div");
     this.overlay.className = "myio-water-tank-modal-overlay";
     this.overlay.style.cssText = `
@@ -14563,9 +14700,9 @@ var WaterTankModalView = class {
     this.modal.className = "myio-water-tank-modal";
     this.modal.style.cssText = `
       background: white;
-      border-radius: 8px;
+      border-radius: 12px;
       box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
-      width: ${params.ui?.width || 900}px;
+      width: ${params.ui?.width || 700}px;
       max-width: 95vw;
       max-height: 90vh;
       display: flex;
@@ -14631,97 +14768,150 @@ var WaterTankModalView = class {
         overflow-y: auto;
         flex: 1;
       ">
-        ${this.renderSummaryCards()}
+        ${this.renderDateRangePicker()}
+        ${this.renderTankVisualization()}
         ${this.renderChart()}
-        ${this.renderDeviceInfo()}
       </div>
       ${this.renderFooter()}
     `;
   }
   /**
-   * Render summary cards
+   * Render date range picker
    */
-  renderSummaryCards() {
-    const { data } = this.config;
-    const currentLevel = data.summary.currentLevel ?? 0;
-    const levelStatus = this.getLevelStatus(currentLevel);
+  renderDateRangePicker() {
+    const { params } = this.config;
+    const startDate = this.formatDateForInput(params.startTs);
+    const endDate = this.formatDateForInput(params.endTs);
     return `
       <div style="
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        background: #f8f9fa;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
         gap: 16px;
-        margin-bottom: 24px;
+        flex-wrap: wrap;
       ">
-        ${this.renderSummaryCard(
-      this.i18n.currentLevel,
-      `${currentLevel.toFixed(1)}${this.i18n.percentUnit}`,
-      levelStatus.color,
-      levelStatus.label
-    )}
-        ${this.renderSummaryCard(
-      this.i18n.averageLevel,
-      `${data.summary.avgLevel.toFixed(1)}${this.i18n.percentUnit}`,
-      "#3498db"
-    )}
-        ${this.renderSummaryCard(
-      this.i18n.minLevel,
-      `${data.summary.minLevel.toFixed(1)}${this.i18n.percentUnit}`,
-      "#e74c3c"
-    )}
-        ${this.renderSummaryCard(
-      this.i18n.maxLevel,
-      `${data.summary.maxLevel.toFixed(1)}${this.i18n.percentUnit}`,
-      "#27ae60"
-    )}
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">From:</label>
+          <input type="date" id="myio-water-tank-start-date" value="${startDate}" style="
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            color: #2c3e50;
+            cursor: pointer;
+          "/>
+        </div>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <label style="font-size: 14px; font-weight: 500; color: #2c3e50;">To:</label>
+          <input type="date" id="myio-water-tank-end-date" value="${endDate}" style="
+            padding: 8px 12px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            color: #2c3e50;
+            cursor: pointer;
+          "/>
+        </div>
+        <button id="myio-water-tank-apply-dates" style="
+          background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+          color: white;
+          border: none;
+          padding: 8px 20px;
+          border-radius: 6px;
+          font-size: 14px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        ">
+          Apply
+        </button>
       </div>
     `;
   }
   /**
-   * Render a single summary card
+   * Render tank visualization with percentage
    */
-  renderSummaryCard(label, value, color, badge) {
+  renderTankVisualization() {
+    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 ? latestPercentage * 100 : latestPercentage;
+    } else if (context.device.currentLevel !== void 0) {
+      const level = context.device.currentLevel;
+      percentage = level <= 1 ? level * 100 : level;
+    }
+    const levelStatus = this.getLevelStatus(percentage);
+    const tankImageUrl = this.getTankImageUrl(percentage);
     return `
       <div style="
-        background: linear-gradient(135deg, ${color}15 0%, ${color}05 100%);
-        border: 1px solid ${color}30;
-        border-radius: 8px;
-        padding: 16px;
-        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+        padding: 24px;
+        background: linear-gradient(135deg, ${levelStatus.color}10 0%, ${levelStatus.color}05 100%);
+        border: 1px solid ${levelStatus.color}30;
+        border-radius: 12px;
+        margin-bottom: 24px;
       ">
-        ${badge ? `
+        <div style="
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
+        ">
+          <img src="${tankImageUrl}" alt="Water Tank" style="
+            width: 120px;
+            height: auto;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
+          "/>
           <div style="
-            position: absolute;
-            top: 12px;
-            right: 12px;
-            background: ${color};
+            background: ${levelStatus.color};
             color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 10px;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
             font-weight: 600;
             text-transform: uppercase;
-          ">${badge}</div>
-        ` : ""}
-        <div style="
-          font-size: 12px;
-          color: #7f8c8d;
-          margin-bottom: 8px;
-          font-weight: 500;
-        ">${label}</div>
+          ">${levelStatus.label}</div>
+        </div>
+
         <div style="
-          font-size: 28px;
-          font-weight: 700;
-          color: ${color};
-        ">${value}</div>
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+        ">
+          <div style="
+            font-size: 48px;
+            font-weight: 700;
+            color: ${levelStatus.color};
+            line-height: 1;
+          ">${percentage.toFixed(1)}%</div>
+          <div style="
+            font-size: 14px;
+            color: #7f8c8d;
+            font-weight: 500;
+          ">${this.i18n.currentLevel}</div>
+        </div>
       </div>
     `;
   }
   /**
-   * Render chart section
+   * Render chart section - shows water_level (m.c.a) over time
    */
   renderChart() {
     const { data } = this.config;
-    if (data.telemetry.length === 0) {
+    const waterLevelPoints = data.telemetry.filter(
+      (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
+    );
+    if (waterLevelPoints.length === 0) {
       return `
         <div style="
           background: #f8f9fa;
@@ -14729,20 +14919,23 @@ var WaterTankModalView = class {
           border-radius: 8px;
           padding: 48px;
           text-align: center;
-          margin-bottom: 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;">
+            No water_level (m.c.a) data available for this period
+          </div>
         </div>
       `;
     }
+    const firstTs = waterLevelPoints[0]?.ts;
+    const lastTs = waterLevelPoints[waterLevelPoints.length - 1]?.ts;
     return `
       <div style="
         background: white;
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         padding: 20px;
-        margin-bottom: 24px;
       ">
         <h3 style="
           margin: 0 0 16px 0;
@@ -14750,56 +14943,18 @@ var WaterTankModalView = class {
           font-weight: 600;
           color: #2c3e50;
         ">${this.i18n.levelChart}</h3>
-        <canvas id="myio-water-tank-chart" style="width: 100%; height: 300px;"></canvas>
-        <div style="
-          margin-top: 16px;
-          font-size: 12px;
-          color: #7f8c8d;
-          text-align: center;
-        ">
-          ${this.i18n.dateRange}: ${this.formatDate(data.summary.firstReadingTs, false)} - ${this.formatDate(data.summary.lastReadingTs, false)}
-        </div>
-      </div>
-    `;
-  }
-  /**
-   * Render device info section
-   */
-  renderDeviceInfo() {
-    const { context, data } = this.config;
-    return `
-      <div style="
-        background: #f8f9fa;
-        border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 20px;
-      ">
-        <h3 style="
-          margin: 0 0 16px 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #2c3e50;
-        ">${this.i18n.deviceInfo}</h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;">
-          ${this.renderInfoRow("Device ID", context.device.id)}
-          ${this.renderInfoRow("Label", context.device.label)}
-          ${context.device.type ? this.renderInfoRow("Type", context.device.type) : ""}
-          ${context.metadata.slaveId ? this.renderInfoRow("Slave ID", String(context.metadata.slaveId)) : ""}
-          ${context.metadata.centralId ? this.renderInfoRow("Central ID", context.metadata.centralId) : ""}
-          ${this.renderInfoRow("Total Readings", String(data.summary.totalReadings))}
-          ${this.renderInfoRow("Data Keys", data.metadata.keys.join(", "))}
-        </div>
-      </div>
-    `;
-  }
-  /**
-   * Render an info row
-   */
-  renderInfoRow(label, value) {
-    return `
-      <div style="display: flex; justify-content: space-between; align-items: center;">
-        <span style="color: #7f8c8d; font-size: 13px;">${label}:</span>
-        <span style="color: #2c3e50; font-size: 13px; font-weight: 500; margin-left: 8px;">${value}</span>
+        <canvas id="myio-water-tank-chart" style="width: 100%; height: 280px;"></canvas>
+        ${firstTs && lastTs ? `
+          <div style="
+            margin-top: 12px;
+            font-size: 12px;
+            color: #7f8c8d;
+            text-align: center;
+          ">
+            ${this.formatDate(firstTs, false)} \u2014 ${this.formatDate(lastTs, false)}
+            (${waterLevelPoints.length} readings)
+          </div>
+        ` : ""}
       </div>
     `;
   }
@@ -14848,6 +15003,10 @@ var WaterTankModalView = class {
     if (exportBtn) {
       exportBtn.addEventListener("click", () => this.config.onExport());
     }
+    const applyDatesBtn = this.modal.querySelector("#myio-water-tank-apply-dates");
+    if (applyDatesBtn) {
+      applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
+    }
     this.overlay.addEventListener("click", (e) => {
       if (e.target === this.overlay) {
         this.config.onClose();
@@ -14861,59 +15020,122 @@ var WaterTankModalView = class {
       this.renderCanvasChart();
     });
   }
+  /**
+   * Handle date range change
+   */
+  handleDateRangeChange() {
+    if (!this.modal) return;
+    const startInput = this.modal.querySelector("#myio-water-tank-start-date");
+    const endInput = this.modal.querySelector("#myio-water-tank-end-date");
+    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);
+      if (startTs >= endTs) {
+        alert("Start date must be before end date");
+        return;
+      }
+      console.log("[WaterTankModalView] Date range changed:", {
+        startTs,
+        endTs,
+        startDate: new Date(startTs).toISOString(),
+        endDate: new Date(endTs).toISOString()
+      });
+      if (this.config.onDateRangeChange) {
+        this.config.onDateRangeChange(startTs, endTs);
+      }
+    }
+  }
   handleEscapeKey(e) {
     if (e.key === "Escape") {
       this.config.onClose();
     }
   }
   /**
-   * Render chart using Canvas API
+   * Render chart using Canvas API - shows water_level (m.c.a) over time
    */
   renderCanvasChart() {
     const canvas = document.getElementById("myio-water-tank-chart");
     if (!canvas) return;
     const { data } = this.config;
-    if (data.telemetry.length === 0) return;
+    const points = data.telemetry.filter(
+      (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
+    );
+    if (points.length < 2) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     const rect = canvas.getBoundingClientRect();
     canvas.width = rect.width * window.devicePixelRatio;
-    canvas.height = 300 * window.devicePixelRatio;
+    canvas.height = 280 * window.devicePixelRatio;
     ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     const width = rect.width;
-    const height = 300;
-    const padding = 40;
+    const height = 280;
+    const padding = { top: 20, right: 20, bottom: 40, left: 60 };
     ctx.clearRect(0, 0, width, height);
-    ctx.strokeStyle = "#e0e0e0";
+    const values = points.map((p) => p.value);
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
+    const valueRange = maxValue - minValue || 1;
+    const valuePadding = valueRange * 0.1;
+    const chartMinY = minValue - valuePadding;
+    const chartMaxY = maxValue + valuePadding;
+    const chartRangeY = chartMaxY - chartMinY;
+    ctx.fillStyle = "#fafafa";
+    ctx.fillRect(padding.left, padding.top, width - padding.left - padding.right, height - padding.top - padding.bottom);
+    ctx.strokeStyle = "#e8e8e8";
     ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(padding, padding);
-    ctx.lineTo(padding, height - padding);
-    ctx.lineTo(width - padding, height - padding);
-    ctx.stroke();
-    ctx.strokeStyle = "#f0f0f0";
-    ctx.lineWidth = 0.5;
-    for (let i = 0; i <= 5; i++) {
-      const y = padding + (height - 2 * padding) * (i / 5);
+    ctx.fillStyle = "#666";
+    ctx.font = "11px Arial";
+    ctx.textAlign = "right";
+    const ySteps = 5;
+    for (let i = 0; i <= ySteps; i++) {
+      const y = padding.top + (height - padding.top - padding.bottom) * (i / ySteps);
+      const value = chartMaxY - chartRangeY * i / ySteps;
       ctx.beginPath();
-      ctx.moveTo(padding, y);
-      ctx.lineTo(width - padding, y);
+      ctx.moveTo(padding.left, y);
+      ctx.lineTo(width - padding.right, y);
       ctx.stroke();
-      ctx.fillStyle = "#7f8c8d";
-      ctx.font = "12px Arial";
-      ctx.textAlign = "right";
-      ctx.fillText(`${100 - i * 20}%`, padding - 10, y + 4);
+      ctx.fillText(`${value.toFixed(2)}`, padding.left - 8, y + 4);
     }
-    const points = data.telemetry;
-    if (points.length < 2) return;
-    const xScale = (width - 2 * padding) / (points.length - 1);
-    const yScale = (height - 2 * padding) / 100;
+    ctx.save();
+    ctx.translate(15, height / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = "center";
+    ctx.fillStyle = "#666";
+    ctx.font = "12px Arial";
+    ctx.fillText("m.c.a", 0, 0);
+    ctx.restore();
+    ctx.strokeStyle = "#ccc";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(padding.left, padding.top);
+    ctx.lineTo(padding.left, height - padding.bottom);
+    ctx.lineTo(width - padding.right, height - padding.bottom);
+    ctx.stroke();
+    const chartWidth = width - padding.left - padding.right;
+    const chartHeight = height - padding.top - padding.bottom;
+    const xScale = chartWidth / (points.length - 1);
+    ctx.beginPath();
+    ctx.moveTo(padding.left, height - padding.bottom);
+    points.forEach((point, index) => {
+      const x = padding.left + index * xScale;
+      const y = padding.top + chartHeight - (point.value - chartMinY) / chartRangeY * chartHeight;
+      ctx.lineTo(x, y);
+    });
+    ctx.lineTo(padding.left + (points.length - 1) * xScale, height - padding.bottom);
+    ctx.closePath();
+    const gradient = ctx.createLinearGradient(0, padding.top, 0, height - padding.bottom);
+    gradient.addColorStop(0, "rgba(52, 152, 219, 0.3)");
+    gradient.addColorStop(1, "rgba(52, 152, 219, 0.05)");
+    ctx.fillStyle = gradient;
+    ctx.fill();
     ctx.strokeStyle = "#3498db";
     ctx.lineWidth = 2;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
     ctx.beginPath();
     points.forEach((point, index) => {
-      const x = padding + index * xScale;
-      const y = height - padding - point.value * yScale;
+      const x = padding.left + index * xScale;
+      const y = padding.top + chartHeight - (point.value - chartMinY) / chartRangeY * chartHeight;
       if (index === 0) {
         ctx.moveTo(x, y);
       } else {
@@ -14921,14 +15143,56 @@ var WaterTankModalView = class {
       }
     });
     ctx.stroke();
-    ctx.fillStyle = "#3498db";
-    points.forEach((point, index) => {
-      const x = padding + index * xScale;
-      const y = height - padding - point.value * yScale;
-      ctx.beginPath();
-      ctx.arc(x, y, 3, 0, 2 * Math.PI);
-      ctx.fill();
-    });
+    if (points.length <= 50) {
+      ctx.fillStyle = "#3498db";
+      points.forEach((point, index) => {
+        const x = padding.left + index * xScale;
+        const y = padding.top + chartHeight - (point.value - chartMinY) / chartRangeY * chartHeight;
+        ctx.beginPath();
+        ctx.arc(x, y, 3, 0, 2 * Math.PI);
+        ctx.fill();
+      });
+    }
+    ctx.fillStyle = "#888";
+    ctx.font = "10px Arial";
+    ctx.textAlign = "center";
+    const xLabelCount = Math.min(6, points.length);
+    const xLabelStep = Math.floor(points.length / xLabelCount);
+    for (let i = 0; i < points.length; i += xLabelStep) {
+      const x = padding.left + i * xScale;
+      const date = new Date(points[i].ts);
+      const label = `${date.getDate()}/${date.getMonth() + 1}`;
+      ctx.fillText(label, x, height - padding.bottom + 16);
+    }
+    if (points.length > 1) {
+      const lastX = padding.left + (points.length - 1) * xScale;
+      const lastDate = new Date(points[points.length - 1].ts);
+      const lastLabel = `${lastDate.getDate()}/${lastDate.getMonth() + 1}`;
+      ctx.fillText(lastLabel, lastX, height - padding.bottom + 16);
+    }
+  }
+  /**
+   * Update data and re-render chart
+   */
+  updateData(data) {
+    this.config.data = data;
+    if (this.modal) {
+      const bodyEl = this.modal.querySelector(".myio-water-tank-modal-body");
+      if (bodyEl) {
+        bodyEl.innerHTML = `
+          ${this.renderDateRangePicker()}
+          ${this.renderTankVisualization()}
+          ${this.renderChart()}
+        `;
+        const applyDatesBtn = this.modal.querySelector("#myio-water-tank-apply-dates");
+        if (applyDatesBtn) {
+          applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
+        }
+        requestAnimationFrame(() => {
+          this.renderCanvasChart();
+        });
+      }
+    }
   }
   /**
    * Show the modal with animation
@@ -15193,8 +15457,9 @@ var WaterTankModal = class {
         data: this.data,
         onExport: () => this.handleExport(),
         onError: (error) => this.handleError(error),
-        onClose: () => this.close()
+        onClose: () => this.close(),
         // Call close() to destroy view and trigger user callback
+        onDateRangeChange: (startTs, endTs) => this.handleDateRangeChange(startTs, endTs)
       });
       this.view.render();
       this.view.show();
@@ -15226,6 +15491,39 @@ var WaterTankModal = class {
     }
     this.handleClose();
   }
+  /**
+   * Handle date range change from view
+   */
+  async handleDateRangeChange(startTs, endTs) {
+    console.log("[WaterTankModal] Date range changed:", {
+      startTs,
+      endTs,
+      startDate: new Date(startTs).toISOString(),
+      endDate: new Date(endTs).toISOString()
+    });
+    this.options.startTs = startTs;
+    this.options.endTs = endTs;
+    this.context.timeRange.startTs = startTs;
+    this.context.timeRange.endTs = endTs;
+    try {
+      console.log("[WaterTankModal] Fetching new data for date range...");
+      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 successfully");
+    } catch (error) {
+      console.error("[WaterTankModal] Failed to fetch data for new date range:", error);
+      this.handleError(error);
+    }
+  }
   /**
    * Handle export functionality
    */