myio-js-library 0.1.164 → 0.1.166

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>
   `;
   }
@@ -23395,11 +23411,16 @@ ${rangeText}`;
     let isMaximized = false;
     const domainCfg = DOMAIN_CONFIG3[config.domain] || { name: config.domain, icon: "\u{1F4CA}" };
     const title = config.title || `${domainCfg.name} - Hist\xF3rico de Consumo`;
-    function getThemeColors2() {
+    function getThemeColors3() {
       return THEME_COLORS[currentTheme];
     }
+    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>`;
+    const showSettingsButton = config.showSettingsButton ?? true;
     function renderModal4() {
-      const colors = getThemeColors2();
+      const colors = getThemeColors3();
       const exportFormats = config.exportFormats || ["csv"];
       headerInstance = createModalHeader({
         id: modalId,
@@ -23432,7 +23453,55 @@ ${rangeText}`;
           instance.close();
         }
       });
+      const btnBaseStyle = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border: none;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      white-space: nowrap;
+    `.replace(/\s+/g, " ").trim();
+      const tabBgColor = currentTheme === "dark" ? "#4b5563" : "#e5e7eb";
+      const activeColor = "#3e1a7d";
+      const inactiveTextColor = colors.text;
       return `
+      <style>
+        .myio-modal-tab-btn {
+          ${btnBaseStyle}
+        }
+        .myio-modal-tab-btn:hover {
+          opacity: 0.85;
+        }
+        .myio-modal-tab-btn.active {
+          background: ${activeColor} !important;
+          color: white !important;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        .myio-modal-tab-btn svg {
+          pointer-events: none;
+        }
+        .myio-modal-settings-btn {
+          background: transparent;
+          border: 1px solid ${colors.border};
+          font-size: 16px;
+          cursor: pointer;
+          padding: 6px 10px;
+          border-radius: 6px;
+          transition: all 0.2s;
+          color: ${colors.text};
+        }
+        .myio-modal-settings-btn:hover {
+          background: ${activeColor};
+          border-color: ${activeColor};
+          color: white;
+        }
+      </style>
       <div class="myio-consumption-modal-overlay" style="
         position: fixed;
         top: 0;
@@ -23463,59 +23532,44 @@ ${rangeText}`;
           <!-- Controls Bar -->
           <div class="myio-consumption-modal-controls" style="
             display: flex;
-            gap: 16px;
+            gap: 12px;
             padding: 12px 16px;
             background: ${currentTheme === "dark" ? "#374151" : "#f7f7f7"};
             border-bottom: 1px solid ${colors.border};
             align-items: center;
             flex-wrap: wrap;
           ">
+            <!-- Settings Button -->
+            ${showSettingsButton ? `
+              <button id="${modalId}-settings-btn" class="myio-modal-settings-btn" title="Configura\xE7\xF5es">\u2699\uFE0F</button>
+            ` : ""}
+
             <!-- Viz Mode Tabs -->
-            <div style="display: flex; gap: 2px; background: ${currentTheme === "dark" ? "#4b5563" : "#e5e7eb"}; border-radius: 8px; padding: 2px;">
-              <button id="${modalId}-viz-total" style="
-                padding: 6px 12px;
-                border: none;
-                border-radius: 6px;
-                font-size: 13px;
-                cursor: pointer;
-                transition: all 0.2s;
-                background: ${currentVizMode === "total" ? "#3e1a7d" : "transparent"};
-                color: ${currentVizMode === "total" ? "white" : colors.text};
-              ">Consolidado</button>
-              <button id="${modalId}-viz-separate" style="
-                padding: 6px 12px;
-                border: none;
-                border-radius: 6px;
-                font-size: 13px;
-                cursor: pointer;
-                transition: all 0.2s;
-                background: ${currentVizMode === "separate" ? "#3e1a7d" : "transparent"};
-                color: ${currentVizMode === "separate" ? "white" : colors.text};
-              ">Por Shopping</button>
+            <div style="display: flex; gap: 2px; background: ${tabBgColor}; border-radius: 8px; padding: 3px;">
+              <button id="${modalId}-viz-total" class="myio-modal-tab-btn ${currentVizMode === "total" ? "active" : ""}"
+                data-viz="total" title="Consolidado"
+                style="background: ${currentVizMode === "total" ? activeColor : "transparent"}; color: ${currentVizMode === "total" ? "white" : inactiveTextColor};">
+                ${consolidadoIcon}
+              </button>
+              <button id="${modalId}-viz-separate" class="myio-modal-tab-btn ${currentVizMode === "separate" ? "active" : ""}"
+                data-viz="separate" title="Por Shopping"
+                style="background: ${currentVizMode === "separate" ? activeColor : "transparent"}; color: ${currentVizMode === "separate" ? "white" : inactiveTextColor};">
+                ${porShoppingIcon}
+              </button>
             </div>
 
             <!-- Chart Type Tabs -->
-            <div style="display: flex; gap: 2px; background: ${currentTheme === "dark" ? "#4b5563" : "#e5e7eb"}; border-radius: 8px; padding: 2px;">
-              <button id="${modalId}-type-line" style="
-                padding: 6px 12px;
-                border: none;
-                border-radius: 6px;
-                font-size: 13px;
-                cursor: pointer;
-                transition: all 0.2s;
-                background: ${currentChartType === "line" ? "#3e1a7d" : "transparent"};
-                color: ${currentChartType === "line" ? "white" : colors.text};
-              ">Linhas</button>
-              <button id="${modalId}-type-bar" style="
-                padding: 6px 12px;
-                border: none;
-                border-radius: 6px;
-                font-size: 13px;
-                cursor: pointer;
-                transition: all 0.2s;
-                background: ${currentChartType === "bar" ? "#3e1a7d" : "transparent"};
-                color: ${currentChartType === "bar" ? "white" : colors.text};
-              ">Barras</button>
+            <div style="display: flex; gap: 2px; background: ${tabBgColor}; border-radius: 8px; padding: 3px;">
+              <button id="${modalId}-type-line" class="myio-modal-tab-btn ${currentChartType === "line" ? "active" : ""}"
+                data-type="line" title="Gr\xE1fico de Linhas"
+                style="background: ${currentChartType === "line" ? activeColor : "transparent"}; color: ${currentChartType === "line" ? "white" : inactiveTextColor};">
+                ${lineChartIcon}
+              </button>
+              <button id="${modalId}-type-bar" class="myio-modal-tab-btn ${currentChartType === "bar" ? "active" : ""}"
+                data-type="bar" title="Gr\xE1fico de Barras"
+                style="background: ${currentChartType === "bar" ? activeColor : "transparent"}; color: ${currentChartType === "bar" ? "white" : inactiveTextColor};">
+                ${barChartIcon}
+              </button>
             </div>
           </div>
 
@@ -23536,6 +23590,11 @@ ${rangeText}`;
     function setupListeners() {
       if (!modalElement) return;
       headerInstance?.attachListeners();
+      if (showSettingsButton) {
+        document.getElementById(`${modalId}-settings-btn`)?.addEventListener("click", () => {
+          config.onSettingsClick?.();
+        });
+      }
       document.getElementById(`${modalId}-viz-total`)?.addEventListener("click", () => {
         currentVizMode = "total";
         chartInstance?.setVizMode("total");
@@ -23570,25 +23629,30 @@ ${rangeText}`;
       modalElement.__handleKeydown = handleKeydown;
     }
     function updateControlStyles() {
-      const colors = getThemeColors2();
+      const colors = getThemeColors3();
+      const activeColor = "#3e1a7d";
       const vizTotalBtn = document.getElementById(`${modalId}-viz-total`);
       const vizSeparateBtn = document.getElementById(`${modalId}-viz-separate`);
       if (vizTotalBtn) {
-        vizTotalBtn.style.background = currentVizMode === "total" ? "#3e1a7d" : "transparent";
+        vizTotalBtn.classList.toggle("active", currentVizMode === "total");
+        vizTotalBtn.style.background = currentVizMode === "total" ? activeColor : "transparent";
         vizTotalBtn.style.color = currentVizMode === "total" ? "white" : colors.text;
       }
       if (vizSeparateBtn) {
-        vizSeparateBtn.style.background = currentVizMode === "separate" ? "#3e1a7d" : "transparent";
+        vizSeparateBtn.classList.toggle("active", currentVizMode === "separate");
+        vizSeparateBtn.style.background = currentVizMode === "separate" ? activeColor : "transparent";
         vizSeparateBtn.style.color = currentVizMode === "separate" ? "white" : colors.text;
       }
       const typeLineBtn = document.getElementById(`${modalId}-type-line`);
       const typeBarBtn = document.getElementById(`${modalId}-type-bar`);
       if (typeLineBtn) {
-        typeLineBtn.style.background = currentChartType === "line" ? "#3e1a7d" : "transparent";
+        typeLineBtn.classList.toggle("active", currentChartType === "line");
+        typeLineBtn.style.background = currentChartType === "line" ? activeColor : "transparent";
         typeLineBtn.style.color = currentChartType === "line" ? "white" : colors.text;
       }
       if (typeBarBtn) {
-        typeBarBtn.style.background = currentChartType === "bar" ? "#3e1a7d" : "transparent";
+        typeBarBtn.classList.toggle("active", currentChartType === "bar");
+        typeBarBtn.style.background = currentChartType === "bar" ? activeColor : "transparent";
         typeBarBtn.style.color = currentChartType === "bar" ? "white" : colors.text;
       }
     }
@@ -23714,18 +23778,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 +23802,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 +23949,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 +23966,7 @@ ${rangeText}`;
       overflow-y: auto;
       display: flex;
       flex-direction: column;
-      gap: 20px;
+      gap: 12px;
     }
 
     .myio-settings-section {
@@ -23938,10 +24009,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 +24044,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 +24105,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 +24219,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 +24245,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 +24256,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 +24273,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 +24285,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 +24331,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 +24357,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 +24487,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 +24496,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 +24638,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 +24660,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 +24773,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 +24900,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 +25095,10 @@ ${rangeText}`;
         }
         settingsHeaderInstance?.destroy();
         settingsHeaderInstance = null;
+        if (dateRangePickerInstance) {
+          dateRangePickerInstance.destroy();
+          dateRangePickerInstance = null;
+        }
         if (settingsModalElement) {
           settingsModalElement.remove();
           settingsModalElement = null;
@@ -25360,12 +25551,589 @@ ${rangeText}`;
   var EXPORT_DOMAIN_LABELS = DOMAIN_LABELS;
   var EXPORT_DOMAIN_UNITS = DOMAIN_UNITS;
 
+  // src/components/DistributionChart/colorManager.ts
+  var DEFAULT_SHOPPING_COLORS = [
+    "#3b82f6",
+    // Blue
+    "#8b5cf6",
+    // Purple
+    "#f59e0b",
+    // Amber
+    "#ef4444",
+    // Red
+    "#10b981",
+    // Emerald
+    "#06b6d4",
+    // Cyan
+    "#ec4899",
+    // Pink
+    "#14b8a6",
+    // Teal
+    "#f97316",
+    // Orange
+    "#a855f7"
+    // Violet
+  ];
+  var DEFAULT_ENERGY_GROUP_COLORS = {
+    "Elevadores": "#3b82f6",
+    "Escadas Rolantes": "#8b5cf6",
+    "Climatiza\xE7\xE3o": "#f59e0b",
+    "Climatizacao": "#f59e0b",
+    // Without accent
+    "Outros Equipamentos": "#ef4444",
+    "Lojas": "#10b981"
+  };
+  var DEFAULT_WATER_GROUP_COLORS = {
+    "Lojas": "#10b981",
+    "\xC1rea Comum": "#0288d1",
+    "Area Comum": "#0288d1"
+    // Without accent
+  };
+  var DEFAULT_GAS_GROUP_COLORS = {
+    "Cozinha": "#f59e0b",
+    "Aquecimento": "#ef4444",
+    "Outros": "#94a3b8"
+  };
+  function getDefaultGroupColors(domain) {
+    switch (domain.toLowerCase()) {
+      case "energy":
+        return DEFAULT_ENERGY_GROUP_COLORS;
+      case "water":
+        return DEFAULT_WATER_GROUP_COLORS;
+      case "gas":
+        return DEFAULT_GAS_GROUP_COLORS;
+      default:
+        return DEFAULT_ENERGY_GROUP_COLORS;
+    }
+  }
+  function assignShoppingColors(shoppingIds) {
+    const colors = {};
+    shoppingIds.forEach((id, index) => {
+      colors[id] = DEFAULT_SHOPPING_COLORS[index % DEFAULT_SHOPPING_COLORS.length];
+    });
+    return colors;
+  }
+  function getShoppingColor(shoppingId, shoppingColors, fallbackIndex = 0) {
+    if (shoppingColors && shoppingColors[shoppingId]) {
+      return shoppingColors[shoppingId];
+    }
+    if (shoppingColors) {
+      const normalizedId = shoppingId.toLowerCase();
+      for (const [key, color] of Object.entries(shoppingColors)) {
+        if (key.toLowerCase() === normalizedId || key.toLowerCase().includes(normalizedId)) {
+          return color;
+        }
+      }
+    }
+    return DEFAULT_SHOPPING_COLORS[Math.abs(fallbackIndex) % DEFAULT_SHOPPING_COLORS.length];
+  }
+  function getGroupColor(groupName, groupColors, domain = "energy", fallbackIndex = 0) {
+    if (groupColors && groupColors[groupName]) {
+      return groupColors[groupName];
+    }
+    const defaultColors = getDefaultGroupColors(domain);
+    if (defaultColors[groupName]) {
+      return defaultColors[groupName];
+    }
+    return DEFAULT_SHOPPING_COLORS[Math.abs(fallbackIndex) % DEFAULT_SHOPPING_COLORS.length];
+  }
+  function getThemeColors2(theme) {
+    if (theme === "dark") {
+      return {
+        text: "#f3f4f6",
+        secondaryText: "#9ca3af",
+        background: "#111827",
+        cardBackground: "#1f2937",
+        border: "#374151",
+        grid: "#374151"
+      };
+    }
+    return {
+      text: "#1f2937",
+      secondaryText: "#6b7280",
+      background: "#f5f5f5",
+      cardBackground: "#ffffff",
+      border: "#e5e7eb",
+      grid: "#e5e7eb"
+    };
+  }
+  function getHashColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return DEFAULT_SHOPPING_COLORS[Math.abs(hash) % DEFAULT_SHOPPING_COLORS.length];
+  }
+
+  // src/components/DistributionChart/createDistributionChartWidget.ts
+  var settingsIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;pointer-events:none"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`;
+  var maximizeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;pointer-events:none"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`;
+  function createDistributionChartWidget(config) {
+    const widgetId = `distribution-${config.domain}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    let chartInstance = null;
+    let currentMode = config.defaultMode || "groups";
+    let currentTheme = config.theme || "light";
+    let currentData = null;
+    let containerElement = null;
+    const title = config.title || getDomainTitle(config.domain);
+    const chartHeight = config.chartHeight || 300;
+    const showHeader = config.showHeader !== false;
+    const showModeSelector = config.showModeSelector !== false;
+    const showSettingsButton = config.showSettingsButton ?? false;
+    const showMaximizeButton = config.showMaximizeButton ?? false;
+    const decimalPlaces = config.decimalPlaces ?? 2;
+    const modes = config.modes || getDefaultModes(config.domain);
+    const groupColors = config.groupColors || getDefaultGroupColors(config.domain);
+    function getDomainTitle(domain) {
+      const titles = {
+        energy: "Distribui\xE7\xE3o de Energia",
+        water: "Distribui\xE7\xE3o de \xC1gua",
+        gas: "Distribui\xE7\xE3o de G\xE1s",
+        temperature: "Distribui\xE7\xE3o de Temperatura"
+      };
+      return titles[domain.toLowerCase()] || `Distribui\xE7\xE3o de ${domain}`;
+    }
+    function getDefaultModes(domain) {
+      if (domain === "water") {
+        return [
+          { value: "groups", label: "Lojas vs \xC1rea Comum" },
+          { value: "stores", label: "Lojas por Shopping" },
+          { value: "common", label: "\xC1rea Comum por Shopping" }
+        ];
+      }
+      return [
+        { value: "groups", label: "Por Grupos de Equipamentos" },
+        { value: "elevators", label: "Elevadores por Shopping" },
+        { value: "escalators", label: "Escadas Rolantes por Shopping" },
+        { value: "hvac", label: "Climatiza\xE7\xE3o por Shopping" },
+        { value: "others", label: "Outros Equipamentos por Shopping" },
+        { value: "stores", label: "Lojas por Shopping" }
+      ];
+    }
+    function $id(id) {
+      if (config.$container) {
+        return config.$container[0].querySelector(`#${id}`);
+      }
+      return document.getElementById(id);
+    }
+    function formatValue(value) {
+      if (config.unitLarge && config.thresholdForLargeUnit && value >= config.thresholdForLargeUnit) {
+        return `${(value / config.thresholdForLargeUnit).toFixed(decimalPlaces)} ${config.unitLarge}`;
+      }
+      return `${value.toFixed(decimalPlaces)} ${config.unit}`;
+    }
+    function getColor(key, index, isGroupMode2) {
+      if (isGroupMode2) {
+        return getGroupColor(key, groupColors, config.domain, index);
+      }
+      const shoppingColors = config.getShoppingColors?.();
+      return getShoppingColor(key, shoppingColors, index);
+    }
+    function getColors2() {
+      return getThemeColors2(currentTheme);
+    }
+    function isGroupMode() {
+      return currentMode === "groups";
+    }
+    function renderHTML() {
+      const colors = getColors2();
+      const modeOptions = modes.map(
+        (m) => `<option value="${m.value}" ${m.value === currentMode ? "selected" : ""}>${m.label}</option>`
+      ).join("");
+      const headerButtons = [];
+      if (showSettingsButton) {
+        headerButtons.push(`
+        <button id="${widgetId}-settings-btn" class="myio-dist-btn" title="Configura\xE7\xF5es">
+          ${settingsIcon}
+        </button>
+      `);
+      }
+      if (showMaximizeButton) {
+        headerButtons.push(`
+        <button id="${widgetId}-maximize-btn" class="myio-dist-btn" title="Expandir">
+          ${maximizeIcon}
+        </button>
+      `);
+      }
+      return `
+      <style>
+        #${widgetId} {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        #${widgetId} .myio-dist-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 16px;
+          flex-wrap: wrap;
+          gap: 12px;
+        }
+        #${widgetId} .myio-dist-title {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: ${colors.text};
+        }
+        #${widgetId} .myio-dist-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        #${widgetId} .myio-dist-label {
+          font-size: 12px;
+          color: ${colors.secondaryText};
+        }
+        #${widgetId} .myio-dist-select {
+          padding: 6px 10px;
+          border-radius: 6px;
+          border: 1px solid ${colors.border};
+          background: ${colors.cardBackground};
+          color: ${colors.text};
+          font-size: 12px;
+          cursor: pointer;
+          min-width: 180px;
+        }
+        #${widgetId} .myio-dist-select:focus {
+          outline: none;
+          border-color: #3e1a7d;
+        }
+        #${widgetId} .myio-dist-btn {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 6px 8px;
+          border: 1px solid ${colors.border};
+          border-radius: 6px;
+          background: transparent;
+          color: ${colors.text};
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        #${widgetId} .myio-dist-btn:hover {
+          background: #3e1a7d;
+          border-color: #3e1a7d;
+          color: white;
+        }
+        #${widgetId} .myio-dist-chart-container {
+          position: relative;
+          height: ${chartHeight}px;
+        }
+        #${widgetId} .myio-dist-loading {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: ${colors.cardBackground}ee;
+          z-index: 10;
+        }
+        #${widgetId} .myio-dist-spinner {
+          width: 32px;
+          height: 32px;
+          border: 3px solid ${colors.border};
+          border-top-color: #3e1a7d;
+          border-radius: 50%;
+          animation: myio-dist-spin 0.8s linear infinite;
+        }
+        @keyframes myio-dist-spin {
+          to { transform: rotate(360deg); }
+        }
+        #${widgetId} .myio-dist-empty {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          color: ${colors.secondaryText};
+          font-size: 14px;
+        }
+        #${widgetId} .myio-dist-empty-icon {
+          font-size: 48px;
+          margin-bottom: 12px;
+          opacity: 0.5;
+        }
+      </style>
+
+      <div id="${widgetId}" class="myio-distribution-widget" style="
+        background: ${colors.cardBackground};
+        border-radius: 12px;
+        padding: 16px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      ">
+        ${showHeader ? `
+          <div class="myio-dist-header">
+            <h4 class="myio-dist-title">${title}</h4>
+            <div class="myio-dist-controls">
+              ${showModeSelector && modes.length > 1 ? `
+                <label for="${widgetId}-mode" class="myio-dist-label">Visualizar:</label>
+                <select id="${widgetId}-mode" class="myio-dist-select">
+                  ${modeOptions}
+                </select>
+              ` : ""}
+              ${headerButtons.join("")}
+            </div>
+          </div>
+        ` : ""}
+
+        <div class="myio-dist-chart-container">
+          <canvas id="${widgetId}-canvas"></canvas>
+          <div id="${widgetId}-loading" class="myio-dist-loading" style="display: none;">
+            <div class="myio-dist-spinner"></div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function setLoading(loading) {
+      const loadingEl = $id(`${widgetId}-loading`);
+      if (loadingEl) {
+        loadingEl.style.display = loading ? "flex" : "none";
+      }
+    }
+    function buildChartData(distribution) {
+      const labels = [];
+      const data = [];
+      const backgroundColors = [];
+      const total = Object.values(distribution).reduce((sum, val) => sum + val, 0);
+      const isGroup = isGroupMode();
+      const entries = Object.entries(distribution).filter(([_, value]) => value > 0).sort((a, b) => b[1] - a[1]);
+      entries.forEach(([key, value], index) => {
+        const percentage = total > 0 ? (value / total * 100).toFixed(1) : "0";
+        labels.push(`${key} (${formatValue(value)} - ${percentage}%)`);
+        data.push(value);
+        backgroundColors.push(getColor(key, index, isGroup));
+      });
+      return { labels, data, backgroundColors, total };
+    }
+    function renderEmptyState() {
+      const container = $id(`${widgetId}-canvas`)?.parentElement;
+      if (container) {
+        const emptyEl = document.createElement("div");
+        emptyEl.className = "myio-dist-empty";
+        emptyEl.innerHTML = `
+        <div class="myio-dist-empty-icon">\u{1F4CA}</div>
+        <div>Sem dados dispon\xEDveis</div>
+      `;
+        const canvas = $id(`${widgetId}-canvas`);
+        if (canvas) canvas.style.display = "none";
+        const existingEmpty = container.querySelector(".myio-dist-empty");
+        if (!existingEmpty) {
+          container.appendChild(emptyEl);
+        }
+      }
+    }
+    function removeEmptyState() {
+      const container = $id(`${widgetId}-canvas`)?.parentElement;
+      if (container) {
+        const emptyEl = container.querySelector(".myio-dist-empty");
+        if (emptyEl) emptyEl.remove();
+        const canvas = $id(`${widgetId}-canvas`);
+        if (canvas) canvas.style.display = "block";
+      }
+    }
+    async function updateChart() {
+      const canvas = $id(`${widgetId}-canvas`);
+      if (!canvas) {
+        console.error(`[${config.domain.toUpperCase()}] Distribution canvas not found`);
+        return;
+      }
+      setLoading(true);
+      try {
+        const distribution = await config.fetchDistribution(currentMode);
+        if (!distribution || Object.keys(distribution).length === 0) {
+          console.warn(`[${config.domain.toUpperCase()}] No distribution data for mode: ${currentMode}`);
+          currentData = null;
+          setLoading(false);
+          renderEmptyState();
+          return;
+        }
+        removeEmptyState();
+        currentData = distribution;
+        const { labels, data, backgroundColors, total } = buildChartData(distribution);
+        const colors = getColors2();
+        const Chart2 = window.Chart;
+        if (!Chart2) {
+          throw new Error("Chart.js not loaded");
+        }
+        if (chartInstance) {
+          chartInstance.destroy();
+          chartInstance = null;
+        }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          throw new Error("Could not get canvas context");
+        }
+        chartInstance = new Chart2(ctx, {
+          type: "bar",
+          data: {
+            labels,
+            datasets: [
+              {
+                label: `Consumo (${config.unit})`,
+                data,
+                backgroundColor: backgroundColors
+              }
+            ]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: "y",
+            // Horizontal bar chart
+            animation: false,
+            plugins: {
+              legend: { display: false },
+              tooltip: {
+                callbacks: {
+                  label: (context) => {
+                    const value = context.parsed.x || 0;
+                    const percentage = total > 0 ? (value / total * 100).toFixed(1) : "0";
+                    return `${formatValue(value)} (${percentage}%)`;
+                  }
+                }
+              }
+            },
+            scales: {
+              x: {
+                beginAtZero: true,
+                ticks: {
+                  callback: (value) => formatValue(Number(value)),
+                  color: colors.secondaryText,
+                  font: { size: 11 }
+                },
+                grid: { color: colors.grid }
+              },
+              y: {
+                ticks: {
+                  font: { size: 11 },
+                  color: colors.text
+                },
+                grid: { display: false }
+              }
+            }
+          }
+        });
+        config.onDataLoaded?.(distribution);
+        console.log(`[${config.domain.toUpperCase()}] Distribution chart updated for mode: ${currentMode}`);
+      } catch (error) {
+        console.error(`[${config.domain.toUpperCase()}] Error updating distribution chart:`, error);
+        config.onError?.(error);
+        renderEmptyState();
+      } finally {
+        setLoading(false);
+      }
+    }
+    function setupListeners() {
+      const modeSelect = $id(`${widgetId}-mode`);
+      if (modeSelect) {
+        modeSelect.addEventListener("change", async (e) => {
+          currentMode = e.target.value;
+          config.onModeChange?.(currentMode);
+          await updateChart();
+        });
+      }
+      if (showSettingsButton) {
+        const settingsBtn = $id(`${widgetId}-settings-btn`);
+        if (settingsBtn) {
+          settingsBtn.addEventListener("click", () => {
+            config.onSettingsClick?.();
+          });
+        }
+      }
+      if (showMaximizeButton) {
+        const maximizeBtn = $id(`${widgetId}-maximize-btn`);
+        if (maximizeBtn) {
+          maximizeBtn.addEventListener("click", () => {
+            config.onMaximizeClick?.();
+          });
+        }
+      }
+    }
+    function updateThemeStyles() {
+      const colors = getColors2();
+      const widget = $id(widgetId);
+      if (widget) {
+        widget.style.background = colors.cardBackground;
+        const title2 = widget.querySelector(".myio-dist-title");
+        if (title2) title2.style.color = colors.text;
+        const labels = widget.querySelectorAll(".myio-dist-label");
+        labels.forEach((l) => l.style.color = colors.secondaryText);
+        const select = widget.querySelector(".myio-dist-select");
+        if (select) {
+          select.style.background = colors.cardBackground;
+          select.style.color = colors.text;
+          select.style.borderColor = colors.border;
+        }
+        const buttons = widget.querySelectorAll(".myio-dist-btn");
+        buttons.forEach((b) => {
+          b.style.color = colors.text;
+          b.style.borderColor = colors.border;
+        });
+      }
+    }
+    const instance = {
+      async render() {
+        containerElement = $id(config.containerId);
+        if (!containerElement) {
+          throw new Error(`Container #${config.containerId} not found`);
+        }
+        containerElement.innerHTML = renderHTML();
+        setupListeners();
+        await updateChart();
+      },
+      async setMode(mode) {
+        currentMode = mode;
+        const modeSelect = $id(`${widgetId}-mode`);
+        if (modeSelect) {
+          modeSelect.value = mode;
+        }
+        config.onModeChange?.(mode);
+        await updateChart();
+      },
+      async refresh() {
+        await updateChart();
+      },
+      setTheme(theme) {
+        currentTheme = theme;
+        updateThemeStyles();
+        if (currentData) {
+          updateChart();
+        }
+      },
+      destroy() {
+        if (chartInstance) {
+          chartInstance.destroy();
+          chartInstance = null;
+        }
+        if (containerElement) {
+          containerElement.innerHTML = "";
+        }
+        currentData = null;
+      },
+      getChartInstance: () => chartInstance,
+      getCurrentMode: () => currentMode,
+      getCurrentData: () => currentData
+    };
+    return instance;
+  }
+
   exports.CHART_COLORS = CHART_COLORS;
   exports.CONSUMPTION_CHART_COLORS = DEFAULT_COLORS;
   exports.CONSUMPTION_CHART_DEFAULTS = DEFAULT_CONFIG;
   exports.CONSUMPTION_THEME_COLORS = THEME_COLORS;
   exports.ConnectionStatusType = ConnectionStatusType;
   exports.DEFAULT_CLAMP_RANGE = DEFAULT_CLAMP_RANGE;
+  exports.DEFAULT_ENERGY_GROUP_COLORS = DEFAULT_ENERGY_GROUP_COLORS;
+  exports.DEFAULT_GAS_GROUP_COLORS = DEFAULT_GAS_GROUP_COLORS;
+  exports.DEFAULT_SHOPPING_COLORS = DEFAULT_SHOPPING_COLORS;
+  exports.DEFAULT_WATER_GROUP_COLORS = DEFAULT_WATER_GROUP_COLORS;
   exports.DeviceStatusType = DeviceStatusType;
   exports.EXPORT_DEFAULT_COLORS = EXPORT_DEFAULT_COLORS;
   exports.EXPORT_DOMAIN_ICONS = EXPORT_DOMAIN_ICONS;
@@ -25378,6 +26146,7 @@ ${rangeText}`;
   exports.addDetectionContext = addDetectionContext;
   exports.addNamespace = addNamespace;
   exports.aggregateByDay = aggregateByDay;
+  exports.assignShoppingColors = assignShoppingColors;
   exports.averageByDay = averageByDay;
   exports.buildListItemsThingsboardByUniqueDatasource = buildListItemsThingsboardByUniqueDatasource;
   exports.buildMyioIngestionAuth = buildMyioIngestionAuth;
@@ -25399,6 +26168,7 @@ ${rangeText}`;
   exports.createConsumptionChartWidget = createConsumptionChartWidget;
   exports.createConsumptionModal = createConsumptionModal;
   exports.createDateRangePicker = createDateRangePicker2;
+  exports.createDistributionChartWidget = createDistributionChartWidget;
   exports.createInputDateRangePickerInsideDIV = createInputDateRangePickerInsideDIV;
   exports.createModalHeader = createModalHeader;
   exports.decodePayload = decodePayload;
@@ -25437,11 +26207,16 @@ ${rangeText}`;
   exports.getAvailableContexts = getAvailableContexts;
   exports.getConnectionStatusIcon = getConnectionStatusIcon;
   exports.getDateRangeArray = getDateRangeArray;
+  exports.getDefaultGroupColors = getDefaultGroupColors;
   exports.getDeviceStatusIcon = getDeviceStatusIcon;
   exports.getDeviceStatusInfo = getDeviceStatusInfo;
+  exports.getDistributionThemeColors = getThemeColors2;
+  exports.getGroupColor = getGroupColor;
+  exports.getHashColor = getHashColor;
   exports.getModalHeaderStyles = getModalHeaderStyles;
   exports.getSaoPauloISOString = getSaoPauloISOString;
   exports.getSaoPauloISOStringFixed = getSaoPauloISOStringFixed;
+  exports.getShoppingColor = getShoppingColor;
   exports.getValueByDatakey = getValueByDatakey;
   exports.getValueByDatakeyLegacy = getValueByDatakeyLegacy;
   exports.getWaterCategories = getWaterCategories;