myio-js-library 0.1.162 → 0.1.164

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

@@ -22967,7 +22967,7 @@ ${rangeText}`;
       const isTemperature = config.domain === "temperature";
       let datasets;
       if (currentVizMode === "separate" && data.shoppingData && data.shoppingNames) {
-        const shoppingColors = [
+        const shoppingColors = colors.shoppingColors || [
           "#2563eb",
           "#16a34a",
           "#ea580c",
@@ -23652,8 +23652,1277 @@ ${rangeText}`;
     return instance;
   }
 
+  // src/components/Consumption7DaysChart/createConsumptionChartWidget.ts
+  var DOMAIN_CONFIG4 = {
+    energy: {
+      name: "Energia",
+      icon: "\u26A1",
+      color: "#6c2fbf",
+      colors: ["#2563eb", "#16a34a", "#8b5cf6", "#ea580c", "#dc2626"]
+    },
+    water: {
+      name: "\xC1gua",
+      icon: "\u{1F4A7}",
+      color: "#0288d1",
+      colors: ["#0288d1", "#06b6d4", "#0891b2", "#22d3ee", "#67e8f9"]
+    },
+    gas: {
+      name: "G\xE1s",
+      icon: "\u{1F525}",
+      color: "#ea580c",
+      colors: ["#ea580c", "#f97316", "#fb923c", "#fdba74", "#fed7aa"]
+    },
+    temperature: {
+      name: "Temperatura",
+      icon: "\u{1F321}\uFE0F",
+      color: "#e65100",
+      colors: ["#dc2626", "#059669", "#0ea5e9", "#f59e0b", "#8b5cf6"]
+    }
+  };
+  function getWidgetStyles(theme, primaryColor) {
+    const colors = THEME_COLORS[theme];
+    return `
+    .myio-chart-widget {
+      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+      background: ${colors.chartBackground};
+      border: 1px solid ${colors.border};
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .myio-chart-widget.dark {
+      background: ${THEME_COLORS.dark.chartBackground};
+      border-color: ${THEME_COLORS.dark.border};
+    }
+
+    .myio-chart-widget-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid ${colors.border};
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .myio-chart-widget-title-group {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .myio-chart-widget-title {
+      margin: 0;
+      font-size: 16px;
+      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;
+      background: ${theme === "dark" ? "#374151" : "#f3f4f6"};
+      padding: 3px;
+      border-radius: 8px;
+    }
+
+    .myio-chart-widget-tab {
+      padding: 6px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: ${colors.textMuted};
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+
+    .myio-chart-widget-tab:hover {
+      color: ${colors.text};
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+    }
+
+    .myio-chart-widget-tab.active {
+      background: ${primaryColor};
+      color: white;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+
+    .myio-chart-widget-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-chart-widget-btn:hover {
+      background: ${primaryColor};
+      border-color: ${primaryColor};
+      color: white;
+    }
+
+    .myio-chart-widget-body {
+      position: relative;
+      padding: 16px 20px;
+    }
+
+    .myio-chart-widget-canvas-container {
+      position: relative;
+      width: 100%;
+    }
+
+    .myio-chart-widget-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      border-radius: 8px;
+    }
+
+    .myio-chart-widget.dark .myio-chart-widget-loading {
+      background: rgba(31, 41, 55, 0.9);
+    }
+
+    .myio-chart-widget-spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid ${colors.border};
+      border-top-color: ${primaryColor};
+      border-radius: 50%;
+      animation: myio-spin 1s linear infinite;
+    }
+
+    @keyframes myio-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .myio-chart-widget-footer {
+      display: flex;
+      justify-content: space-around;
+      padding: 16px 20px;
+      border-top: 1px solid ${colors.border};
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+
+    .myio-chart-widget-stat {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      min-width: 100px;
+    }
+
+    .myio-chart-widget-stat-label {
+      font-size: 11px;
+      font-weight: 500;
+      color: ${colors.textMuted};
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 4px;
+    }
+
+    .myio-chart-widget-stat-value {
+      font-size: 20px;
+      font-weight: 700;
+      color: ${colors.text};
+    }
+
+    .myio-chart-widget-stat-value.primary {
+      color: ${primaryColor};
+    }
+
+    .myio-chart-widget-stat-sub {
+      font-size: 11px;
+      color: ${colors.textMuted};
+      margin-top: 2px;
+    }
+
+    /* Settings Modal Overlay */
+    .myio-settings-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 99999;
+      backdrop-filter: blur(4px);
+    }
+
+    .myio-settings-overlay.hidden {
+      display: none;
+    }
+
+    .myio-settings-card {
+      background: ${colors.chartBackground};
+      border-radius: 10px;
+      width: 90%;
+      max-width: 600px;
+      max-height: 90vh;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+      overflow: hidden;
+    }
+
+    .myio-settings-card .myio-modal-header {
+      border-radius: 10px 10px 0 0;
+    }
+
+    .myio-settings-body {
+      padding: 20px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    .myio-settings-section {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.05)" : "#f8fafc"};
+      border-radius: 10px;
+      padding: 16px;
+      border: 1px solid ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#e2e8f0"};
+    }
+
+    .myio-settings-section-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: ${colors.text};
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .myio-settings-row {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      align-items: flex-end;
+    }
+
+    .myio-settings-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .myio-settings-field-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: ${colors.textMuted};
+    }
+
+    .myio-settings-input,
+    .myio-settings-select {
+      padding: 10px 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      font-size: 14px;
+      background: ${colors.chartBackground};
+      color: ${colors.text};
+      width: 100%;
+    }
+
+    .myio-settings-input:focus,
+    .myio-settings-select:focus {
+      outline: 2px solid ${primaryColor};
+      outline-offset: 1px;
+    }
+
+    .myio-settings-tabs {
+      display: flex;
+      gap: 2px;
+      background: ${theme === "dark" ? "#374151" : "#e5e7eb"};
+      padding: 3px;
+      border-radius: 8px;
+    }
+
+    .myio-settings-tab {
+      flex: 1;
+      padding: 8px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: ${colors.textMuted};
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+
+    .myio-settings-tab:hover {
+      color: ${colors.text};
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)"};
+    }
+
+    .myio-settings-tab.active {
+      background: ${primaryColor};
+      color: white;
+    }
+
+    .myio-settings-footer {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      padding: 16px 20px;
+      border-top: 1px solid ${colors.border};
+      background: ${theme === "dark" ? "rgba(0,0,0,0.2)" : "#fafafa"};
+    }
+
+    .myio-settings-btn {
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .myio-settings-btn-secondary {
+      background: transparent;
+      border: 1px solid ${colors.border};
+      color: ${colors.text};
+    }
+
+    .myio-settings-btn-secondary:hover {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
+    }
+
+    .myio-settings-btn-primary {
+      background: ${primaryColor};
+      border: none;
+      color: white;
+    }
+
+    .myio-settings-btn-primary:hover {
+      filter: brightness(1.1);
+    }
+
+    .myio-settings-hint {
+      font-size: 11px;
+      color: ${colors.textMuted};
+      font-weight: normal;
+    }
+
+    .myio-settings-context-group {
+      margin-bottom: 8px;
+    }
+
+    .myio-settings-context-group:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Dropdown styles */
+    .myio-settings-dropdown-container {
+      position: relative;
+    }
+
+    .myio-settings-dropdown-btn {
+      padding: 10px 14px;
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      font-size: 14px;
+      background: ${colors.chartBackground};
+      color: ${colors.text};
+      cursor: pointer;
+      min-width: 180px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .myio-settings-dropdown-btn:hover {
+      border-color: ${primaryColor};
+    }
+
+    .myio-settings-dropdown-arrow {
+      font-size: 10px;
+      color: ${colors.textMuted};
+    }
+
+    .myio-settings-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 100001;
+      background: ${colors.chartBackground};
+      border: 1px solid ${colors.border};
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      min-width: 220px;
+      padding: 8px 0;
+    }
+
+    .myio-settings-dropdown.hidden {
+      display: none;
+    }
+
+    .myio-settings-dropdown-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      cursor: pointer;
+      font-size: 13px;
+      color: ${colors.text};
+      transition: background 0.15s;
+    }
+
+    .myio-settings-dropdown-option:hover {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
+    }
+
+    .myio-settings-dropdown-option input {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: ${primaryColor};
+    }
+
+    .myio-settings-dropdown-actions {
+      border-top: 1px solid ${colors.border};
+      margin-top: 8px;
+      padding: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .myio-settings-dropdown-actions button {
+      width: 100%;
+      padding: 8px;
+      background: ${theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      color: ${colors.text};
+      transition: background 0.15s;
+    }
+
+    .myio-settings-dropdown-actions button:hover {
+      background: ${theme === "dark" ? "rgba(255,255,255,0.15)" : "#e5e7eb"};
+    }
+
+    /* Suggestion icon styles */
+    .myio-settings-section-label span[id$="-settings-suggestion"] {
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .myio-settings-section-label span[id$="-settings-suggestion"]:hover {
+      opacity: 1 !important;
+      transform: scale(1.2);
+    }
+  `;
+  }
+  function createConsumptionChartWidget(config) {
+    const widgetId = `myio-widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    let containerElement = null;
+    let chartInstance = null;
+    let styleElement = null;
+    let settingsModalElement = null;
+    let settingsHeaderInstance = null;
+    let currentTheme = config.theme ?? "light";
+    let currentChartType = config.defaultChartType ?? "line";
+    let currentVizMode = config.defaultVizMode ?? "total";
+    let currentPeriod = config.defaultPeriod ?? 7;
+    let currentIdealRange = config.idealRange ?? null;
+    let tempPeriod = currentPeriod;
+    let tempChartType = currentChartType;
+    let tempVizMode = currentVizMode;
+    let tempTheme = currentTheme;
+    let tempIdealRange = currentIdealRange;
+    let currentSuggestion = null;
+    const domainCfg = DOMAIN_CONFIG4[config.domain] || DOMAIN_CONFIG4.energy;
+    const primaryColor = config.colors?.primary || domainCfg.color;
+    const domainColors = config.colors?.shoppingColors || domainCfg.colors;
+    const showSettingsButton = config.showSettingsButton ?? true;
+    const showMaximizeButton = config.showMaximizeButton ?? true;
+    const showVizModeTabs = config.showVizModeTabs ?? true;
+    const showChartTypeTabs = config.showChartTypeTabs ?? true;
+    const chartHeight = typeof config.chartHeight === "number" ? `${config.chartHeight}px` : config.chartHeight ?? "300px";
+    function getTitle() {
+      if (config.title) return config.title;
+      const domainName = config.domain === "temperature" ? "Temperatura" : "Consumo";
+      return `${domainName} dos \xFAltimos ${currentPeriod} dias`;
+    }
+    function renderHTML() {
+      return `
+      <div id="${widgetId}" class="myio-chart-widget ${currentTheme === "dark" ? "dark" : ""} ${config.className || ""}">
+        <div class="myio-chart-widget-header">
+          <div class="myio-chart-widget-title-group">
+            ${showSettingsButton ? `
+              <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>
+              </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>
+              </div>
+            ` : ""}
+            ${showMaximizeButton ? `
+              <button id="${widgetId}-maximize-btn" class="myio-chart-widget-btn" title="Maximizar">\u26F6</button>
+            ` : ""}
+          </div>
+        </div>
+        <div class="myio-chart-widget-body">
+          <div id="${widgetId}-loading" class="myio-chart-widget-loading" style="display: none;">
+            <div class="myio-chart-widget-spinner"></div>
+          </div>
+          <div class="myio-chart-widget-canvas-container" style="height: ${chartHeight};">
+            <canvas id="${widgetId}-canvas"></canvas>
+          </div>
+        </div>
+        <div class="myio-chart-widget-footer" id="${widgetId}-footer">
+          <div class="myio-chart-widget-stat">
+            <span class="myio-chart-widget-stat-label">Total Per\xEDodo</span>
+            <span id="${widgetId}-stat-total" class="myio-chart-widget-stat-value primary">--</span>
+          </div>
+          <div class="myio-chart-widget-stat">
+            <span class="myio-chart-widget-stat-label">M\xE9dia Di\xE1ria</span>
+            <span id="${widgetId}-stat-avg" class="myio-chart-widget-stat-value">--</span>
+          </div>
+          <div class="myio-chart-widget-stat">
+            <span class="myio-chart-widget-stat-label">Dia de Pico</span>
+            <span id="${widgetId}-stat-peak" class="myio-chart-widget-stat-value">--</span>
+            <span id="${widgetId}-stat-peak-date" class="myio-chart-widget-stat-sub"></span>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function renderSettingsModal() {
+      const unit = config.unit ?? "";
+      const isTemperature = config.domain === "temperature";
+      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 class="myio-settings-card">
+          ${settingsHeaderInstance.render()}
+          <div class="myio-settings-body">
+            <!-- CONTEXT 1: Per\xEDodo e Dados -->
+            <div class="myio-settings-context-group">
+              <!-- Per\xEDodo -->
+              <div class="myio-settings-section">
+                <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>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Dados -->
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">\u{1F4CA} Dados</div>
+                <div class="myio-settings-row">
+                  <!-- Granularity Select -->
+                  <div class="myio-settings-field">
+                    <label class="myio-settings-field-label">Granularidade</label>
+                    <select id="${widgetId}-settings-granularity" class="myio-settings-select">
+                      <option value="1d" selected>\u{1F4C6} Por Dia</option>
+                      <option value="1h">\u{1F550} Por Hora</option>
+                    </select>
+                  </div>
+
+                  <!-- Weekday Filter -->
+                  <div class="myio-settings-field">
+                    <label class="myio-settings-field-label">Dias da Semana</label>
+                    <div class="myio-settings-dropdown-container">
+                      <button type="button" id="${widgetId}-settings-weekday-btn" class="myio-settings-dropdown-btn">
+                        <span id="${widgetId}-settings-weekday-label">Todos os dias</span>
+                        <span class="myio-settings-dropdown-arrow">\u25BC</span>
+                      </button>
+                      <div id="${widgetId}-settings-weekday-dropdown" class="myio-settings-dropdown hidden">
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="dom" checked /> Domingo
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="seg" checked /> Segunda-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="ter" checked /> Ter\xE7a-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="qua" checked /> Quarta-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="qui" checked /> Quinta-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="sex" checked /> Sexta-feira
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-weekday" value="sab" checked /> S\xE1bado
+                        </label>
+                        <div class="myio-settings-dropdown-actions">
+                          <button type="button" id="${widgetId}-settings-weekday-all">Selecionar Todos</button>
+                          <button type="button" id="${widgetId}-settings-weekday-clear">Limpar</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Day Period Filter (only visible when hourly) -->
+                  <div class="myio-settings-field" id="${widgetId}-settings-dayperiod-field" style="display: none;">
+                    <label class="myio-settings-field-label">Per\xEDodos do Dia</label>
+                    <div class="myio-settings-dropdown-container">
+                      <button type="button" id="${widgetId}-settings-dayperiod-btn" class="myio-settings-dropdown-btn">
+                        <span id="${widgetId}-settings-dayperiod-label">Todos os per\xEDodos</span>
+                        <span class="myio-settings-dropdown-arrow">\u25BC</span>
+                      </button>
+                      <div id="${widgetId}-settings-dayperiod-dropdown" class="myio-settings-dropdown hidden">
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="madrugada" checked /> Madrugada (00h-06h)
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="manha" checked /> Manh\xE3 (06h-12h)
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="tarde" checked /> Tarde (12h-18h)
+                        </label>
+                        <label class="myio-settings-dropdown-option">
+                          <input type="checkbox" name="${widgetId}-dayperiod" value="noite" checked /> Noite (18h-24h)
+                        </label>
+                        <div class="myio-settings-dropdown-actions">
+                          <button type="button" id="${widgetId}-settings-dayperiod-all">Selecionar Todos</button>
+                          <button type="button" id="${widgetId}-settings-dayperiod-clear">Limpar</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- CONTEXT 2: Faixa Ideal -->
+            <div class="myio-settings-context-group">
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">
+                  \u{1F3AF} Faixa Ideal
+                  <span class="myio-settings-hint" id="${widgetId}-settings-range-hint">(opcional - deixe zerado para n\xE3o exibir)</span>
+                  <span
+                    id="${widgetId}-settings-suggestion"
+                    title=""
+                    style="cursor: pointer; font-size: 16px; opacity: 0.7; transition: opacity 0.2s; margin-left: 4px;"
+                  >\u{1F4A1}</span>
+                </div>
+                <div class="myio-settings-row">
+                  <div class="myio-settings-field" style="min-width: 100px;">
+                    <label class="myio-settings-field-label">M\xEDnimo (${unit})</label>
+                    <input type="number" id="${widgetId}-settings-range-min" class="myio-settings-input"
+                      value="${tempIdealRange?.min ?? ""}" placeholder="0" step="0.1">
+                  </div>
+                  <div class="myio-settings-field" style="min-width: 100px;">
+                    <label class="myio-settings-field-label">M\xE1ximo (${unit})</label>
+                    <input type="number" id="${widgetId}-settings-range-max" class="myio-settings-input"
+                      value="${tempIdealRange?.max ?? ""}" placeholder="0" step="0.1">
+                  </div>
+                  <div class="myio-settings-field" style="flex: 1;">
+                    <label class="myio-settings-field-label">R\xF3tulo</label>
+                    <input type="text" id="${widgetId}-settings-range-label" class="myio-settings-input"
+                      value="${tempIdealRange?.label ?? ""}" placeholder="${isTemperature ? "Faixa Ideal" : "Meta de Consumo"}">
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- CONTEXT 3: Visualiza\xE7\xE3o -->
+            <div class="myio-settings-context-group">
+              <div class="myio-settings-section">
+                <div class="myio-settings-section-label">\u{1F3A8} Visualiza\xE7\xE3o</div>
+                <div class="myio-settings-row" style="gap: 20px; flex-wrap: wrap;">
+                  <!-- Chart Type -->
+                  <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>
+                    </div>
+                  </div>
+
+                  <!-- Viz Mode -->
+                  <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>
+                    </div>
+                  </div>
+
+                  <!-- Theme -->
+                  <div class="myio-settings-field" style="flex: 1; min-width: 160px;">
+                    <label class="myio-settings-field-label">Tema</label>
+                    <div class="myio-settings-tabs" id="${widgetId}-settings-theme">
+                      <button class="myio-settings-tab ${tempTheme === "light" ? "active" : ""}" data-theme="light">\u2600\uFE0F Light</button>
+                      <button class="myio-settings-tab ${tempTheme === "dark" ? "active" : ""}" data-theme="dark">\u{1F319} Dark</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="myio-settings-footer">
+            <button id="${widgetId}-settings-reset" class="myio-settings-btn myio-settings-btn-secondary">Resetar</button>
+            <button id="${widgetId}-settings-apply" class="myio-settings-btn myio-settings-btn-primary">Carregar</button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    function injectStyles() {
+      if (styleElement) return;
+      styleElement = document.createElement("style");
+      styleElement.id = `${widgetId}-styles`;
+      styleElement.textContent = getWidgetStyles(currentTheme, primaryColor);
+      document.head.appendChild(styleElement);
+    }
+    function updateStyles() {
+      if (styleElement) {
+        styleElement.textContent = getWidgetStyles(currentTheme, primaryColor);
+      }
+    }
+    function setupListeners() {
+      if (showSettingsButton) {
+        document.getElementById(`${widgetId}-settings-btn`)?.addEventListener("click", () => {
+          openSettingsModal();
+          config.onSettingsClick?.();
+        });
+      }
+      if (showMaximizeButton && config.onMaximizeClick) {
+        document.getElementById(`${widgetId}-maximize-btn`)?.addEventListener("click", () => {
+          config.onMaximizeClick?.();
+        });
+      }
+      if (showVizModeTabs) {
+        document.getElementById(`${widgetId}-viz-tabs`)?.addEventListener("click", (e) => {
+          const target = e.target;
+          if (target.classList.contains("myio-chart-widget-tab")) {
+            const mode = target.dataset.viz;
+            if (mode) {
+              instance.setVizMode(mode);
+            }
+          }
+        });
+      }
+      if (showChartTypeTabs) {
+        document.getElementById(`${widgetId}-type-tabs`)?.addEventListener("click", (e) => {
+          const target = e.target;
+          if (target.classList.contains("myio-chart-widget-tab")) {
+            const type = target.dataset.type;
+            if (type) {
+              instance.setChartType(type);
+            }
+          }
+        });
+      }
+    }
+    function updateTabStates() {
+      document.querySelectorAll(`#${widgetId}-viz-tabs .myio-chart-widget-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.viz === currentVizMode);
+      });
+      document.querySelectorAll(`#${widgetId}-type-tabs .myio-chart-widget-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.type === currentChartType);
+      });
+    }
+    function updateTitle() {
+      const titleEl = document.getElementById(`${widgetId}-title`);
+      if (titleEl) {
+        titleEl.textContent = getTitle();
+      }
+    }
+    function setLoading(loading) {
+      const loadingEl = document.getElementById(`${widgetId}-loading`);
+      if (loadingEl) {
+        loadingEl.style.display = loading ? "flex" : "none";
+      }
+    }
+    function formatValue(value) {
+      const unit = config.unit ?? "";
+      const unitLarge = config.unitLarge;
+      const threshold = config.thresholdForLargeUnit ?? 1e3;
+      if (unitLarge && Math.abs(value) >= threshold) {
+        return `${(value / threshold).toFixed(2)} ${unitLarge}`;
+      }
+      return `${value.toFixed(2)} ${unit}`;
+    }
+    function updateFooterStats(data) {
+      const totalEl = document.getElementById(`${widgetId}-stat-total`);
+      const avgEl = document.getElementById(`${widgetId}-stat-avg`);
+      const peakEl = document.getElementById(`${widgetId}-stat-peak`);
+      const peakDateEl = document.getElementById(`${widgetId}-stat-peak-date`);
+      if (!data.dailyTotals || data.dailyTotals.length === 0) {
+        if (totalEl) totalEl.textContent = "--";
+        if (avgEl) avgEl.textContent = "--";
+        if (peakEl) peakEl.textContent = "--";
+        if (peakDateEl) peakDateEl.textContent = "";
+        return;
+      }
+      const isTemperature = config.domain === "temperature";
+      const totals = data.dailyTotals;
+      const labels = data.labels ?? [];
+      const total = totals.reduce((a, b) => a + b, 0);
+      const avg = total / totals.length;
+      const peakValue = Math.max(...totals);
+      const peakIndex = totals.indexOf(peakValue);
+      const peakDate = labels[peakIndex] ?? "";
+      if (totalEl) {
+        if (isTemperature) {
+          totalEl.textContent = formatValue(avg);
+          const labelEl = totalEl.previousElementSibling;
+          if (labelEl) labelEl.textContent = "M\xE9dia Per\xEDodo";
+        } else {
+          totalEl.textContent = formatValue(total);
+        }
+      }
+      if (avgEl) {
+        avgEl.textContent = formatValue(avg);
+      }
+      if (peakEl) {
+        peakEl.textContent = formatValue(peakValue);
+      }
+      if (peakDateEl) {
+        peakDateEl.textContent = peakDate;
+      }
+    }
+    function openSettingsModal() {
+      tempPeriod = currentPeriod;
+      tempChartType = currentChartType;
+      tempVizMode = currentVizMode;
+      tempTheme = currentTheme;
+      tempIdealRange = currentIdealRange ? { ...currentIdealRange } : null;
+      if (!settingsModalElement) {
+        settingsModalElement = document.createElement("div");
+        settingsModalElement.innerHTML = renderSettingsModal();
+        document.body.appendChild(settingsModalElement.firstElementChild);
+        settingsModalElement = document.getElementById(`${widgetId}-settings-overlay`);
+        setupSettingsModalListeners();
+      }
+      updateSettingsModalValues();
+      updateIdealRangeSuggestionTooltip();
+      settingsModalElement?.classList.remove("hidden");
+    }
+    function closeSettingsModal() {
+      settingsModalElement?.classList.add("hidden");
+    }
+    function updateSettingsModalValues() {
+      const periodSelect = document.getElementById(`${widgetId}-settings-period`);
+      if (periodSelect) periodSelect.value = String(tempPeriod);
+      const minInput = document.getElementById(`${widgetId}-settings-range-min`);
+      const maxInput = document.getElementById(`${widgetId}-settings-range-max`);
+      const labelInput = document.getElementById(`${widgetId}-settings-range-label`);
+      if (minInput) minInput.value = tempIdealRange?.min?.toString() ?? "";
+      if (maxInput) maxInput.value = tempIdealRange?.max?.toString() ?? "";
+      if (labelInput) labelInput.value = tempIdealRange?.label ?? "";
+      updateSettingsModalTabs();
+    }
+    function updateSettingsModalTabs() {
+      document.querySelectorAll(`#${widgetId}-settings-chart-type .myio-settings-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.type === tempChartType);
+      });
+      document.querySelectorAll(`#${widgetId}-settings-viz-mode .myio-settings-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.viz === tempVizMode);
+      });
+      document.querySelectorAll(`#${widgetId}-settings-theme .myio-settings-tab`).forEach((tab) => {
+        const btn = tab;
+        btn.classList.toggle("active", btn.dataset.theme === tempTheme);
+      });
+    }
+    function updateWeekdayLabel() {
+      const checkboxes = document.querySelectorAll(`input[name="${widgetId}-weekday"]`);
+      const checked = Array.from(checkboxes).filter((cb) => cb.checked);
+      const label = document.getElementById(`${widgetId}-settings-weekday-label`);
+      if (label) {
+        if (checked.length === 0) {
+          label.textContent = "Nenhum dia";
+        } else if (checked.length === checkboxes.length) {
+          label.textContent = "Todos os dias";
+        } else {
+          label.textContent = `${checked.length} dias selecionados`;
+        }
+      }
+    }
+    function updateDayPeriodLabel() {
+      const checkboxes = document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`);
+      const checked = Array.from(checkboxes).filter((cb) => cb.checked);
+      const label = document.getElementById(`${widgetId}-settings-dayperiod-label`);
+      if (label) {
+        if (checked.length === 0) {
+          label.textContent = "Nenhum per\xEDodo";
+        } else if (checked.length === checkboxes.length) {
+          label.textContent = "Todos os per\xEDodos";
+        } else {
+          label.textContent = `${checked.length} per\xEDodos selecionados`;
+        }
+      }
+    }
+    function calculateIdealRangeSuggestion() {
+      const data = chartInstance?.getCachedData();
+      if (!data || !data.dailyTotals || data.dailyTotals.length === 0) {
+        return { min: 0, max: 0, avg: 0 };
+      }
+      const total = data.dailyTotals.reduce((a, b) => a + b, 0);
+      const avg = total / data.dailyTotals.length;
+      const min = avg * 0.85;
+      const max = avg * 1.15;
+      return {
+        min: Math.round(min * 10) / 10,
+        max: Math.round(max * 10) / 10,
+        avg: Math.round(avg * 10) / 10
+      };
+    }
+    function updateIdealRangeSuggestionTooltip() {
+      const suggestion = calculateIdealRangeSuggestion();
+      const suggestionEl = document.getElementById(`${widgetId}-settings-suggestion`);
+      const hintEl = document.getElementById(`${widgetId}-settings-range-hint`);
+      const unit = config.unit ?? "";
+      const isTemperature = config.domain === "temperature";
+      currentSuggestion = suggestion;
+      if (hintEl) {
+        if (isTemperature) {
+          hintEl.textContent = "(valores carregados do cliente)";
+        } else {
+          hintEl.textContent = "(opcional - deixe zerado para n\xE3o exibir)";
+        }
+      }
+      if (suggestionEl) {
+        if (suggestion.avg > 0) {
+          const tooltipText = `Sugest\xE3o: ${suggestion.min} - ${suggestion.max} ${unit} (m\xE9dia \xB115%). Clique para aplicar.`;
+          suggestionEl.title = tooltipText;
+          suggestionEl.style.display = "inline";
+        } else {
+          suggestionEl.style.display = "none";
+        }
+      }
+    }
+    function applyIdealRangeSuggestion() {
+      if (!currentSuggestion || currentSuggestion.min === 0 && currentSuggestion.max === 0) {
+        return;
+      }
+      const minInput = document.getElementById(`${widgetId}-settings-range-min`);
+      const maxInput = document.getElementById(`${widgetId}-settings-range-max`);
+      const labelInput = document.getElementById(`${widgetId}-settings-range-label`);
+      if (minInput) minInput.value = String(currentSuggestion.min);
+      if (maxInput) maxInput.value = String(currentSuggestion.max);
+      if (labelInput) labelInput.value = "Faixa Sugerida";
+      tempIdealRange = {
+        min: currentSuggestion.min,
+        max: currentSuggestion.max,
+        label: "Faixa Sugerida"
+      };
+    }
+    function setupSettingsModalListeners() {
+      settingsHeaderInstance?.attachListeners();
+      document.getElementById(`${widgetId}-settings-overlay`)?.addEventListener("click", (e) => {
+        if (e.target.classList.contains("myio-settings-overlay")) {
+          closeSettingsModal();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-granularity`)?.addEventListener("change", (e) => {
+        const select = e.target;
+        const dayPeriodField = document.getElementById(`${widgetId}-settings-dayperiod-field`);
+        if (dayPeriodField) {
+          dayPeriodField.style.display = select.value === "1h" ? "block" : "none";
+        }
+      });
+      document.getElementById(`${widgetId}-settings-suggestion`)?.addEventListener("click", () => {
+        applyIdealRangeSuggestion();
+      });
+      document.getElementById(`${widgetId}-settings-weekday-btn`)?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const dropdown = document.getElementById(`${widgetId}-settings-weekday-dropdown`);
+        dropdown?.classList.toggle("hidden");
+      });
+      document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+        cb.addEventListener("change", updateWeekdayLabel);
+      });
+      document.getElementById(`${widgetId}-settings-weekday-all`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateWeekdayLabel();
+      });
+      document.getElementById(`${widgetId}-settings-weekday-clear`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+          cb.checked = false;
+        });
+        updateWeekdayLabel();
+      });
+      document.getElementById(`${widgetId}-settings-dayperiod-btn`)?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const dropdown = document.getElementById(`${widgetId}-settings-dayperiod-dropdown`);
+        dropdown?.classList.toggle("hidden");
+      });
+      document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+        cb.addEventListener("change", updateDayPeriodLabel);
+      });
+      document.getElementById(`${widgetId}-settings-dayperiod-all`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateDayPeriodLabel();
+      });
+      document.getElementById(`${widgetId}-settings-dayperiod-clear`)?.addEventListener("click", () => {
+        document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+          cb.checked = false;
+        });
+        updateDayPeriodLabel();
+      });
+      document.addEventListener("click", (e) => {
+        const target = e.target;
+        const weekdayDropdown = document.getElementById(`${widgetId}-settings-weekday-dropdown`);
+        const dayperiodDropdown = document.getElementById(`${widgetId}-settings-dayperiod-dropdown`);
+        if (weekdayDropdown && !target.closest(`#${widgetId}-settings-weekday-btn`) && !target.closest(`#${widgetId}-settings-weekday-dropdown`)) {
+          weekdayDropdown.classList.add("hidden");
+        }
+        if (dayperiodDropdown && !target.closest(`#${widgetId}-settings-dayperiod-btn`) && !target.closest(`#${widgetId}-settings-dayperiod-dropdown`)) {
+          dayperiodDropdown.classList.add("hidden");
+        }
+      });
+      document.getElementById(`${widgetId}-settings-chart-type`)?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("myio-settings-tab")) {
+          tempChartType = target.dataset.type;
+          updateSettingsModalTabs();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-viz-mode`)?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("myio-settings-tab")) {
+          tempVizMode = target.dataset.viz;
+          updateSettingsModalTabs();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-theme`)?.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.classList.contains("myio-settings-tab")) {
+          tempTheme = target.dataset.theme;
+          updateSettingsModalTabs();
+        }
+      });
+      document.getElementById(`${widgetId}-settings-reset`)?.addEventListener("click", () => {
+        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`);
+        if (granularitySelect) granularitySelect.value = "1d";
+        const dayPeriodField = document.getElementById(`${widgetId}-settings-dayperiod-field`);
+        if (dayPeriodField) dayPeriodField.style.display = "none";
+        document.querySelectorAll(`input[name="${widgetId}-weekday"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateWeekdayLabel();
+        document.querySelectorAll(`input[name="${widgetId}-dayperiod"]`).forEach((cb) => {
+          cb.checked = true;
+        });
+        updateDayPeriodLabel();
+        updateSettingsModalValues();
+      });
+      document.getElementById(`${widgetId}-settings-apply`)?.addEventListener("click", async () => {
+        const minInput = document.getElementById(`${widgetId}-settings-range-min`);
+        const maxInput = document.getElementById(`${widgetId}-settings-range-max`);
+        const labelInput = document.getElementById(`${widgetId}-settings-range-label`);
+        const periodSelect = document.getElementById(`${widgetId}-settings-period`);
+        const min = parseFloat(minInput?.value || "0");
+        const max = parseFloat(maxInput?.value || "0");
+        const label = labelInput?.value || "";
+        tempPeriod = parseInt(periodSelect?.value || "7", 10);
+        if (min > 0 || max > 0) {
+          tempIdealRange = { min, max, label };
+        } else {
+          tempIdealRange = null;
+        }
+        closeSettingsModal();
+        if (tempTheme !== currentTheme) {
+          instance.setTheme(tempTheme);
+        }
+        if (tempChartType !== currentChartType) {
+          instance.setChartType(tempChartType);
+        }
+        if (tempVizMode !== currentVizMode) {
+          instance.setVizMode(tempVizMode);
+        }
+        if (JSON.stringify(tempIdealRange) !== JSON.stringify(currentIdealRange)) {
+          instance.setIdealRange(tempIdealRange);
+        }
+        if (tempPeriod !== currentPeriod) {
+          await instance.setPeriod(tempPeriod);
+        }
+      });
+    }
+    const instance = {
+      async render() {
+        containerElement = document.getElementById(config.containerId);
+        if (!containerElement) {
+          console.error(`[ConsumptionWidget] Container #${config.containerId} not found`);
+          return;
+        }
+        injectStyles();
+        containerElement.innerHTML = renderHTML();
+        setupListeners();
+        setLoading(true);
+        chartInstance = createConsumption7DaysChart({
+          ...config,
+          containerId: `${widgetId}-canvas`,
+          theme: currentTheme,
+          defaultChartType: currentChartType,
+          defaultVizMode: currentVizMode,
+          defaultPeriod: currentPeriod,
+          idealRange: currentIdealRange,
+          colors: {
+            primary: primaryColor,
+            background: `${primaryColor}20`,
+            shoppingColors: domainColors,
+            ...config.colors
+          },
+          onDataLoaded: (data) => {
+            setLoading(false);
+            updateFooterStats(data);
+            config.onDataLoaded?.(data);
+          },
+          onError: (error) => {
+            setLoading(false);
+            config.onError?.(error);
+          }
+        });
+        await chartInstance.render();
+        setLoading(false);
+      },
+      async refresh(forceRefresh = false) {
+        if (!chartInstance) return;
+        setLoading(true);
+        await chartInstance.refresh(forceRefresh);
+        setLoading(false);
+      },
+      setChartType(type) {
+        if (currentChartType === type) return;
+        currentChartType = type;
+        chartInstance?.setChartType(type);
+        updateTabStates();
+      },
+      setVizMode(mode) {
+        if (currentVizMode === mode) return;
+        currentVizMode = mode;
+        chartInstance?.setVizMode(mode);
+        updateTabStates();
+      },
+      setTheme(theme) {
+        if (currentTheme === theme) return;
+        currentTheme = theme;
+        chartInstance?.setTheme(theme);
+        const widget = document.getElementById(widgetId);
+        if (widget) {
+          widget.classList.toggle("dark", theme === "dark");
+        }
+        updateStyles();
+      },
+      async setPeriod(days) {
+        if (currentPeriod === days) return;
+        currentPeriod = days;
+        updateTitle();
+        setLoading(true);
+        await chartInstance?.setPeriod(days);
+        setLoading(false);
+      },
+      setIdealRange(range) {
+        currentIdealRange = range;
+        chartInstance?.setIdealRange(range);
+      },
+      getChart() {
+        return chartInstance;
+      },
+      // Alias for backwards compatibility with createConsumption7DaysChart API
+      getChartInstance() {
+        return chartInstance?.getChartInstance?.() ?? null;
+      },
+      getCachedData() {
+        return chartInstance?.getCachedData() ?? null;
+      },
+      exportCSV(filename) {
+        chartInstance?.exportCSV(filename);
+      },
+      destroy() {
+        chartInstance?.destroy();
+        chartInstance = null;
+        if (styleElement) {
+          styleElement.remove();
+          styleElement = null;
+        }
+        settingsHeaderInstance?.destroy();
+        settingsHeaderInstance = null;
+        if (settingsModalElement) {
+          settingsModalElement.remove();
+          settingsModalElement = null;
+        }
+        if (containerElement) {
+          containerElement.innerHTML = "";
+          containerElement = null;
+        }
+      }
+    };
+    return instance;
+  }
+
   // src/components/ExportData/index.ts
-  var DEFAULT_COLORS3 = {
+  var DEFAULT_COLORS4 = {
     primary: "#3e1a7d",
     // MyIO purple
     secondary: "#6b4c9a",
@@ -23981,9 +25250,9 @@ ${rangeText}`;
       footerText
     } = params;
     const colors = {
-      ...DEFAULT_COLORS3,
+      ...DEFAULT_COLORS4,
       ...colorsPallet,
-      chartColors: colorsPallet?.chartColors || DEFAULT_COLORS3.chartColors
+      chartColors: colorsPallet?.chartColors || DEFAULT_COLORS4.chartColors
     };
     return {
       domain,
@@ -24086,7 +25355,7 @@ ${rangeText}`;
     }
     return instance;
   }
-  var EXPORT_DEFAULT_COLORS = DEFAULT_COLORS3;
+  var EXPORT_DEFAULT_COLORS = DEFAULT_COLORS4;
   var EXPORT_DOMAIN_ICONS = DOMAIN_ICONS;
   var EXPORT_DOMAIN_LABELS = DOMAIN_LABELS;
   var EXPORT_DOMAIN_UNITS = DOMAIN_UNITS;
@@ -24127,6 +25396,7 @@ ${rangeText}`;
   exports.clearAllAuthCaches = clearAllAuthCaches;
   exports.connectionStatusIcons = connectionStatusIcons;
   exports.createConsumption7DaysChart = createConsumption7DaysChart;
+  exports.createConsumptionChartWidget = createConsumptionChartWidget;
   exports.createConsumptionModal = createConsumptionModal;
   exports.createDateRangePicker = createDateRangePicker2;
   exports.createInputDateRangePickerInsideDIV = createInputDateRangePickerInsideDIV;