myio-js-library 0.1.503 → 0.1.505

package/dist/index.cjs

@@ -1131,6 +1131,7 @@ __export(index_exports, {
   renderStatusDonutChart: () => renderStatusDonutChart,
   renderTrendChart: () => renderTrendChart,
   reopenFreshdeskTicket: () => reopenTicket,
+  resolvePercentDecimals: () => resolvePercentDecimals,
   schedCreateDateInput: () => createDateInput,
   schedCreateNumberInput: () => createNumberInput,
   schedCreateSelect: () => createSelect,
@@ -1163,7 +1164,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.503",
+  version: "0.1.505",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -14499,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 = {
@@ -14633,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,
@@ -14660,8 +14674,10 @@ function renderCardComponentV5({
     temperature,
     temperatureMin,
     temperatureMax,
-    temperatureStatus
+    temperatureStatus,
     // 'ok' | 'above' | 'below' | undefined
+    // Per-device exclude_groups_totals attribute (SERVER_SCOPE) — drives the orange marker
+    excludeGroupsTotals
   } = entityObject;
   const MyIOToast2 = (function() {
     let toastContainer = null;
@@ -14890,6 +14906,20 @@ function renderCardComponentV5({
         height: 100%;
       }
 
+      /* Subtle orange marker \u2014 device flagged in exclude_groups_totals */
+      .myio-enhanced-card-container-v5.myio-card-excluded::after {
+        content: '';
+        position: absolute;
+        left: 12px;
+        right: 12px;
+        bottom: 3px;
+        height: 3px;
+        border-radius: 2px;
+        background: linear-gradient(90deg, rgba(245, 158, 11, 0), #f59e0b 50%, rgba(245, 158, 11, 0));
+        pointer-events: none;
+        z-index: 5;
+      }
+
       .myio-enhanced-card-container-v5 .myio-draggable-card {
         width: 100%;
         border-radius: 10px;
@@ -15092,6 +15122,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;
@@ -15170,9 +15201,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>
@@ -15183,6 +15212,12 @@ function renderCardComponentV5({
     `;
   container.innerHTML = cardHTML;
   const enhancedCardElement = container.querySelector(".device-card-centered");
+  try {
+    const _excl = typeof excludeGroupsTotals === "string" ? JSON.parse(excludeGroupsTotals) : excludeGroupsTotals;
+    const _isExcluded = !!(_excl && _excl.enabled === true && (_excl.groups && Object.values(_excl.groups).some((v) => v === true) || Array.isArray(_excl.excludedGroups) && _excl.excludedGroups.length > 0));
+    if (_isExcluded) container.classList.add("myio-card-excluded");
+  } catch (e) {
+  }
   if (!document.getElementById("myio-enhanced-card-layout-styles-v5")) {
     const layoutStyle = document.createElement("style");
     layoutStyle.id = "myio-enhanced-card-layout-styles-v5";
@@ -16022,8 +16057,8 @@ var INFO_TOOLTIP_CSS = `
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
-  min-width: 320px;
-  max-width: 400px;
+  width: 395px;
+  max-width: 90vw;
   font-size: 12px;
   color: #1e293b;
   overflow: hidden;
@@ -69975,8 +70010,7 @@ var ENERGY_SUMMARY_TOOLTIP_CSS = `
   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: 380px;
-  width: max-content;
+  width: 395px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -71027,6 +71061,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>
@@ -71060,10 +71095,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) -->
@@ -71078,8 +71113,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>
@@ -71088,7 +71123,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">
@@ -71805,7 +71840,7 @@ var EnergySummaryTooltip = {
     };
     summary.byCategory = [entrada, lojas, areaComum];
     summary.totalDevices = entrada.deviceCount + lojas.deviceCount + areaComumDeviceCount;
-    summary.totalConsumption = state6.grandTotal || entrada.consumption;
+    summary.totalConsumption = entrada.consumption || state6.grandTotal || 0;
     const widgetAggregation = receivedData?.deviceStatusAggregation;
     if (widgetAggregation && widgetAggregation.hasData) {
       summary.byStatus = {
@@ -72028,8 +72063,7 @@ var WATER_SUMMARY_TOOLTIP_CSS = `
   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: 380px;
-  width: max-content;
+  width: 395px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -72941,6 +72975,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>
@@ -72975,10 +73010,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) -->
@@ -72993,8 +73028,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>
@@ -73003,7 +73038,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">
@@ -73844,9 +73879,25 @@ 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;
+  max-width: 320px;
   font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
 }
 .myio-col-summary__kpis {
@@ -73864,12 +73915,10 @@ var COLUMN_SUMMARY_CSS = `
 .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__group {
-  display: flex; flex-direction: column; gap: 1px; margin-top: 8px;
-}
+.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;
@@ -73882,9 +73931,7 @@ var COLUMN_SUMMARY_CSS = `
   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__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;
@@ -73893,6 +73940,69 @@ var COLUMN_SUMMARY_CSS = `
   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-hint {
+  font-size: 10px; font-weight: 500; color: #94a3b8; margin: 0 0 8px;
+}
+.myio-col-summary__chart-body { display: flex; gap: 16px; align-items: flex-start; }
+.myio-col-summary__pie {
+  width: 200px; height: 200px; flex-shrink: 0;
+  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
+}
+.myio-col-summary__slice {
+  stroke: #ffffff; stroke-width: 1.5;
+  transition: opacity 0.12s ease;
+  cursor: pointer;
+}
+.myio-col-summary__slice.is-hl {
+  stroke: #1e293b; stroke-width: 3;
+}
+.myio-col-summary__slice:hover { opacity: 0.85; }
+.myio-col-summary__legend {
+  flex: 1 1 auto; min-width: 0; max-height: 320px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 1px;
+}
+.myio-col-summary__legend-row {
+  display: flex; align-items: center; gap: 6px; padding: 3px 5px; font-size: 11px;
+  border-radius: 4px; cursor: pointer;
+  transition: background 0.12s ease;
+}
+.myio-col-summary__legend-row:hover,
+.myio-col-summary__legend-row.is-hl { background: #f1ecfa; }
+.myio-col-summary__legend-row.is-excluded { opacity: 0.45; }
+.myio-col-summary__legend-row.is-excluded .myio-col-summary__legend-name {
+  text-decoration: line-through;
+}
+.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, big pie, 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__pie { width: 380px; height: 380px; }
+.myio-info-tooltip.maximized .myio-col-summary__legend { max-height: 380px; }
+.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() {
@@ -73918,50 +74028,94 @@ 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) {
+function fmtPct(value, total, decimals) {
   const p = total > 0 ? (Number(value) || 0) / total * 100 : 0;
-  return p.toFixed(1).replace(".", ",") + "%";
-}
-function buildContent(data) {
-  const devices = Array.isArray(data.devices) ? data.devices.slice() : [];
-  const fmt2 = data.formatValue || defaultFormatter(data.unit || "");
-  const count = devices.length;
-  const total = devices.reduce((s, d) => s + (Number(d.value) || 0), 0);
+  return p.toFixed(decimals).replace(".", ",") + "%";
+}
+function sliceColor(originalIndex) {
+  return PIE_COLORS[originalIndex % PIE_COLORS.length];
+}
+function polar(cx, cy, r, deg) {
+  const rad = (deg - 90) * Math.PI / 180;
+  return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
+}
+function arcPath(cx, cy, r, a0, a1) {
+  const [x0, y0] = polar(cx, cy, r, a0);
+  const [x1, y1] = polar(cx, cy, r, a1);
+  const large = a1 - a0 > 180 ? 1 : 0;
+  return `M${cx},${cy} L${x0.toFixed(2)},${y0.toFixed(2)} A${r},${r} 0 ${large} 1 ${x1.toFixed(
+    2
+  )},${y1.toFixed(2)} Z`;
+}
+var _state = null;
+var _rootEl = null;
+function visibleDevices() {
+  if (!_state) return [];
+  return _state.data.devices.map((d, idx) => ({ d, idx })).filter((x) => !_state.excluded.has(x.idx));
+}
+function buildPieSvg(visible, total) {
+  if (!_state) return "";
+  const positives = visible.filter((v) => (Number(v.d.value) || 0) > 0);
+  if (!positives.length || total <= 0) {
+    return `<svg class="myio-col-summary__pie" viewBox="0 0 220 220" role="img" aria-label="Sem dados">
+      <circle cx="110" cy="110" r="100" fill="#f1f5f9"></circle>
+      <text x="110" y="115" text-anchor="middle" font-size="12" fill="#94a3b8">sem dados</text>
+    </svg>`;
+  }
+  const { fmt: fmt2, pd } = _state;
+  if (positives.length === 1) {
+    const v = positives[0];
+    const val = Number(v.d.value) || 0;
+    return `<svg class="myio-col-summary__pie" viewBox="0 0 220 220">
+      <circle class="myio-col-summary__slice" data-idx="${v.idx}" cx="110" cy="110" r="100"
+        fill="${sliceColor(v.idx)}"><title>${esc3(v.d.name)} \u2014 ${esc3(fmt2(val))} (${fmtPct(
+      val,
+      total,
+      pd
+    )})</title></circle>
+    </svg>`;
+  }
+  let acc = 0;
+  const paths = positives.map((v) => {
+    const val = Number(v.d.value) || 0;
+    const a0 = acc / total * 360;
+    acc += val;
+    const a1 = acc / total * 360;
+    return `<path class="myio-col-summary__slice" data-idx="${v.idx}"
+        d="${arcPath(110, 110, 100, a0, a1)}" fill="${sliceColor(v.idx)}"
+        ><title>${esc3(v.d.name)} \u2014 ${esc3(fmt2(val))} (${fmtPct(val, total, pd)})</title></path>`;
+  }).join("");
+  return `<svg class="myio-col-summary__pie" viewBox="0 0 220 220">${paths}</svg>`;
+}
+function buildLegend(total) {
+  if (!_state) return "";
+  const { data, excluded, fmt: fmt2, pd } = _state;
+  const rows = data.devices.map((d, idx) => {
+    const val = Number(d.value) || 0;
+    const isExcl = excluded.has(idx);
+    const pct = isExcl ? "\u2014" : fmtPct(val, total, pd);
+    return `<div class="myio-col-summary__legend-row${isExcl ? " is-excluded" : ""}" data-idx="${idx}"
+          title="Clique para ${isExcl ? "incluir" : "remover"} da pizza">
+        <span class="myio-col-summary__legend-dot" style="background:${sliceColor(idx)};"></span>
+        <span class="myio-col-summary__legend-name">${esc3(d.name)}</span>
+        <span class="myio-col-summary__legend-val">${esc3(fmt2(val))}</span>
+        <span class="myio-col-summary__legend-pct">${pct}</span>
+      </div>`;
+  }).join("");
+  return `<div class="myio-col-summary__legend">${rows}</div>`;
+}
+function buildInner() {
+  if (!_state) return "";
+  const { data, fmt: fmt2, pd } = _state;
+  const visible = visibleDevices();
+  const count = visible.length;
+  const total = visible.reduce((s, v) => s + (Number(v.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)}</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">
+  const kpis = `<div class="myio-col-summary__kpis">
       ${periodRow}
       <div class="myio-col-summary__kpi">
         <span class="myio-col-summary__kpi-label">Dispositivos</span>
@@ -73977,21 +74131,98 @@ function buildContent(data) {
         <span class="myio-col-summary__kpi-label">Consumo total</span>
         <span class="myio-col-summary__kpi-value">${esc3(fmt2(total))}</span>
       </div>
-    </div>
-    ${group("\u25B2 3 maiores", top3)}
-    ${group("\u25BC 3 menores", bottom3)}
-    ${group("\u25CF 3 na m\xE9dia", near3)}
-  </div>`;
+    </div>`;
+  if (!data.devices.length) {
+    return `${kpis}<div class="myio-col-summary__empty">Nenhum dispositivo.</div>`;
+  }
+  const desc = visible.slice().sort((a, b) => (Number(b.d.value) || 0) - (Number(a.d.value) || 0));
+  const top3 = desc.slice(0, 3);
+  const bottom3 = desc.slice(-3).reverse();
+  const near3 = visible.slice().sort(
+    (a, b) => Math.abs((Number(a.d.value) || 0) - avg) - Math.abs((Number(b.d.value) || 0) - avg)
+  ).slice(0, 3);
+  const row = (v) => `
+    <div class="myio-col-summary__row">
+      <span class="myio-col-summary__name" title="${esc3(v.d.name)}">${esc3(v.d.name)}</span>
+      <span class="myio-col-summary__val">${esc3(fmt2(Number(v.d.value) || 0))}</span>
+      <span class="myio-col-summary__pct">${fmtPct(Number(v.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 `${kpis}
+    <div class="myio-col-summary__body">
+      <div class="myio-col-summary__chart">
+        <div class="myio-col-summary__chart-title">Distribui\xE7\xE3o \u2014 ${count} dispositivos</div>
+        <p class="myio-col-summary__chart-hint">Passe o mouse para destacar \xB7 clique na lista para remover da pizza</p>
+        <div class="myio-col-summary__chart-body">
+          ${buildPieSvg(visible, total)}
+          ${buildLegend(total)}
+        </div>
+      </div>
+      <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>`;
+}
+function setHighlight(idx) {
+  if (!_rootEl) return;
+  _rootEl.querySelectorAll(".is-hl").forEach((el2) => el2.classList.remove("is-hl"));
+  if (idx == null) return;
+  _rootEl.querySelectorAll(`[data-idx="${idx}"]`).forEach((el2) => el2.classList.add("is-hl"));
+}
+function rerender() {
+  if (!_rootEl) return;
+  _rootEl.innerHTML = buildInner();
+}
+function wireRoot(root) {
+  root.addEventListener("mouseover", (e) => {
+    const el2 = e.target?.closest?.("[data-idx]");
+    setHighlight(el2 ? el2.getAttribute("data-idx") : null);
+  });
+  root.addEventListener("mouseout", (e) => {
+    const el2 = e.target?.closest?.("[data-idx]");
+    if (el2) setHighlight(null);
+  });
+  root.addEventListener("click", (e) => {
+    const legendRow = e.target?.closest?.(
+      ".myio-col-summary__legend-row"
+    );
+    if (!legendRow || !_state) return;
+    const idx = Number(legendRow.getAttribute("data-idx"));
+    if (!Number.isInteger(idx)) return;
+    if (_state.excluded.has(idx)) _state.excluded.delete(idx);
+    else _state.excluded.add(idx);
+    rerender();
+  });
 }
 var ColumnSummaryTooltip = {
   /** Shows the column summary tooltip anchored to the trigger element. */
   show(triggerElement, data) {
     injectCSS10();
+    _state = {
+      data: data && Array.isArray(data.devices) ? data : { ...data, devices: [] },
+      excluded: /* @__PURE__ */ new Set(),
+      fmt: data.formatValue || defaultFormatter(data.unit || ""),
+      pd: resolvePercentDecimals(data.percentDecimals)
+    };
     InfoTooltip.show(triggerElement, {
       icon: "\u{1F4CA}",
       title: data.title ? `Resumo \u2014 ${data.title}` : "Resumo da Coluna",
-      content: buildContent(data)
+      content: `<div class="myio-col-summary">${buildInner()}</div>`
     });
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => {
+        const roots = document.querySelectorAll(
+          ".myio-info-tooltip .myio-col-summary"
+        );
+        _rootEl = roots.length ? roots[roots.length - 1] : null;
+        if (_rootEl) wireRoot(_rootEl);
+      });
+    }
   },
   /** Hides the tooltip immediately. */
   hide() {
@@ -102545,11 +102776,11 @@ var FilterModalComponent = class {
   }
   selectAllDevices() {
     const devices = this.options.devices || [];
-    const visibleDevices = devices.filter((d) => {
+    const visibleDevices2 = devices.filter((d) => {
       const el2 = this.overlay.querySelector(`[data-device-id="${d.id}"]`);
       return el2 && !el2.classList.contains("myio-fm__device-item--hidden");
     });
-    visibleDevices.forEach((device) => {
+    visibleDevices2.forEach((device) => {
       this.selectedDeviceIds.add(device.id);
       this.updateDeviceUI(device.id);
     });
@@ -102557,11 +102788,11 @@ var FilterModalComponent = class {
   }
   selectNoDevices() {
     const devices = this.options.devices || [];
-    const visibleDevices = devices.filter((d) => {
+    const visibleDevices2 = devices.filter((d) => {
       const el2 = this.overlay.querySelector(`[data-device-id="${d.id}"]`);
       return el2 && !el2.classList.contains("myio-fm__device-item--hidden");
     });
-    visibleDevices.forEach((device) => {
+    visibleDevices2.forEach((device) => {
       this.selectedDeviceIds.delete(device.id);
       this.updateDeviceUI(device.id);
     });
@@ -108777,12 +109008,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) {
@@ -142193,6 +142425,7 @@ var version = package_default.version || "0.0.0";
   renderStatusDonutChart,
   renderTrendChart,
   reopenFreshdeskTicket,
+  resolvePercentDecimals,
   schedCreateDateInput,
   schedCreateNumberInput,
   schedCreateSelect,