myio-js-library 0.1.506 → 0.1.508

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.506",
+  version: "0.1.508",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -16048,7 +16048,9 @@ var INFO_TOOLTIP_CSS = `
 }
 
 .myio-info-tooltip.maximized .myio-info-tooltip__content {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -16057,7 +16059,7 @@ 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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-size: 12px;
   color: #1e293b;
@@ -16503,6 +16505,10 @@ function toggleMaximize3(container) {
       left: container.style.left,
       top: container.style.top
     };
+    state3.isPinned = true;
+    container.classList.add("pinned");
+    const pinBtn = container.querySelector('[data-action="pin"]');
+    pinBtn?.classList.add("pinned");
   }
   container.classList.toggle("maximized", state3.isMaximized);
   const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -70285,7 +70291,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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -70387,7 +70393,9 @@ var ENERGY_SUMMARY_TOOLTIP_CSS = `
 }
 
 .energy-summary-tooltip.maximized .energy-summary-tooltip__body {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -71817,6 +71825,7 @@ var EnergySummaryTooltip = {
         left: container.style.left,
         top: container.style.top
       };
+      if (!this._isPinned) this.togglePin();
     }
     container.classList.toggle("maximized", this._isMaximized);
     const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -72338,7 +72347,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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -72440,7 +72449,9 @@ var WATER_SUMMARY_TOOLTIP_CSS = `
 }
 
 .water-summary-tooltip.maximized .water-summary-tooltip__body {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -73739,6 +73750,7 @@ var WaterSummaryTooltip = {
         left: container.style.left,
         top: container.style.top
       };
+      if (!this._isPinned) this.togglePin();
     }
     container.classList.toggle("maximized", this._isMaximized);
     const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -74229,6 +74241,8 @@ var COLUMN_SUMMARY_CSS = `
   display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
   filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
 }
+/* Footer band \u2014 hidden in compact, shown when maximized (mirrors Energy/Water). */
+.myio-col-summary__footer { display: none; }
 .myio-col-summary__slice {
   stroke: #ffffff; stroke-width: 1.5;
   transition: opacity 0.12s ease;
@@ -74276,14 +74290,16 @@ var COLUMN_SUMMARY_CSS = `
 .myio-info-tooltip.maximized .myio-col-summary__body {
   flex: 1 1 auto; min-height: 0;
   display: grid;
-  grid-template-columns: minmax(340px, 440px) 1fr;
+  grid-template-columns: minmax(520px, 620px) 1fr;
   grid-template-rows: auto 1fr;
   gap: 14px 22px;
 }
 .myio-info-tooltip.maximized .myio-col-summary__chart {
   display: block; grid-column: 1; grid-row: 1; min-width: 0;
 }
-.myio-info-tooltip.maximized .myio-col-summary__pie { max-width: 440px; margin: 0 auto; }
+.myio-info-tooltip.maximized .myio-col-summary__pie {
+  width: 500px; height: 500px; aspect-ratio: auto; margin: 0 auto;
+}
 .myio-info-tooltip.maximized .myio-col-summary__lists {
   grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto;
   display: flex; flex-direction: column; gap: 14px;
@@ -74295,6 +74311,22 @@ var COLUMN_SUMMARY_CSS = `
   border-left: 1px solid #e3d9f3; padding-left: 20px;
 }
 .myio-info-tooltip.maximized .myio-col-summary__group { margin-top: 0; }
+/* Footer band \u2014 same visual language as Energy/Water tooltips. */
+.myio-info-tooltip.maximized .myio-col-summary__footer {
+  display: flex; justify-content: space-between; align-items: center;
+  flex: 0 0 auto;
+  margin: 14px -16px -16px -16px;  /* bleed to the panel edges (cancels __content padding) */
+  padding: 12px 18px;
+  background: linear-gradient(135deg, #3e1a7d 0%, #6d28d9 100%);
+  color: #ffffff; border-radius: 0 0 11px 11px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__footer-label {
+  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.92);
+  letter-spacing: 0.3px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__footer-value {
+  font-size: 18px; font-weight: 700; color: #ffffff;
+}
 `;
 var _cssInjected2 = false;
 function injectCSS10() {
@@ -74382,7 +74414,7 @@ function buildPieSvg(visible, total) {
 function buildLegend(total) {
   if (!_state) return "";
   const { data, excluded, fmt: fmt2, pd } = _state;
-  const rows = data.devices.map((d, idx) => {
+  const rows = data.devices.map((d, idx) => ({ d, idx })).sort((a, b) => (Number(b.d.value) || 0) - (Number(a.d.value) || 0)).map(({ d, idx }) => {
     const val = Number(d.value) || 0;
     const isExcl = excluded.has(idx);
     const pct = isExcl ? "\u2014" : fmtPct(val, total, pd);
@@ -74456,6 +74488,10 @@ function buildInner() {
         ${group("\u25BC 3 menores", bottom3)}
         ${group("\u25CF 3 na m\xE9dia", near3)}
       </div>
+    </div>
+    <div class="myio-col-summary__footer">
+      <span class="myio-col-summary__footer-label">Consumo Total \xB7 ${count} dispositivos</span>
+      <span class="myio-col-summary__footer-value">${esc3(fmt2(total))}</span>
     </div>`;
 }
 function setHighlight(idx) {

package/dist/index.js

@@ -546,7 +546,7 @@ var init_template_card = __esm({
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.506",
+  version: "0.1.508",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -15430,7 +15430,9 @@ var INFO_TOOLTIP_CSS = `
 }
 
 .myio-info-tooltip.maximized .myio-info-tooltip__content {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -15439,7 +15441,7 @@ 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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-size: 12px;
   color: #1e293b;
@@ -15885,6 +15887,10 @@ function toggleMaximize3(container) {
       left: container.style.left,
       top: container.style.top
     };
+    state3.isPinned = true;
+    container.classList.add("pinned");
+    const pinBtn = container.querySelector('[data-action="pin"]');
+    pinBtn?.classList.add("pinned");
   }
   container.classList.toggle("maximized", state3.isMaximized);
   const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -69667,7 +69673,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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -69769,7 +69775,9 @@ var ENERGY_SUMMARY_TOOLTIP_CSS = `
 }
 
 .energy-summary-tooltip.maximized .energy-summary-tooltip__body {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -71199,6 +71207,7 @@ var EnergySummaryTooltip = {
         left: container.style.left,
         top: container.style.top
       };
+      if (!this._isPinned) this.togglePin();
     }
     container.classList.toggle("maximized", this._isMaximized);
     const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -71720,7 +71729,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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -71822,7 +71831,9 @@ var WATER_SUMMARY_TOOLTIP_CSS = `
 }
 
 .water-summary-tooltip.maximized .water-summary-tooltip__body {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -73121,6 +73132,7 @@ var WaterSummaryTooltip = {
         left: container.style.left,
         top: container.style.top
       };
+      if (!this._isPinned) this.togglePin();
     }
     container.classList.toggle("maximized", this._isMaximized);
     const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -73611,6 +73623,8 @@ var COLUMN_SUMMARY_CSS = `
   display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
   filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
 }
+/* Footer band \u2014 hidden in compact, shown when maximized (mirrors Energy/Water). */
+.myio-col-summary__footer { display: none; }
 .myio-col-summary__slice {
   stroke: #ffffff; stroke-width: 1.5;
   transition: opacity 0.12s ease;
@@ -73658,14 +73672,16 @@ var COLUMN_SUMMARY_CSS = `
 .myio-info-tooltip.maximized .myio-col-summary__body {
   flex: 1 1 auto; min-height: 0;
   display: grid;
-  grid-template-columns: minmax(340px, 440px) 1fr;
+  grid-template-columns: minmax(520px, 620px) 1fr;
   grid-template-rows: auto 1fr;
   gap: 14px 22px;
 }
 .myio-info-tooltip.maximized .myio-col-summary__chart {
   display: block; grid-column: 1; grid-row: 1; min-width: 0;
 }
-.myio-info-tooltip.maximized .myio-col-summary__pie { max-width: 440px; margin: 0 auto; }
+.myio-info-tooltip.maximized .myio-col-summary__pie {
+  width: 500px; height: 500px; aspect-ratio: auto; margin: 0 auto;
+}
 .myio-info-tooltip.maximized .myio-col-summary__lists {
   grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto;
   display: flex; flex-direction: column; gap: 14px;
@@ -73677,6 +73693,22 @@ var COLUMN_SUMMARY_CSS = `
   border-left: 1px solid #e3d9f3; padding-left: 20px;
 }
 .myio-info-tooltip.maximized .myio-col-summary__group { margin-top: 0; }
+/* Footer band \u2014 same visual language as Energy/Water tooltips. */
+.myio-info-tooltip.maximized .myio-col-summary__footer {
+  display: flex; justify-content: space-between; align-items: center;
+  flex: 0 0 auto;
+  margin: 14px -16px -16px -16px;  /* bleed to the panel edges (cancels __content padding) */
+  padding: 12px 18px;
+  background: linear-gradient(135deg, #3e1a7d 0%, #6d28d9 100%);
+  color: #ffffff; border-radius: 0 0 11px 11px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__footer-label {
+  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.92);
+  letter-spacing: 0.3px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__footer-value {
+  font-size: 18px; font-weight: 700; color: #ffffff;
+}
 `;
 var _cssInjected2 = false;
 function injectCSS10() {
@@ -73764,7 +73796,7 @@ function buildPieSvg(visible, total) {
 function buildLegend(total) {
   if (!_state) return "";
   const { data, excluded, fmt: fmt2, pd } = _state;
-  const rows = data.devices.map((d, idx) => {
+  const rows = data.devices.map((d, idx) => ({ d, idx })).sort((a, b) => (Number(b.d.value) || 0) - (Number(a.d.value) || 0)).map(({ d, idx }) => {
     const val = Number(d.value) || 0;
     const isExcl = excluded.has(idx);
     const pct = isExcl ? "\u2014" : fmtPct(val, total, pd);
@@ -73838,6 +73870,10 @@ function buildInner() {
         ${group("\u25BC 3 menores", bottom3)}
         ${group("\u25CF 3 na m\xE9dia", near3)}
       </div>
+    </div>
+    <div class="myio-col-summary__footer">
+      <span class="myio-col-summary__footer-label">Consumo Total \xB7 ${count} dispositivos</span>
+      <span class="myio-col-summary__footer-value">${esc3(fmt2(total))}</span>
     </div>`;
 }
 function setHighlight(idx) {

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

@@ -4070,7 +4070,7 @@
 
   // package.json
   var package_default = {
-    version: "0.1.506"};
+    version: "0.1.508"};
 
   // src/format/energy.ts
   function formatPower(value, decimals = 2) {
@@ -18865,7 +18865,9 @@
 }
 
 .myio-info-tooltip.maximized .myio-info-tooltip__content {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -18874,7 +18876,7 @@
   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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-size: 12px;
   color: #1e293b;
@@ -19320,6 +19322,10 @@
         left: container.style.left,
         top: container.style.top
       };
+      state3.isPinned = true;
+      container.classList.add("pinned");
+      const pinBtn = container.querySelector('[data-action="pin"]');
+      pinBtn?.classList.add("pinned");
     }
     container.classList.toggle("maximized", state3.isMaximized);
     const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -72897,7 +72903,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
   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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -72999,7 +73005,9 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
 }
 
 .energy-summary-tooltip.maximized .energy-summary-tooltip__body {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -74429,6 +74437,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
           left: container.style.left,
           top: container.style.top
         };
+        if (!this._isPinned) this.togglePin();
       }
       container.classList.toggle("maximized", this._isMaximized);
       const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -74950,7 +74959,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
   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);
-  width: 395px;
+  width: 450px;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
@@ -75052,7 +75061,9 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
 }
 
 .water-summary-tooltip.maximized .water-summary-tooltip__body {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
   overflow-y: auto;
 }
 
@@ -76351,6 +76362,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
           left: container.style.left,
           top: container.style.top
         };
+        if (!this._isPinned) this.togglePin();
       }
       container.classList.toggle("maximized", this._isMaximized);
       const maxBtn = container.querySelector('[data-action="maximize"]');
@@ -76841,6 +76853,8 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
   display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
   filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
 }
+/* Footer band \u2014 hidden in compact, shown when maximized (mirrors Energy/Water). */
+.myio-col-summary__footer { display: none; }
 .myio-col-summary__slice {
   stroke: #ffffff; stroke-width: 1.5;
   transition: opacity 0.12s ease;
@@ -76888,14 +76902,16 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
 .myio-info-tooltip.maximized .myio-col-summary__body {
   flex: 1 1 auto; min-height: 0;
   display: grid;
-  grid-template-columns: minmax(340px, 440px) 1fr;
+  grid-template-columns: minmax(520px, 620px) 1fr;
   grid-template-rows: auto 1fr;
   gap: 14px 22px;
 }
 .myio-info-tooltip.maximized .myio-col-summary__chart {
   display: block; grid-column: 1; grid-row: 1; min-width: 0;
 }
-.myio-info-tooltip.maximized .myio-col-summary__pie { max-width: 440px; margin: 0 auto; }
+.myio-info-tooltip.maximized .myio-col-summary__pie {
+  width: 500px; height: 500px; aspect-ratio: auto; margin: 0 auto;
+}
 .myio-info-tooltip.maximized .myio-col-summary__lists {
   grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto;
   display: flex; flex-direction: column; gap: 14px;
@@ -76907,6 +76923,22 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
   border-left: 1px solid #e3d9f3; padding-left: 20px;
 }
 .myio-info-tooltip.maximized .myio-col-summary__group { margin-top: 0; }
+/* Footer band \u2014 same visual language as Energy/Water tooltips. */
+.myio-info-tooltip.maximized .myio-col-summary__footer {
+  display: flex; justify-content: space-between; align-items: center;
+  flex: 0 0 auto;
+  margin: 14px -16px -16px -16px;  /* bleed to the panel edges (cancels __content padding) */
+  padding: 12px 18px;
+  background: linear-gradient(135deg, #3e1a7d 0%, #6d28d9 100%);
+  color: #ffffff; border-radius: 0 0 11px 11px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__footer-label {
+  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.92);
+  letter-spacing: 0.3px;
+}
+.myio-info-tooltip.maximized .myio-col-summary__footer-value {
+  font-size: 18px; font-weight: 700; color: #ffffff;
+}
 `;
   var _cssInjected2 = false;
   function injectCSS10() {
@@ -76994,7 +77026,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
   function buildLegend(total) {
     if (!_state) return "";
     const { data, excluded, fmt: fmt2, pd } = _state;
-    const rows = data.devices.map((d, idx) => {
+    const rows = data.devices.map((d, idx) => ({ d, idx })).sort((a, b) => (Number(b.d.value) || 0) - (Number(a.d.value) || 0)).map(({ d, idx }) => {
       const val = Number(d.value) || 0;
       const isExcl = excluded.has(idx);
       const pct = isExcl ? "\u2014" : fmtPct(val, total, pd);
@@ -77068,6 +77100,10 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
         ${group("\u25BC 3 menores", bottom3)}
         ${group("\u25CF 3 na m\xE9dia", near3)}
       </div>
+    </div>
+    <div class="myio-col-summary__footer">
+      <span class="myio-col-summary__footer-label">Consumo Total \xB7 ${count} dispositivos</span>
+      <span class="myio-col-summary__footer-value">${esc3(fmt2(total))}</span>
     </div>`;
   }
   function setHighlight(idx) {