web-mojo 2.1.1111 → 2.2.0

package/dist/chunks/{MetricsMiniChartWidget-B_AUB4YG.js → MetricsMiniChartWidget-DaP5lSll.js}

@@ -2684,6 +2684,69 @@ class MetricsMiniChart extends MiniChart {
     await super.onBeforeDestroy();
   }
 }
+class SettingsView extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "metrics-chart-settings-content",
+      ...options
+    });
+    this.granularity = options.granularity;
+    this.chartType = options.chartType;
+    this.dateStart = options.dateStart;
+    this.dateEnd = options.dateEnd;
+    this.showDateRange = options.showDateRange;
+  }
+  getTemplate() {
+    return `
+      <div style="min-width: 220px;">
+        <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
+          <h6 class="mb-0">Chart Settings</h6>
+          <button type="button" class="btn-close btn-close-sm" data-action="close" aria-label="Close"></button>
+        </div>
+
+        <label class="form-label small mb-1">Granularity</label>
+        <select class="form-select form-select-sm mb-2" data-setting="granularity">
+          <option value="hours" ${this.granularity === "hours" ? "selected" : ""}>Hours</option>
+          <option value="days" ${this.granularity === "days" ? "selected" : ""}>Days</option>
+          <option value="weeks" ${this.granularity === "weeks" ? "selected" : ""}>Weeks</option>
+          <option value="months" ${this.granularity === "months" ? "selected" : ""}>Months</option>
+          <option value="years" ${this.granularity === "years" ? "selected" : ""}>Years</option>
+        </select>
+        
+        <label class="form-label small mb-1">Chart Type</label>
+        <select class="form-select form-select-sm mb-2" data-setting="chartType">
+          <option value="line" ${this.chartType === "line" ? "selected" : ""}>Line</option>
+          <option value="bar" ${this.chartType === "bar" ? "selected" : ""}>Bar</option>
+        </select>
+        
+        ${this.showDateRange ? `
+        <label class="form-label small mb-1">Date Range</label>
+        <input type="date" class="form-control form-control-sm mb-1" data-setting="dateStart" value="${this.dateStart || ""}" />
+        <input type="date" class="form-control form-control-sm mb-2" data-setting="dateEnd" value="${this.dateEnd || ""}" />
+        ` : ""}
+        
+        <div class="d-grid gap-2">
+          <button type="button" class="btn btn-sm btn-primary" data-action="apply">Apply</button>
+          <button type="button" class="btn btn-sm btn-outline-secondary" data-action="cancel">Cancel</button>
+        </div>
+      </div>
+    `;
+  }
+  async onActionApply() {
+    const granularity = this.element.querySelector('[data-setting="granularity"]')?.value;
+    const chartType = this.element.querySelector('[data-setting="chartType"]')?.value;
+    const dateStart = this.element.querySelector('[data-setting="dateStart"]')?.value;
+    const dateEnd = this.element.querySelector('[data-setting="dateEnd"]')?.value;
+    this.emit("settings:apply", { granularity, chartType, dateStart, dateEnd });
+  }
+  async onActionCancel() {
+    this.emit("settings:cancel");
+  }
+  async onActionClose() {
+    this.emit("settings:cancel");
+  }
+}
 class MetricsMiniChartWidget extends View {
   constructor(options = {}) {
     super({
@@ -2699,6 +2762,7 @@ class MetricsMiniChartWidget extends View {
     this.showSettings = options.showSettings || false;
     this.settingsKey = options.settingsKey || null;
     this.showDateRange = options.showDateRange || false;
+    this.showRefresh = options.showRefresh !== false;
     this._pendingSettings = null;
     this.showTrending = !!options.showTrending;
     this.trendRange = options.trendRange ?? null;
@@ -2774,7 +2838,7 @@ class MetricsMiniChartWidget extends View {
       icon: this.icon,
       template: `
         <div class="d-flex justify-content-between align-items-start mb-2">
-          <div class="me-3 flex-grow-1">
+          <div class="flex-grow-1">
             <h6 class="card-title mb-1" style="${this.textColor ? `color: ${this.textColor}` : ""}">${this.title}</h6>
             <div class="metrics-mini-chart-subtitle" style="${this.textColor ? `color: ${this.textColor}` : ""}">${this.subtitle}</div>
               {{#hasTrending}}
@@ -2783,14 +2847,7 @@ class MetricsMiniChartWidget extends View {
                 </div>
               {{/hasTrending}}
           </div>
-          <div class="d-flex align-items-center gap-2">
-            ${this.showSettings ? `
-              <button class="btn btn-link p-0 text-muted metrics-settings-btn" type="button" data-settings-trigger style="${this.textColor ? `color: ${this.textColor} !important` : ""}">
-                <i class="bi bi-gear-fill" style="font-size: 1.1rem;"></i>
-              </button>
-            ` : ""}
-            ${this.icon ? `<i class="${this.icon} fs-4 flex-shrink-0" aria-hidden="true" style="${this.textColor ? `color: ${this.textColor}` : ""}"></i>` : ""}
-          </div>
+          ${this.icon ? `<i class="${this.icon} fs-4 flex-shrink-0" aria-hidden="true" style="${this.textColor ? `color: ${this.textColor}` : ""}"></i>` : ""}
         </div>`
     });
     this.addChild(this.header);
@@ -2807,11 +2864,12 @@ class MetricsMiniChartWidget extends View {
   }
   onChildMetricsLoaded() {
     this.updateFromChartData({ render: true });
-    if (this.showSettings && this.isMounted()) {
+    if (this.showSettings && this.isMounted() && !this._skipNextPopoverInit) {
       setTimeout(() => {
         this._initSettingsPopover();
       }, 100);
     }
+    this._skipNextPopoverInit = false;
   }
   updateFromChartData({ render = true } = {}) {
     const values = Array.isArray(this.chart?.data) ? this.chart.data : null;
@@ -2927,7 +2985,21 @@ class MetricsMiniChartWidget extends View {
   }
   async getTemplate() {
     return `
-      <div class="card h-100 shadow-sm" style="${this.cardStyle}">
+      <div class="card h-100 shadow-sm" style="${this.cardStyle}; position: relative;">
+        ${this.showRefresh || this.showSettings ? `
+        <div class="metrics-chart-actions">
+          ${this.showRefresh ? `
+            <button class="btn btn-link p-0 text-muted metrics-refresh-btn" type="button" data-action="refresh-chart" style="${this.textColor ? `color: ${this.textColor} !important` : ""}">
+              <i class="bi bi-arrow-clockwise"></i>
+            </button>
+          ` : ""}
+          ${this.showSettings ? `
+            <button class="btn btn-link p-0 text-muted metrics-settings-btn" type="button" data-settings-trigger style="${this.textColor ? `color: ${this.textColor} !important` : ""}">
+              <i class="bi bi-gear-fill"></i>
+            </button>
+          ` : ""}
+        </div>
+        ` : ""}
         <div class="card-body p-3">
           <div data-container="chart-header"></div>
           <div data-container="chart"></div>
@@ -2936,6 +3008,10 @@ class MetricsMiniChartWidget extends View {
     `;
   }
   async onBeforeDestroy() {
+    if (this._settingsView) {
+      await this._settingsView.destroy();
+      this._settingsView = null;
+    }
     if (this._settingsPopover) {
       this._settingsPopover.dispose();
       this._settingsPopover = null;
@@ -2951,199 +3027,113 @@ class MetricsMiniChartWidget extends View {
    */
   _initSettingsPopover() {
     const button = this.element.querySelector("[data-settings-trigger]");
-    if (!button) {
-      console.warn("MetricsMiniChartWidget: Settings button not found");
-      return;
+    if (!button) return;
+    if (this._settingsView) {
+      this._settingsView.destroy();
+      this._settingsView = null;
     }
     if (this._settingsPopover) {
-      try {
-        this._settingsPopover.dispose();
-      } catch (e) {
-        console.warn("Error disposing popover:", e);
-      }
+      this._settingsPopover.dispose();
       this._settingsPopover = null;
     }
-    const content = this._getSettingsContent();
+    if (this._popoverShownHandler) {
+      button.removeEventListener("shown.bs.popover", this._popoverShownHandler);
+    }
+    this._settingsView = new SettingsView({
+      granularity: this.chartOptions.granularity,
+      chartType: this.chartOptions.chartType,
+      dateStart: this.chartOptions.dateStart,
+      dateEnd: this.chartOptions.dateEnd,
+      showDateRange: this.showDateRange
+    });
+    this._settingsView.on("settings:apply", (data) => this._handleSettingsApply(data));
+    this._settingsView.on("settings:cancel", () => this._handleSettingsCancel());
+    this._settingsView.render();
+    this._popoverShownHandler = () => {
+      const popoverBody = document.querySelector(".popover.show .popover-body");
+      if (popoverBody && this._settingsView) {
+        popoverBody.innerHTML = "";
+        popoverBody.appendChild(this._settingsView.element);
+        this._settingsView.bindEvents();
+      }
+    };
     this._settingsPopover = new bootstrap.Popover(button, {
-      content,
+      content: "<div>Loading...</div>",
       html: true,
       placement: "bottom",
       trigger: "click",
       sanitize: false,
       customClass: "metrics-chart-settings-popover"
     });
-    button.addEventListener("shown.bs.popover", () => {
-      setTimeout(() => {
-        this._attachSettingsHandlers();
-      }, 10);
-    });
-    button.addEventListener("inserted.bs.popover", () => {
-      this._attachSettingsHandlers();
-    });
-  }
-  /**
-   * Generate settings popover HTML content
-   * @private
-   */
-  _getSettingsContent() {
-    return `
-      <div class="metrics-chart-settings-content" style="min-width: 220px;">
-        <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
-          <h6 class="mb-0">Chart Settings</h6>
-          <button type="button" class="btn-close btn-close-sm" data-setting-action="close" aria-label="Close"></button>
-        </div>
-
-        <label class="form-label small mb-1">Granularity</label>
-        <select class="form-select form-select-sm mb-2" data-setting="granularity">
-          <option value="hours" ${this.chartOptions.granularity === "hours" ? "selected" : ""}>Hours</option>
-          <option value="days" ${this.chartOptions.granularity === "days" ? "selected" : ""}>Days</option>
-          <option value="weeks" ${this.chartOptions.granularity === "weeks" ? "selected" : ""}>Weeks</option>
-          <option value="months" ${this.chartOptions.granularity === "months" ? "selected" : ""}>Months</option>
-          <option value="years" ${this.chartOptions.granularity === "years" ? "selected" : ""}>Years</option>
-        </select>
-
-        <label class="form-label small mb-1">Chart Type</label>
-        <select class="form-select form-select-sm mb-2" data-setting="chartType">
-          <option value="line" ${this.chartOptions.chartType === "line" ? "selected" : ""}>Line</option>
-          <option value="bar" ${this.chartOptions.chartType === "bar" ? "selected" : ""}>Bar</option>
-        </select>
-
-        ${this.showDateRange ? `
-        <label class="form-label small mb-1">Date Range</label>
-        <input type="date" class="form-control form-control-sm mb-1" data-setting="dateStart" value="${this.chartOptions.dateStart || ""}" />
-        <input type="date" class="form-control form-control-sm mb-2" data-setting="dateEnd" value="${this.chartOptions.dateEnd || ""}" />
-        ` : ""}
-        
-        <div class="d-grid gap-2">
-          <button type="button" class="btn btn-sm btn-primary" data-setting-action="apply">Apply</button>
-          <button type="button" class="btn btn-sm btn-outline-secondary" data-setting-action="cancel">Cancel</button>
-        </div>
-      </div>
-    `;
+    button.addEventListener("shown.bs.popover", this._popoverShownHandler);
   }
   /**
-   * Attach event handlers to settings controls in popover
+   * Handle settings apply
    * @private
    */
-  _attachSettingsHandlers() {
-    let popoverElement = document.querySelector(".metrics-chart-settings-popover");
-    if (!popoverElement) {
-      popoverElement = document.querySelector(".popover.metrics-chart-settings-popover");
-    }
-    if (!popoverElement) {
-      const popovers = document.querySelectorAll(".popover.show");
-      if (popovers.length > 0) {
-        popoverElement = popovers[popovers.length - 1];
-      }
-    }
-    if (!popoverElement) {
-      console.warn("MetricsMiniChartWidget: Could not find popover element");
-      return;
-    }
-    this._pendingSettings = {
-      granularity: this.chartOptions.granularity,
-      chartType: this.chartOptions.chartType,
-      dateStart: this.chartOptions.dateStart,
-      dateEnd: this.chartOptions.dateEnd
-    };
-    const granularitySelect = popoverElement.querySelector('[data-setting="granularity"]');
-    if (granularitySelect) {
-      granularitySelect.addEventListener("change", (e) => {
-        this._pendingSettings.granularity = e.target.value;
-      });
-    }
-    const chartTypeSelect = popoverElement.querySelector('[data-setting="chartType"]');
-    if (chartTypeSelect) {
-      chartTypeSelect.addEventListener("change", (e) => {
-        this._pendingSettings.chartType = e.target.value;
-      });
-    }
-    if (this.showDateRange) {
-      const dateStartInput = popoverElement.querySelector('[data-setting="dateStart"]');
-      if (dateStartInput) {
-        dateStartInput.addEventListener("change", (e) => {
-          this._pendingSettings.dateStart = e.target.value;
-        });
-      }
-      const dateEndInput = popoverElement.querySelector('[data-setting="dateEnd"]');
-      if (dateEndInput) {
-        dateEndInput.addEventListener("change", (e) => {
-          this._pendingSettings.dateEnd = e.target.value;
-        });
-      }
-    }
-    const applyButton = popoverElement.querySelector('[data-setting-action="apply"]');
-    if (applyButton) {
-      applyButton.addEventListener("click", async () => {
-        await this._applyPendingSettings();
-        if (this._settingsPopover) {
-          this._settingsPopover.hide();
-        }
-      });
-    }
-    const cancelButton = popoverElement.querySelector('[data-setting-action="cancel"]');
-    if (cancelButton) {
-      cancelButton.addEventListener("click", () => {
-        this._pendingSettings = null;
-        if (this._settingsPopover) {
-          this._settingsPopover.hide();
-        }
-      });
-    }
-    const closeButton = popoverElement.querySelector('[data-setting-action="close"]');
-    if (closeButton) {
-      closeButton.addEventListener("click", () => {
-        this._pendingSettings = null;
-        if (this._settingsPopover) {
-          this._settingsPopover.hide();
-        }
-      });
+  async _handleSettingsApply(data) {
+    if (this._settingsPopover) {
+      this._settingsPopover.hide();
     }
-  }
-  /**
-   * Apply all pending settings changes
-   * @private
-   */
-  async _applyPendingSettings() {
-    if (!this._pendingSettings) return;
     let hasChanges = false;
     let granularityChanged = false;
     let datesExplicitlySet = false;
-    if (this._pendingSettings.dateStart !== this.chartOptions.dateStart || this._pendingSettings.dateEnd !== this.chartOptions.dateEnd) {
+    if (data.dateStart && data.dateStart !== this.chartOptions.dateStart || data.dateEnd && data.dateEnd !== this.chartOptions.dateEnd) {
       datesExplicitlySet = true;
     }
-    if (this._pendingSettings.granularity !== this.chartOptions.granularity) {
-      this.chartOptions.granularity = this._pendingSettings.granularity;
-      this.chart.granularity = this._pendingSettings.granularity;
+    if (data.granularity && data.granularity !== this.chartOptions.granularity) {
+      this.chartOptions.granularity = data.granularity;
+      this.chart.granularity = data.granularity;
       granularityChanged = true;
       hasChanges = true;
     }
-    if (this._pendingSettings.chartType !== this.chartOptions.chartType) {
-      this.chartOptions.chartType = this._pendingSettings.chartType;
-      this.chart.chartType = this._pendingSettings.chartType;
+    if (data.chartType && data.chartType !== this.chartOptions.chartType) {
+      this.chartOptions.chartType = data.chartType;
+      this.chart.chartType = data.chartType;
       hasChanges = true;
     }
     if (datesExplicitlySet) {
-      this.chartOptions.dateStart = this._pendingSettings.dateStart;
-      this.chart.dateStart = this._pendingSettings.dateStart;
-      this.chartOptions.dateEnd = this._pendingSettings.dateEnd;
-      this.chart.dateEnd = this._pendingSettings.dateEnd;
+      if (data.dateStart) {
+        this.chartOptions.dateStart = new Date(data.dateStart);
+        this.chart.dateStart = new Date(data.dateStart);
+      }
+      if (data.dateEnd) {
+        this.chartOptions.dateEnd = new Date(data.dateEnd);
+        this.chart.dateEnd = new Date(data.dateEnd);
+      }
       hasChanges = true;
-    } else if (granularityChanged && this.chart.setQuickRange) {
-      const rangeMap = {
-        "hours": "24h",
-        "days": "30d",
-        "weeks": "12w",
-        "months": "12m",
-        "years": "5y"
-      };
-      const defaultRange = rangeMap[this._pendingSettings.granularity] || "30d";
-      this.chart.setQuickRange(defaultRange);
-      this.chartOptions.dateStart = this.chart.dateStart;
-      this.chartOptions.dateEnd = this.chart.dateEnd;
+    } else if (granularityChanged) {
+      const endDate = /* @__PURE__ */ new Date();
+      let startDate;
+      switch (data.granularity) {
+        case "hours":
+          startDate = new Date(endDate.getTime() - 24 * 60 * 60 * 1e3);
+          break;
+        case "days":
+          startDate = new Date(endDate.getTime() - 30 * 24 * 60 * 60 * 1e3);
+          break;
+        case "weeks":
+          startDate = new Date(endDate.getTime() - 12 * 7 * 24 * 60 * 60 * 1e3);
+          break;
+        case "months":
+          startDate = new Date(endDate);
+          startDate.setMonth(startDate.getMonth() - 12);
+          break;
+        case "years":
+          startDate = new Date(endDate);
+          startDate.setFullYear(startDate.getFullYear() - 5);
+          break;
+        default:
+          startDate = new Date(endDate.getTime() - 30 * 24 * 60 * 60 * 1e3);
+      }
+      this.chartOptions.dateStart = startDate;
+      this.chart.dateStart = startDate;
+      this.chartOptions.dateEnd = endDate;
+      this.chart.dateEnd = endDate;
     }
     if (hasChanges) {
       this._saveSettings();
+      this._skipNextPopoverInit = true;
       await this.chart.refresh();
       setTimeout(() => {
         if (this.showSettings && this.isMounted()) {
@@ -3151,53 +3141,37 @@ class MetricsMiniChartWidget extends View {
         }
       }, 150);
     }
-    this._pendingSettings = null;
-  }
-  refresh() {
-    if (this.chart) {
-      if (this.account) this.chart.account = this.account;
-      this.chart.refresh();
-    }
-  }
-  /**
-   * Handle granularity change
-   */
-  async onActionChangeGranularity(event, element) {
-    const newGranularity = element.value;
-    this.chartOptions.granularity = newGranularity;
-    this.chart.granularity = newGranularity;
-    this._saveSettings();
-    await this.chart.refresh();
   }
   /**
-   * Handle chart type change
+   * Handle settings cancel
+   * @private
    */
-  async onActionChangeChartType(event, element) {
-    const newChartType = element.value;
-    this.chartOptions.chartType = newChartType;
-    this.chart.chartType = newChartType;
-    this._saveSettings();
-    await this.chart.refresh();
+  _handleSettingsCancel() {
+    if (this._settingsPopover) {
+      this._settingsPopover.hide();
+    }
   }
   /**
-   * Handle date start change
+   * Handle refresh button click
    */
-  async onActionChangeDateStart(event, element) {
-    const newDateStart = element.value;
-    this.chartOptions.dateStart = newDateStart;
-    this.chart.dateStart = newDateStart;
-    this._saveSettings();
-    await this.chart.refresh();
+  async onActionRefreshChart(event, element) {
+    const icon = element.querySelector("i");
+    if (icon) {
+      icon.classList.add("spin");
+    }
+    if (this.chart) {
+      if (this.account) this.chart.account = this.account;
+      await this.chart.refresh();
+    }
+    if (icon) {
+      icon.classList.remove("spin");
+    }
   }
-  /**
-   * Handle date end change
-   */
-  async onActionChangeDateEnd(event, element) {
-    const newDateEnd = element.value;
-    this.chartOptions.dateEnd = newDateEnd;
-    this.chart.dateEnd = newDateEnd;
-    this._saveSettings();
-    await this.chart.refresh();
+  refresh() {
+    if (this.chart) {
+      if (this.account) this.chart.account = this.account;
+      this.chart.refresh();
+    }
   }
   /**
    * Load settings from localStorage
@@ -3254,4 +3228,4 @@ export {
   MetricsMiniChart as b,
   MetricsMiniChartWidget as c
 };
-//# sourceMappingURL=MetricsMiniChartWidget-B_AUB4YG.js.map
+//# sourceMappingURL=MetricsMiniChartWidget-DaP5lSll.js.map