myio-js-library 0.1.211 → 0.1.212

package/dist/index.cjs

@@ -21457,9 +21457,14 @@ var WaterTankModalView = class {
   overlay = null;
   modal = null;
   i18n;
+  chartDisplayMode = "water_level";
+  // RFC-0107: Default to water_level (m.c.a)
   constructor(config) {
     this.config = config;
     this.i18n = this.getI18n();
+    if (config.params.displayKey) {
+      this.chartDisplayMode = config.params.displayKey;
+    }
   }
   /**
    * Get i18n strings with defaults
@@ -21771,14 +21776,14 @@ var WaterTankModalView = class {
     `;
   }
   /**
-   * Render chart section - shows water_level (m.c.a) over time
+   * RFC-0107: Render chart section with display mode selector
+   * Shows water_level (m.c.a) or water_percentage (%) based on user selection
    */
   renderChart() {
     const { data } = this.config;
-    const waterLevelPoints = data.telemetry.filter(
-      (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
-    );
-    if (waterLevelPoints.length === 0) {
+    const chartPoints = this.getChartDataPoints();
+    if (chartPoints.length === 0) {
+      const displayLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
       return `
         <div style="
           background: #f8f9fa;
@@ -21790,13 +21795,14 @@ var WaterTankModalView = class {
           <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
+            No ${this.chartDisplayMode} (${displayLabel}) data available for this period
           </div>
         </div>
       `;
     }
-    const firstTs = waterLevelPoints[0]?.ts;
-    const lastTs = waterLevelPoints[waterLevelPoints.length - 1]?.ts;
+    const firstTs = chartPoints[0]?.ts;
+    const lastTs = chartPoints[chartPoints.length - 1]?.ts;
+    const chartTitle = this.chartDisplayMode === "water_percentage" ? "Water Level History (%)" : this.i18n.levelChart;
     return `
       <div style="
         background: white;
@@ -21804,12 +21810,38 @@ var WaterTankModalView = class {
         border-radius: 8px;
         padding: 20px;
       ">
-        <h3 style="
-          margin: 0 0 16px 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #2c3e50;
-        ">${this.i18n.levelChart}</h3>
+        <div style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 16px;
+        ">
+          <h3 style="
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #2c3e50;
+          ">${chartTitle}</h3>
+          <div style="
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          ">
+            <span style="font-size: 13px; color: #7f8c8d;">Display:</span>
+            <select id="myio-water-tank-display-mode" style="
+              padding: 6px 12px;
+              border: 1px solid #ddd;
+              border-radius: 6px;
+              font-size: 13px;
+              color: #2c3e50;
+              background: white;
+              cursor: pointer;
+            ">
+              <option value="water_level" ${this.chartDisplayMode === "water_level" ? "selected" : ""}>Level (m.c.a)</option>
+              <option value="water_percentage" ${this.chartDisplayMode === "water_percentage" ? "selected" : ""}>Percentage (%)</option>
+            </select>
+          </div>
+        </div>
         <canvas id="myio-water-tank-chart" style="width: 100%; height: 280px;"></canvas>
         ${firstTs && lastTs ? `
           <div style="
@@ -21819,12 +21851,29 @@ var WaterTankModalView = class {
             text-align: center;
           ">
             ${this.formatDate(firstTs, false)} \u2014 ${this.formatDate(lastTs, false)}
-            (${waterLevelPoints.length} readings)
+            (${chartPoints.length} readings)
           </div>
         ` : ""}
       </div>
     `;
   }
+  /**
+   * RFC-0107: Get chart data points based on current display mode
+   */
+  getChartDataPoints() {
+    const { data } = this.config;
+    if (this.chartDisplayMode === "water_percentage") {
+      const percentagePoints = data.telemetry.filter((p) => p.key === "water_percentage");
+      return percentagePoints.map((p) => ({
+        ...p,
+        value: p.value <= 1.5 ? p.value * 100 : p.value
+      }));
+    } else {
+      return data.telemetry.filter(
+        (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
+      );
+    }
+  }
   /**
    * Render footer with actions
    */
@@ -21874,6 +21923,13 @@ var WaterTankModalView = class {
     if (applyDatesBtn) {
       applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
     }
+    const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
+    if (displayModeSelect) {
+      displayModeSelect.addEventListener("change", () => {
+        this.chartDisplayMode = displayModeSelect.value;
+        this.refreshChart();
+      });
+    }
     this.overlay.addEventListener("click", (e) => {
       if (e.target === this.overlay) {
         this.config.onClose();
@@ -21918,15 +21974,25 @@ var WaterTankModalView = class {
     }
   }
   /**
-   * Render chart using Canvas API - shows water_level (m.c.a) over time
+   * RFC-0107: Refresh chart when display mode changes
+   */
+  refreshChart() {
+    if (!this.modal) return;
+    const chartTitle = this.chartDisplayMode === "water_percentage" ? "Water Level History (%)" : this.i18n.levelChart;
+    const titleEl = this.modal.querySelector(".myio-water-tank-modal-body h3:last-of-type");
+    if (titleEl) {
+      titleEl.textContent = chartTitle;
+    }
+    this.renderCanvasChart();
+  }
+  /**
+   * RFC-0107: Render chart using Canvas API
+   * Shows water_level (m.c.a) or water_percentage (%) based on display mode
    */
   renderCanvasChart() {
     const canvas = document.getElementById("myio-water-tank-chart");
     if (!canvas) return;
-    const { data } = this.config;
-    const points = data.telemetry.filter(
-      (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
-    );
+    const points = this.getChartDataPoints();
     if (points.length < 2) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
@@ -21963,13 +22029,14 @@ var WaterTankModalView = class {
       ctx.stroke();
       ctx.fillText(`${value.toFixed(2)}`, padding.left - 8, y + 4);
     }
+    const yAxisLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
     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.fillText(yAxisLabel, 0, 0);
     ctx.restore();
     ctx.strokeStyle = "#ccc";
     ctx.lineWidth = 1;
@@ -22055,6 +22122,13 @@ var WaterTankModalView = class {
         if (applyDatesBtn) {
           applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
         }
+        const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
+        if (displayModeSelect) {
+          displayModeSelect.addEventListener("change", () => {
+            this.chartDisplayMode = displayModeSelect.value;
+            this.refreshChart();
+          });
+        }
         requestAnimationFrame(() => {
           this.renderCanvasChart();
         });

package/dist/index.js

@@ -21285,9 +21285,14 @@ var WaterTankModalView = class {
   overlay = null;
   modal = null;
   i18n;
+  chartDisplayMode = "water_level";
+  // RFC-0107: Default to water_level (m.c.a)
   constructor(config) {
     this.config = config;
     this.i18n = this.getI18n();
+    if (config.params.displayKey) {
+      this.chartDisplayMode = config.params.displayKey;
+    }
   }
   /**
    * Get i18n strings with defaults
@@ -21599,14 +21604,14 @@ var WaterTankModalView = class {
     `;
   }
   /**
-   * Render chart section - shows water_level (m.c.a) over time
+   * RFC-0107: Render chart section with display mode selector
+   * Shows water_level (m.c.a) or water_percentage (%) based on user selection
    */
   renderChart() {
     const { data } = this.config;
-    const waterLevelPoints = data.telemetry.filter(
-      (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
-    );
-    if (waterLevelPoints.length === 0) {
+    const chartPoints = this.getChartDataPoints();
+    if (chartPoints.length === 0) {
+      const displayLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
       return `
         <div style="
           background: #f8f9fa;
@@ -21618,13 +21623,14 @@ var WaterTankModalView = class {
           <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
+            No ${this.chartDisplayMode} (${displayLabel}) data available for this period
           </div>
         </div>
       `;
     }
-    const firstTs = waterLevelPoints[0]?.ts;
-    const lastTs = waterLevelPoints[waterLevelPoints.length - 1]?.ts;
+    const firstTs = chartPoints[0]?.ts;
+    const lastTs = chartPoints[chartPoints.length - 1]?.ts;
+    const chartTitle = this.chartDisplayMode === "water_percentage" ? "Water Level History (%)" : this.i18n.levelChart;
     return `
       <div style="
         background: white;
@@ -21632,12 +21638,38 @@ var WaterTankModalView = class {
         border-radius: 8px;
         padding: 20px;
       ">
-        <h3 style="
-          margin: 0 0 16px 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #2c3e50;
-        ">${this.i18n.levelChart}</h3>
+        <div style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 16px;
+        ">
+          <h3 style="
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #2c3e50;
+          ">${chartTitle}</h3>
+          <div style="
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          ">
+            <span style="font-size: 13px; color: #7f8c8d;">Display:</span>
+            <select id="myio-water-tank-display-mode" style="
+              padding: 6px 12px;
+              border: 1px solid #ddd;
+              border-radius: 6px;
+              font-size: 13px;
+              color: #2c3e50;
+              background: white;
+              cursor: pointer;
+            ">
+              <option value="water_level" ${this.chartDisplayMode === "water_level" ? "selected" : ""}>Level (m.c.a)</option>
+              <option value="water_percentage" ${this.chartDisplayMode === "water_percentage" ? "selected" : ""}>Percentage (%)</option>
+            </select>
+          </div>
+        </div>
         <canvas id="myio-water-tank-chart" style="width: 100%; height: 280px;"></canvas>
         ${firstTs && lastTs ? `
           <div style="
@@ -21647,12 +21679,29 @@ var WaterTankModalView = class {
             text-align: center;
           ">
             ${this.formatDate(firstTs, false)} \u2014 ${this.formatDate(lastTs, false)}
-            (${waterLevelPoints.length} readings)
+            (${chartPoints.length} readings)
           </div>
         ` : ""}
       </div>
     `;
   }
+  /**
+   * RFC-0107: Get chart data points based on current display mode
+   */
+  getChartDataPoints() {
+    const { data } = this.config;
+    if (this.chartDisplayMode === "water_percentage") {
+      const percentagePoints = data.telemetry.filter((p) => p.key === "water_percentage");
+      return percentagePoints.map((p) => ({
+        ...p,
+        value: p.value <= 1.5 ? p.value * 100 : p.value
+      }));
+    } else {
+      return data.telemetry.filter(
+        (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
+      );
+    }
+  }
   /**
    * Render footer with actions
    */
@@ -21702,6 +21751,13 @@ var WaterTankModalView = class {
     if (applyDatesBtn) {
       applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
     }
+    const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
+    if (displayModeSelect) {
+      displayModeSelect.addEventListener("change", () => {
+        this.chartDisplayMode = displayModeSelect.value;
+        this.refreshChart();
+      });
+    }
     this.overlay.addEventListener("click", (e) => {
       if (e.target === this.overlay) {
         this.config.onClose();
@@ -21746,15 +21802,25 @@ var WaterTankModalView = class {
     }
   }
   /**
-   * Render chart using Canvas API - shows water_level (m.c.a) over time
+   * RFC-0107: Refresh chart when display mode changes
+   */
+  refreshChart() {
+    if (!this.modal) return;
+    const chartTitle = this.chartDisplayMode === "water_percentage" ? "Water Level History (%)" : this.i18n.levelChart;
+    const titleEl = this.modal.querySelector(".myio-water-tank-modal-body h3:last-of-type");
+    if (titleEl) {
+      titleEl.textContent = chartTitle;
+    }
+    this.renderCanvasChart();
+  }
+  /**
+   * RFC-0107: Render chart using Canvas API
+   * Shows water_level (m.c.a) or water_percentage (%) based on display mode
    */
   renderCanvasChart() {
     const canvas = document.getElementById("myio-water-tank-chart");
     if (!canvas) return;
-    const { data } = this.config;
-    const points = data.telemetry.filter(
-      (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
-    );
+    const points = this.getChartDataPoints();
     if (points.length < 2) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
@@ -21791,13 +21857,14 @@ var WaterTankModalView = class {
       ctx.stroke();
       ctx.fillText(`${value.toFixed(2)}`, padding.left - 8, y + 4);
     }
+    const yAxisLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
     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.fillText(yAxisLabel, 0, 0);
     ctx.restore();
     ctx.strokeStyle = "#ccc";
     ctx.lineWidth = 1;
@@ -21883,6 +21950,13 @@ var WaterTankModalView = class {
         if (applyDatesBtn) {
           applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
         }
+        const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
+        if (displayModeSelect) {
+          displayModeSelect.addEventListener("change", () => {
+            this.chartDisplayMode = displayModeSelect.value;
+            this.refreshChart();
+          });
+        }
         requestAnimationFrame(() => {
           this.renderCanvasChart();
         });

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

@@ -21099,9 +21099,14 @@
     overlay = null;
     modal = null;
     i18n;
+    chartDisplayMode = "water_level";
+    // RFC-0107: Default to water_level (m.c.a)
     constructor(config) {
       this.config = config;
       this.i18n = this.getI18n();
+      if (config.params.displayKey) {
+        this.chartDisplayMode = config.params.displayKey;
+      }
     }
     /**
      * Get i18n strings with defaults
@@ -21413,14 +21418,14 @@
     `;
     }
     /**
-     * Render chart section - shows water_level (m.c.a) over time
+     * RFC-0107: Render chart section with display mode selector
+     * Shows water_level (m.c.a) or water_percentage (%) based on user selection
      */
     renderChart() {
       const { data } = this.config;
-      const waterLevelPoints = data.telemetry.filter(
-        (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
-      );
-      if (waterLevelPoints.length === 0) {
+      const chartPoints = this.getChartDataPoints();
+      if (chartPoints.length === 0) {
+        const displayLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
         return `
         <div style="
           background: #f8f9fa;
@@ -21432,13 +21437,14 @@
           <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
+            No ${this.chartDisplayMode} (${displayLabel}) data available for this period
           </div>
         </div>
       `;
       }
-      const firstTs = waterLevelPoints[0]?.ts;
-      const lastTs = waterLevelPoints[waterLevelPoints.length - 1]?.ts;
+      const firstTs = chartPoints[0]?.ts;
+      const lastTs = chartPoints[chartPoints.length - 1]?.ts;
+      const chartTitle = this.chartDisplayMode === "water_percentage" ? "Water Level History (%)" : this.i18n.levelChart;
       return `
       <div style="
         background: white;
@@ -21446,12 +21452,38 @@
         border-radius: 8px;
         padding: 20px;
       ">
-        <h3 style="
-          margin: 0 0 16px 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #2c3e50;
-        ">${this.i18n.levelChart}</h3>
+        <div style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 16px;
+        ">
+          <h3 style="
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #2c3e50;
+          ">${chartTitle}</h3>
+          <div style="
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          ">
+            <span style="font-size: 13px; color: #7f8c8d;">Display:</span>
+            <select id="myio-water-tank-display-mode" style="
+              padding: 6px 12px;
+              border: 1px solid #ddd;
+              border-radius: 6px;
+              font-size: 13px;
+              color: #2c3e50;
+              background: white;
+              cursor: pointer;
+            ">
+              <option value="water_level" ${this.chartDisplayMode === "water_level" ? "selected" : ""}>Level (m.c.a)</option>
+              <option value="water_percentage" ${this.chartDisplayMode === "water_percentage" ? "selected" : ""}>Percentage (%)</option>
+            </select>
+          </div>
+        </div>
         <canvas id="myio-water-tank-chart" style="width: 100%; height: 280px;"></canvas>
         ${firstTs && lastTs ? `
           <div style="
@@ -21461,12 +21493,29 @@
             text-align: center;
           ">
             ${this.formatDate(firstTs, false)} \u2014 ${this.formatDate(lastTs, false)}
-            (${waterLevelPoints.length} readings)
+            (${chartPoints.length} readings)
           </div>
         ` : ""}
       </div>
     `;
     }
+    /**
+     * RFC-0107: Get chart data points based on current display mode
+     */
+    getChartDataPoints() {
+      const { data } = this.config;
+      if (this.chartDisplayMode === "water_percentage") {
+        const percentagePoints = data.telemetry.filter((p) => p.key === "water_percentage");
+        return percentagePoints.map((p) => ({
+          ...p,
+          value: p.value <= 1.5 ? p.value * 100 : p.value
+        }));
+      } else {
+        return data.telemetry.filter(
+          (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
+        );
+      }
+    }
     /**
      * Render footer with actions
      */
@@ -21516,6 +21565,13 @@
       if (applyDatesBtn) {
         applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
       }
+      const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
+      if (displayModeSelect) {
+        displayModeSelect.addEventListener("change", () => {
+          this.chartDisplayMode = displayModeSelect.value;
+          this.refreshChart();
+        });
+      }
       this.overlay.addEventListener("click", (e) => {
         if (e.target === this.overlay) {
           this.config.onClose();
@@ -21560,15 +21616,25 @@
       }
     }
     /**
-     * Render chart using Canvas API - shows water_level (m.c.a) over time
+     * RFC-0107: Refresh chart when display mode changes
+     */
+    refreshChart() {
+      if (!this.modal) return;
+      const chartTitle = this.chartDisplayMode === "water_percentage" ? "Water Level History (%)" : this.i18n.levelChart;
+      const titleEl = this.modal.querySelector(".myio-water-tank-modal-body h3:last-of-type");
+      if (titleEl) {
+        titleEl.textContent = chartTitle;
+      }
+      this.renderCanvasChart();
+    }
+    /**
+     * RFC-0107: Render chart using Canvas API
+     * Shows water_level (m.c.a) or water_percentage (%) based on display mode
      */
     renderCanvasChart() {
       const canvas = document.getElementById("myio-water-tank-chart");
       if (!canvas) return;
-      const { data } = this.config;
-      const points = data.telemetry.filter(
-        (p) => p.key === "water_level" || p.key === "waterLevel" || p.key === "nivel" || p.key === "level"
-      );
+      const points = this.getChartDataPoints();
       if (points.length < 2) return;
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
@@ -21605,13 +21671,14 @@
         ctx.stroke();
         ctx.fillText(`${value.toFixed(2)}`, padding.left - 8, y + 4);
       }
+      const yAxisLabel = this.chartDisplayMode === "water_percentage" ? "%" : "m.c.a";
       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.fillText(yAxisLabel, 0, 0);
       ctx.restore();
       ctx.strokeStyle = "#ccc";
       ctx.lineWidth = 1;
@@ -21697,6 +21764,13 @@
           if (applyDatesBtn) {
             applyDatesBtn.addEventListener("click", () => this.handleDateRangeChange());
           }
+          const displayModeSelect = this.modal.querySelector("#myio-water-tank-display-mode");
+          if (displayModeSelect) {
+            displayModeSelect.addEventListener("change", () => {
+              this.chartDisplayMode = displayModeSelect.value;
+              this.refreshChart();
+            });
+          }
           requestAnimationFrame(() => {
             this.renderCanvasChart();
           });