web-mojo 2.2.0 → 2.2.1

package/dist/chunks/{MetricsMiniChartWidget-DaP5lSll.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)) {
@@ -2697,6 +2697,18 @@ class SettingsView extends View {
     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;">
@@ -2722,8 +2734,8 @@ class SettingsView extends View {
         
         ${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 || ""}" />
+        <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">
@@ -2763,7 +2775,6 @@ class MetricsMiniChartWidget extends View {
     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;
     this.trendOffset = options.trendOffset ?? 0;
@@ -2779,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,
@@ -2788,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,
@@ -2800,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,
@@ -2829,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({
@@ -2851,6 +2856,19 @@ class MetricsMiniChartWidget extends View {
         </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);
     }
@@ -2858,18 +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() && !this._skipNextPopoverInit) {
-      setTimeout(() => {
-        this._initSettingsPopover();
-      }, 100);
-    }
-    this._skipNextPopoverInit = false;
   }
   updateFromChartData({ render = true } = {}) {
     const values = Array.isArray(this.chart?.data) ? this.chart.data : null;
@@ -2953,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 = {
@@ -2994,7 +3002,7 @@ class MetricsMiniChartWidget extends View {
             </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` : ""}">
+            <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>
           ` : ""}
@@ -3003,15 +3011,12 @@ class MetricsMiniChartWidget extends View {
         <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>
     `;
   }
   async onBeforeDestroy() {
-    if (this._settingsView) {
-      await this._settingsView.destroy();
-      this._settingsView = null;
-    }
     if (this._settingsPopover) {
       this._settingsPopover.dispose();
       this._settingsPopover = null;
@@ -3022,50 +3027,30 @@ 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) return;
-    if (this._settingsView) {
-      this._settingsView.destroy();
-      this._settingsView = null;
-    }
-    if (this._settingsPopover) {
-      this._settingsPopover.dispose();
-      this._settingsPopover = null;
-    }
-    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();
-      }
-    };
+    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: "<div>Loading...</div>",
+      content: this.settingsView.element,
       html: true,
       placement: "bottom",
-      trigger: "click",
+      trigger: "manual",
       sanitize: false,
       customClass: "metrics-chart-settings-popover"
     });
-    button.addEventListener("shown.bs.popover", this._popoverShownHandler);
   }
   /**
    * Handle settings apply
@@ -3133,13 +3118,7 @@ class MetricsMiniChartWidget extends View {
     }
     if (hasChanges) {
       this._saveSettings();
-      this._skipNextPopoverInit = true;
       await this.chart.refresh();
-      setTimeout(() => {
-        if (this.showSettings && this.isMounted()) {
-          this._initSettingsPopover();
-        }
-      }, 150);
     }
   }
   /**
@@ -3173,10 +3152,6 @@ class MetricsMiniChartWidget extends View {
       this.chart.refresh();
     }
   }
-  /**
-   * Load settings from localStorage
-   * @private
-   */
   _loadSettings() {
     if (!this.settingsKey) return;
     try {
@@ -3200,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 {
@@ -3228,4 +3199,4 @@ export {
   MetricsMiniChart as b,
   MetricsMiniChartWidget as c
 };
-//# sourceMappingURL=MetricsMiniChartWidget-DaP5lSll.js.map
+//# sourceMappingURL=MetricsMiniChartWidget-BHrvOb3y.js.map