myio-js-library 0.1.162 → 0.1.164

package/dist/index.js

@@ -23149,7 +23149,7 @@ function createConsumption7DaysChart(config) {
     const isTemperature = config.domain === "temperature";
     let datasets;
     if (currentVizMode === "separate" && data.shoppingData && data.shoppingNames) {
-      const shoppingColors = [
+      const shoppingColors = colors.shoppingColors || [
         "#2563eb",
         "#16a34a",
         "#ea580c",
@@ -23834,8 +23834,1279 @@ function createConsumptionModal(config) {
   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 isLoading = false;
+  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) {
+    isLoading = 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",
@@ -24163,9 +25434,9 @@ function buildTemplateExport(params) {
     footerText
   } = params;
   const colors = {
-    ...DEFAULT_COLORS3,
+    ...DEFAULT_COLORS4,
     ...colorsPallet,
-    chartColors: colorsPallet?.chartColors || DEFAULT_COLORS3.chartColors
+    chartColors: colorsPallet?.chartColors || DEFAULT_COLORS4.chartColors
   };
   return {
     domain,
@@ -24268,7 +25539,7 @@ function myioExportData(data, config, options) {
   }
   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;
@@ -24310,6 +25581,7 @@ export {
   clearAllAuthCaches,
   connectionStatusIcons,
   createConsumption7DaysChart,
+  createConsumptionChartWidget,
   createConsumptionModal,
   createDateRangePicker2 as createDateRangePicker,
   createInputDateRangePickerInsideDIV,