myio-js-library 0.1.211 → 0.1.213

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();
         });
@@ -22227,13 +22301,12 @@ var WaterTankModal = class {
   }
   /**
    * Transform raw ThingsBoard response to our data points
-   * RFC-0107: Support displayKey option to choose between water_level or water_percentage
+   * RFC-0107: Keep ALL data points with their original keys (no deduplication)
+   * This allows the chart to switch between water_level and water_percentage dynamically
    */
   transformTelemetryData(rawData, keys) {
     const allPoints = [];
-    const displayKey = this.options.displayKey || "water_percentage";
-    const prioritizedKeys = displayKey && rawData[displayKey] ? [displayKey, ...keys.filter((k) => k !== displayKey)] : keys;
-    for (const key of prioritizedKeys) {
+    for (const key of keys) {
       if (rawData[key] && Array.isArray(rawData[key])) {
         const keyPoints = rawData[key].map((point) => {
           let value = typeof point.value === "string" ? parseFloat(point.value) : point.value;
@@ -22250,16 +22323,12 @@ var WaterTankModal = class {
       }
     }
     allPoints.sort((a, b) => a.ts - b.ts);
-    const uniquePoints = [];
-    const seenTimestamps = /* @__PURE__ */ new Set();
-    for (const point of allPoints) {
-      if (!seenTimestamps.has(point.ts)) {
-        seenTimestamps.add(point.ts);
-        uniquePoints.push(point);
-      }
+    const keyCounts = {};
+    for (const p of allPoints) {
+      keyCounts[p.key || "unknown"] = (keyCounts[p.key || "unknown"] || 0) + 1;
     }
-    console.log(`[WaterTankModal] Transformed ${uniquePoints.length} points, displayKey: ${displayKey}`);
-    return uniquePoints;
+    console.log(`[WaterTankModal] Transformed ${allPoints.length} total points:`, keyCounts);
+    return allPoints;
   }
   /**
    * Calculate summary statistics from telemetry data

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();
         });
@@ -22055,13 +22129,12 @@ var WaterTankModal = class {
   }
   /**
    * Transform raw ThingsBoard response to our data points
-   * RFC-0107: Support displayKey option to choose between water_level or water_percentage
+   * RFC-0107: Keep ALL data points with their original keys (no deduplication)
+   * This allows the chart to switch between water_level and water_percentage dynamically
    */
   transformTelemetryData(rawData, keys) {
     const allPoints = [];
-    const displayKey = this.options.displayKey || "water_percentage";
-    const prioritizedKeys = displayKey && rawData[displayKey] ? [displayKey, ...keys.filter((k) => k !== displayKey)] : keys;
-    for (const key of prioritizedKeys) {
+    for (const key of keys) {
       if (rawData[key] && Array.isArray(rawData[key])) {
         const keyPoints = rawData[key].map((point) => {
           let value = typeof point.value === "string" ? parseFloat(point.value) : point.value;
@@ -22078,16 +22151,12 @@ var WaterTankModal = class {
       }
     }
     allPoints.sort((a, b) => a.ts - b.ts);
-    const uniquePoints = [];
-    const seenTimestamps = /* @__PURE__ */ new Set();
-    for (const point of allPoints) {
-      if (!seenTimestamps.has(point.ts)) {
-        seenTimestamps.add(point.ts);
-        uniquePoints.push(point);
-      }
+    const keyCounts = {};
+    for (const p of allPoints) {
+      keyCounts[p.key || "unknown"] = (keyCounts[p.key || "unknown"] || 0) + 1;
     }
-    console.log(`[WaterTankModal] Transformed ${uniquePoints.length} points, displayKey: ${displayKey}`);
-    return uniquePoints;
+    console.log(`[WaterTankModal] Transformed ${allPoints.length} total points:`, keyCounts);
+    return allPoints;
   }
   /**
    * Calculate summary statistics from telemetry data