myio-js-library 0.1.211 → 0.1.213

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();
           });
@@ -21869,13 +21943,12 @@
     }
     /**
      * 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 = 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;
@@ -21892,16 +21965,12 @@
         }
       }
       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