myio-js-library 0.1.179 → 0.1.180

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

@@ -572,7 +572,7 @@
   });
 
   // src/format/energy.ts
-  function formatEnergy(value, unit) {
+  function formatEnergy(value, unit, decimals = 3) {
     if (value === null || value === void 0 || isNaN(value)) {
       return "-";
     }
@@ -590,8 +590,8 @@
       }
     }
     const formattedValue = adjustedValue.toLocaleString("pt-BR", {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
     });
     return `${formattedValue} ${adjustedUnit}`;
   }
@@ -3983,6 +3983,14 @@
   --myio-chip-not-installed-fg: #7c3aed;
   --myio-border-not-installed: rgba(124, 58, 237, 0.5);
 
+  /* Temperature range colors - solid backgrounds for better visibility */
+  --myio-temp-cold-bg: #dbeafe;           /* Blue 100 - below ideal range */
+  --myio-temp-cold-border: rgba(59, 130, 246, 0.6);
+  --myio-temp-ok-bg: #dcfce7;             /* Green 100 - within ideal range */
+  --myio-temp-ok-border: rgba(34, 197, 94, 0.6);
+  --myio-temp-hot-bg: #fee2e2;            /* Red 100 - above ideal range */
+  --myio-temp-hot-border: rgba(239, 68, 68, 0.6);
+
   --myio-text-1: #0f172a;
   --myio-text-2: #4b5563;
   --myio-muted: #94a3b8;
@@ -4086,6 +4094,25 @@
   box-shadow: 0 0 0 2px var(--myio-border-not-installed), var(--myio-card-shadow);
 }
 
+/* Temperature range backgrounds (domain=temperature only) */
+.myio-ho-card.is-temp-cold {
+  background: var(--myio-temp-cold-bg);
+  border-color: var(--myio-temp-cold-border);
+  box-shadow: 0 0 0 2px var(--myio-temp-cold-border), var(--myio-card-shadow);
+}
+
+.myio-ho-card.is-temp-ok {
+  background: var(--myio-temp-ok-bg);
+  border-color: var(--myio-temp-ok-border);
+  box-shadow: 0 0 0 2px var(--myio-temp-ok-border), var(--myio-card-shadow);
+}
+
+.myio-ho-card.is-temp-hot {
+  background: var(--myio-temp-hot-bg);
+  border-color: var(--myio-temp-hot-border);
+  box-shadow: 0 0 0 2px var(--myio-temp-hot-border), var(--myio-card-shadow);
+}
+
 /* Header section */
 .myio-ho-card__header {
   display: flex;
@@ -5009,6 +5036,504 @@
 .debug-tooltip__content::-webkit-scrollbar-thumb:hover {
   background: rgba(99, 102, 241, 0.6);
 }
+
+/* ============================================
+   Temperature Range Tooltip (for domain=temperature)
+   Shows temperature ruler with current position and deviation
+   ============================================ */
+.temp-range-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(5px);
+}
+
+.temp-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.temp-range-tooltip__content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 280px;
+  max-width: 320px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+}
+
+.temp-range-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%);
+  border-bottom: 1px solid #fdba74;
+}
+
+.temp-range-tooltip__icon {
+  font-size: 18px;
+}
+
+.temp-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #c2410c;
+}
+
+.temp-range-tooltip__body {
+  padding: 16px;
+}
+
+/* Temperature value display */
+.temp-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.temp-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.temp-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.temp-range-tooltip__deviation {
+  text-align: right;
+}
+
+.temp-range-tooltip__deviation-value {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.temp-range-tooltip__deviation-value.cold {
+  color: #2563eb;
+}
+
+.temp-range-tooltip__deviation-value.ok {
+  color: #16a34a;
+}
+
+.temp-range-tooltip__deviation-value.hot {
+  color: #dc2626;
+}
+
+.temp-range-tooltip__deviation-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Temperature ruler/gauge */
+.temp-range-tooltip__ruler {
+  position: relative;
+  height: 32px;
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.temp-range-tooltip__ruler-track {
+  position: absolute;
+  top: 12px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  background: linear-gradient(90deg, #dbeafe 0%, #dcfce7 50%, #fee2e2 100%);
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.temp-range-tooltip__ruler-range {
+  position: absolute;
+  top: 12px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 4px;
+  opacity: 0.6;
+}
+
+.temp-range-tooltip__ruler-marker {
+  position: absolute;
+  top: 4px;
+  width: 4px;
+  height: 24px;
+  background: #1e293b;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.temp-range-tooltip__ruler-marker::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.temp-range-tooltip__ruler-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 10px;
+  color: #64748b;
+}
+
+.temp-range-tooltip__ruler-min,
+.temp-range-tooltip__ruler-max {
+  font-weight: 600;
+}
+
+/* Range info */
+.temp-range-tooltip__range-info {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  margin-top: 12px;
+}
+
+.temp-range-tooltip__range-item {
+  text-align: center;
+}
+
+.temp-range-tooltip__range-label {
+  font-size: 10px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.temp-range-tooltip__range-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
+}
+
+/* Status badge */
+.temp-range-tooltip__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.temp-range-tooltip__status.cold {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
+}
+
+.temp-range-tooltip__status.ok {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
+.temp-range-tooltip__status.hot {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.temp-range-tooltip__status.unknown {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
+
+/* ============================================
+   Energy Range Tooltip (for domain=energy)
+   Shows power ruler with current position and status ranges
+   ============================================ */
+.energy-range-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(5px);
+}
+
+.energy-range-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.energy-range-tooltip__content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 300px;
+  max-width: 360px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+}
+
+.energy-range-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #ecfdf5 0%, #d1fae5 100%);
+  border-bottom: 1px solid #6ee7b7;
+}
+
+.energy-range-tooltip__icon {
+  font-size: 18px;
+}
+
+.energy-range-tooltip__title {
+  font-weight: 700;
+  font-size: 13px;
+  color: #047857;
+}
+
+.energy-range-tooltip__body {
+  padding: 16px;
+}
+
+/* Power value display */
+.energy-range-tooltip__value-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.energy-range-tooltip__current {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.energy-range-tooltip__current sup {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.energy-range-tooltip__status-badge {
+  text-align: right;
+}
+
+.energy-range-tooltip__status-value {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 6px;
+}
+
+.energy-range-tooltip__status-value.standby {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.energy-range-tooltip__status-value.normal {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.energy-range-tooltip__status-value.alert {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.energy-range-tooltip__status-value.failure {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.energy-range-tooltip__status-value.offline {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+/* Power ruler/gauge */
+.energy-range-tooltip__ruler {
+  position: relative;
+  height: 40px;
+  margin: 12px 0;
+  border-radius: 8px;
+  overflow: visible;
+}
+
+.energy-range-tooltip__ruler-track {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  height: 8px;
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+
+.energy-range-tooltip__ruler-segment {
+  height: 100%;
+}
+
+.energy-range-tooltip__ruler-segment.standby {
+  background: #dbeafe;
+}
+
+.energy-range-tooltip__ruler-segment.normal {
+  background: #dcfce7;
+}
+
+.energy-range-tooltip__ruler-segment.alert {
+  background: #fef3c7;
+}
+
+.energy-range-tooltip__ruler-segment.failure {
+  background: #fee2e2;
+}
+
+.energy-range-tooltip__ruler-marker {
+  position: absolute;
+  top: 8px;
+  width: 4px;
+  height: 24px;
+  background: #1e293b;
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.energy-range-tooltip__ruler-marker::after {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #1e293b;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Range info grid */
+.energy-range-tooltip__ranges {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.energy-range-tooltip__range-item {
+  text-align: center;
+  padding: 8px 4px;
+  border-radius: 6px;
+  background: #f8fafc;
+}
+
+.energy-range-tooltip__range-item.standby {
+  border-left: 3px solid #3b82f6;
+}
+
+.energy-range-tooltip__range-item.normal {
+  border-left: 3px solid #22c55e;
+}
+
+.energy-range-tooltip__range-item.alert {
+  border-left: 3px solid #f59e0b;
+}
+
+.energy-range-tooltip__range-item.failure {
+  border-left: 3px solid #ef4444;
+}
+
+.energy-range-tooltip__range-label {
+  font-size: 9px;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-bottom: 2px;
+}
+
+.energy-range-tooltip__range-value {
+  font-size: 11px;
+  font-weight: 600;
+  color: #334155;
+}
+
+/* Status info */
+.energy-range-tooltip__status-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.energy-range-tooltip__status-info.standby {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
+}
+
+.energy-range-tooltip__status-info.normal {
+  background: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
+}
+
+.energy-range-tooltip__status-info.alert {
+  background: #fef3c7;
+  color: #b45309;
+  border: 1px solid #fcd34d;
+}
+
+.energy-range-tooltip__status-info.failure {
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+}
+
+.energy-range-tooltip__status-info.offline {
+  background: #f3f4f6;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
 `;
 
   // src/thingsboard/main-dashboard-shopping/v-4.0.0/head-office/card-head-office.icons.ts
@@ -5553,6 +6078,373 @@
         return "";
     }
   }
+  function getTempRangeClass(entityObject) {
+    if (entityObject.domain !== "temperature") return "";
+    const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
+    const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
+    const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
+    if (tempMin === void 0 || tempMax === void 0 || tempMin === null || tempMax === null) {
+      return "";
+    }
+    if (currentTemp > tempMax) return "is-temp-hot";
+    if (currentTemp < tempMin) return "is-temp-cold";
+    return "is-temp-ok";
+  }
+  var TempRangeTooltip = {
+    containerId: "myio-temp-range-tooltip",
+    /**
+     * Create or get the tooltip container
+     */
+    getContainer() {
+      let container = document.getElementById(this.containerId);
+      if (!container) {
+        container = document.createElement("div");
+        container.id = this.containerId;
+        container.className = "temp-range-tooltip";
+        document.body.appendChild(container);
+      }
+      return container;
+    },
+    /**
+     * Calculate temperature status and deviation
+     */
+    calculateStatus(currentTemp, tempMin, tempMax) {
+      if (tempMin == null || tempMax == null) {
+        return { status: "unknown", deviation: null, deviationPercent: null };
+      }
+      const rangeSize = tempMax - tempMin;
+      const midPoint = (tempMin + tempMax) / 2;
+      if (currentTemp < tempMin) {
+        const deviation = tempMin - currentTemp;
+        const deviationPercent = rangeSize > 0 ? deviation / rangeSize * 100 : 0;
+        return { status: "cold", deviation: -deviation, deviationPercent: -deviationPercent };
+      } else if (currentTemp > tempMax) {
+        const deviation = currentTemp - tempMax;
+        const deviationPercent = rangeSize > 0 ? deviation / rangeSize * 100 : 0;
+        return { status: "hot", deviation, deviationPercent };
+      } else {
+        const deviationFromMid = currentTemp - midPoint;
+        return { status: "ok", deviation: deviationFromMid, deviationPercent: 0 };
+      }
+    },
+    /**
+     * Calculate marker position on ruler (0-100%)
+     */
+    calculateMarkerPosition(currentTemp, tempMin, tempMax) {
+      if (tempMin == null || tempMax == null) return 50;
+      const rangeSize = tempMax - tempMin;
+      const extension = rangeSize * 0.3;
+      const visibleMin = tempMin - extension;
+      const visibleMax = tempMax + extension;
+      const visibleRange = visibleMax - visibleMin;
+      const clampedTemp = Math.max(visibleMin, Math.min(visibleMax, currentTemp));
+      const position = (clampedTemp - visibleMin) / visibleRange * 100;
+      return Math.max(2, Math.min(98, position));
+    },
+    /**
+     * Show tooltip for a temperature card
+     * @param {HTMLElement} triggerElement - The card element
+     * @param {Object} entityObject - Entity data
+     * @param {MouseEvent} event - Mouse event for cursor position
+     */
+    show(triggerElement, entityObject, event) {
+      const container = this.getContainer();
+      const currentTemp = Number(entityObject.val ?? entityObject.currentTemperature ?? entityObject.temperature) || 0;
+      const tempMin = entityObject.temperatureMin ?? entityObject.minTemperature;
+      const tempMax = entityObject.temperatureMax ?? entityObject.maxTemperature;
+      const hasRange = tempMin != null && tempMax != null;
+      const { status, deviation, deviationPercent } = this.calculateStatus(currentTemp, tempMin, tempMax);
+      const markerPos = this.calculateMarkerPosition(currentTemp, tempMin, tempMax);
+      let rangeLeft = 0, rangeWidth = 100;
+      if (hasRange) {
+        const rangeSize = tempMax - tempMin;
+        const extension = rangeSize * 0.3;
+        const visibleMin = tempMin - extension;
+        const visibleMax = tempMax + extension;
+        const visibleRange = visibleMax - visibleMin;
+        rangeLeft = (tempMin - visibleMin) / visibleRange * 100;
+        rangeWidth = rangeSize / visibleRange * 100;
+      }
+      let deviationClass = status;
+      if (status === "cold") {
+        `${Math.abs(deviation).toFixed(1)}\xB0C abaixo`;
+      } else if (status === "hot") {
+        `+${deviation.toFixed(1)}\xB0C acima`;
+      } else ;
+      const statusLabels = {
+        cold: "\u2744\uFE0F Abaixo da Faixa Ideal",
+        ok: "\u2714\uFE0F Dentro da Faixa Ideal",
+        hot: "\u{1F525} Acima da Faixa Ideal",
+        unknown: "\u2753 Faixa N\xE3o Configurada"
+      };
+      container.innerHTML = `
+      <div class="temp-range-tooltip__content">
+        <div class="temp-range-tooltip__header">
+          <span class="temp-range-tooltip__icon">\u{1F321}\uFE0F</span>
+          <span class="temp-range-tooltip__title">${entityObject.labelOrName || entityObject.name || "Sensor"}</span>
+        </div>
+        <div class="temp-range-tooltip__body">
+          <div class="temp-range-tooltip__value-row">
+            <div class="temp-range-tooltip__current">
+              ${currentTemp.toFixed(1)}<sup>\xB0C</sup>
+            </div>
+            <div class="temp-range-tooltip__deviation">
+              <div class="temp-range-tooltip__deviation-value ${deviationClass}">
+                ${status === "ok" ? "\u2713" : status === "cold" ? "\u2193" : status === "hot" ? "\u2191" : "?"} ${Math.abs(deviationPercent || 0).toFixed(0)}%
+              </div>
+              <div class="temp-range-tooltip__deviation-label">Desvio</div>
+            </div>
+          </div>
+
+          ${hasRange ? `
+          <div class="temp-range-tooltip__ruler">
+            <div class="temp-range-tooltip__ruler-track"></div>
+            <div class="temp-range-tooltip__ruler-range" style="left: ${rangeLeft}%; width: ${rangeWidth}%;"></div>
+            <div class="temp-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
+          </div>
+          <div class="temp-range-tooltip__ruler-labels">
+            <span class="temp-range-tooltip__ruler-min">${tempMin}\xB0C</span>
+            <span style="color: #22c55e; font-weight: 600;">Faixa Ideal</span>
+            <span class="temp-range-tooltip__ruler-max">${tempMax}\xB0C</span>
+          </div>
+          ` : ""}
+
+          <div class="temp-range-tooltip__range-info">
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">M\xEDnimo</div>
+              <div class="temp-range-tooltip__range-value">${hasRange ? tempMin + "\xB0C" : "--"}</div>
+            </div>
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">Atual</div>
+              <div class="temp-range-tooltip__range-value" style="color: ${status === "ok" ? "#16a34a" : status === "cold" ? "#2563eb" : "#dc2626"}">${currentTemp.toFixed(1)}\xB0C</div>
+            </div>
+            <div class="temp-range-tooltip__range-item">
+              <div class="temp-range-tooltip__range-label">M\xE1ximo</div>
+              <div class="temp-range-tooltip__range-value">${hasRange ? tempMax + "\xB0C" : "--"}</div>
+            </div>
+          </div>
+
+          <div class="temp-range-tooltip__status ${status}">
+            ${statusLabels[status]}
+          </div>
+        </div>
+      </div>
+    `;
+      let left, top;
+      if (event && event.clientX && event.clientY) {
+        left = event.clientX + 15;
+        top = event.clientY + 15;
+      } else {
+        const rect = triggerElement.getBoundingClientRect();
+        left = rect.left + rect.width / 2 - 150;
+        top = rect.bottom + 8;
+      }
+      const tooltipWidth = 300;
+      const tooltipHeight = 350;
+      if (left + tooltipWidth > window.innerWidth - 10) {
+        left = (event?.clientX || left) - tooltipWidth - 15;
+      }
+      if (left < 10) left = 10;
+      if (top + tooltipHeight > window.innerHeight - 10) {
+        top = (event?.clientY || top) - tooltipHeight - 15;
+      }
+      if (top < 10) top = 10;
+      container.style.left = left + "px";
+      container.style.top = top + "px";
+      container.classList.add("visible");
+    },
+    /**
+     * Hide tooltip
+     */
+    hide() {
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible");
+      }
+    }
+  };
+  var EnergyRangeTooltip = {
+    containerId: "myio-energy-range-tooltip",
+    /**
+     * Create or get the tooltip container
+     */
+    getContainer() {
+      let container = document.getElementById(this.containerId);
+      if (!container) {
+        container = document.createElement("div");
+        container.id = this.containerId;
+        container.className = "energy-range-tooltip";
+        document.body.appendChild(container);
+      }
+      return container;
+    },
+    /**
+     * Determine status based on power value and ranges
+     */
+    calculateStatus(powerValue, ranges) {
+      if (!ranges || powerValue == null) {
+        return { status: "offline", label: "Sem dados" };
+      }
+      const power = Number(powerValue) || 0;
+      const { standbyRange, normalRange, alertRange, failureRange } = ranges;
+      if (standbyRange && power >= standbyRange.down && power <= standbyRange.up) {
+        return { status: "standby", label: "Standby" };
+      }
+      if (normalRange && power >= normalRange.down && power <= normalRange.up) {
+        return { status: "normal", label: "Normal" };
+      }
+      if (alertRange && power >= alertRange.down && power <= alertRange.up) {
+        return { status: "alert", label: "Alerta" };
+      }
+      if (failureRange && power >= failureRange.down && power <= failureRange.up) {
+        return { status: "failure", label: "Falha" };
+      }
+      return { status: "offline", label: "Fora da faixa" };
+    },
+    /**
+     * Calculate marker position on ruler (0-100%)
+     */
+    calculateMarkerPosition(powerValue, ranges) {
+      if (!ranges) return 50;
+      const power = Number(powerValue) || 0;
+      const maxRange = ranges.failureRange?.up || ranges.alertRange?.up || 1e3;
+      const displayMax = Math.min(maxRange, (ranges.alertRange?.up || maxRange) * 1.2);
+      const position = power / displayMax * 100;
+      return Math.max(2, Math.min(98, position));
+    },
+    /**
+     * Calculate segment widths for the ruler
+     */
+    calculateSegmentWidths(ranges) {
+      if (!ranges) return { standby: 25, normal: 25, alert: 25, failure: 25 };
+      const maxValue = ranges.failureRange?.up || 1e4;
+      const total = Math.min(maxValue, (ranges.alertRange?.up || maxValue) * 1.2);
+      return {
+        standby: (ranges.standbyRange?.up || 0) / total * 100,
+        normal: ((ranges.normalRange?.up || 0) - (ranges.normalRange?.down || 0)) / total * 100,
+        alert: ((ranges.alertRange?.up || 0) - (ranges.alertRange?.down || 0)) / total * 100,
+        failure: Math.max(5, 100 - (ranges.alertRange?.up || 0) / total * 100)
+      };
+    },
+    /**
+     * Format power value for display
+     */
+    formatPower(value) {
+      if (value == null || isNaN(value)) return "-";
+      const num = Number(value);
+      if (num >= 1e3) {
+        return `${(num / 1e3).toFixed(2)} kW`;
+      }
+      return `${Math.round(num)} W`;
+    },
+    /**
+     * Show tooltip for an energy card
+     */
+    show(triggerElement, entityObject, event) {
+      const container = this.getContainer();
+      const powerValue = entityObject.instantaneousPower ?? entityObject.consumption_power ?? 0;
+      const ranges = entityObject.powerRanges || entityObject.ranges;
+      const hasRanges = ranges && ranges.normalRange;
+      const { status, label } = this.calculateStatus(powerValue, ranges);
+      const markerPos = this.calculateMarkerPosition(powerValue, ranges);
+      const segmentWidths = this.calculateSegmentWidths(ranges);
+      const statusLabels = {
+        standby: "\u{1F535} Standby",
+        normal: "\u2705 Opera\xE7\xE3o Normal",
+        alert: "\u26A0\uFE0F Alerta",
+        failure: "\u{1F534} Falha",
+        offline: "\u26AB Offline / Sem dados"
+      };
+      container.innerHTML = `
+      <div class="energy-range-tooltip__content">
+        <div class="energy-range-tooltip__header">
+          <span class="energy-range-tooltip__icon">\u26A1</span>
+          <span class="energy-range-tooltip__title">${entityObject.labelOrName || entityObject.name || "Equipamento"}</span>
+        </div>
+        <div class="energy-range-tooltip__body">
+          <div class="energy-range-tooltip__value-row">
+            <div class="energy-range-tooltip__current">
+              ${this.formatPower(powerValue)}
+            </div>
+            <div class="energy-range-tooltip__status-badge">
+              <span class="energy-range-tooltip__status-value ${status}">${label}</span>
+            </div>
+          </div>
+
+          ${hasRanges ? `
+          <div class="energy-range-tooltip__ruler">
+            <div class="energy-range-tooltip__ruler-track">
+              <div class="energy-range-tooltip__ruler-segment standby" style="width: ${segmentWidths.standby}%"></div>
+              <div class="energy-range-tooltip__ruler-segment normal" style="width: ${segmentWidths.normal}%"></div>
+              <div class="energy-range-tooltip__ruler-segment alert" style="width: ${segmentWidths.alert}%"></div>
+              <div class="energy-range-tooltip__ruler-segment failure" style="width: ${segmentWidths.failure}%"></div>
+            </div>
+            <div class="energy-range-tooltip__ruler-marker" style="left: ${markerPos}%;"></div>
+          </div>
+
+          <div class="energy-range-tooltip__ranges">
+            <div class="energy-range-tooltip__range-item standby">
+              <div class="energy-range-tooltip__range-label">Standby</div>
+              <div class="energy-range-tooltip__range-value">${ranges.standbyRange?.down || 0}-${ranges.standbyRange?.up || 0}W</div>
+            </div>
+            <div class="energy-range-tooltip__range-item normal">
+              <div class="energy-range-tooltip__range-label">Normal</div>
+              <div class="energy-range-tooltip__range-value">${ranges.normalRange?.down || 0}-${ranges.normalRange?.up || 0}W</div>
+            </div>
+            <div class="energy-range-tooltip__range-item alert">
+              <div class="energy-range-tooltip__range-label">Alerta</div>
+              <div class="energy-range-tooltip__range-value">${ranges.alertRange?.down || 0}-${ranges.alertRange?.up || 0}W</div>
+            </div>
+            <div class="energy-range-tooltip__range-item failure">
+              <div class="energy-range-tooltip__range-label">Falha</div>
+              <div class="energy-range-tooltip__range-value">&gt;${ranges.failureRange?.down || 0}W</div>
+            </div>
+          </div>
+          ` : `
+          <div style="text-align: center; padding: 16px; color: #64748b; font-size: 12px;">
+            Ranges de pot\xEAncia n\xE3o configurados
+          </div>
+          `}
+
+          <div class="energy-range-tooltip__status-info ${status}">
+            ${statusLabels[status] || statusLabels.offline}
+          </div>
+        </div>
+      </div>
+    `;
+      let left, top;
+      if (event && event.clientX && event.clientY) {
+        left = event.clientX + 15;
+        top = event.clientY + 15;
+      } else {
+        const rect = triggerElement.getBoundingClientRect();
+        left = rect.left + rect.width / 2 - 150;
+        top = rect.bottom + 8;
+      }
+      const tooltipWidth = 320;
+      const tooltipHeight = 380;
+      if (left + tooltipWidth > window.innerWidth - 10) {
+        left = (event?.clientX || left) - tooltipWidth - 15;
+      }
+      if (left < 10) left = 10;
+      if (top + tooltipHeight > window.innerHeight - 10) {
+        top = (event?.clientY || top) - tooltipHeight - 15;
+      }
+      if (top < 10) top = 10;
+      container.style.left = left + "px";
+      container.style.top = top + "px";
+      container.classList.add("visible");
+    },
+    /**
+     * Hide tooltip
+     */
+    hide() {
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible");
+      }
+    }
+  };
   function getStatusDotClass(deviceStatus) {
     switch (deviceStatus) {
       // --- Novos Status de Temperatura ---
@@ -5945,11 +6837,16 @@
       }
     }
     const stateClass = getCardStateClass(entityObject.deviceStatus);
-    root.className = `myio-ho-card ${stateClass}`;
+    const tempRangeClass = getTempRangeClass(entityObject);
+    root.className = `myio-ho-card ${stateClass} ${tempRangeClass}`.trim();
     const statusInfo = getStatusInfo(entityObject.deviceStatus, i18n, entityObject.domain);
     const chip = root.querySelector(".chip");
     chip.className = `chip ${statusInfo.chipClass}`;
     chip.innerHTML = statusInfo.label;
+    const iconContainer = root.querySelector(".myio-ho-card__icon");
+    if (iconContainer) {
+      iconContainer.innerHTML = getIconSvg(entityObject.deviceType, entityObject.domain);
+    }
     if (activeTooltipDebug) {
       const debugInfo = buildDebugTooltipInfo(entityObject, statusInfo, stateClass, statusDecisionSource, delayTimeConnectionInMins);
       attachDebugTooltip(chip, debugInfo);
@@ -5985,14 +6882,9 @@
     const opTimeVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(1) .val");
     const opTimeLabel = root.querySelector(".myio-ho-card__footer .metric:nth-child(1) .label");
     if (opTimeVal) {
-      if (entityObject.domain === "temperature") {
-        if (opTimeLabel) opTimeLabel.textContent = "Temp. Atual";
-        const currentTemp = entityObject.currentTemperature ?? entityObject.temperature ?? entityObject.val ?? null;
-        opTimeVal.textContent = currentTemp !== null ? `${Number(currentTemp).toFixed(1)}\xB0C` : "-";
-      } else {
-        if (opTimeLabel) opTimeLabel.textContent = i18n.operation_time;
-        opTimeVal.textContent = entityObject.operationHours ?? "-";
-      }
+      if (opTimeLabel) opTimeLabel.textContent = i18n.operation_time;
+      const isOffline = entityObject.deviceStatus === DeviceStatusType.OFFLINE || entityObject.deviceStatus === "offline" || entityObject.deviceStatus === DeviceStatusType.NO_INFO;
+      opTimeVal.textContent = isOffline ? "-" : entityObject.operationHours ?? "-";
     }
     const powerVal = root.querySelector(".myio-ho-card__footer .metric:nth-child(2) .val");
     if (powerVal) {
@@ -6078,12 +6970,46 @@
       MyIOSelectionStore2.on("selection:change", onSelectionChange);
       root._selectionListener = onSelectionChange;
     }
+    if (entityObject.domain === "temperature") {
+      const showTooltip = (e) => {
+        TempRangeTooltip.show(root, state.entityObject, e);
+      };
+      const hideTooltip = () => {
+        TempRangeTooltip.hide();
+      };
+      root.addEventListener("mouseenter", showTooltip);
+      root.addEventListener("mouseleave", hideTooltip);
+      root._tempTooltipShowFn = showTooltip;
+      root._tempTooltipHideFn = hideTooltip;
+    }
+    if (entityObject.domain === "energy") {
+      const showEnergyTooltip = (e) => {
+        EnergyRangeTooltip.show(root, state.entityObject, e);
+      };
+      const hideEnergyTooltip = () => {
+        EnergyRangeTooltip.hide();
+      };
+      root.addEventListener("mouseenter", showEnergyTooltip);
+      root.addEventListener("mouseleave", hideEnergyTooltip);
+      root._energyTooltipShowFn = showEnergyTooltip;
+      root._energyTooltipHideFn = hideEnergyTooltip;
+    }
     root._cleanup = () => {
       document.removeEventListener("click", closeMenu);
       document.removeEventListener("keydown", closeMenu);
       if (MyIOSelectionStore2 && root._selectionListener) {
         MyIOSelectionStore2.off("selection:change", root._selectionListener);
       }
+      if (root._tempTooltipShowFn) {
+        root.removeEventListener("mouseenter", root._tempTooltipShowFn);
+        root.removeEventListener("mouseleave", root._tempTooltipHideFn);
+        TempRangeTooltip.hide();
+      }
+      if (root._energyTooltipShowFn) {
+        root.removeEventListener("mouseenter", root._energyTooltipShowFn);
+        root.removeEventListener("mouseleave", root._energyTooltipHideFn);
+        EnergyRangeTooltip.hide();
+      }
     };
     const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
     if (checkbox && callbacks.handleSelect) {