web-mojo 2.1.1111 → 2.2.1

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

@@ -2544,7 +2544,7 @@ class MetricsMiniChart extends MiniChart {
     this.isLoading = false;
     this.lastFetch = null;
     this.refreshInterval = options.refreshInterval;
-    if (!this.dateStart || !this.dateEnd) {
+    if ((!this.dateStart || !this.dateEnd) && this.defaultDateRange) {
       this.setQuickRange(this.defaultDateRange);
     }
     if (this.slugs && !Array.isArray(this.slugs)) {
@@ -2684,6 +2684,81 @@ 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;
+  }
+  formatDateForInput(date) {
+    if (!date) return "";
+    if (typeof date === "string" && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      return date;
+    }
+    const d = date instanceof Date ? date : new Date(date);
+    if (isNaN(d.getTime())) return "";
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+  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.formatDateForInput(this.dateStart)}" />
+        <input type="date" class="form-control form-control-sm mb-2" data-setting="dateEnd" value="${this.formatDateForInput(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,7 +2774,7 @@ class MetricsMiniChartWidget extends View {
     this.showSettings = options.showSettings || false;
     this.settingsKey = options.settingsKey || null;
     this.showDateRange = options.showDateRange || false;
-    this._pendingSettings = null;
+    this.showRefresh = options.showRefresh !== false;
     this.showTrending = !!options.showTrending;
     this.trendRange = options.trendRange ?? null;
     this.trendOffset = options.trendOffset ?? 0;
@@ -2715,7 +2790,6 @@ class MetricsMiniChartWidget extends View {
     this.trendingLabel = "";
     this.chartOptions = {
       endpoint: options.endpoint,
-      // defaults inside MetricsMiniChart
       account: options.account,
       granularity: options.granularity,
       slugs: options.slugs,
@@ -2724,7 +2798,6 @@ class MetricsMiniChartWidget extends View {
       dateEnd: options.dateEnd,
       defaultDateRange: options.defaultDateRange,
       refreshInterval: options.refreshInterval,
-      // Visuals and interactions
       chartType: options.chartType || "line",
       showTooltip: options.showTooltip !== void 0 ? options.showTooltip : true,
       showXAxis: options.showXAxis || false,
@@ -2736,19 +2809,16 @@ class MetricsMiniChartWidget extends View {
       smoothing: options.smoothing ?? 0.3,
       strokeWidth: options.strokeWidth,
       barGap: options.barGap,
-      // Optional formatters and templates
       valueFormat: options.valueFormat,
       labelFormat: options.labelFormat,
       tooltipFormatter: options.tooltipFormatter,
       tooltipTemplate: options.tooltipTemplate,
-      // Crosshair and axis styling overrides (optional passthroughs)
       showCrosshair: options.showCrosshair,
       crosshairColor: options.crosshairColor,
       crosshairWidth: options.crosshairWidth,
       xAxisColor: options.xAxisColor,
       xAxisWidth: options.xAxisWidth,
       xAxisDashed: options.xAxisDashed,
-      // Other rendering params
       padding: options.padding,
       minValue: options.minValue,
       maxValue: options.maxValue,
@@ -2765,7 +2835,6 @@ class MetricsMiniChartWidget extends View {
     this.chart = new MetricsMiniChart({
       ...this.chartOptions,
       containerId: "chart"
-      // mount inside our template container
     });
     this.addChild(this.chart);
     this.header = new View({
@@ -2774,7 +2843,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,17 +2852,23 @@ 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);
+    if (this.showSettings) {
+      this.settingsView = new SettingsView({
+        containerId: "settings",
+        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.addChild(this.settingsView);
+    }
     if (this.chart?.on) {
       this.chart.on("metrics:loaded", this.onChildMetricsLoaded, this);
     }
@@ -2801,17 +2876,12 @@ class MetricsMiniChartWidget extends View {
   }
   async onAfterRender() {
     await super.onAfterRender();
-    if (this.showSettings) {
+    if (this.showSettings && this.settingsView) {
       this._initSettingsPopover();
     }
   }
   onChildMetricsLoaded() {
     this.updateFromChartData({ render: true });
-    if (this.showSettings && this.isMounted()) {
-      setTimeout(() => {
-        this._initSettingsPopover();
-      }, 100);
-    }
   }
   updateFromChartData({ render = true } = {}) {
     const values = Array.isArray(this.chart?.data) ? this.chart.data : null;
@@ -2895,10 +2965,6 @@ class MetricsMiniChartWidget extends View {
       this.header.render();
     }
   }
-  /**
-   * Update labels based on current granularity
-   * @private
-   */
   _updateGranularityLabels() {
     const granularity = this.chartOptions.granularity || "days";
     const nowLabels = {
@@ -2927,10 +2993,25 @@ 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-action="toggle-settings" 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>
+          <div data-container="settings" style="display: none;"></div>
         </div>
       </div>
     `;
@@ -2946,263 +3027,131 @@ class MetricsMiniChartWidget extends View {
     await super.onBeforeDestroy();
   }
   /**
-   * Initialize settings popover
+   * Toggle settings popover
+   */
+  async onActionToggleSettings(event, element) {
+    if (!this._settingsPopover) {
+      this._initSettingsPopover();
+    }
+    this._settingsPopover?.toggle();
+  }
+  /**
+   * Initialize settings popover (once)
    * @private
    */
   _initSettingsPopover() {
-    const button = this.element.querySelector("[data-settings-trigger]");
-    if (!button) {
-      console.warn("MetricsMiniChartWidget: Settings button not found");
-      return;
-    }
-    if (this._settingsPopover) {
-      try {
-        this._settingsPopover.dispose();
-      } catch (e) {
-        console.warn("Error disposing popover:", e);
-      }
-      this._settingsPopover = null;
-    }
-    const content = this._getSettingsContent();
+    const button = this.element.querySelector('[data-action="toggle-settings"]');
+    if (!button || !this.settingsView || !this.settingsView.element) return;
+    if (this._settingsPopover) return;
     this._settingsPopover = new bootstrap.Popover(button, {
-      content,
+      content: this.settingsView.element,
       html: true,
       placement: "bottom",
-      trigger: "click",
+      trigger: "manual",
       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
+   * Handle settings apply
    * @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>
-    `;
-  }
-  /**
-   * Attach event handlers to settings controls in popover
-   * @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();
       await this.chart.refresh();
-      setTimeout(() => {
-        if (this.showSettings && this.isMounted()) {
-          this._initSettingsPopover();
-        }
-      }, 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
-   * @private
-   */
   _loadSettings() {
     if (!this.settingsKey) return;
     try {
@@ -3226,10 +3175,6 @@ class MetricsMiniChartWidget extends View {
       console.error("Failed to load chart settings:", error);
     }
   }
-  /**
-   * Save settings to localStorage
-   * @private
-   */
   _saveSettings() {
     if (!this.settingsKey) return;
     try {
@@ -3254,4 +3199,4 @@ export {
   MetricsMiniChart as b,
   MetricsMiniChartWidget as c
 };
-//# sourceMappingURL=MetricsMiniChartWidget-B_AUB4YG.js.map
+//# sourceMappingURL=MetricsMiniChartWidget-BHrvOb3y.js.map