myio-js-library 0.1.158 → 0.1.160

package/dist/index.cjs

@@ -14719,7 +14719,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",
@@ -14750,6 +14750,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
    */
@@ -14762,13 +14776,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 = `
@@ -14789,9 +14808,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;
@@ -14857,97 +14876,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;
@@ -14955,20 +15027,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;
@@ -14976,56 +15051,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>
     `;
   }
@@ -15074,6 +15111,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();
@@ -15087,59 +15128,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 {
@@ -15147,14 +15251,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
@@ -15419,8 +15565,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();
@@ -15452,6 +15599,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
    */