myio-js-library 0.1.504 → 0.1.505

package/dist/index.cjs

@@ -1164,7 +1164,7 @@ module.exports = __toCommonJS(index_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.504",
+  version: "0.1.505",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -14674,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;
@@ -14904,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;
@@ -15196,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";
@@ -16035,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;
@@ -69988,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;
@@ -71819,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 = {
@@ -72042,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;
@@ -73877,7 +73897,7 @@ var PIE_COLORS = [
 ];
 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 {
@@ -73895,14 +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__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 { 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;
@@ -73915,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;
@@ -73933,19 +73947,37 @@ var COLUMN_SUMMARY_CSS = `
   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__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: 190px; height: 190px; border-radius: 50%; flex-shrink: 0;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
+  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: 300px; overflow-y: auto;
+  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: 2px 0; font-size: 11px;
+  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;
@@ -73959,12 +73991,14 @@ var COLUMN_SUMMARY_CSS = `
   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. */
+/* 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;
 }
@@ -73998,79 +74032,90 @@ 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>`;
+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 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 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, 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">
+  const kpis = `<div class="myio-col-summary__kpis">
       ${periodRow}
       <div class="myio-col-summary__kpi">
         <span class="myio-col-summary__kpi-label">Dispositivos</span>
@@ -74086,26 +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>
+    </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">
-      ${buildPieChart(devices, total, fmt2, pd)}
+      <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>
-  </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() {
@@ -102659,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);
     });
@@ -102671,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);
     });

package/dist/index.d.cts

@@ -7795,20 +7795,10 @@ declare const InfoTooltip: {
  * Compact view: search period, device count, average/total consumption and
  * the top 3 / bottom 3 / 3-closest-to-average devices.
  *
- * Maximized view (InfoTooltip maximize button): the extra space is used for a
- * pie chart of ALL devices with a scrollable legend, plus the three lists laid
- * out side by side. The maximized layout is driven purely by CSS reacting to
- * the `.myio-info-tooltip.maximized` class — no InfoTooltip API change needed.
- *
- * @example
- * const cleanup = ColumnSummaryTooltip.attach(iconEl, () => ({
- *   title: 'Lojas',
- *   periodLabel: '01/05/2026 — 21/05/2026',
- *   unit: 'kWh',
- *   devices: items.map((i) => ({ name: i.label, value: i.value })),
- *   formatValue: (v) => MyIO.formatEnergy(v),
- * }));
- * // later: cleanup();
+ * Maximized view (InfoTooltip maximize button): an interactive SVG pie of all
+ * devices with a legend. Hovering a slice highlights its legend row (and vice
+ * versa); clicking a legend row toggles that device out of the pie/totals
+ * (local to the tooltip — does NOT propagate to the dashboard).
  */
 interface ColumnSummaryDevice {
     name: string;