myio-js-library 0.1.551 → 0.1.552

package/dist/index.cjs

@@ -899,7 +899,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.551",
+  version: "0.1.552",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -5568,12 +5568,14 @@ var ModalHeader = {
       showClose = true,
       primaryColor = "#3e1a7d",
       borderRadius = "10px 10px 0 0",
-      draggable = true
+      draggable = true,
+      solid = false
     } = options;
     const isDark = theme === "dark";
-    const bgColor = isDark ? primaryColor : "linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%)";
-    const textColor = isDark ? "white" : "#475569";
-    const btnColor = isDark ? "rgba(255,255,255,0.8)" : "rgba(71,85,105,0.8)";
+    const solidStyle = isDark || solid;
+    const bgColor = solidStyle ? primaryColor : "linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%)";
+    const textColor = solidStyle ? "white" : "#475569";
+    const btnColor = solidStyle ? "rgba(255,255,255,0.8)" : "rgba(71,85,105,0.8)";
     const headerStyle = `
       padding: 8px 12px;
       display: flex;
@@ -35659,11 +35661,26 @@ var DeviceReportModal = class {
     );
     const zeroCount = this.data.filter((r) => r.consumption <= 0).length;
     const rowLabel = isHourly ? "Hora" : "Dia";
+    let perDay;
+    if (isTemperature) {
+      const byDay = /* @__PURE__ */ new Map();
+      for (const r of rows) {
+        const k = r.date.slice(0, 10);
+        const acc = byDay.get(k) || { sum: 0, n: 0 };
+        acc.sum += r.consumption;
+        acc.n += 1;
+        byDay.set(k, acc);
+      }
+      const dayAvgs = [...byDay.values()].map((d) => d.sum / d.n);
+      perDay = dayAvgs.length ? dayAvgs.reduce((x, y) => x + y, 0) / dayAvgs.length : 0;
+    } else {
+      perDay = total / dayCount;
+    }
     const kpis = [
       { value: `${fmt2(summaryValue)} ${unit}`, label: `${this.domainConfig.summaryLabel} (${unit})` },
-      { value: fmt2(total / dayCount), label: `M\xE9dia por Dia (${unit})` }
+      { value: fmt2(perDay), label: `M\xE9dia por Dia (${unit})` }
     ];
-    if (isHourly) {
+    if (isHourly && !isTemperature) {
       kpis.push({ value: fmt2(rows.length ? total / rows.length : 0), label: `M\xE9dia por Hora (${unit})` });
     }
     kpis.push(
@@ -79676,6 +79693,8 @@ function renderModal3(container, state6, modalId, error) {
     showMaximize: true,
     showClose: true,
     primaryColor: state6.accent,
+    solid: true,
+    // padrão dos relatórios: cor do dashboard também no tema light
     borderRadius: "10px 10px 0 0",
     draggable: false
   })}
@@ -80014,12 +80033,19 @@ function drawChart2(modalId, state6) {
   ctx.textAlign = "center";
   const numLabels = Math.min(8, chartData.length);
   const labelInterval = Math.max(1, Math.floor(chartData.length / numLabels));
+  const xSpan = chartData.length > 1 ? chartData[chartData.length - 1].x - chartData[0].x : 0;
+  const multiDay = state6.granularity === "hour" && xSpan > 24 * 60 * 60 * 1e3;
   for (let i = 0; i < chartData.length; i += labelInterval) {
     const point = chartData[i];
     const date = new Date(point.x);
     let label;
+    let subLabel = "";
     if (state6.granularity === "hour") {
       label = date.toLocaleTimeString(state6.locale, { hour: "2-digit", minute: "2-digit" });
+      if (multiDay) {
+        subLabel = label;
+        label = date.toLocaleDateString(state6.locale, { day: "2-digit", month: "2-digit" });
+      }
     } else {
       label = date.toLocaleDateString(state6.locale, { day: "2-digit", month: "2-digit" });
     }
@@ -80031,6 +80057,7 @@ function drawChart2(modalId, state6) {
     ctx.stroke();
     ctx.fillStyle = colors2.textMuted;
     ctx.fillText(label, point.screenX, height - paddingBottom + 18);
+    if (subLabel) ctx.fillText(subLabel, point.screenX, height - paddingBottom + 31);
   }
   ctx.strokeStyle = colors2.border;
   ctx.lineWidth = 1;
@@ -80321,6 +80348,21 @@ function mountChrome(container, state6, modalId) {
 }
 
 // src/components/temperature/TemperatureComparisonModal.ts
+var _cmpFooters = /* @__PURE__ */ new Map();
+function resolveAccent2(palette) {
+  const fallback = "#3e1a7d";
+  const src = palette ?? (typeof window !== "undefined" ? window.MyIOUtils?.theme : void 0);
+  if (!src) return fallback;
+  const vars = typeof src.cssVars === "function" ? src.cssVars() : src;
+  const accent = src.accent || vars?.["--myio-brand-700"];
+  return typeof accent === "string" && accent ? accent : fallback;
+}
+function resolveCustomerName2(explicit) {
+  if (explicit) return explicit;
+  if (typeof window === "undefined") return "";
+  const w = window;
+  return w.MyIOOrchestrator?.customerName || w.MyIOUtils?.customerName || "";
+}
 async function openTemperatureComparisonModal(params) {
   const modalId = `myio-temp-comparison-modal-${Date.now()}`;
   const defaultDateRange = getTodaySoFar();
@@ -80342,7 +80384,9 @@ async function openTemperatureComparisonModal(params) {
     // All periods selected by default
     temperatureMin: params.temperatureMin ?? null,
     temperatureMax: params.temperatureMax ?? null,
-    dataFetcher: params.dataFetcher ?? null
+    dataFetcher: params.dataFetcher ?? null,
+    customerName: resolveCustomerName2(params.customerName),
+    accent: resolveAccent2(params.palette)
   };
   const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
   const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
@@ -80358,6 +80402,8 @@ async function openTemperatureComparisonModal(params) {
   await setupEventListeners4(modalContainer, state6, modalId, params.onClose);
   return {
     destroy: () => {
+      _cmpFooters.get(modalId)?.destroy();
+      _cmpFooters.delete(modalId);
       modalContainer.remove();
       params.onClose?.();
     },
@@ -80384,7 +80430,9 @@ async function fetchAllDevicesData(state6) {
         try {
           const raw = state6.dataFetcher ? await state6.dataFetcher(device, state6.startTs, state6.endTs) : await fetchTemperatureData(state6.token, deviceId, state6.startTs, state6.endTs);
           const offset = Number(device.temperatureOffset) || 0;
-          const data = offset ? raw.map((p) => ({ ...p, value: Number(p.value) + offset })) : raw;
+          const data = raw.map((p) => ({ ...p, value: Number(p.value) + offset })).filter(
+            (p) => Number.isFinite(p.value) && p.value >= state6.clampRange.min && p.value <= state6.clampRange.max
+          );
           const stats = calculateStats(data, state6.clampRange);
           return {
             device,
@@ -80481,7 +80529,7 @@ function renderModal4(container, state6, modalId) {
         <!-- Header - MyIO Premium Style -->
         <div style="
           padding: 4px 8px; display: flex; align-items: center; justify-content: space-between;
-          background: #3e1a7d; color: white; border-radius: ${isMaximized ? "0" : "10px 10px 0 0"};
+          background: ${state6.accent}; color: white; border-radius: ${isMaximized ? "0" : "10px 10px 0 0"};
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
@@ -80563,7 +80611,7 @@ function renderModal4(container, state6, modalId) {
                     name="${modalId}-period"
                     value="${period.id}"
                     ${state6.selectedPeriods.includes(period.id) ? "checked" : ""}
-                    style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
+                    style="width: 16px; height: 16px; cursor: pointer; accent-color: ${state6.accent};">
                   ${period.label}
                 </label>
               `).join("")}
@@ -80596,7 +80644,7 @@ function renderModal4(container, state6, modalId) {
           </div>
           <!-- Query Button -->
           <button id="${modalId}-query" style="
-            background: #3e1a7d; color: white; border: none;
+            background: ${state6.accent}; color: white; border: none;
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
@@ -80640,33 +80688,15 @@ function renderModal4(container, state6, modalId) {
           ${statsHTML}
         </div>
 
-        <!-- Actions -->
-        <div style="display: flex; justify-content: flex-end; gap: 12px;">
-          <button id="${modalId}-export" style="
-            background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
-            color: ${colors2.text}; border: 1px solid ${colors2.border};
-            padding: 8px 16px; border-radius: 6px; cursor: pointer;
-            font-size: 14px; display: flex; align-items: center; gap: 8px;
-            font-family: 'Nunito', system-ui, sans-serif;
-          " ${state6.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
-            \u{1F4E5} Exportar CSV
-          </button>
-          <button id="${modalId}-close-btn" style="
-            background: #3e1a7d; color: white; border: none;
-            padding: 8px 16px; border-radius: 6px; cursor: pointer;
-            font-size: 14px; font-weight: 500;
-            font-family: 'Nunito', system-ui, sans-serif;
-          ">
-            Fechar
-          </button>
-        </div>
         </div><!-- End Body -->
+        <!-- Footer premium (customer \xB7 rel\xF3gio \xB7 vers\xE3o | Powered by MYIO | CSV) \u2014 padr\xE3o dos relat\xF3rios -->
+        <div id="${modalId}-footer-slot"></div>
       </div>
     </div>
     <style>
       @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
       #${modalId} select:focus, #${modalId} input:focus {
-        outline: 2px solid #3e1a7d;
+        outline: 2px solid ${state6.accent};
         outline-offset: 2px;
       }
       #${modalId} button:hover:not(:disabled) {
@@ -80682,6 +80712,7 @@ function renderModal4(container, state6, modalId) {
       }
     </style>
   `;
+  mountCmpFooter(container, state6, modalId);
 }
 function drawComparisonChart2(modalId, state6) {
   const chartContainer = document.getElementById(`${modalId}-chart`);
@@ -80888,12 +80919,19 @@ function drawComparisonChart2(modalId, state6) {
   const xAxisPoints = processedData[0]?.points || [];
   const numLabels = Math.min(8, xAxisPoints.length);
   const labelInterval = Math.max(1, Math.floor(xAxisPoints.length / numLabels));
+  const xSpan = xAxisPoints.length > 1 ? xAxisPoints[xAxisPoints.length - 1].x - xAxisPoints[0].x : 0;
+  const multiDay = state6.granularity === "hour" && xSpan > 24 * 60 * 60 * 1e3;
   for (let i = 0; i < xAxisPoints.length; i += labelInterval) {
     const point = xAxisPoints[i];
     const date = new Date(point.x);
     let label;
+    let subLabel = "";
     if (state6.granularity === "hour") {
       label = date.toLocaleTimeString(state6.locale, { hour: "2-digit", minute: "2-digit" });
+      if (multiDay) {
+        subLabel = label;
+        label = date.toLocaleDateString(state6.locale, { day: "2-digit", month: "2-digit" });
+      }
     } else {
       label = date.toLocaleDateString(state6.locale, { day: "2-digit", month: "2-digit" });
     }
@@ -80905,6 +80943,7 @@ function drawComparisonChart2(modalId, state6) {
     ctx.stroke();
     ctx.fillStyle = colors2.textMuted;
     ctx.fillText(label, point.screenX, height - paddingBottom + 18);
+    if (subLabel) ctx.fillText(subLabel, point.screenX, height - paddingBottom + 31);
   }
   ctx.strokeStyle = colors2.border;
   ctx.lineWidth = 1;
@@ -81014,6 +81053,8 @@ function setupComparisonChartTooltip2(canvas, container, chartData, state6, colo
 }
 async function setupEventListeners4(container, state6, modalId, onClose) {
   const closeModal2 = () => {
+    _cmpFooters.get(modalId)?.destroy();
+    _cmpFooters.delete(modalId);
     container.remove();
     onClose?.();
   };
@@ -81135,10 +81176,30 @@ async function setupEventListeners4(container, state6, modalId, onClose) {
     drawComparisonChart2(modalId, state6);
     await setupEventListeners4(container, state6, modalId, onClose);
   });
-  document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-    if (state6.deviceData.every((dd) => dd.data.length === 0)) return;
-    exportComparisonCSV2(state6);
+}
+function mountCmpFooter(container, state6, modalId) {
+  _cmpFooters.get(modalId)?.destroy();
+  _cmpFooters.delete(modalId);
+  const slot = container.querySelector(`#${modalId}-footer-slot`);
+  if (!slot) return;
+  const lib = typeof window !== "undefined" ? window.MyIOLibrary : void 0;
+  const footer = createModalFooter({
+    customerName: state6.customerName,
+    libVersion: lib?.version ? { current: lib.version } : false,
+    themeMode: state6.theme === "dark" ? "dark" : "light",
+    exports: {
+      csv: {
+        onClick: () => {
+          if (state6.deviceData.every((dd) => dd.data.length === 0)) return;
+          exportComparisonCSV2(state6);
+        },
+        disabled: state6.deviceData.every((dd) => dd.data.length === 0),
+        tooltipText: "Exporta em CSV as leituras de cada sensor (offset aplicado)"
+      }
+    }
   });
+  slot.appendChild(footer.element);
+  _cmpFooters.set(modalId, footer);
 }
 function exportComparisonCSV2(state6) {
   const startDateStr = new Date(state6.startTs).toLocaleDateString(state6.locale).replace(/\//g, "-");
@@ -93944,7 +94005,7 @@ function fmtPct3(pct) {
   if (pct == null || !isFinite(pct)) return "";
   return `${pct.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%`;
 }
-function resolveAccent2(explicit, doc) {
+function resolveAccent3(explicit, doc) {
   if (explicit) return explicit;
   try {
     const v = getComputedStyle(doc.documentElement).getPropertyValue("--myio-brand-700").trim();
@@ -93990,7 +94051,7 @@ function createGoalsBarTooltip(opts) {
   injectStyles12(doc);
   const el2 = doc.createElement("div");
   el2.className = "myio-gbt";
-  el2.style.setProperty("--myio-gbt-accent", resolveAccent2(opts?.accentColor, doc));
+  el2.style.setProperty("--myio-gbt-accent", resolveAccent3(opts?.accentColor, doc));
   doc.body.appendChild(el2);
   let pinned = false;
   let hideTimer = null;
@@ -94048,7 +94109,7 @@ function createGoalsBarTooltip(opts) {
     });
   }
   function render3(data) {
-    const accent = resolveAccent2(data.accentColor ?? opts?.accentColor, doc);
+    const accent = resolveAccent3(data.accentColor ?? opts?.accentColor, doc);
     el2.style.setProperty("--myio-gbt-accent", accent);
     const rowsHtml = data.rows && data.rows.length > 0 ? data.rows.map((r) => renderRow(r, 0)).join("") : `<div class="myio-gbt__empty">Sem dados para este per\xEDodo</div>`;
     el2.innerHTML = `
@@ -132804,19 +132865,19 @@ var TelemetryGridShoppingView = class {
     this.maximizeBtnEl?.addEventListener("click", this.toggleMaximize.bind(this));
     const label = this.params.labelWidget || CONTEXT_CONFIG2[this.params.context]?.headerLabel || "Dispositivos";
     const unit = DOMAIN_CONFIG8[this.params.domain]?.unit || "";
-    const resolveCustomerName2 = () => {
+    const resolveCustomerName3 = () => {
       const devs = this.controller.getFilteredDevices();
       const name = devs.find((d) => d.customerName)?.customerName;
       return name ? String(name).trim() : null;
     };
     this.root.querySelector("#btnExportPdf")?.addEventListener("click", () => {
-      exportGridPdf(this.controller.getFilteredDevices(), label, unit, null, resolveCustomerName2());
+      exportGridPdf(this.controller.getFilteredDevices(), label, unit, null, resolveCustomerName3());
     });
     this.root.querySelector("#btnExportXls")?.addEventListener("click", () => {
-      exportGridXls(this.controller.getFilteredDevices(), label, unit, null, resolveCustomerName2());
+      exportGridXls(this.controller.getFilteredDevices(), label, unit, null, resolveCustomerName3());
     });
     this.root.querySelector("#btnExportCsv")?.addEventListener("click", () => {
-      exportGridCsv(this.controller.getFilteredDevices(), label, unit, null, resolveCustomerName2());
+      exportGridCsv(this.controller.getFilteredDevices(), label, unit, null, resolveCustomerName3());
     });
     this.bindFilterModalEvents();
   }

package/dist/index.d.cts

@@ -9180,6 +9180,12 @@ interface TemperatureComparisonModalParams {
     temperatureMax?: number;
     /** Custom data source per device (default: ThingsBoard timeseries via token) */
     dataFetcher?: TemperatureComparisonDataFetcher;
+    /** Customer/shopping — footer premium (padrão AllReport/DeviceReport) */
+    customerName?: string;
+    /** Paleta do dashboard (createMyIOTheme ou mapa de CSS vars) — cor do header/botões */
+    palette?: {
+        cssVars(): Record<string, string>;
+    } | Record<string, string>;
 }
 interface TemperatureComparisonModalInstance {
     /** Destroys the modal */
@@ -11118,6 +11124,11 @@ interface ModalHeaderOptions {
     showClose?: boolean;
     /** Custom primary color (default: #3e1a7d - MyIO Purple) */
     primaryColor?: string;
+    /**
+     * generateInlineHTML: header SEMPRE na cor primária com texto branco, mesmo no tema
+     * light (padrão dos relatórios premium). O botão de tema segue refletindo `theme`.
+     */
+    solid?: boolean;
     /** Border radius when not maximized */
     borderRadius?: string;
     /** Show export button */

package/dist/index.d.ts

@@ -9180,6 +9180,12 @@ interface TemperatureComparisonModalParams {
     temperatureMax?: number;
     /** Custom data source per device (default: ThingsBoard timeseries via token) */
     dataFetcher?: TemperatureComparisonDataFetcher;
+    /** Customer/shopping — footer premium (padrão AllReport/DeviceReport) */
+    customerName?: string;
+    /** Paleta do dashboard (createMyIOTheme ou mapa de CSS vars) — cor do header/botões */
+    palette?: {
+        cssVars(): Record<string, string>;
+    } | Record<string, string>;
 }
 interface TemperatureComparisonModalInstance {
     /** Destroys the modal */
@@ -11118,6 +11124,11 @@ interface ModalHeaderOptions {
     showClose?: boolean;
     /** Custom primary color (default: #3e1a7d - MyIO Purple) */
     primaryColor?: string;
+    /**
+     * generateInlineHTML: header SEMPRE na cor primária com texto branco, mesmo no tema
+     * light (padrão dos relatórios premium). O botão de tema segue refletindo `theme`.
+     */
+    solid?: boolean;
     /** Border radius when not maximized */
     borderRadius?: string;
     /** Show export button */