myio-js-library 0.1.157 → 0.1.159

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

@@ -5018,8 +5018,14 @@
   }
   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}`;
@@ -10696,11 +10702,14 @@ ${rangeText}`;
     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();
     }
@@ -10718,6 +10727,59 @@ ${rangeText}`;
       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
      */
@@ -10988,6 +11050,14 @@ ${rangeText}`;
               </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>
@@ -11210,8 +11280,8 @@ ${rangeText}`;
           // ← 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,
@@ -11283,7 +11353,8 @@ ${rangeText}`;
           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",
@@ -11606,6 +11677,20 @@ ${rangeText}`;
           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,
@@ -11708,6 +11793,37 @@ ${rangeText}`;
         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;
@@ -12088,7 +12204,9 @@ ${rangeText}`;
         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;
       }
@@ -14311,7 +14429,7 @@ ${rangeText}`;
         maxLevel: "Maximum Level",
         dateRange: "Date Range",
         deviceInfo: "Device Information",
-        levelChart: "Level Chart",
+        levelChart: "Water Level History (m.c.a)",
         percentUnit: "%",
         status: {
           critical: "Critical",
@@ -14342,6 +14460,20 @@ ${rangeText}`;
         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
      */
@@ -14354,13 +14486,18 @@ ${rangeText}`;
       }
       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;
-      this.getLevelStatus(currentLevel);
+      const { params } = this.config;
       this.overlay = document.createElement("div");
       this.overlay.className = "myio-water-tank-modal-overlay";
       this.overlay.style.cssText = `
@@ -14381,9 +14518,9 @@ ${rangeText}`;
       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;
@@ -14449,97 +14586,150 @@ ${rangeText}`;
         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;
@@ -14547,20 +14737,23 @@ ${rangeText}`;
           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;
@@ -14568,56 +14761,18 @@ ${rangeText}`;
           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>
     `;
     }
@@ -14666,6 +14821,10 @@ ${rangeText}`;
       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();
@@ -14679,59 +14838,122 @@ ${rangeText}`;
         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 {
@@ -14739,14 +14961,56 @@ ${rangeText}`;
         }
       });
       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
@@ -15011,8 +15275,9 @@ ${rangeText}`;
           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();
@@ -15044,6 +15309,39 @@ ${rangeText}`;
       }
       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
      */