myio-js-library 0.1.502 → 0.1.504

package/dist/index.cjs

@@ -583,6 +583,7 @@ __export(index_exports, {
   CONSUMPTION_CHART_DEFAULTS: () => DEFAULT_CONFIG,
   CONSUMPTION_THEME_COLORS: () => THEME_COLORS,
   CardGridPanel: () => CardGridPanel,
+  ColumnSummaryTooltip: () => ColumnSummaryTooltip,
   ConnectionStatusType: () => ConnectionStatusType,
   ContractSummaryTooltip: () => ContractSummaryTooltip,
   CustomerCardV1: () => CustomerCardV1,
@@ -1130,6 +1131,7 @@ __export(index_exports, {
   renderStatusDonutChart: () => renderStatusDonutChart,
   renderTrendChart: () => renderTrendChart,
   reopenFreshdeskTicket: () => reopenTicket,
+  resolvePercentDecimals: () => resolvePercentDecimals,
   schedCreateDateInput: () => createDateInput,
   schedCreateNumberInput: () => createNumberInput,
   schedCreateSelect: () => createSelect,
@@ -1162,7 +1164,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.502",
+  version: "0.1.504",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -14498,6 +14500,16 @@ var TempComparisonTooltip = {
   }
 };
 
+// src/utils/percentDecimals.ts
+function resolvePercentDecimals(explicit) {
+  const fromArg = Number(explicit);
+  if (Number.isInteger(fromArg) && fromArg >= 0 && fromArg <= 6) return fromArg;
+  const utils = typeof window !== "undefined" ? window.MyIOUtils : void 0;
+  const fromGlobal = utils ? Number(utils.percentDecimals) : NaN;
+  if (Number.isInteger(fromGlobal) && fromGlobal >= 0 && fromGlobal <= 6) return fromGlobal;
+  return 2;
+}
+
 // src/thingsboard/main-dashboard-shopping/v-5.2.0/card/template-card-v5.js
 var LABEL_CHAR_LIMIT2 = 18;
 var DEVICE_TYPE_CONFIG = {
@@ -14632,8 +14644,11 @@ function renderCardComponentV5({
   // Tooltip on percentage badge
   showTempComparisonTooltip = false,
   // Tooltip on temperature deviation badge
-  showTempRangeTooltip = false
+  showTempRangeTooltip = false,
   // Tooltip on device image for temperature devices
+  // Decimal places for the % badge. Resolved at render time so it can be changed
+  // without rebuilding the lib: this prop > window.MyIOUtils.percentDecimals > 2.
+  percentDecimals
 }) {
   const {
     entityId,
@@ -15091,6 +15106,7 @@ function renderCardComponentV5({
   const isTermostatoDevice = deviceType?.toUpperCase() === "TERMOSTATO";
   const isEnergyDeviceFlag = isEnergyDevice2(deviceType);
   const percentageForDisplay = isTankDevice2 ? (waterPercentage || 0) * 100 : perc;
+  const _pctDecimals = resolvePercentDecimals(percentDecimals);
   const calculateTempStatus2 = () => {
     if (temperatureStatus) return temperatureStatus;
     const currentTemp = Number(val) || 0;
@@ -15169,9 +15185,7 @@ function renderCardComponentV5({
                   <span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
                 </div>
               </div>
-              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(
-    1
-  )}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
+              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(_pctDecimals).replace(".", ",")}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
             </div>
           </div>
         </div>
@@ -27305,8 +27319,8 @@ var EnergyDataFetcher = class {
 // src/components/premium-modals/internal/engines/CsvExporter.ts
 var toCsv = (rows, locale = "pt-BR", sep = ";") => {
   const fmt2 = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-  const esc3 = (v) => (typeof v === "number" ? fmt2.format(v) : String(v)).replace(/"/g, '""');
-  return rows.map((r) => r.map((c) => `"${esc3(c)}"`).join(sep)).join("\r\n");
+  const esc4 = (v) => (typeof v === "number" ? fmt2.format(v) : String(v)).replace(/"/g, '""');
+  return rows.map((r) => r.map((c) => `"${esc4(c)}"`).join(sep)).join("\r\n");
 };
 
 // src/utils/telemetryUtils.ts
@@ -33611,27 +33625,23 @@ var AllReportModal = class {
   // Premium tooltip content for the exclusion-flag info icon. Uses the library
   // InfoTooltip CSS classes (myio-info-tooltip__*) — injected by InfoTooltip itself.
   buildExclusionTooltipContent() {
+    const p = "margin:0 0 8px;font-size:11px;line-height:1.5;color:#475569;";
+    const pLast = "margin:0;font-size:11px;line-height:1.5;color:#475569;";
     return `
       <div class="myio-info-tooltip__section" style="max-width:280px;">
-        <div class="myio-info-tooltip__row" style="align-items:flex-start;padding:3px 0;">
-          <span class="myio-info-tooltip__label" style="font-size:11px;line-height:1.5;white-space:normal;">
-            Alguns dispositivos t\xEAm o atributo <strong>exclude_groups_totals</strong> e s\xE3o
-            propositalmente removidos dos totais do dashboard (ex.: medidor de locat\xE1rio que
-            n\xE3o \xE9 consumo operacional do shopping).
-          </span>
-        </div>
-        <div class="myio-info-tooltip__row" style="align-items:flex-start;padding:3px 0;">
-          <span class="myio-info-tooltip__label" style="font-size:11px;line-height:1.5;white-space:normal;">
-            <strong>Ligado</strong> (padr\xE3o): esses dispositivos s\xE3o omitidos do relat\xF3rio \u2014
-            o total bate com os cards do dashboard.
-          </span>
-        </div>
-        <div class="myio-info-tooltip__row" style="align-items:flex-start;padding:3px 0;">
-          <span class="myio-info-tooltip__label" style="font-size:11px;line-height:1.5;white-space:normal;">
-            <strong>Desligado</strong>: todos os dispositivos do grupo entram \u2014 mostra o
-            consumo bruto, inclusive os exclu\xEDdos.
-          </span>
-        </div>
+        <p style="${p}">
+          Alguns dispositivos t\xEAm o atributo <strong>exclude_groups_totals</strong> e s\xE3o
+          propositalmente removidos dos totais do dashboard (ex.: medidor de locat\xE1rio que
+          n\xE3o \xE9 consumo operacional do shopping).
+        </p>
+        <p style="${p}">
+          <strong>Ligado</strong> (padr\xE3o): esses dispositivos s\xE3o omitidos do relat\xF3rio \u2014
+          o total bate com os cards do dashboard.
+        </p>
+        <p style="${pLast}">
+          <strong>Desligado</strong>: todos os dispositivos do grupo entram \u2014 mostra o
+          consumo bruto, inclusive os exclu\xEDdos.
+        </p>
       </div>
       <div class="myio-info-tooltip__notice">
         <span class="myio-info-tooltip__notice-icon">\u{1F4A1}</span>
@@ -71030,6 +71040,7 @@ var EnergySummaryTooltip = {
     const timestamp = formatTimestamp3(summary.lastUpdated);
     const excludedNotice = this.renderExcludedNotice(summary.excludedFromCAG, summary.unit);
     const titleSuffix = summary.customerName ? ` (${summary.customerName})` : "";
+    const isMultiShopping = (summary.byShoppingTotal?.length || 0) >= 2;
     return `
       <div class="energy-summary-tooltip__content">
         <div class="energy-summary-tooltip__header" data-drag-handle>
@@ -71063,10 +71074,10 @@ var EnergySummaryTooltip = {
           </div>
           <div class="energy-summary-tooltip__section-header">
             <span class="energy-summary-tooltip__section-title">Distribui\xE7\xE3o</span>
-            <div class="energy-summary-tooltip__grouping-tabs">
+            ${isMultiShopping ? `<div class="energy-summary-tooltip__grouping-tabs">
               <button class="energy-summary-tooltip__grouping-tab active" data-view="category">Por Categoria</button>
               <button class="energy-summary-tooltip__grouping-tab" data-view="shopping">Por ${summary.entityLabel || "Shopping"}</button>
-            </div>
+            </div>` : ""}
           </div>
 
           <!-- Category View (default) -->
@@ -71081,8 +71092,8 @@ var EnergySummaryTooltip = {
             </div>
           </div>
 
-          <!-- Shopping View -->
-          <div class="energy-summary-tooltip__shopping-view" data-grouping="shopping">
+          <!-- Shopping View (head-office only) -->
+          ${isMultiShopping ? `<div class="energy-summary-tooltip__shopping-view" data-grouping="shopping">
             <div class="energy-summary-tooltip__category-tree">
               <div class="energy-summary-tooltip__category-header">
                 <span>${summary.entityLabel || "Shopping"}</span>
@@ -71091,7 +71102,7 @@ var EnergySummaryTooltip = {
               </div>
               ${this.renderShoppingView(summary.byShoppingTotal, summary.unit)}
             </div>
-          </div>
+          </div>` : ""}
 
           <div class="energy-summary-tooltip__section-title">Status dos Dispositivos</div>
           <div class="energy-summary-tooltip__status-matrix">
@@ -72944,6 +72955,7 @@ var WaterSummaryTooltip = {
     const statusMatrix = this.renderStatusMatrix(summary.byStatus);
     const timestamp = formatTimestamp4(summary.lastUpdated);
     const titleSuffix = summary.customerName ? ` (${summary.customerName})` : "";
+    const isMultiShopping = (summary.byShoppingTotal?.length || 0) >= 2;
     return `
       <div class="water-summary-tooltip__content">
         <div class="water-summary-tooltip__header" data-drag-handle>
@@ -72978,10 +72990,10 @@ var WaterSummaryTooltip = {
 
           <div class="water-summary-tooltip__section-header">
             <span class="water-summary-tooltip__section-title">Distribui\xE7\xE3o</span>
-            <div class="water-summary-tooltip__grouping-tabs">
+            ${isMultiShopping ? `<div class="water-summary-tooltip__grouping-tabs">
               <button class="water-summary-tooltip__grouping-tab active" data-view="category">Por Categoria</button>
               <button class="water-summary-tooltip__grouping-tab" data-view="shopping">Por ${summary.entityLabel || "Shopping"}</button>
-            </div>
+            </div>` : ""}
           </div>
 
           <!-- Category View (default) -->
@@ -72996,8 +73008,8 @@ var WaterSummaryTooltip = {
             </div>
           </div>
 
-          <!-- Shopping View -->
-          <div class="water-summary-tooltip__shopping-view" data-grouping="shopping">
+          <!-- Shopping View (head-office only) -->
+          ${isMultiShopping ? `<div class="water-summary-tooltip__shopping-view" data-grouping="shopping">
             <div class="water-summary-tooltip__category-tree">
               <div class="water-summary-tooltip__category-header">
                 <span>${summary.entityLabel || "Shopping"}</span>
@@ -73006,7 +73018,7 @@ var WaterSummaryTooltip = {
               </div>
               ${this.renderShoppingView(summary.byShoppingTotal, summary.unit)}
             </div>
-          </div>
+          </div>` : ""}
 
           <div class="water-summary-tooltip__section-title">Status dos Medidores</div>
           <div class="water-summary-tooltip__status-matrix">
@@ -73846,6 +73858,284 @@ var WaterSummaryTooltip = {
   }
 };
 
+// src/utils/ColumnSummaryTooltip.ts
+var PIE_COLORS = [
+  "#3e1a7d",
+  "#9333ea",
+  "#0891b2",
+  "#16a34a",
+  "#f59e0b",
+  "#db2777",
+  "#0284c7",
+  "#b45309",
+  "#15803d",
+  "#7c3aed",
+  "#dc2626",
+  "#0d9488",
+  "#ca8a04",
+  "#be185d"
+];
+var COLUMN_SUMMARY_CSS = `
+.myio-col-summary {
+  max-width: 300px;
+  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
+}
+.myio-col-summary__kpis {
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 8px 10px; margin-bottom: 10px;
+  background: #faf8ff; border: 1px solid #e3d9f3; border-radius: 8px;
+}
+.myio-col-summary__kpi {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
+}
+.myio-col-summary__kpi-label {
+  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
+  text-transform: uppercase; color: #64748b;
+}
+.myio-col-summary__kpi-value {
+  font-size: 12px; font-weight: 700; color: #1e293b; text-align: right;
+}
+.myio-col-summary__kpi-value--accent {
+  font-size: 14px; color: #3e1a7d;
+}
+.myio-col-summary__body { display: block; }
+.myio-col-summary__lists { display: flex; flex-direction: column; }
+.myio-col-summary__group {
+  display: flex; flex-direction: column; gap: 1px; margin-top: 8px;
+}
+.myio-col-summary__group-label {
+  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
+  text-transform: uppercase; color: #64748b; margin-bottom: 3px;
+}
+.myio-col-summary__row {
+  display: flex; align-items: center; gap: 8px; padding: 2px 0;
+  font-size: 11px; color: #1e293b;
+}
+.myio-col-summary__name {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.myio-col-summary__val {
+  flex: 0 0 auto; font-weight: 700; color: #16a34a; text-align: right;
+}
+.myio-col-summary__pct {
+  flex: 0 0 auto; min-width: 44px; text-align: right;
+  font-size: 10px; font-weight: 600; color: #64748b;
+}
+.myio-col-summary__empty {
+  padding: 14px 0; text-align: center; font-style: italic;
+  font-size: 11px; color: #94a3b8;
+}
+
+/* Pie chart \u2014 hidden in the compact view, revealed when maximized. */
+.myio-col-summary__chart { display: none; }
+.myio-col-summary__chart-title {
+  font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
+  text-transform: uppercase; color: #3e1a7d; margin-bottom: 8px;
+}
+.myio-col-summary__chart-body {
+  display: flex; gap: 16px; align-items: flex-start;
+}
+.myio-col-summary__pie {
+  width: 190px; height: 190px; border-radius: 50%; flex-shrink: 0;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
+}
+.myio-col-summary__legend {
+  flex: 1 1 auto; min-width: 0; max-height: 300px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 1px;
+}
+.myio-col-summary__legend-row {
+  display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px;
+}
+.myio-col-summary__legend-dot {
+  width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0;
+}
+.myio-col-summary__legend-name {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b;
+}
+.myio-col-summary__legend-val { flex: 0 0 auto; font-weight: 700; color: #16a34a; }
+.myio-col-summary__legend-pct {
+  flex: 0 0 auto; min-width: 42px; text-align: right; font-size: 10px; color: #64748b;
+}
+
+/* Maximized \u2014 use the extra space: widen, show the pie chart, lists side-by-side. */
+.myio-info-tooltip.maximized .myio-col-summary { max-width: none; }
+.myio-info-tooltip.maximized .myio-col-summary__chart {
+  display: block; margin-bottom: 16px;
+  padding-bottom: 14px; border-bottom: 1px solid #e3d9f3;
+}
+.myio-info-tooltip.maximized .myio-col-summary__lists {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__group { margin-top: 0; }
+`;
+var _cssInjected2 = false;
+function injectCSS10() {
+  if (_cssInjected2 || typeof document === "undefined") return;
+  const STYLE_ID4 = "myio-column-summary-tooltip-css";
+  if (document.getElementById(STYLE_ID4)) {
+    _cssInjected2 = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID4;
+  style.textContent = COLUMN_SUMMARY_CSS;
+  document.head.appendChild(style);
+  _cssInjected2 = true;
+}
+function esc3(value) {
+  return String(value == null ? "" : value).replace(
+    /[&<>"]/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]
+  );
+}
+function defaultFormatter(unit) {
+  const nf = new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 2 });
+  return (v) => nf.format(Number(v) || 0) + (unit ? " " + unit : "");
+}
+function fmtPct(value, total, decimals) {
+  const p = total > 0 ? (Number(value) || 0) / total * 100 : 0;
+  return p.toFixed(decimals).replace(".", ",") + "%";
+}
+function buildPieChart(devices, total, fmt2, pctDecimals) {
+  const sorted = devices.slice().sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0));
+  if (total <= 0 || !sorted.length) {
+    return `<div class="myio-col-summary__chart">
+      <div class="myio-col-summary__empty">Sem dados para o gr\xE1fico.</div>
+    </div>`;
+  }
+  let acc = 0;
+  const stops = [];
+  const legend = [];
+  sorted.forEach((d, i) => {
+    const v = Number(d.value) || 0;
+    const color = PIE_COLORS[i % PIE_COLORS.length];
+    const start = acc / total * 360;
+    acc += v;
+    const end = acc / total * 360;
+    stops.push(`${color} ${start.toFixed(3)}deg ${end.toFixed(3)}deg`);
+    legend.push(`<div class="myio-col-summary__legend-row">
+      <span class="myio-col-summary__legend-dot" style="background:${color};"></span>
+      <span class="myio-col-summary__legend-name" title="${esc3(d.name)}">${esc3(d.name)}</span>
+      <span class="myio-col-summary__legend-val">${esc3(fmt2(v))}</span>
+      <span class="myio-col-summary__legend-pct">${fmtPct(v, total, pctDecimals)}</span>
+    </div>`);
+  });
+  return `<div class="myio-col-summary__chart">
+    <div class="myio-col-summary__chart-title">Distribui\xE7\xE3o \u2014 ${sorted.length} dispositivos</div>
+    <div class="myio-col-summary__chart-body">
+      <div class="myio-col-summary__pie" style="background: conic-gradient(${stops.join(", ")});"></div>
+      <div class="myio-col-summary__legend">${legend.join("")}</div>
+    </div>
+  </div>`;
+}
+function buildContent(data) {
+  const devices = Array.isArray(data.devices) ? data.devices.slice() : [];
+  const fmt2 = data.formatValue || defaultFormatter(data.unit || "");
+  const pd = resolvePercentDecimals(data.percentDecimals);
+  const count = devices.length;
+  const total = devices.reduce((s, d) => s + (Number(d.value) || 0), 0);
+  const avg = count ? total / count : 0;
+  const periodRow = data.periodLabel ? `<div class="myio-col-summary__kpi">
+         <span class="myio-col-summary__kpi-label">Per\xEDodo</span>
+         <span class="myio-col-summary__kpi-value">${esc3(data.periodLabel)}</span>
+       </div>` : "";
+  if (!count) {
+    return `<div class="myio-col-summary">
+      <div class="myio-col-summary__kpis">
+        ${periodRow}
+        <div class="myio-col-summary__kpi">
+          <span class="myio-col-summary__kpi-label">Dispositivos</span>
+          <span class="myio-col-summary__kpi-value">0</span>
+        </div>
+      </div>
+      <div class="myio-col-summary__empty">Nenhum dispositivo.</div>
+    </div>`;
+  }
+  const desc = devices.slice().sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0));
+  const top3 = desc.slice(0, 3);
+  const bottom3 = desc.slice(-3).reverse();
+  const near3 = devices.slice().sort(
+    (a, b) => Math.abs((Number(a.value) || 0) - avg) - Math.abs((Number(b.value) || 0) - avg)
+  ).slice(0, 3);
+  const row = (d) => `
+    <div class="myio-col-summary__row">
+      <span class="myio-col-summary__name" title="${esc3(d.name)}">${esc3(d.name)}</span>
+      <span class="myio-col-summary__val">${esc3(fmt2(Number(d.value) || 0))}</span>
+      <span class="myio-col-summary__pct">${fmtPct(Number(d.value) || 0, total, pd)}</span>
+    </div>`;
+  const group = (label, list) => list.length ? `<div class="myio-col-summary__group">
+           <span class="myio-col-summary__group-label">${label}</span>
+           ${list.map(row).join("")}
+         </div>` : "";
+  return `<div class="myio-col-summary">
+    <div class="myio-col-summary__kpis">
+      ${periodRow}
+      <div class="myio-col-summary__kpi">
+        <span class="myio-col-summary__kpi-label">Dispositivos</span>
+        <span class="myio-col-summary__kpi-value">${count}</span>
+      </div>
+      <div class="myio-col-summary__kpi">
+        <span class="myio-col-summary__kpi-label">Consumo m\xE9dio</span>
+        <span class="myio-col-summary__kpi-value myio-col-summary__kpi-value--accent">${esc3(
+    fmt2(avg)
+  )}</span>
+      </div>
+      <div class="myio-col-summary__kpi">
+        <span class="myio-col-summary__kpi-label">Consumo total</span>
+        <span class="myio-col-summary__kpi-value">${esc3(fmt2(total))}</span>
+      </div>
+    </div>
+    <div class="myio-col-summary__body">
+      ${buildPieChart(devices, total, fmt2, pd)}
+      <div class="myio-col-summary__lists">
+        ${group("\u25B2 3 maiores", top3)}
+        ${group("\u25BC 3 menores", bottom3)}
+        ${group("\u25CF 3 na m\xE9dia", near3)}
+      </div>
+    </div>
+  </div>`;
+}
+var ColumnSummaryTooltip = {
+  /** Shows the column summary tooltip anchored to the trigger element. */
+  show(triggerElement, data) {
+    injectCSS10();
+    InfoTooltip.show(triggerElement, {
+      icon: "\u{1F4CA}",
+      title: data.title ? `Resumo \u2014 ${data.title}` : "Resumo da Coluna",
+      content: buildContent(data)
+    });
+  },
+  /** Hides the tooltip immediately. */
+  hide() {
+    InfoTooltip.hide();
+  },
+  /** Starts the delayed hide (use on mouseleave). */
+  startDelayedHide() {
+    InfoTooltip.startDelayedHide();
+  },
+  /**
+   * Attaches hover behavior to a trigger element. `getData` is called on each
+   * hover so the summary always reflects the latest data. Returns a cleanup fn.
+   */
+  attach(triggerElement, getData) {
+    injectCSS10();
+    const handleEnter = () => {
+      ColumnSummaryTooltip.show(triggerElement, getData());
+    };
+    const handleLeave = () => {
+      InfoTooltip.startDelayedHide();
+    };
+    triggerElement.addEventListener("mouseenter", handleEnter);
+    triggerElement.addEventListener("mouseleave", handleLeave);
+    return () => {
+      triggerElement.removeEventListener("mouseenter", handleEnter);
+      triggerElement.removeEventListener("mouseleave", handleLeave);
+    };
+  }
+};
+
 // src/utils/TempSensorSummaryTooltip.ts
 var TEMP_SENSOR_TOOLTIP_CSS = `
 /* ============================================
@@ -74336,7 +74626,7 @@ var TEMP_SENSOR_TOOLTIP_CSS = `
 }
 `;
 var cssInjected9 = false;
-function injectCSS10() {
+function injectCSS11() {
   if (cssInjected9) return;
   if (typeof document === "undefined") return;
   const styleId = "myio-temp-sensor-tooltip-styles";
@@ -74723,7 +75013,7 @@ var TempSensorSummaryTooltip = {
    * Get or create container
    */
   getContainer() {
-    injectCSS10();
+    injectCSS11();
     let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
@@ -75317,7 +75607,7 @@ var CONTRACT_SUMMARY_TOOLTIP_CSS = `
 }
 `;
 var cssInjected10 = false;
-function injectCSS11() {
+function injectCSS12() {
   if (cssInjected10) return;
   if (typeof document === "undefined") return;
   const styleId = "myio-contract-summary-tooltip-styles";
@@ -75760,7 +76050,7 @@ var ContractSummaryTooltip = {
    * Get or create container
    */
   getContainer() {
-    injectCSS11();
+    injectCSS12();
     let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
@@ -76246,7 +76536,7 @@ var USERS_SUMMARY_TOOLTIP_CSS = `
 }
 `;
 var cssInjected11 = false;
-function injectCSS12() {
+function injectCSS13() {
   if (cssInjected11) return;
   if (typeof document === "undefined") return;
   const styleId = "myio-users-summary-tooltip-styles";
@@ -76277,7 +76567,7 @@ var UsersSummaryTooltip = {
    * Create or get the tooltip container
    */
   getContainer() {
-    injectCSS12();
+    injectCSS13();
     let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
@@ -76954,7 +77244,7 @@ var ALARMS_SUMMARY_TOOLTIP_CSS = `
 }
 `;
 var cssInjected12 = false;
-function injectCSS13() {
+function injectCSS14() {
   if (cssInjected12) return;
   if (typeof document === "undefined") return;
   const styleId = "myio-alarms-summary-tooltip-styles";
@@ -76985,7 +77275,7 @@ var AlarmsSummaryTooltip = {
    * Create or get the tooltip container
    */
   getContainer() {
-    injectCSS13();
+    injectCSS14();
     let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
@@ -77400,7 +77690,7 @@ var NOTIFICATIONS_SUMMARY_TOOLTIP_CSS = `
 }
 `;
 var cssInjected13 = false;
-function injectCSS14() {
+function injectCSS15() {
   if (cssInjected13) return;
   if (typeof document === "undefined") return;
   const styleId = "myio-notifications-summary-tooltip-styles";
@@ -77431,7 +77721,7 @@ var NotificationsSummaryTooltip = {
    * Create or get the tooltip container
    */
   getContainer() {
-    injectCSS14();
+    injectCSS15();
     let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
@@ -108601,12 +108891,13 @@ function buildRow(d, idx) {
     if (d.val === null || d.val === void 0) return "\u2014";
     return Number(d.val).toLocaleString("pt-BR", { maximumFractionDigits: 3, useGrouping: false });
   };
+  const pd = resolvePercentDecimals();
   return {
     idx: String(idx + 1),
     nome: d.labelOrName || d.name || "\u2014",
     identificador: d.deviceIdentifier || "\u2014",
     consumo: fmtVal(),
-    perc: d.perc !== void 0 ? `${d.perc.toFixed(1)}%` : "\u2014"
+    perc: d.perc !== void 0 ? `${d.perc.toFixed(pd).replace(".", ",")}%` : "\u2014"
   };
 }
 function fmtPeriod(period) {
@@ -119183,10 +119474,10 @@ var AlarmsNotificationsPanelView = class {
     const renderListPanel = (group, items, sel) => {
       if (items.length === 0) return '<div class="afm-empty">Nenhum item encontrado</div>';
       return items.map((item) => {
-        const esc3 = this.esc(item);
+        const esc4 = this.esc(item);
         return `<label class="afm-check-item">
-          <input type="checkbox" class="afm-checkbox" data-group="${group}" data-value="${esc3}"${sel.has(item) ? " checked" : ""}>
-          <span class="afm-check-label">${esc3}</span>
+          <input type="checkbox" class="afm-checkbox" data-group="${group}" data-value="${esc4}"${sel.has(item) ? " checked" : ""}>
+          <span class="afm-check-label">${esc4}</span>
         </label>`;
       }).join("");
     };
@@ -141469,6 +141760,7 @@ var version = package_default.version || "0.0.0";
   CONSUMPTION_CHART_DEFAULTS,
   CONSUMPTION_THEME_COLORS,
   CardGridPanel,
+  ColumnSummaryTooltip,
   ConnectionStatusType,
   ContractSummaryTooltip,
   CustomerCardV1,
@@ -142016,6 +142308,7 @@ var version = package_default.version || "0.0.0";
   renderStatusDonutChart,
   renderTrendChart,
   reopenFreshdeskTicket,
+  resolvePercentDecimals,
   schedCreateDateInput,
   schedCreateNumberInput,
   schedCreateSelect,