web-mojo 2.1.1109 → 2.1.1110

package/dist/chunks/{MetricsMiniChartWidget-Dan8l57G.js → MetricsMiniChartWidget-bmnV82d1.js}

@@ -1,6 +1,6 @@
-import { D as Dialog } from "./Dialog-CXOsYNLf.js";
-import { V as View, d as dataFormatter } from "./Rest-C3KvOEeY.js";
-import { W as WebSocketClient } from "./WebSocketClient-CGQLSIgP.js";
+import { D as Dialog } from "./Dialog-D4DsB-N1.js";
+import { V as View, d as dataFormatter } from "./Rest-C3fPzCIA.js";
+import { W as WebSocketClient } from "./WebSocketClient-CkAL55qy.js";
 class BaseChart extends View {
   constructor(options = {}) {
     super({
@@ -2696,6 +2696,10 @@ class MetricsMiniChartWidget extends View {
     this.subtitle = options.subtitle || "";
     this.background = options.background || null;
     this.textColor = options.textColor || null;
+    this.showSettings = options.showSettings || false;
+    this.settingsKey = options.settingsKey || null;
+    this.showDateRange = options.showDateRange || false;
+    this._pendingSettings = null;
     this.showTrending = !!options.showTrending;
     this.trendRange = options.trendRange ?? null;
     this.trendOffset = options.trendOffset ?? 0;
@@ -2706,7 +2710,7 @@ class MetricsMiniChartWidget extends View {
     this.trendingPercent = 0;
     this.trendingUp = null;
     this.hasTrending = false;
-    this.trendingClass = "";
+    this.trendingClass = "metrics-mini-chart-trending-text";
     this.trendingIcon = "";
     this.trendingLabel = "";
     this.chartOptions = {
@@ -2755,6 +2759,9 @@ class MetricsMiniChartWidget extends View {
     };
   }
   async onInit() {
+    if (this.showSettings && this.settingsKey) {
+      this._loadSettings();
+    }
     this.chart = new MetricsMiniChart({
       ...this.chartOptions,
       containerId: "chart"
@@ -2767,16 +2774,23 @@ class MetricsMiniChartWidget extends View {
       icon: this.icon,
       template: `
         <div class="d-flex justify-content-between align-items-start mb-2">
-          <div class="me-3">
+          <div class="me-3 flex-grow-1">
             <h6 class="card-title mb-1" style="${this.textColor ? `color: ${this.textColor}` : ""}">${this.title}</h6>
-            <div class="card-subtitle" style="${this.textColor ? `color: ${this.textColor}` : ""}">${this.subtitle}</div>
+            <div class="metrics-mini-chart-subtitle" style="${this.textColor ? `color: ${this.textColor}` : ""}">${this.subtitle}</div>
               {{#hasTrending}}
-                <div class="small mt-1 fw-semibold {{trendingClass}}"  style="${this.textColor ? `color: ${this.textColor}` : ""}">
+                <div class="{{trendingClass}}"  style="${this.textColor ? `color: ${this.textColor}` : ""}">
                   <i class="{{trendingIcon}} me-1"></i>{{trendingLabel}}
                 </div>
               {{/hasTrending}}
           </div>
-          ${this.icon ? `<i class="${this.icon} fs-4 flex-shrink-0" aria-hidden="true" style="${this.textColor ? `color: ${this.textColor}` : ""}"></i>` : ""}
+          <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>
         </div>`
     });
     this.addChild(this.header);
@@ -2785,8 +2799,19 @@ class MetricsMiniChartWidget extends View {
     }
     this.updateFromChartData({ render: false });
   }
+  async onAfterRender() {
+    await super.onAfterRender();
+    if (this.showSettings) {
+      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;
@@ -2808,6 +2833,7 @@ class MetricsMiniChartWidget extends View {
     const offset = Math.max(0, parseInt(this.trendOffset || 0, 10) || 0);
     const endIndex = Math.max(0, nums.length - 1 - offset);
     this.header.now_value = nums[endIndex];
+    this._updateGranularityLabels();
     let hasTrend = false;
     let lastSum = 0;
     let prevSum = 0;
@@ -2869,6 +2895,29 @@ class MetricsMiniChartWidget extends View {
       this.header.render();
     }
   }
+  /**
+   * Update labels based on current granularity
+   * @private
+   */
+  _updateGranularityLabels() {
+    const granularity = this.chartOptions.granularity || "days";
+    const nowLabels = {
+      "hours": "This Hour",
+      "days": "Today",
+      "weeks": "This Week",
+      "months": "This Month",
+      "years": "This Year"
+    };
+    const totalLabels = {
+      "hours": "Total (24h)",
+      "days": "Total (Period)",
+      "weeks": "Total (Period)",
+      "months": "Total (Period)",
+      "years": "Total (Period)"
+    };
+    this.header.now_label = nowLabels[granularity] || "Current";
+    this.header.total_label = totalLabels[granularity] || "Total";
+  }
   get cardStyle() {
     const styles = [];
     if (this.background) styles.push(`background: ${this.background}`);
@@ -2887,17 +2936,299 @@ class MetricsMiniChartWidget extends View {
     `;
   }
   async onBeforeDestroy() {
+    if (this._settingsPopover) {
+      this._settingsPopover.dispose();
+      this._settingsPopover = null;
+    }
     if (this.chart?.off) {
       this.chart.off("metrics:loaded", this.onChildMetricsLoaded, this);
     }
     await super.onBeforeDestroy();
   }
+  /**
+   * Initialize settings popover
+   * @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();
+    this._settingsPopover = new bootstrap.Popover(button, {
+      content,
+      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>
+    `;
+  }
+  /**
+   * 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();
+        }
+      });
+    }
+  }
+  /**
+   * Apply all pending settings changes
+   * @private
+   */
+  async _applyPendingSettings() {
+    if (!this._pendingSettings) return;
+    let hasChanges = false;
+    if (this._pendingSettings.granularity !== this.chartOptions.granularity) {
+      this.chartOptions.granularity = this._pendingSettings.granularity;
+      this.chart.granularity = this._pendingSettings.granularity;
+      hasChanges = true;
+    }
+    if (this._pendingSettings.chartType !== this.chartOptions.chartType) {
+      this.chartOptions.chartType = this._pendingSettings.chartType;
+      this.chart.chartType = this._pendingSettings.chartType;
+      hasChanges = true;
+    }
+    if (this._pendingSettings.dateStart !== this.chartOptions.dateStart) {
+      this.chartOptions.dateStart = this._pendingSettings.dateStart;
+      this.chart.dateStart = this._pendingSettings.dateStart;
+      hasChanges = true;
+    }
+    if (this._pendingSettings.dateEnd !== this.chartOptions.dateEnd) {
+      this.chartOptions.dateEnd = this._pendingSettings.dateEnd;
+      this.chart.dateEnd = this._pendingSettings.dateEnd;
+      hasChanges = true;
+    }
+    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
+   */
+  async onActionChangeChartType(event, element) {
+    const newChartType = element.value;
+    this.chartOptions.chartType = newChartType;
+    this.chart.chartType = newChartType;
+    this._saveSettings();
+    await this.chart.refresh();
+  }
+  /**
+   * Handle date start change
+   */
+  async onActionChangeDateStart(event, element) {
+    const newDateStart = element.value;
+    this.chartOptions.dateStart = newDateStart;
+    this.chart.dateStart = newDateStart;
+    this._saveSettings();
+    await this.chart.refresh();
+  }
+  /**
+   * 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();
+  }
+  /**
+   * Load settings from localStorage
+   * @private
+   */
+  _loadSettings() {
+    if (!this.settingsKey) return;
+    try {
+      const stored = localStorage.getItem(`metrics-chart-${this.settingsKey}`);
+      if (stored) {
+        const settings = JSON.parse(stored);
+        if (settings.granularity) {
+          this.chartOptions.granularity = settings.granularity;
+        }
+        if (settings.chartType) {
+          this.chartOptions.chartType = settings.chartType;
+        }
+        if (settings.dateStart !== void 0) {
+          this.chartOptions.dateStart = settings.dateStart;
+        }
+        if (settings.dateEnd !== void 0) {
+          this.chartOptions.dateEnd = settings.dateEnd;
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load chart settings:", error);
+    }
+  }
+  /**
+   * Save settings to localStorage
+   * @private
+   */
+  _saveSettings() {
+    if (!this.settingsKey) return;
+    try {
+      const settings = {
+        granularity: this.chartOptions.granularity,
+        chartType: this.chartOptions.chartType,
+        dateStart: this.chartOptions.dateStart,
+        dateEnd: this.chartOptions.dateEnd
+      };
+      localStorage.setItem(`metrics-chart-${this.settingsKey}`, JSON.stringify(settings));
+    } catch (error) {
+      console.error("Failed to save chart settings:", error);
+    }
+  }
 }
 export {
   BaseChart as B,
@@ -2908,4 +3239,4 @@ export {
   MetricsMiniChart as b,
   MetricsMiniChartWidget as c
 };
-//# sourceMappingURL=MetricsMiniChartWidget-Dan8l57G.js.map
+//# sourceMappingURL=MetricsMiniChartWidget-bmnV82d1.js.map