myio-js-library 0.1.163 → 0.1.165

package/dist/index.js

@@ -20527,7 +20527,7 @@ function renderModal(container, state, modalId, error) {
   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;
@@ -20782,6 +20782,22 @@ function renderModal(container, state, modalId, error) {
         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>
   `;
 }
@@ -23896,18 +23912,11 @@ function getWidgetStyles(theme, primaryColor) {
 
     .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;
@@ -23927,6 +23936,20 @@ function getWidgetStyles(theme, primaryColor) {
       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 {
@@ -24060,7 +24083,7 @@ function getWidgetStyles(theme, primaryColor) {
       background: ${colors.chartBackground};
       border-radius: 10px;
       width: 90%;
-      max-width: 600px;
+      max-width: 860px;
       max-height: 90vh;
       display: flex;
       flex-direction: column;
@@ -24077,7 +24100,7 @@ function getWidgetStyles(theme, primaryColor) {
       overflow-y: auto;
       display: flex;
       flex-direction: column;
-      gap: 20px;
+      gap: 12px;
     }
 
     .myio-settings-section {
@@ -24120,10 +24143,10 @@ function getWidgetStyles(theme, primaryColor) {
 
     .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%;
@@ -24155,6 +24178,10 @@ function getWidgetStyles(theme, primaryColor) {
       border-radius: 6px;
       transition: all 0.2s;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
     }
 
     .myio-settings-tab:hover {
@@ -24212,13 +24239,17 @@ function getWidgetStyles(theme, primaryColor) {
     }
 
     .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;
@@ -24322,6 +24353,23 @@ function getWidgetStyles(theme, primaryColor) {
       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) {
@@ -24331,6 +24379,7 @@ function createConsumptionChartWidget(config) {
   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";
@@ -24342,6 +24391,8 @@ function createConsumptionChartWidget(config) {
   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;
@@ -24357,6 +24408,10 @@ function createConsumptionChartWidget(config) {
     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">
@@ -24365,18 +24420,16 @@ function createConsumptionChartWidget(config) {
               <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 ? `
@@ -24413,19 +24466,22 @@ function createConsumptionChartWidget(config) {
   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">
@@ -24436,13 +24492,8 @@ function createConsumptionChartWidget(config) {
                 <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>
@@ -24571,8 +24622,8 @@ function createConsumptionChartWidget(config) {
                   <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>
 
@@ -24580,8 +24631,8 @@ function createConsumptionChartWidget(config) {
                   <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>
 
@@ -24723,18 +24774,21 @@ function createConsumptionChartWidget(config) {
       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();
@@ -24742,6 +24796,10 @@ function createConsumptionChartWidget(config) {
   }
   function closeSettingsModal() {
     settingsModalElement?.classList.add("hidden");
+    if (dateRangePickerInstance) {
+      dateRangePickerInstance.destroy();
+      dateRangePickerInstance = null;
+    }
   }
   function updateSettingsModalValues() {
     const periodSelect = document.getElementById(`${widgetId}-settings-period`);
@@ -24851,8 +24909,46 @@ function createConsumptionChartWidget(config) {
       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();
@@ -24940,13 +25036,56 @@ function createConsumptionChartWidget(config) {
         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";
@@ -25073,6 +25212,10 @@ function createConsumptionChartWidget(config) {
     getChart() {
       return chartInstance;
     },
+    // Alias for backwards compatibility with createConsumption7DaysChart API
+    getChartInstance() {
+      return chartInstance?.getChartInstance?.() ?? null;
+    },
     getCachedData() {
       return chartInstance?.getCachedData() ?? null;
     },
@@ -25088,6 +25231,10 @@ function createConsumptionChartWidget(config) {
       }
       settingsHeaderInstance?.destroy();
       settingsHeaderInstance = null;
+      if (dateRangePickerInstance) {
+        dateRangePickerInstance.destroy();
+        dateRangePickerInstance = null;
+      }
       if (settingsModalElement) {
         settingsModalElement.remove();
         settingsModalElement = null;