myio-js-library 0.1.164 → 0.1.165

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

@@ -20345,7 +20345,7 @@ ${rangeText}`;
     const contentMaxHeight = isMaximized ? "100vh" : "95vh";
     const contentBorderRadius = isMaximized ? "0" : "10px";
     container.innerHTML = `
-    <div class="myio-temp-modal-overlay" style="
+    <div class="myio-temp-modal-overlay myio-modal-scope" style="
       position: fixed; top: 0; left: 0; width: 100%; height: 100%;
       background: rgba(0, 0, 0, 0.5); z-index: 9998;
       display: flex; justify-content: center; align-items: center;
@@ -20600,6 +20600,22 @@ ${rangeText}`;
         background: rgba(255, 255, 255, 0.1) !important;
         color: white !important;
       }
+
+      /* DateRangePicker styles */
+      ${CSS_TOKENS}
+      ${DATERANGEPICKER_STYLES}
+
+      /* Fix DateRangePicker buttons alignment */
+      .myio-modal-scope .daterangepicker .drp-buttons {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 8px;
+      }
+      .myio-modal-scope .daterangepicker .drp-buttons .btn {
+        display: inline-block;
+        margin-left: 0;
+      }
     </style>
   `;
   }
@@ -23714,18 +23730,11 @@ ${rangeText}`;
 
     .myio-chart-widget-title {
       margin: 0;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 600;
       color: ${colors.text};
     }
 
-    .myio-chart-widget-controls {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
-
     .myio-chart-widget-tabs {
       display: flex;
       gap: 2px;
@@ -23745,6 +23754,20 @@ ${rangeText}`;
       border-radius: 6px;
       transition: all 0.2s;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .myio-chart-widget-tab.icon-only {
+      padding: 6px 10px;
+    }
+
+    .myio-chart-widget-tab svg {
+      width: 16px;
+      height: 16px;
+      pointer-events: none;
     }
 
     .myio-chart-widget-tab:hover {
@@ -23878,7 +23901,7 @@ ${rangeText}`;
       background: ${colors.chartBackground};
       border-radius: 10px;
       width: 90%;
-      max-width: 600px;
+      max-width: 860px;
       max-height: 90vh;
       display: flex;
       flex-direction: column;
@@ -23895,7 +23918,7 @@ ${rangeText}`;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
-      gap: 20px;
+      gap: 12px;
     }
 
     .myio-settings-section {
@@ -23938,10 +23961,10 @@ ${rangeText}`;
 
     .myio-settings-input,
     .myio-settings-select {
-      padding: 10px 14px;
+      padding: 8px 12px;
       border: 1px solid ${colors.border};
       border-radius: 8px;
-      font-size: 14px;
+      font-size: 12px;
       background: ${colors.chartBackground};
       color: ${colors.text};
       width: 100%;
@@ -23973,6 +23996,10 @@ ${rangeText}`;
       border-radius: 6px;
       transition: all 0.2s;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
     }
 
     .myio-settings-tab:hover {
@@ -24030,13 +24057,17 @@ ${rangeText}`;
     }
 
     .myio-settings-context-group {
-      margin-bottom: 8px;
+      margin-bottom: 12px;
     }
 
     .myio-settings-context-group:last-child {
       margin-bottom: 0;
     }
 
+    .myio-settings-section + .myio-settings-section {
+      margin-top: 12px;
+    }
+
     /* Dropdown styles */
     .myio-settings-dropdown-container {
       position: relative;
@@ -24140,6 +24171,23 @@ ${rangeText}`;
       opacity: 1 !important;
       transform: scale(1.2);
     }
+
+    /* DateRangePicker styles (CSS tokens + premium styling) */
+    ${CSS_TOKENS}
+    ${DATERANGEPICKER_STYLES}
+
+    /* Fix DateRangePicker buttons alignment */
+    .myio-modal-scope .daterangepicker .drp-buttons {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .myio-modal-scope .daterangepicker .drp-buttons .btn {
+      display: inline-block;
+      margin-left: 0;
+    }
   `;
   }
   function createConsumptionChartWidget(config) {
@@ -24149,6 +24197,7 @@ ${rangeText}`;
     let styleElement = null;
     let settingsModalElement = null;
     let settingsHeaderInstance = null;
+    let dateRangePickerInstance = null;
     let currentTheme = config.theme ?? "light";
     let currentChartType = config.defaultChartType ?? "line";
     let currentVizMode = config.defaultVizMode ?? "total";
@@ -24159,6 +24208,8 @@ ${rangeText}`;
     let tempVizMode = currentVizMode;
     let tempTheme = currentTheme;
     let tempIdealRange = currentIdealRange;
+    let tempStartDate = null;
+    let tempEndDate = null;
     let currentSuggestion = null;
     const domainCfg = DOMAIN_CONFIG4[config.domain] || DOMAIN_CONFIG4.energy;
     const primaryColor = config.colors?.primary || domainCfg.color;
@@ -24174,6 +24225,10 @@ ${rangeText}`;
       return `${domainName} dos \xFAltimos ${currentPeriod} dias`;
     }
     function renderHTML() {
+      const consolidadoIcon = `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="3" y="3" width="10" height="10" rx="2"/></svg>`;
+      const porShoppingIcon = `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>`;
+      const lineChartIcon = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="2,12 5,7 9,9 14,3"/></svg>`;
+      const barChartIcon = `<svg viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="9" width="3" height="6" rx="0.5"/><rect x="6" y="5" width="3" height="10" rx="0.5"/><rect x="11" y="7" width="3" height="8" rx="0.5"/></svg>`;
       return `
       <div id="${widgetId}" class="myio-chart-widget ${currentTheme === "dark" ? "dark" : ""} ${config.className || ""}">
         <div class="myio-chart-widget-header">
@@ -24182,18 +24237,16 @@ ${rangeText}`;
               <button id="${widgetId}-settings-btn" class="myio-chart-widget-btn" title="Configura\xE7\xF5es">\u2699\uFE0F</button>
             ` : ""}
             <h4 id="${widgetId}-title" class="myio-chart-widget-title">${getTitle()}</h4>
-          </div>
-          <div class="myio-chart-widget-controls">
             ${showVizModeTabs ? `
               <div class="myio-chart-widget-tabs" id="${widgetId}-viz-tabs">
-                <button class="myio-chart-widget-tab ${currentVizMode === "total" ? "active" : ""}" data-viz="total">Consolidado</button>
-                <button class="myio-chart-widget-tab ${currentVizMode === "separate" ? "active" : ""}" data-viz="separate">Por Shopping</button>
+                <button class="myio-chart-widget-tab icon-only ${currentVizMode === "total" ? "active" : ""}" data-viz="total" title="Consolidado">${consolidadoIcon}</button>
+                <button class="myio-chart-widget-tab icon-only ${currentVizMode === "separate" ? "active" : ""}" data-viz="separate" title="Por Shopping">${porShoppingIcon}</button>
               </div>
             ` : ""}
             ${showChartTypeTabs ? `
               <div class="myio-chart-widget-tabs" id="${widgetId}-type-tabs">
-                <button class="myio-chart-widget-tab ${currentChartType === "line" ? "active" : ""}" data-type="line">Linhas</button>
-                <button class="myio-chart-widget-tab ${currentChartType === "bar" ? "active" : ""}" data-type="bar">Barras</button>
+                <button class="myio-chart-widget-tab icon-only ${currentChartType === "line" ? "active" : ""}" data-type="line" title="Gr\xE1fico de Linhas">${lineChartIcon}</button>
+                <button class="myio-chart-widget-tab icon-only ${currentChartType === "bar" ? "active" : ""}" data-type="bar" title="Gr\xE1fico de Barras">${barChartIcon}</button>
               </div>
             ` : ""}
             ${showMaximizeButton ? `
@@ -24230,19 +24283,22 @@ ${rangeText}`;
     function renderSettingsModal() {
       const unit = config.unit ?? "";
       const isTemperature = config.domain === "temperature";
+      const consolidadoIcon = `<svg viewBox="0 0 16 16" fill="currentColor" style="width:14px;height:14px;pointer-events:none"><rect x="3" y="3" width="10" height="10" rx="2"/></svg>`;
+      const porShoppingIcon = `<svg viewBox="0 0 16 16" fill="currentColor" style="width:14px;height:14px;pointer-events:none"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>`;
+      const lineChartIcon = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;pointer-events:none"><polyline points="2,12 5,7 9,9 14,3"/></svg>`;
+      const barChartIcon = `<svg viewBox="0 0 16 16" fill="currentColor" style="width:14px;height:14px;pointer-events:none"><rect x="1" y="9" width="3" height="6" rx="0.5"/><rect x="6" y="5" width="3" height="10" rx="0.5"/><rect x="11" y="7" width="3" height="8" rx="0.5"/></svg>`;
       settingsHeaderInstance = createModalHeader({
         id: `${widgetId}-settings`,
         title: "Configura\xE7\xF5es",
         icon: "\u2699\uFE0F",
         theme: tempTheme,
-        backgroundColor: primaryColor,
         showThemeToggle: false,
         showMaximize: false,
         showClose: true,
         onClose: () => closeSettingsModal()
       });
       return `
-      <div id="${widgetId}-settings-overlay" class="myio-settings-overlay hidden">
+      <div id="${widgetId}-settings-overlay" class="myio-settings-overlay myio-modal-scope hidden">
         <div class="myio-settings-card">
           ${settingsHeaderInstance.render()}
           <div class="myio-settings-body">
@@ -24253,13 +24309,8 @@ ${rangeText}`;
                 <div class="myio-settings-section-label">\u{1F4C5} Per\xEDodo</div>
                 <div class="myio-settings-row">
                   <div class="myio-settings-field" style="flex: 1;">
-                    <select id="${widgetId}-settings-period" class="myio-settings-select">
-                      <option value="7" ${tempPeriod === 7 ? "selected" : ""}>\xDAltimos 7 dias</option>
-                      <option value="14" ${tempPeriod === 14 ? "selected" : ""}>\xDAltimos 14 dias</option>
-                      <option value="30" ${tempPeriod === 30 ? "selected" : ""}>\xDAltimos 30 dias</option>
-                      <option value="60" ${tempPeriod === 60 ? "selected" : ""}>\xDAltimos 60 dias</option>
-                      <option value="90" ${tempPeriod === 90 ? "selected" : ""}>\xDAltimos 90 dias</option>
-                    </select>
+                    <input type="text" id="${widgetId}-settings-daterange" class="myio-settings-input"
+                      readonly placeholder="Selecione o per\xEDodo..." style="cursor: pointer;">
                   </div>
                 </div>
               </div>
@@ -24388,8 +24439,8 @@ ${rangeText}`;
                   <div class="myio-settings-field" style="flex: 1; min-width: 180px;">
                     <label class="myio-settings-field-label">Tipo de Gr\xE1fico</label>
                     <div class="myio-settings-tabs" id="${widgetId}-settings-chart-type">
-                      <button class="myio-settings-tab ${tempChartType === "line" ? "active" : ""}" data-type="line">\u{1F4C8} Linhas</button>
-                      <button class="myio-settings-tab ${tempChartType === "bar" ? "active" : ""}" data-type="bar">\u{1F4CA} Barras</button>
+                      <button class="myio-settings-tab ${tempChartType === "line" ? "active" : ""}" data-type="line">${lineChartIcon} Linhas</button>
+                      <button class="myio-settings-tab ${tempChartType === "bar" ? "active" : ""}" data-type="bar">${barChartIcon} Barras</button>
                     </div>
                   </div>
 
@@ -24397,8 +24448,8 @@ ${rangeText}`;
                   <div class="myio-settings-field" style="flex: 1; min-width: 200px;">
                     <label class="myio-settings-field-label">Agrupamento</label>
                     <div class="myio-settings-tabs" id="${widgetId}-settings-viz-mode">
-                      <button class="myio-settings-tab ${tempVizMode === "total" ? "active" : ""}" data-viz="total">\u{1F517} Consolidado</button>
-                      <button class="myio-settings-tab ${tempVizMode === "separate" ? "active" : ""}" data-viz="separate">\u{1F3EC} Por Shopping</button>
+                      <button class="myio-settings-tab ${tempVizMode === "total" ? "active" : ""}" data-viz="total">${consolidadoIcon} Consolidado</button>
+                      <button class="myio-settings-tab ${tempVizMode === "separate" ? "active" : ""}" data-viz="separate">${porShoppingIcon} Por Shopping</button>
                     </div>
                   </div>
 
@@ -24539,18 +24590,21 @@ ${rangeText}`;
         peakDateEl.textContent = peakDate;
       }
     }
-    function openSettingsModal() {
+    async function openSettingsModal() {
       tempPeriod = currentPeriod;
       tempChartType = currentChartType;
       tempVizMode = currentVizMode;
       tempTheme = currentTheme;
       tempIdealRange = currentIdealRange ? { ...currentIdealRange } : null;
+      dateRangePickerInstance = null;
       if (!settingsModalElement) {
         settingsModalElement = document.createElement("div");
         settingsModalElement.innerHTML = renderSettingsModal();
         document.body.appendChild(settingsModalElement.firstElementChild);
         settingsModalElement = document.getElementById(`${widgetId}-settings-overlay`);
-        setupSettingsModalListeners();
+        await setupSettingsModalListeners();
+      } else {
+        await setupSettingsModalListeners();
       }
       updateSettingsModalValues();
       updateIdealRangeSuggestionTooltip();
@@ -24558,6 +24612,10 @@ ${rangeText}`;
     }
     function closeSettingsModal() {
       settingsModalElement?.classList.add("hidden");
+      if (dateRangePickerInstance) {
+        dateRangePickerInstance.destroy();
+        dateRangePickerInstance = null;
+      }
     }
     function updateSettingsModalValues() {
       const periodSelect = document.getElementById(`${widgetId}-settings-period`);
@@ -24667,8 +24725,46 @@ ${rangeText}`;
         label: "Faixa Sugerida"
       };
     }
-    function setupSettingsModalListeners() {
+    async function setupSettingsModalListeners() {
       settingsHeaderInstance?.attachListeners();
+      const dateRangeInput = document.getElementById(`${widgetId}-settings-daterange`);
+      if (dateRangeInput && !dateRangePickerInstance) {
+        try {
+          const endDate = /* @__PURE__ */ new Date();
+          const startDate = /* @__PURE__ */ new Date();
+          startDate.setDate(endDate.getDate() - tempPeriod);
+          const presetStart = tempStartDate || startDate.toISOString();
+          const presetEnd = tempEndDate || endDate.toISOString();
+          dateRangePickerInstance = await createDateRangePicker2(dateRangeInput, {
+            presetStart,
+            presetEnd,
+            includeTime: true,
+            timePrecision: "hour",
+            maxRangeDays: 90,
+            locale: "pt-BR",
+            parentEl: document.getElementById(`${widgetId}-settings-overlay`),
+            onApply: (result) => {
+              tempStartDate = result.startISO;
+              tempEndDate = result.endISO;
+              const start = new Date(result.startISO);
+              const end = new Date(result.endISO);
+              const diffTime = Math.abs(end.getTime() - start.getTime());
+              const diffHours = diffTime / (1e3 * 60 * 60);
+              const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
+              tempPeriod = diffDays || 7;
+              const granularitySelect = document.getElementById(`${widgetId}-settings-granularity`);
+              if (granularitySelect && diffHours <= 48) {
+                granularitySelect.value = "1h";
+                const dayPeriodField = document.getElementById(`${widgetId}-settings-dayperiod-field`);
+                if (dayPeriodField) dayPeriodField.style.display = "block";
+              }
+              console.log("[ConsumptionChartWidget] Date range applied:", { start: result.startISO, end: result.endISO, hours: diffHours, days: tempPeriod });
+            }
+          });
+        } catch (error) {
+          console.warn("[ConsumptionChartWidget] DateRangePicker initialization failed:", error);
+        }
+      }
       document.getElementById(`${widgetId}-settings-overlay`)?.addEventListener("click", (e) => {
         if (e.target.classList.contains("myio-settings-overlay")) {
           closeSettingsModal();
@@ -24756,13 +24852,56 @@ ${rangeText}`;
           updateSettingsModalTabs();
         }
       });
-      document.getElementById(`${widgetId}-settings-reset`)?.addEventListener("click", () => {
+      document.getElementById(`${widgetId}-settings-reset`)?.addEventListener("click", async () => {
         tempPeriod = config.defaultPeriod ?? 7;
         tempChartType = config.defaultChartType ?? "line";
         tempVizMode = config.defaultVizMode ?? "total";
         tempTheme = config.theme ?? "light";
         tempIdealRange = config.idealRange ?? null;
-        const granularitySelect = document.getElementById(`${widgetId}-settings-granularity`);
+        tempStartDate = null;
+        tempEndDate = null;
+        if (dateRangePickerInstance) {
+          dateRangePickerInstance.destroy();
+          dateRangePickerInstance = null;
+        }
+        const dateRangeInput2 = document.getElementById(`${widgetId}-settings-daterange`);
+        if (dateRangeInput2) {
+          const endDate = /* @__PURE__ */ new Date();
+          const startDate = /* @__PURE__ */ new Date();
+          startDate.setDate(endDate.getDate() - tempPeriod);
+          try {
+            dateRangePickerInstance = await createDateRangePicker2(dateRangeInput2, {
+              presetStart: startDate.toISOString(),
+              presetEnd: endDate.toISOString(),
+              includeTime: true,
+              timePrecision: "hour",
+              maxRangeDays: 90,
+              locale: "pt-BR",
+              parentEl: document.getElementById(`${widgetId}-settings-overlay`),
+              onApply: (result) => {
+                tempStartDate = result.startISO;
+                tempEndDate = result.endISO;
+                const start = new Date(result.startISO);
+                const end = new Date(result.endISO);
+                const diffTime = Math.abs(end.getTime() - start.getTime());
+                const diffHours = diffTime / (1e3 * 60 * 60);
+                const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
+                tempPeriod = diffDays || 7;
+                const granularitySelect2 = document.getElementById(`${widgetId}-settings-granularity`);
+                if (granularitySelect2 && diffHours <= 48) {
+                  granularitySelect2.value = "1h";
+                  const dayPeriodField2 = document.getElementById(`${widgetId}-settings-dayperiod-field`);
+                  if (dayPeriodField2) dayPeriodField2.style.display = "block";
+                }
+              }
+            });
+          } catch (error) {
+            console.warn("[ConsumptionChartWidget] DateRangePicker reset failed:", error);
+          }
+        }
+        const granularitySelect = document.getElementById(
+          `${widgetId}-settings-granularity`
+        );
         if (granularitySelect) granularitySelect.value = "1d";
         const dayPeriodField = document.getElementById(`${widgetId}-settings-dayperiod-field`);
         if (dayPeriodField) dayPeriodField.style.display = "none";
@@ -24908,6 +25047,10 @@ ${rangeText}`;
         }
         settingsHeaderInstance?.destroy();
         settingsHeaderInstance = null;
+        if (dateRangePickerInstance) {
+          dateRangePickerInstance.destroy();
+          dateRangePickerInstance = null;
+        }
         if (settingsModalElement) {
           settingsModalElement.remove();
           settingsModalElement = null;