myio-js-library 0.1.13 → 0.1.15

package/README.md

@@ -570,16 +570,17 @@ calcDeltaPercent(100, 100); // { value: 0, type: "neutral" }
 calcDeltaPercent(0, 100); // { value: 100, type: "increase" }
 ```
 
-##### `formatEnergyByGroup(value: number, group: string): string`
+##### `formatWaterByGroup(value: number, group: string): string`
 
-Formats energy/water values based on group type (from MAIN_WATER controller).
+Formats water group totals in m³. For values ≥ 1000, it returns the value in thousands of m³ with a simplified `x 10³` suffix.
 
+**Examples**
 ```javascript
-import { formatEnergyByGroup } from 'myio-js-library';
+import { formatWaterByGroup } from 'myio-js-library';
 
-formatEnergyByGroup(178, "Caixas D'Água"); // "1,78 m.c.a."
-formatEnergyByGroup(12.345, "Lojas"); // "12,35 M³"
-formatEnergyByGroup(1000000, "Lojas"); // "1,00 M³ (GWh scale)"
+formatWaterByGroup(178, "Caixas D'Água"); // "1,78 m.c.a."
+formatWaterByGroup(750, "Lojas");    // "750,00 M³"
+formatWaterByGroup(2500, "Lojas");   // "2,50 M³ x 10³ "
 ```
 
 #### Water Date Utilities

package/dist/index.cjs

@@ -43,9 +43,9 @@ __export(index_exports, {
   formatDateToYMD: () => formatDateToYMD,
   formatDateWithTimezoneOffset: () => formatDateWithTimezoneOffset,
   formatEnergy: () => formatEnergy,
-  formatEnergyByGroup: () => formatEnergyByGroup,
   formatNumberReadable: () => formatNumberReadable,
   formatTankHeadFromCm: () => formatTankHeadFromCm,
+  formatWaterByGroup: () => formatWaterByGroup,
   formatWaterVolumeM3: () => formatWaterVolumeM3,
   getAvailableContexts: () => getAvailableContexts,
   getDateRangeArray: () => getDateRangeArray,
@@ -189,18 +189,15 @@ function calcDeltaPercent(prev, current) {
     return { value: 0, type: "neutral" };
   }
 }
-function formatEnergyByGroup(value, group) {
+function formatWaterByGroup(value, group) {
   if (value === null || value === void 0 || isNaN(value)) {
     return "-";
   }
   if (group === "Caixas D'\xC1gua") {
     return formatTankHeadFromCm(value);
   }
-  if (value >= 1e6) {
-    return formatWaterVolumeM3(value / 1e6) + " (GWh scale)";
-  }
   if (value >= 1e3) {
-    return formatWaterVolumeM3(value / 1e3) + " (MWh scale)";
+    return formatWaterVolumeM3(value / 1e3) + " x 10\xB3 ";
   }
   return formatWaterVolumeM3(value);
 }
@@ -736,39 +733,77 @@ function findValue(data, keyOrPath, legacyDataKey) {
 }
 
 // src/utils/deviceType.js
+function normalize(str) {
+  if (typeof str !== "string") return "";
+  let normalized = str.toUpperCase().trim();
+  normalized = normalized.replace(/[ÀÁÂÃÄÅ]/g, "A").replace(/[ÈÉÊË]/g, "E").replace(/[ÌÍÎÏ]/g, "I").replace(/[ÒÓÔÕÖ]/g, "O").replace(/[ÙÚÛÜ]/g, "U").replace(/[Ç]/g, "C").replace(/[Ñ]/g, "N");
+  normalized = normalized.replace(/\s+/g, " ");
+  return normalized;
+}
+function matchCaixaDAgua(normalizedStr) {
+  if (normalizedStr.includes("SCD")) return true;
+  const caixaVariants = [
+    "CAIXA D'AGUA",
+    "CAIXA D AGUA",
+    "CAIXA_D_AGUA",
+    "CAIXA DAGUA"
+  ];
+  return caixaVariants.some((variant) => normalizedStr.includes(variant));
+}
 var contexts = {
   building: (name) => {
-    const upper = name.toUpperCase();
-    if (upper.includes("COMPRESSOR")) return "COMPRESSOR";
-    if (upper.includes("VENT")) return "VENTILADOR";
-    if (upper.includes("AUTOMATICO") || upper.includes("AUTOM\xC1TICO")) return "SELETOR_AUTO_MANUAL";
-    if (upper.includes("TERMOSTATO")) return "TERMOSTATO";
-    if (upper.includes("3F")) return "3F_MEDIDOR";
-    if (upper.includes("TERMO") || upper.includes("TEMP")) return "TERMOSTATO";
-    if (upper.includes("HIDR")) return "HIDROMETRO";
-    if (upper.includes("ABRE")) return "SOLENOIDE";
-    if (upper.includes("RECALQUE")) return "MOTOR";
-    if (upper.includes("AUTOMACAO") || upper.includes("AUTOMA\xC7\xC3O")) return "GLOBAL_AUTOMACAO";
-    if (upper.includes("AC")) return "CONTROLE REMOTO";
-    if (upper.includes("SCD")) return "CAIXA_D_AGUA";
+    const normalized = normalize(name);
+    const rules = [
+      { test: (s) => s.includes("COMPRESSOR"), type: "COMPRESSOR" },
+      { test: (s) => s.includes("VENT"), type: "VENTILADOR" },
+      { test: (s) => s.includes("AUTOMATICO"), type: "SELETOR_AUTO_MANUAL" },
+      { test: (s) => s.includes("ESRL"), type: "ESCADA_ROLANTE" },
+      { test: (s) => s.includes("ESCADA"), type: "ESCADA_ROLANTE" },
+      { test: (s) => s.includes("ELEV"), type: "ELEVADOR" },
+      { test: (s) => s.includes("MOTR") || s.includes("RECALQUE"), type: "MOTOR" },
+      { test: (s) => s.includes("TERMOSTATO"), type: "TERMOSTATO" },
+      { test: (s) => s.includes("TERMO") || s.includes("TEMP"), type: "TERMOSTATO" },
+      { test: (s) => s.includes("3F"), type: "3F_MEDIDOR" },
+      { test: (s) => s.includes("HIDR"), type: "HIDROMETRO" },
+      { test: (s) => s.includes("ABRE"), type: "SOLENOIDE" },
+      { test: (s) => matchCaixaDAgua(s), type: "CAIXA_D_AGUA" },
+      { test: (s) => s.includes("AUTOMACAO") || s.includes("GW_AUTO"), type: "GLOBAL_AUTOMACAO" },
+      { test: (s) => s.includes("AC"), type: "CONTROLE REMOTO" }
+    ];
+    for (const rule of rules) {
+      if (rule.test(normalized)) {
+        return rule.type;
+      }
+    }
     return "default";
   },
   mall: (name) => {
-    const upper = name.toUpperCase();
-    if (upper.includes("CHILLER")) return "CHILLER";
-    if (upper.includes("ESCADA")) return "ESCADA_ROLANTE";
-    if (upper.includes("LOJA")) return "LOJA_SENSOR";
-    if (upper.includes("ILUMINACAO") || upper.includes("ILUMINA\xC7\xC3O")) return "ILUMINACAO";
+    const normalized = normalize(name);
+    const rules = [
+      { test: (s) => s.includes("CHILLER"), type: "CHILLER" },
+      { test: (s) => s.includes("ESCADA"), type: "ESCADA_ROLANTE" },
+      { test: (s) => s.includes("LOJA"), type: "LOJA_SENSOR" },
+      { test: (s) => s.includes("ILUMINACAO"), type: "ILUMINACAO" }
+    ];
+    for (const rule of rules) {
+      if (rule.test(normalized)) {
+        return rule.type;
+      }
+    }
     return "default";
   }
 };
+var warnedContexts = /* @__PURE__ */ new Set();
 function detectDeviceType(name, context = "building") {
   if (typeof name !== "string") {
     throw new Error("Device name must be a string.");
   }
   const detectFunction = contexts[context];
   if (!detectFunction) {
-    console.warn(`[myio-js-library] Context "${context}" not found. Using default fallback.`);
+    if (!warnedContexts.has(context)) {
+      console.warn(`[myio-js-library] Context "${context}" not found. Using default fallback.`);
+      warnedContexts.add(context);
+    }
     return contexts.building(name);
   }
   return detectFunction(name);
@@ -896,6 +931,7 @@ function renderCardComponent({
   const {
     entityId,
     labelOrName,
+    deviceIdentifier,
     entityType,
     deviceType,
     slaveId,
@@ -903,22 +939,43 @@ function renderCardComponent({
     val,
     centralId,
     updatedIdentifiers = {},
-    isOn = false,
     perc = 0,
-    group,
     connectionStatus,
     centralName,
     connectionStatusTime,
     timaVal,
     valType
   } = entityObject;
+  const DeviceStatus = {
+    CONNECTED: "connected",
+    OFFLINE: "offline",
+    POWER_ON: "power_on",
+    STANDBY: "standby",
+    POWER_OFF: "power_off",
+    WARNING: "warning",
+    DANGER: "danger",
+    MAINTENANCE: "maintenance"
+  };
+  const statusIcons = {
+    [DeviceStatus.CONNECTED]: "\u2705",
+    [DeviceStatus.OFFLINE]: "\u{1F50C}",
+    [DeviceStatus.POWER_ON]: "\u26A1",
+    [DeviceStatus.STANDBY]: "\u23F8\uFE0F",
+    [DeviceStatus.POWER_OFF]: "\u23F9\uFE0F",
+    [DeviceStatus.WARNING]: "\u26A0\uFE0F",
+    [DeviceStatus.DANGER]: "\u{1F6A8}",
+    [DeviceStatus.MAINTENANCE]: "\u{1F6E0}\uFE0F"
+  };
+  const isOfflineOrDanger = connectionStatus === DeviceStatus.OFFLINE || connectionStatus === DeviceStatus.DANGER;
+  const shouldFlashIcon = connectionStatus === DeviceStatus.OFFLINE || connectionStatus === DeviceStatus.WARNING || connectionStatus === DeviceStatus.DANGER || connectionStatus === DeviceStatus.MAINTENANCE;
+  const icon = statusIcons[connectionStatus] || statusIcons[DeviceStatus.POWER_ON];
   const MyIO = typeof MyIOLibrary !== "undefined" && MyIOLibrary || typeof window !== "undefined" && window.MyIOLibrary || {
-    formatEnergyByGroup: (v, g) => `${v} kWh`,
+    formatEnergy: (v, g) => `${v} kWh`,
     formatNumberReadable: (n) => Number(n ?? 0).toFixed(1)
   };
-  let valFormatted = MyIO.formatEnergyByGroup(val);
+  let valFormatted = MyIO.formatEnergy(val);
   if (valType === "ENERGY") {
-    valFormatted = MyIO.formatEnergyByGroup(val);
+    valFormatted = MyIO.formatEnergy(val);
   } else if (valType === "WATER") {
     valFormatted = `${val} m\xB3`;
   } else if (valType === "TANK") {
@@ -938,12 +995,12 @@ function renderCardComponent({
   padding: 8px 12px;
   background: #fff;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* display: flex; REMOVIDO */
+  /* align-items: center; REMOVIDO */
+  /* justify-content: center; REMOVIDO */
   cursor: pointer;
   transition: transform .2s;
-  min-height: 140px;
+  /* min-height: 140px; REMOVIDO (movido para .device-card-inner) */
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -974,6 +1031,19 @@ function renderCardComponent({
   line-height: 1.1;
 }
 
+.device-subtitle {
+  font-size: 0.7rem; 
+  font-weight: 500;
+  color: #888; /* Cinza */
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90%;
+  line-height: 1.1;
+  margin-top: 2px;
+}
+
 .device-image {
   max-height: 44px;
   width: auto;
@@ -1014,19 +1084,13 @@ function renderCardComponent({
 }
 
 @keyframes flash {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: .2;
-  }
-  100% {
-    opacity: 1;
-  }
+  0% { opacity: 1; }
+  50% { opacity: .2; }
+  100% { opacity: 1; }
 }
 
 .card-actions {
-  width: 10%;
+  flex-shrink: 0;
   height: 100%;
   box-shadow: 1px 0 2px rgba(0, 0, 0, .1);
   display: flex;
@@ -1052,23 +1116,6 @@ function renderCardComponent({
   animation: border-blink 1s infinite;
 }
 
-
-.device-info {
-  position: absolute;
-  top: 8px;      /* dist\xE2ncia do topo */
-  right: 8px;    /* dist\xE2ncia da direita */
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 50%;
-  transition: background 0.2s;
-}
-
-.device-info:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
 .device-card-centered.flipped .device-card-inner {
   transform: rotateY(180deg);
 }
@@ -1083,7 +1130,7 @@ function renderCardComponent({
   font-size: 1.2rem;
 }     
 .device-card-centered {
-  perspective: 1000px; /* perspectiva para 3D */
+  perspective: 1000px;
 }
 
 .device-card-inner {
@@ -1091,100 +1138,94 @@ function renderCardComponent({
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
+  min-height: 140px; /* ATUALIZADO: A altura m\xEDnima agora \xE9 controlada aqui */
 }
 
 .device-card-front {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  align-items: flex-start; /* topo */
+  align-items: flex-start; /* Agora isso vai funcionar */
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   backface-visibility: hidden;
+  gap: 4px;
 }
 
 .device-card-back {
-  display: flex;
-  flex-direction: column; /* muda para coluna se quiser empilhar elementos verticalmente */
-  justify-content: flex-start; /* conte\xFAdo come\xE7a do topo */
-  align-items: center; /* centraliza horizontalmente */
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  backface-visibility: hidden;
-  transform: rotateY(180deg); /* mant\xE9m flip */
-  padding: 10px; /* opcional: espa\xE7o interno */
-  gap: 10px; /* opcional: espa\xE7o entre elementos */
+  transform: rotateY(180deg);
 }
 
-
-
-.device-info {
+.device-card-front .device-info,
+.device-card-back .device-info {
   position: absolute;
-  top: 8px;      /* dist\xE2ncia do topo */
-  right: 8px;    /* dist\xE2ncia da direita */
-  background: none;
-  border: none;
-  cursor: pointer;
+  top: 8px;
+  right: 12px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 4px;
   border-radius: 50%;
-  transition: background 0.2s;l
-}
-.device-card-back {
-  transform: rotateY(180deg); /* faz o flip funcionar */
-}
-
-.device-card-front .device-info,
-.device-card-back .device-info {
-  position: absolute;       /* tira do fluxo do flex */
-  top: 0;                   /* topo do card */
-  right: 8px;               /* canto direito */
-  margin: 0;                /* remove qualquer margem que empurre o bot\xE3o */
-  display: flex;            /* mant\xE9m o conte\xFAdo do bot\xE3o centralizado */
-  align-items: center;      
-  justify-content: center;  
-  padding: 4px;             
-  border-radius: 50%;       
   cursor: pointer;
-  z-index: 10;              
+  z-index: 10;
+  background: none;
+  border: none;
+  transition: background 0.2s;
+}
+.device-card-front .device-info:hover,
+.device-card-back .device-info:hover {
+  background: rgba(0, 0, 0, 0.05);
 }
 
 
 .device-card-back {
-
   display: flex;
-  flex-direction: column;  /* empilha os elementos */
-  justify-content: flex-start;
-  align-items: flex-start;  /* tudo \xE0 esquerda por padr\xE3o */
+  flex-direction: column;
+  justify-content: space-around; /* Mantido para preencher o verso */
+  align-items: stretch;
   padding: 10px;
-  gap: 10px;
+  gap: 5px;
   height: 100%;
-    margin-left: -10px;  
+  width: 100%;
+  box-sizing: border-box;
+  
+  /* Posi\xE7\xF5es para o flip */
+  position: absolute;
+  top: 0;
+  left: 0;
+  backface-visibility: hidden;
+  transform: rotateY(180deg);
+}
+
+.device-card-back #status-bar {
+  position: relative;
+  width: 100%;
+  padding-top: 10px;
 }
 
 .device-card-back .value-container {
   display: flex;
-  flex-direction: row;   /* \xEDcone e valor lado a lado */
+  flex-direction: row;
   align-items: center;
   gap: 5px;
-  color: #c19efc;        /* roxo clarinho */
-  align-self: center;    /* centraliza horizontalmente no card */
+  color: #c19efc;
+  align-self: center;
 }
 
 .device-card-back #lastconsumptionTime {
-
   display: flex;
   flex-direction: column;
-  align-items: flex-start; /* mant\xE9m \xE0 esquerda */
+  align-items: flex-start;
   gap: 2px;
   font-size: 11px;
   font-weight: bold;
   color: black;
+  width: 100%;
+  padding-bottom: 10px;
 }
 
 
@@ -1206,7 +1247,7 @@ function renderCardComponent({
 }
 
 .device-card-centered.online .flash-icon {
-  color: #28a745 !important; /* verde premium para online */
+  color: #28a745 !important;
 }
     `;
     document.head.appendChild(style);
@@ -1251,6 +1292,9 @@ function renderCardComponent({
     Infcolor = "#d6dcdd";
   }
   function normalizeString(str) {
+    if (typeof str !== "string") {
+      str = "";
+    }
     return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase();
   }
   const deviceImages = {
@@ -1265,7 +1309,7 @@ function renderCardComponent({
   const nameType = normalizeString(deviceType);
   const img = deviceImages[nameType] || defaultImage;
   const html = `
-    <div class="device-card-centered clickable ${connectionStatus === "offline" ? "offline" : ""}"
+    <div class="device-card-centered clickable ${isOfflineOrDanger ? "offline" : ""}"
       data-entity-id="${entityId}"
       data-entity-label="${labelOrName}"
       data-entity-type="${entityType}"
@@ -1294,18 +1338,27 @@ function renderCardComponent({
               <input class="card-action action-checker" data-action="checker" title="Selecionar" type="checkbox">` : ``}
           </div>
 
-          <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:85%">
-            <div class="device-title-row">
+          <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%; flex-grow: 1; min-width: 0; padding: 0 12px;">
+            
+            <div class="device-title-row" style="flex-direction: column; min-height: 38px;">
               <span class="device-title" title="${labelOrName}">
                 ${String(labelOrName ?? "").length > 15 ? String(labelOrName).slice(0, 15) + "\u2026" : String(labelOrName ?? "")}
               </span>
+              ${deviceIdentifier ? `
+                <span class="device-subtitle" title="${deviceIdentifier}">
+                  ${deviceIdentifier}
+                </span>
+              ` : ""}
             </div>
+
             <img class="device-image" src="${img || ""}" />
             <div class="device-data-row">
               <div class="consumption-main">
-                <span class="flash-icon ${connectionStatus === "offline" ? "flash" : isOn ? "flash" : ""}">
-                  ${connectionStatus === "offline" ? "\u{1F6A8}" : "\u26A1"}
+                
+                <span class="flash-icon ${shouldFlashIcon ? "flash" : ""}">
+                  ${icon}
                 </span>
+
                 <span class="consumption-value" data-entity-consumption="${val}">${valFormatted}</span>
                 <span class="device-title-percent">(${percFormatted}%)</span>
               </div>
@@ -1339,7 +1392,7 @@ function renderCardComponent({
           <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#dea404">
             <path d="m456-200 174-340H510v-220L330-420h126v220Zm24 120q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
           </svg>
-          <div><span>${MyIO.formatEnergyByGroup(val / 1e3) || "-"}</span></div>
+          <div><span>${MyIO.formatEnergy(val / 1e3) || "-"}</span></div>
         </div>
 
         <div id="lastconsumptionTime">
@@ -1428,9 +1481,9 @@ function renderCardComponent({
   formatDateToYMD,
   formatDateWithTimezoneOffset,
   formatEnergy,
-  formatEnergyByGroup,
   formatNumberReadable,
   formatTankHeadFromCm,
+  formatWaterByGroup,
   formatWaterVolumeM3,
   getAvailableContexts,
   getDateRangeArray,

package/dist/index.d.cts

@@ -59,12 +59,12 @@ declare function calcDeltaPercent(prev: number, current: number): {
     type: 'increase' | 'decrease' | 'neutral';
 };
 /**
- * Formats energy/water values based on group type (from MAIN_WATER controller)
- * @param value - The value to format
+ * Formats water values based on group type (from MAIN_WATER controller)
+ * @param value - The value to format in cubic meters
  * @param group - The group type ('Caixas D\'Água', 'Lojas', 'Área Comum')
  * @returns Formatted string with appropriate unit
  */
-declare function formatEnergyByGroup(value: number, group: string): string;
+declare function formatWaterByGroup(value: number, group: string): string;
 /**
  * Formats all values in the same unit for consistent display
  * @param values - Array of values to format
@@ -386,4 +386,4 @@ declare function renderCardComponent({ entityObject, handleActionDashboard, hand
     handleClickCard: any;
 }): any;
 
-export { type StoreRow, type TimedValue, type WaterRow, addDetectionContext, addNamespace, averageByDay, buildWaterReportCSV, buildWaterStoresCSV, calcDeltaPercent, classify, classifyWaterLabel, classifyWaterLabels, decodePayload, decodePayloadBase64Xor, detectDeviceType, determineInterval, exportToCSV, exportToCSVAll, findValue, fmtPerc$1 as fmtPerc, fmtPerc as fmtPercLegacy, formatAllInSameUnit, formatAllInSameWaterUnit, formatDateForInput, formatDateToYMD, formatDateWithTimezoneOffset, formatEnergy, formatEnergyByGroup, formatNumberReadable, formatTankHeadFromCm, formatWaterVolumeM3, getAvailableContexts, getDateRangeArray, getSaoPauloISOString, getSaoPauloISOStringFixed, getValueByDatakey, getValueByDatakeyLegacy, getWaterCategories, groupByDay, isWaterCategory, normalizeRecipients, numbers, parseInputDateToDate, renderCardComponent, strings, timeWindowFromInputYMD, toCSV, toFixedSafe };
+export { type StoreRow, type TimedValue, type WaterRow, addDetectionContext, addNamespace, averageByDay, buildWaterReportCSV, buildWaterStoresCSV, calcDeltaPercent, classify, classifyWaterLabel, classifyWaterLabels, decodePayload, decodePayloadBase64Xor, detectDeviceType, determineInterval, exportToCSV, exportToCSVAll, findValue, fmtPerc$1 as fmtPerc, fmtPerc as fmtPercLegacy, formatAllInSameUnit, formatAllInSameWaterUnit, formatDateForInput, formatDateToYMD, formatDateWithTimezoneOffset, formatEnergy, formatNumberReadable, formatTankHeadFromCm, formatWaterByGroup, formatWaterVolumeM3, getAvailableContexts, getDateRangeArray, getSaoPauloISOString, getSaoPauloISOStringFixed, getValueByDatakey, getValueByDatakeyLegacy, getWaterCategories, groupByDay, isWaterCategory, normalizeRecipients, numbers, parseInputDateToDate, renderCardComponent, strings, timeWindowFromInputYMD, toCSV, toFixedSafe };