myio-js-library 0.1.165 → 0.1.167

package/dist/index.js

@@ -23593,11 +23593,16 @@ function createConsumptionModal(config) {
   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,
@@ -23630,7 +23635,55 @@ function createConsumptionModal(config) {
         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;
@@ -23661,59 +23714,44 @@ function createConsumptionModal(config) {
           <!-- 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>
 
@@ -23734,6 +23772,11 @@ function createConsumptionModal(config) {
   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");
@@ -23768,25 +23811,30 @@ function createConsumptionModal(config) {
     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;
     }
   }
@@ -23823,7 +23871,11 @@ function createConsumptionModal(config) {
         defaultChartType: currentChartType,
         defaultVizMode: currentVizMode
       });
-      await chartInstance.render();
+      if (config.initialData) {
+        chartInstance.update(config.initialData);
+      } else {
+        await chartInstance.render();
+      }
     },
     close() {
       if (modalElement) {
@@ -25686,6 +25738,581 @@ var EXPORT_DEFAULT_COLORS = DEFAULT_COLORS4;
 var EXPORT_DOMAIN_ICONS = DOMAIN_ICONS;
 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;
+  let isLoading = false;
+  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) {
+    isLoading = 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;
+}
 export {
   CHART_COLORS,
   DEFAULT_COLORS as CONSUMPTION_CHART_COLORS,
@@ -25693,6 +26320,10 @@ export {
   THEME_COLORS as CONSUMPTION_THEME_COLORS,
   ConnectionStatusType,
   DEFAULT_CLAMP_RANGE,
+  DEFAULT_ENERGY_GROUP_COLORS,
+  DEFAULT_GAS_GROUP_COLORS,
+  DEFAULT_SHOPPING_COLORS,
+  DEFAULT_WATER_GROUP_COLORS,
   DeviceStatusType,
   EXPORT_DEFAULT_COLORS,
   EXPORT_DOMAIN_ICONS,
@@ -25706,6 +26337,7 @@ export {
   addDetectionContext,
   addNamespace,
   aggregateByDay,
+  assignShoppingColors,
   averageByDay,
   buildListItemsThingsboardByUniqueDatasource,
   buildMyioIngestionAuth,
@@ -25727,6 +26359,7 @@ export {
   createConsumptionChartWidget,
   createConsumptionModal,
   createDateRangePicker2 as createDateRangePicker,
+  createDistributionChartWidget,
   createInputDateRangePickerInsideDIV,
   createModalHeader,
   decodePayload,
@@ -25765,11 +26398,16 @@ export {
   getAvailableContexts,
   getConnectionStatusIcon,
   getDateRangeArray,
+  getDefaultGroupColors,
   getDeviceStatusIcon,
   getDeviceStatusInfo,
+  getThemeColors2 as getDistributionThemeColors,
+  getGroupColor,
+  getHashColor,
   getModalHeaderStyles,
   getSaoPauloISOString,
   getSaoPauloISOStringFixed,
+  getShoppingColor,
   getValueByDatakey,
   getValueByDatakeyLegacy,
   getWaterCategories,