web-mojo 2.2.57 → 2.2.59

package/dist/chunks/MetricsMiniChartWidget-DvKd7Qrk.js

@@ -1,3283 +0,0 @@
-import Dialog from "./Dialog-DOGDalUq.js";
-import { V as View, d as dataFormatter } from "./Rest-W-sPfGh9.js";
-import { W as WebSocketClient } from "./WebSocketClient-DG2olXpH.js";
-class BaseChart extends View {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `chart-component ${options.className || ""}`,
-      tagName: "div"
-    });
-    this.chart = null;
-    this.chartType = options.chartType || "line";
-    this.endpoint = options.endpoint || null;
-    this.data = options.data || null;
-    this.dataTransform = options.dataTransform || null;
-    this.refreshInterval = options.refreshInterval || null;
-    this.autoRefresh = options.autoRefresh !== false;
-    this.refreshTimer = null;
-    this.websocketUrl = options.websocketUrl || null;
-    this.websocket = null;
-    this.websocketReconnect = options.websocketReconnect !== false;
-    this.width = options.width || null;
-    this.height = options.height || null;
-    this.contentStyle = [
-      this.width ? `width: ${this.width}px;` : "",
-      this.height ? `height: ${this.height}px;` : ""
-    ].filter(Boolean).join(" ");
-    if (options.maintainAspectRatio === void 0) {
-      options.maintainAspectRatio = true;
-    }
-    this.title = options.title || "";
-    this.chartTitle = options.chartTitle || "";
-    this.chartOptions = {
-      responsive: true,
-      maintainAspectRatio: options.maintainAspectRatio,
-      interaction: {
-        intersect: false,
-        mode: "index"
-      },
-      plugins: {
-        legend: {
-          display: options.showLegend !== false,
-          position: options.legendPosition || "top"
-        },
-        title: {
-          display: !!this.chartTitle,
-          text: this.chartTitle
-        },
-        tooltip: {
-          enabled: options.showTooltips !== false,
-          backgroundColor: "rgba(0,0,0,0.8)",
-          titleColor: "#fff",
-          bodyColor: "#fff",
-          borderColor: "rgba(255,255,255,0.1)",
-          borderWidth: 1
-        }
-      },
-      ...options.chartOptions
-    };
-    this.xAxis = options.xAxis || null;
-    this.yAxis = options.yAxis || null;
-    this.tooltipFormatters = options.tooltip || {};
-    this.theme = options.theme || "light";
-    this.colorScheme = options.colorScheme || "default";
-    this.animations = options.animations !== false;
-    this.exportEnabled = options.exportEnabled === true;
-    this.exportFormats = options.exportFormats || ["png", "jpg", "csv"];
-    this.isLoading = false;
-    this.hasError = false;
-    this.lastFetch = null;
-    this.dataPoints = 0;
-    this.canvas = null;
-    this.chartJsCdn = options.chartJsCdn || "https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js";
-    this.dataFormatter = dataFormatter;
-    this._essentialListeners = [];
-  }
-  get refreshEnabled() {
-    return !!(this.endpoint || this.websocketUrl);
-  }
-  buildDefaultHeaderConfig() {
-    return {
-      titleHtml: this.title || "",
-      chartTitle: this.chartTitle || "",
-      showExport: this.exportEnabled === true,
-      showRefresh: this.refreshEnabled,
-      showTheme: true,
-      controls: []
-    };
-  }
-  async getTemplate() {
-    return `
-      <div class="chart-container" data-theme="{{theme}}">
-        <div class="chart-header mb-3">
-          <div data-container="header"></div>
-          <div class="chart-header-aux mt-2">
-            <div data-container="header-aux"></div>
-          </div>
-        </div>
-
-        <div class="chart-content position-relative" {{#contentStyle}}style="{{contentStyle}}"{{/contentStyle}}>
-          <canvas class="chart-canvas" data-container="canvas"></canvas>
-
-          <!-- Loading overlay -->
-          <div class="chart-overlay d-none" data-loading>
-            <div class="d-flex flex-column align-items-center">
-              <div class="spinner-border text-primary mb-2" role="status">
-                <span class="visually-hidden">Loading...</span>
-              </div>
-              <small class="text-muted">Loading chart data...</small>
-            </div>
-          </div>
-
-          <!-- Error overlay -->
-          <div class="chart-overlay d-none" data-error>
-            <div class="alert alert-danger mb-0" role="alert">
-              <div class="d-flex align-items-center">
-                <i class="bi bi-exclamation-triangle me-2"></i>
-                <div class="flex-grow-1">
-                  <strong>Error:</strong> <span class="error-message">Failed to load chart data</span>
-                </div>
-                <button class="btn btn-sm btn-outline-danger ms-2" data-action="retry-load">
-                  <i class="bi bi-arrow-clockwise"></i> Retry
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <!-- No data overlay -->
-          <div class="chart-overlay d-none" data-no-data>
-            <div class="text-center text-muted">
-              <i class="bi bi-bar-chart display-4 mb-3 opacity-50"></i>
-              <p class="mb-0">No data available</p>
-              {{#refreshEnabled}}
-              <button class="btn btn-sm btn-outline-secondary mt-2" data-action="refresh-chart">
-                <i class="bi bi-arrow-clockwise"></i> Refresh
-              </button>
-              {{/refreshEnabled}}
-            </div>
-          </div>
-
-          <!-- WebSocket status indicator -->
-          <div class="position-absolute top-0 end-0 mt-2 me-2">
-            <span class="badge bg-success websocket-status" style="display: none;" data-websocket-status>
-              <i class="bi bi-wifi"></i> Live
-            </span>
-          </div>
-        </div>
-
-        <div class="chart-footer mt-2" style="display: none;">
-          <div class="row">
-            <div class="col">
-              <small class="text-muted">
-                <i class="bi bi-graph-up me-1"></i>
-                <span class="data-points">0 data points</span>
-              </small>
-            </div>
-            <div class="col text-end">
-              <small class="text-muted refresh-info">
-                Auto-refresh: <span class="refresh-status">Off</span>
-              </small>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  async onInit() {
-    await this.initializeChartJS();
-    try {
-      const headerConfig = this.headerConfig || (this.buildDefaultHeaderConfig ? this.buildDefaultHeaderConfig() : null);
-      if (headerConfig) {
-        this.headerView = new ChartHeaderView({ ...headerConfig, containerId: "header" });
-        this.addChild(this.headerView);
-      }
-    } catch (e) {
-      console.debug("ChartHeaderView not available:", e?.message);
-    }
-  }
-  async onAfterRender() {
-    this.canvas = this.element.querySelector(".chart-canvas");
-    this.titleElement = this.element.querySelector(".chart-title");
-    this.contentElement = this.element.querySelector(".chart-content");
-    this.footerElement = this.element.querySelector(".chart-footer");
-    this.loadingOverlay = this.element.querySelector("[data-loading]");
-    this.errorOverlay = this.element.querySelector("[data-error]");
-    this.noDataOverlay = this.element.querySelector("[data-no-data]");
-    this.websocketStatus = this.element.querySelector("[data-websocket-status]");
-    this.refreshBtn = this.element.querySelector(".refresh-btn");
-    this.themeToggle = this.element.querySelector(".theme-toggle");
-    this.applyTheme();
-    if (this.endpoint) {
-      await this.fetchData();
-      await this.updateChart(this.data, true);
-      if (this.height || this.width) {
-        this._updateChartDimensions();
-      }
-    } else if (this.data) {
-      await this.updateChart(this.data, true);
-      if (this.height || this.width) {
-        this._updateChartDimensions();
-      }
-    } else {
-      this.showNoData();
-    }
-    if (this.autoRefresh && this.refreshInterval && this.endpoint) {
-      this.startAutoRefresh();
-    }
-    if (this.websocketUrl) {
-      await this.connectWebSocket();
-    }
-    this.setupResizeObserver();
-    this.showFooter();
-  }
-  async initializeChartJS() {
-    try {
-      if (typeof window.Chart === "undefined") {
-        await this.loadChartJS();
-      }
-      return true;
-    } catch (error) {
-      console.error("Failed to initialize Chart.js:", error);
-      this.showError("Failed to initialize charting library");
-      return false;
-    }
-  }
-  async loadChartJS() {
-    return new Promise((resolve, reject) => {
-      const script = document.createElement("script");
-      script.src = this.chartJsCdn;
-      script.onload = () => {
-        console.log("Chart.js loaded successfully");
-        resolve();
-      };
-      script.onerror = () => {
-        reject(new Error("Failed to load Chart.js"));
-      };
-      document.head.appendChild(script);
-    });
-  }
-  // Action Handlers (EventDelegate)
-  async handleActionRefreshChart() {
-    await this.fetchData();
-  }
-  async handleActionRetryLoad() {
-    this.hideError();
-    await this.fetchData();
-  }
-  async handleActionExportChart(event, element) {
-    const format = element.getAttribute("data-format") || "png";
-    this.exportChart(format);
-  }
-  async handleActionToggleTheme() {
-    this.toggleTheme();
-  }
-  async handleActionSetChartType(event, element) {
-    const type = element.getAttribute("data-type");
-    if (type && this.setChartType) {
-      await this.setChartType(type);
-    }
-  }
-  // Data Management
-  async fetchData() {
-    if (!this.endpoint) return;
-    this.showLoading();
-    this.setRefreshButtonState(true);
-    try {
-      const response = await fetch(this.endpoint, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "Accept": "application/json"
-        }
-      });
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
-      let data = await response.json();
-      if (this.dataTransform && typeof this.dataTransform === "function") {
-        data = this.dataTransform(data);
-      }
-      this.lastFetch = /* @__PURE__ */ new Date();
-      this.data = data;
-      this.updateLastUpdatedTime();
-      const eventBus = this.getApp()?.events;
-      if (eventBus) {
-        eventBus.emit("chart:data-loaded", {
-          chart: this,
-          data,
-          source: "http",
-          endpoint: this.endpoint
-        });
-      }
-    } catch (error) {
-      console.error("Failed to fetch chart data:", error);
-      this.showError(`Failed to load data: ${error.message}`);
-      this.emit("chart:error", {
-        chart: this,
-        error,
-        source: "http",
-        endpoint: this.endpoint
-      });
-    } finally {
-      this.hideLoading();
-      this.setRefreshButtonState(false);
-    }
-  }
-  async connectWebSocket() {
-    if (!this.websocketUrl) return;
-    try {
-      this.websocket = new WebSocketClient({
-        url: this.websocketUrl,
-        autoReconnect: this.websocketReconnect,
-        dataTransform: this.dataTransform,
-        eventBus: this.getApp()?.events,
-        debug: false
-      });
-      this.websocket.on("connected", () => {
-        this.showWebSocketStatus(true);
-        console.log("WebSocket connected for chart data");
-      });
-      this.websocket.on("disconnected", () => {
-        this.showWebSocketStatus(false);
-        console.log("WebSocket disconnected");
-      });
-      this.websocket.on("data", async (data) => {
-        await this.updateChart(data);
-        this.updateLastUpdatedTime();
-        this.emit("chart:data-updated", {
-          chart: this,
-          data,
-          source: "websocket"
-        });
-      });
-      this.websocket.on("error", (error) => {
-        console.error("WebSocket error:", error);
-        this.showWebSocketStatus(false, "error");
-      });
-      await this.websocket.connect();
-    } catch (error) {
-      console.error("Failed to connect WebSocket:", error);
-      this.showWebSocketStatus(false, "error");
-    }
-  }
-  async updateChart(data, recreate = false) {
-    if (!data) {
-      this.showNoData();
-      return;
-    }
-    this.data = data;
-    if (!this.canvas || typeof window.Chart === "undefined") {
-      return;
-    }
-    this.hideAllOverlays();
-    const processedData = this.processChartData(data);
-    if (recreate && this.chart) {
-      this.chart.destroy();
-      this.chart = null;
-    }
-    if (this.chart) {
-      this.chart.data = processedData;
-      this.chart.update("none");
-    } else {
-      await this.createChart(processedData);
-    }
-    this.updateDataStats(processedData);
-    if (this.height || this.width) {
-      this._updateChartDimensions();
-    }
-  }
-  processChartData(data) {
-    let processedData = { ...data };
-    const xAxisCfg = this.normalizeAxis(this.xAxis);
-    if (xAxisCfg && xAxisCfg.formatter && processedData.labels) {
-      processedData.labels = processedData.labels.map(
-        (label) => this.dataFormatter.pipe(label, xAxisCfg.formatter)
-      );
-    }
-    return processedData;
-  }
-  async createChart(data) {
-    if (!this.canvas || typeof window.Chart === "undefined") {
-      throw new Error("Chart.js not loaded or canvas not found");
-    }
-    const config = {
-      type: this.chartType,
-      data,
-      options: this.buildChartOptions()
-    };
-    try {
-      this.chart = new window.Chart(this.canvas, config);
-      this.setupChartEventHandlers();
-    } catch (error) {
-      console.error("Failed to create chart:", error);
-      throw error;
-    }
-  }
-  buildChartOptions() {
-    const options = { ...this.chartOptions };
-    if (this.width || this.height) {
-      options.responsive = true;
-      options.maintainAspectRatio = false;
-    }
-    const xAxisCfg = this.normalizeAxis(this.xAxis);
-    const yAxisCfg = this.normalizeAxis(this.yAxis);
-    options.scales = options.scales || {};
-    options.scales.x = {
-      type: this._detectAxisType(this.data, xAxisCfg, "x"),
-      display: true,
-      title: {
-        display: !!xAxisCfg.label,
-        text: xAxisCfg.label || ""
-      },
-      grid: { display: true },
-      ticks: {}
-    };
-    if (xAxisCfg.formatter) {
-      options.scales.x.ticks.callback = this._createFormatterCallback(xAxisCfg.formatter);
-    }
-    options.scales.y = {
-      type: this._detectAxisType(this.data, yAxisCfg, "y"),
-      display: true,
-      beginAtZero: yAxisCfg.beginAtZero !== false,
-      title: {
-        display: !!yAxisCfg.label,
-        text: yAxisCfg.label || ""
-      },
-      grid: { display: true },
-      ticks: {}
-    };
-    if (yAxisCfg.formatter) {
-      options.scales.y.ticks.callback = this._createFormatterCallback(yAxisCfg.formatter);
-    }
-    this.applyThemeToOptions(options);
-    if (this.tooltipFormatters.x || this.tooltipFormatters.y) {
-      options.plugins = options.plugins || {};
-      options.plugins.tooltip = options.plugins.tooltip || {};
-      options.plugins.tooltip.callbacks = options.plugins.tooltip.callbacks || {};
-      if (this.tooltipFormatters.x) {
-        options.plugins.tooltip.callbacks.title = (context) => {
-          const value = context[0]?.label;
-          return value ? this.dataFormatter.pipe(value, this.tooltipFormatters.x) : value;
-        };
-      }
-      if (this.tooltipFormatters.y) {
-        options.plugins.tooltip.callbacks.label = (context) => {
-          const value = context.raw;
-          const formattedValue = this.dataFormatter.pipe(value, this.tooltipFormatters.y);
-          return `${context.dataset.label}: ${formattedValue}`;
-        };
-      }
-    }
-    if (typeof this.applySubclassChartOptions === "function") {
-      this.applySubclassChartOptions(options);
-    }
-    return options;
-  }
-  // Helper method to create Chart.js callback from MOJO formatter
-  _createFormatterCallback(formatter) {
-    if (!formatter) return null;
-    return (value) => {
-      try {
-        return this.dataFormatter.pipe(value, formatter);
-      } catch (error) {
-        console.warn(`Chart formatter error:`, error);
-        return value;
-      }
-    };
-  }
-  // Normalize axis configuration into a consistent object
-  normalizeAxis(axisConfig) {
-    if (!axisConfig) return {};
-    if (typeof axisConfig === "string") {
-      return { formatter: axisConfig };
-    }
-    if (typeof axisConfig === "object") {
-      const { formatter, label, type, beginAtZero, ...rest } = axisConfig;
-      return { formatter, label, type, beginAtZero, ...rest };
-    }
-    return {};
-  }
-  // Smart axis type detection from data
-  _detectAxisType(data, axisConfig, axisName = "x") {
-    if (axisConfig && axisConfig.type) {
-      return axisConfig.type;
-    }
-    if (axisConfig && axisConfig.formatter) {
-      const formatter = axisConfig.formatter.toLowerCase();
-      if (formatter.includes("date") || formatter.includes("time")) {
-        return "time";
-      }
-    }
-    if (data) {
-      if (axisName === "x" && data.labels && data.labels.length > 0) {
-        const firstLabel = data.labels[0];
-        if (typeof firstLabel === "string") {
-          if (!/^\d+\.?\d*$/.test(firstLabel.trim())) {
-            return "category";
-          }
-        }
-        if (firstLabel instanceof Date || typeof firstLabel === "string" && !isNaN(Date.parse(firstLabel))) {
-          return "time";
-        }
-        return "linear";
-      } else if (axisName === "y" && data.datasets && data.datasets.length > 0) {
-        const firstDataset = data.datasets[0];
-        if (firstDataset.data && firstDataset.data.length > 0) {
-          const firstValue = firstDataset.data[0];
-          if (typeof firstValue === "number" || !isNaN(parseFloat(firstValue))) {
-            return "linear";
-          }
-          return "category";
-        }
-      }
-    }
-    return axisName === "x" ? "category" : "linear";
-  }
-  setupChartEventHandlers() {
-    if (!this.chart) return;
-    this.chart.options.onClick = (event, elements) => {
-      if (elements.length > 0) {
-        const element = elements[0];
-        const datasetIndex = element.datasetIndex;
-        const index = element.index;
-        const value = this.chart.data.datasets[datasetIndex].data[index];
-        const label = this.chart.data.labels[index];
-        this.emit("chart:point-clicked", {
-          chart: this,
-          datasetIndex,
-          index,
-          value,
-          label,
-          dataset: this.chart.data.datasets[datasetIndex]
-        });
-      }
-    };
-    this.chart.options.onHover = (event, elements) => {
-      this.canvas.style.cursor = elements.length > 0 ? "pointer" : "default";
-    };
-  }
-  // Theme Management
-  applyTheme() {
-    this.element.setAttribute("data-theme", this.theme);
-    if (this.chart) {
-      this.chart.options = this.buildChartOptions();
-      this.chart.update("none");
-    }
-  }
-  applyThemeToOptions(options) {
-    const isDark = this.theme === "dark";
-    if (options.scales) {
-      Object.keys(options.scales).forEach((scaleId) => {
-        const scale = options.scales[scaleId];
-        scale.grid = scale.grid || {};
-        scale.ticks = scale.ticks || {};
-        scale.grid.color = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
-        scale.ticks.color = isDark ? "#e9ecef" : "#495057";
-      });
-    }
-    if (options.plugins?.legend) {
-      options.plugins.legend.labels = options.plugins.legend.labels || {};
-      options.plugins.legend.labels.color = isDark ? "#e9ecef" : "#495057";
-    }
-    if (options.plugins?.title) {
-      options.plugins.title.color = isDark ? "#ffffff" : "#212529";
-    }
-  }
-  toggleTheme() {
-    this.theme = this.theme === "light" ? "dark" : "light";
-    this.applyTheme();
-    this.emit("chart:theme-changed", {
-      chart: this,
-      theme: this.theme
-    });
-  }
-  // Auto-refresh Management
-  startAutoRefresh() {
-    if (!this.endpoint || !this.refreshInterval) return;
-    this.stopAutoRefresh();
-    this.refreshTimer = setInterval(() => {
-      this.fetchData();
-    }, this.refreshInterval);
-    this.updateRefreshStatus(true);
-  }
-  stopAutoRefresh() {
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-    this.updateRefreshStatus(false);
-  }
-  // Export Functionality
-  exportChart(format = "png") {
-    if (!this.chart) return;
-    try {
-      if (format === "csv") {
-        this.exportCSV();
-      } else {
-        const url = this.chart.toBase64Image("image/" + format, 1);
-        const link = document.createElement("a");
-        link.download = `chart-${Date.now()}.${format}`;
-        link.href = url;
-        link.click();
-        this.emit("chart:exported", {
-          chart: this,
-          format,
-          filename: link.download
-        });
-      }
-    } catch (error) {
-      console.error("Failed to export chart:", error);
-      this.showError("Failed to export chart");
-    }
-  }
-  // CSV Export Functionality
-  exportCSV() {
-    if (!this.chart || !this.chart.data) return;
-    try {
-      const csvData = this.generateCSV();
-      const blob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.download = `chart-data-${Date.now()}.csv`;
-      link.href = url;
-      link.click();
-      URL.revokeObjectURL(url);
-      this.emit("chart:exported", {
-        chart: this,
-        format: "csv",
-        filename: link.download
-      });
-    } catch (error) {
-      console.error("Failed to export CSV:", error);
-      this.showError("Failed to export CSV");
-    }
-  }
-  // Generate CSV data from chart
-  generateCSV() {
-    const data = this.chart.data;
-    const labels = data.labels || [];
-    const datasets = data.datasets || [];
-    let csv = "Label";
-    datasets.forEach((dataset) => {
-      csv += "," + (dataset.label || "Data");
-    });
-    csv += "\n";
-    labels.forEach((label, index) => {
-      csv += `"${label}"`;
-      datasets.forEach((dataset) => {
-        const value = dataset.data[index] || "";
-        csv += "," + value;
-      });
-      csv += "\n";
-    });
-    return csv;
-  }
-  // UI State Management
-  showLoading() {
-    this.isLoading = true;
-    this.hideAllOverlays();
-    this.loadingOverlay?.classList.remove("d-none");
-  }
-  hideLoading() {
-    this.isLoading = false;
-    this.loadingOverlay?.classList.add("d-none");
-  }
-  showError(message) {
-    this.hasError = true;
-    this.hideAllOverlays();
-    const errorMessageEl = this.errorOverlay?.querySelector(".error-message");
-    if (errorMessageEl) {
-      errorMessageEl.textContent = message;
-    }
-    this.errorOverlay?.classList.remove("d-none");
-  }
-  hideError() {
-    this.hasError = false;
-    this.errorOverlay?.classList.add("d-none");
-  }
-  showNoData() {
-    this.hideAllOverlays();
-    this.noDataOverlay?.classList.remove("d-none");
-  }
-  hideAllOverlays() {
-    this.loadingOverlay?.classList.add("d-none");
-    this.errorOverlay?.classList.add("d-none");
-    this.noDataOverlay?.classList.add("d-none");
-  }
-  showWebSocketStatus(connected, status = "connected") {
-    if (!this.websocketStatus) return;
-    if (connected) {
-      this.websocketStatus.className = "badge bg-success";
-      this.websocketStatus.innerHTML = '<i class="bi bi-wifi"></i> Live';
-    } else {
-      this.websocketStatus.className = status === "error" ? "badge bg-danger" : "badge bg-secondary";
-      this.websocketStatus.innerHTML = status === "error" ? '<i class="bi bi-wifi-off"></i> Error' : '<i class="bi bi-wifi-off"></i> Offline';
-    }
-    this.websocketStatus.style.display = "inline-block";
-  }
-  setRefreshButtonState(loading) {
-    if (!this.refreshBtn) return;
-    const icon = this.refreshBtn.querySelector("i");
-    if (loading) {
-      this.refreshBtn.disabled = true;
-      icon?.classList.add("spin");
-    } else {
-      this.refreshBtn.disabled = false;
-      icon?.classList.remove("spin");
-    }
-  }
-  updateLastUpdatedTime() {
-    const lastUpdatedEl = this.element.querySelector(".last-updated");
-    const timestampEl = this.element.querySelector(".timestamp");
-    if (lastUpdatedEl && timestampEl) {
-      timestampEl.textContent = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-      lastUpdatedEl.style.display = "block";
-    }
-  }
-  updateRefreshStatus(active) {
-    const statusEl = this.element.querySelector(".refresh-status");
-    if (statusEl) {
-      statusEl.textContent = active ? `Every ${this.refreshInterval / 1e3}s` : "Off";
-    }
-  }
-  updateDataStats(data) {
-    let points = 0;
-    if (data.datasets) {
-      points = data.datasets.reduce((sum, dataset) => {
-        return sum + (dataset.data ? dataset.data.length : 0);
-      }, 0);
-    }
-    this.dataPoints = points;
-    const dataPointsEl = this.element.querySelector(".data-points");
-    if (dataPointsEl) {
-      dataPointsEl.textContent = `${points} data point${points !== 1 ? "s" : ""}`;
-    }
-  }
-  showFooter() {
-    if (this.footerElement) {
-      this.footerElement.style.display = "block";
-    }
-  }
-  setupResizeObserver() {
-    if (!window.ResizeObserver || !this.contentElement) return;
-    const resizeObserver = new ResizeObserver(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    });
-    resizeObserver.observe(this.contentElement);
-    this._resizeObserver = resizeObserver;
-  }
-  // Cleanup
-  async onBeforeDestroy() {
-    this.stopAutoRefresh();
-    if (this.websocket) {
-      this.websocket.disconnect();
-      this.websocket = null;
-    }
-    if (this.chart) {
-      this.chart.destroy();
-      this.chart = null;
-    }
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = null;
-    }
-    if (this._essentialListeners) {
-      this._essentialListeners.forEach(({ el, type, fn }) => {
-        if (el) el.removeEventListener(type, fn);
-      });
-      this._essentialListeners = [];
-    }
-    this.emit("chart:destroyed", { chart: this });
-  }
-  // Public API
-  setData(data) {
-    this.data = data;
-    return this.updateChart(data);
-  }
-  setEndpoint(endpoint) {
-    this.endpoint = endpoint;
-    if (endpoint) {
-      return this.fetchData();
-    }
-  }
-  setWebSocketUrl(url) {
-    if (this.websocket) {
-      this.websocket.disconnect();
-    }
-    this.websocketUrl = url;
-    if (url) {
-      return this.connectWebSocket();
-    }
-  }
-  // Dimension Control Methods
-  setWidth(width) {
-    this.width = width;
-    this.contentStyle = [
-      this.width ? `width: ${this.width}px;` : "",
-      this.height ? `height: ${this.height}px;` : ""
-    ].filter(Boolean).join(" ");
-    if (this.contentElement) {
-      this._updateChartDimensions();
-    }
-  }
-  setHeight(height) {
-    this.height = height;
-    this.contentStyle = [
-      this.width ? `width: ${this.width}px;` : "",
-      this.height ? `height: ${this.height}px;` : ""
-    ].filter(Boolean).join(" ");
-    if (this.contentElement) {
-      this._updateChartDimensions();
-    }
-  }
-  setDimensions(width, height) {
-    this.width = width;
-    this.height = height;
-    this.contentStyle = [
-      this.width ? `width: ${this.width}px;` : "",
-      this.height ? `height: ${this.height}px;` : ""
-    ].filter(Boolean).join(" ");
-    if (this.contentElement) {
-      this._updateChartDimensions();
-    }
-  }
-  _updateChartDimensions() {
-    if (this.chart) {
-      if (this.width || this.height) {
-        this.chart.options.responsive = true;
-        this.chart.options.maintainAspectRatio = false;
-        if (this.width && this.contentElement) {
-          this.contentElement.style.width = this.width ? this.width + "px" : "";
-        }
-        if (this.height && this.contentElement) {
-          this.contentElement.style.height = this.height ? this.height + "px" : "";
-        }
-      } else {
-        this.chart.options.responsive = true;
-        this.chart.options.maintainAspectRatio = this.chartOptions.maintainAspectRatio;
-      }
-      this.chart.resize();
-    }
-  }
-  resize() {
-    if (this.chart) {
-      this.chart.resize();
-    }
-  }
-  refresh() {
-    return this.fetchData();
-  }
-  export(format = "png") {
-    return this.exportChart(format);
-  }
-  setTheme(theme) {
-    this.theme = theme;
-    this.applyTheme();
-  }
-  getStats() {
-    return {
-      isLoading: this.isLoading,
-      hasError: this.hasError,
-      dataPoints: this.dataPoints,
-      lastFetch: this.lastFetch,
-      theme: this.theme,
-      chartType: this.chartType,
-      autoRefresh: !!this.refreshTimer,
-      websocketConnected: this.websocket?.isConnected || false
-    };
-  }
-}
-class ChartHeaderView extends View {
-  constructor(options = {}) {
-    super({
-      ...options,
-      className: `mojo-chart-header ${options.className || ""}`,
-      tagName: "div"
-    });
-    this.titleHtml = options.titleHtml || "";
-    this.chartTitle = options.chartTitle || "";
-    this.showExport = options.showExport === true;
-    this.showRefresh = !!options.showRefresh;
-    this.showTheme = false;
-    this.showTheme = options.showTheme === true;
-    this.controls = Array.isArray(options.controls) ? options.controls : [];
-    this.controlsHtml = this._buildControlsHtml(this.controls);
-  }
-  async getTemplate() {
-    return `
-      <div class="d-flex justify-content-between align-items-center">
-        <div class="chart-title-section">
-          <h5 class="mb-2 chart-title">{{{titleHtml}}}</h5>
-          <small class="text-muted last-updated" style="display: none;">
-            Last updated: <span class="timestamp"></span>
-          </small>
-        </div>
-
-        <div class="chart-controls">
-          <div class="btn-toolbar" role="toolbar">
-            {{{controlsHtml}}}
-
-            <div class="btn-group btn-group-sm" role="group">
-
-            {{#showTheme}}
-            <button type="button" class="btn btn-outline-secondary theme-toggle" data-action="toggle-theme" title="Toggle Theme">
-              <i class="bi bi-palette"></i>
-            </button>
-            {{/showTheme}}
-
-              {{#showExport}}
-              <div class="btn-group btn-group-sm" role="group">
-                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" title="Export Chart">
-                  <i class="bi bi-download"></i>
-                </button>
-                <ul class="dropdown-menu">
-                  <li><a class="dropdown-item" href="#" data-action="export-chart" data-format="png">
-                    <i class="bi bi-image"></i> PNG
-                  </a></li>
-                  <li><a class="dropdown-item" href="#" data-action="export-chart" data-format="jpg">
-                    <i class="bi bi-image"></i> JPEG
-                  </a></li>
-                  <li><a class="dropdown-item" href="#" data-action="export-chart" data-format="csv">
-                    <i class="bi bi-file-earmark-spreadsheet"></i> CSV
-                  </a></li>
-                </ul>
-              </div>
-              {{/showExport}}
-
-              {{#showRefresh}}
-              <button type="button" class="btn btn-outline-secondary refresh-btn" data-action="refresh-chart" title="Refresh Data">
-                <i class="bi bi-arrow-clockwise"></i>
-              </button>
-              {{/showRefresh}}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  // Build custom controls HTML for the toolbar from config
-  _buildControlsHtml(controls) {
-    if (!Array.isArray(controls) || controls.length === 0) return "";
-    const parts = [];
-    controls.forEach((item) => {
-      if (!item || !item.type) return;
-      switch (item.type) {
-        case "select": {
-          const sizeCls = item.size === "md" ? "" : " form-select-sm";
-          const cls = `form-select${sizeCls} ${item.className || ""}`.trim();
-          const optionsHtml = (item.options || []).map((opt) => `<option value="${this._escapeAttr(opt.value)}"${opt.selected ? " selected" : ""}>${this._escapeHtml(opt.label)}</option>`).join("");
-          parts.push(`
-            <div class="btn-group btn-group-sm me-2" role="group">
-              <select class="${cls}" data-change-action="${this._escapeAttr(item.action || item.name || "select-changed")}" style="width: auto;">
-                ${optionsHtml}
-              </select>
-            </div>
-          `);
-          break;
-        }
-        case "button": {
-          const { variant = "outline-secondary", size = "sm" } = item;
-          const sizeCls = size === "md" ? "" : " btn-sm";
-          const btnCls = `btn btn-${variant}${sizeCls} ${item.className || ""}`.trim();
-          const titleAttr = item.title ? ` title="${this._escapeAttr(item.title)}"` : "";
-          const dataAttrs = this._buildDataAttrs(item.data);
-          parts.push(`
-            <div class="btn-group btn-group-sm me-2" role="group">
-              <button type="button" class="${btnCls}" data-action="${this._escapeAttr(item.action || "button-action")}"${titleAttr}${dataAttrs}>
-                ${item.labelHtml || ""}
-              </button>
-            </div>
-          `);
-          break;
-        }
-        case "buttongroup": {
-          const size = item.size || "sm";
-          const groupCls = `btn-group btn-group-${size} me-2 ${item.className || ""}`.trim();
-          const buttons = (item.buttons || []).map((btn) => {
-            const variant = btn.variant || "outline-secondary";
-            const sizeCls = size === "md" ? "" : " btn-sm";
-            const btnCls = `btn btn-${variant}${sizeCls} ${btn.className || ""}`.trim();
-            const titleAttr = btn.title ? ` title="${this._escapeAttr(btn.title)}"` : "";
-            const dataAttrs = this._buildDataAttrs(btn.data);
-            return `<button type="button" class="${btnCls}" data-action="${this._escapeAttr(btn.action || "button-action")}"${titleAttr}${dataAttrs}>${btn.labelHtml || ""}</button>`;
-          }).join("");
-          parts.push(`
-            <div class="${groupCls}" role="group">
-              ${buttons}
-            </div>
-          `);
-          break;
-        }
-        case "divider": {
-          parts.push(`<div class="vr mx-2"></div>`);
-          break;
-        }
-        case "html": {
-          const html = item.html || "";
-          parts.push(`<div class="me-2 d-inline-block">${html}</div>`);
-          break;
-        }
-      }
-    });
-    return parts.join("\n");
-  }
-  _buildDataAttrs(data) {
-    if (!data || typeof data !== "object") return "";
-    return Object.entries(data).map(([key, val]) => ` data-${this._kebabCase(String(key))}="${this._escapeAttr(String(val))}"`).join("");
-  }
-  _kebabCase(str) {
-    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase().replace(/[^a-z0-9\-]/g, "-").replace(/--+/g, "-").replace(/^-|-$/g, "");
-  }
-  _escapeAttr(value) {
-    return String(value).replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  }
-  _escapeHtml(value) {
-    return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  }
-}
-const DEFAULT_CHART_COLORS = [
-  "rgba(52, 152, 219, 0.85)",
-  // Belize Hole
-  "rgba(231, 76, 60, 0.85)",
-  // Alizarin
-  "rgba(46, 204, 113, 0.85)",
-  // Emerald
-  "rgba(241, 196, 15, 0.85)",
-  // Sunflower
-  "rgba(155, 89, 182, 0.85)",
-  // Amethyst
-  "rgba(230, 126, 34, 0.85)",
-  // Carrot
-  "rgba(26, 188, 156, 0.85)",
-  // Turquoise
-  "rgba(52, 73, 94, 0.85)",
-  // Wet asphalt
-  "rgba(243, 156, 18, 0.85)",
-  // Orange
-  "rgba(142, 68, 173, 0.85)",
-  // Wisteria
-  "rgba(39, 174, 96, 0.85)",
-  // Nephritis
-  "rgba(41, 128, 185, 0.85)",
-  // Peter River
-  "rgba(192, 57, 43, 0.85)",
-  // Pomegranate
-  "rgba(127, 140, 141, 0.85)",
-  // Asbestos
-  "rgba(22, 160, 133, 0.85)",
-  // Green Sea
-  "rgba(211, 84, 0, 0.85)",
-  // Pumpkin
-  "rgba(44, 62, 80, 0.85)",
-  // Midnight Blue
-  "rgba(214, 69, 65, 0.85)",
-  // Valencia
-  "rgba(149, 165, 166, 0.85)",
-  // Concrete
-  "rgba(52, 232, 158, 0.85)"
-  // Mint
-];
-class SeriesChart extends BaseChart {
-  constructor(options = {}) {
-    super({
-      ...options,
-      chartType: options.chartType || "line"
-    });
-    this.showTypeSwitch = true;
-    if (options.showTypeSwitch !== void 0) this.showTypeSwitch = options.showTypeSwitch;
-    this.orientation = options.orientation || "vertical";
-    this.stacked = options.stacked || false;
-    this.stepped = options.stepped || false;
-    this.tension = options.tension || 0.4;
-    this.fill = options.fill || false;
-    this.showRefreshButton = options.showRefreshButton !== false;
-    if (!this.headerConfig) {
-      this.headerConfig = {
-        titleHtml: this.title || "",
-        chartTitle: this.chartTitle || "",
-        showExport: this.exportEnabled,
-        showRefresh: this.refreshEnabled,
-        showTheme: true,
-        controls: []
-      };
-    }
-    this.series = options.series || [];
-    this.xField = options.xField || "x";
-    this.yField = options.yField || "y";
-    const providedColors = Array.isArray(options.colors) && options.colors.length ? options.colors : DEFAULT_CHART_COLORS;
-    this.colors = [...providedColors];
-    this.tooltipFormatters = options.tooltip || {};
-  }
-  getColor(index) {
-    this.ensureColorPool(index + 1);
-    return this.colors[index];
-  }
-  ensureColorPool(count) {
-    if (this.colors.length >= count) return;
-    while (this.colors.length < count) {
-      const nextIndex = this.colors.length;
-      const hue = nextIndex * 37 % 360;
-      const color = `hsla(${hue}, 70%, 55%, 0.85)`;
-      this.colors.push(color);
-    }
-  }
-  withAlpha(color, alpha = 0.4) {
-    if (!color) return color;
-    const rgbaMatch = color.match(/rgba?\(([^)]+)\)/i);
-    if (rgbaMatch) {
-      const parts = rgbaMatch[1].split(",").map((part) => part.trim());
-      const [r, g, b] = parts;
-      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    }
-    const hslaMatch = color.match(/hsla?\(([^)]+)\)/i);
-    if (hslaMatch) {
-      const parts = hslaMatch[1].split(",").map((part) => part.trim());
-      const [h, s, l] = parts;
-      return `hsla(${h}, ${s}, ${l}, ${alpha})`;
-    }
-    return color;
-  }
-  async getTemplate() {
-    return await super.getTemplate();
-  }
-  async onInit() {
-    if (this.showTypeSwitch) {
-      this.headerConfig.controls.push({
-        type: "buttongroup",
-        size: "sm",
-        buttons: [
-          { action: "set-chart-type", labelHtml: '<i class="bi bi-graph-up"></i>', title: "Line", variant: this.chartType === "line" ? "primary" : "outline-primary", data: { type: "line" } },
-          { action: "set-chart-type", labelHtml: '<i class="bi bi-bar-chart"></i>', title: "Bar", variant: this.chartType === "bar" ? "primary" : "outline-primary", data: { type: "bar" } }
-        ]
-      });
-    }
-    await super.onInit();
-  }
-  // Action Handlers
-  async onActionSetChartType(event, element) {
-    event.stopPropagation();
-    const newType = element.getAttribute("data-type");
-    if (newType && newType !== this.chartType) {
-      await this.setChartType(newType);
-    }
-  }
-  async rebuildChart() {
-    if (this.chart && this.data) {
-      this.chart.destroy();
-      this.chart = null;
-      const processedData = this.processChartData(this.data);
-      await this.createChart(processedData);
-    }
-  }
-  async setChartType(newType) {
-    if (!["line", "bar"].includes(newType)) {
-      throw new Error(`Unsupported chart type: ${newType}`);
-    }
-    const oldType = this.chartType;
-    this.chartType = newType;
-    if (this.chart && this.data) {
-      this.chart.destroy();
-      this.chart = null;
-      const processedData = this.processChartData(this.data);
-      await this.createChart(processedData);
-    }
-    this._updateTypeSwitcherButtons();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("chart:type-changed", {
-        chart: this,
-        oldType,
-        newType: this.chartType
-      });
-    }
-  }
-  processChartData(data) {
-    if (!data) return data;
-    let processedData;
-    if (Array.isArray(data)) {
-      processedData = this.processArrayData(data);
-    } else if (data.labels && data.datasets) {
-      processedData = this.processChartJSData(data);
-    } else if (data.series) {
-      processedData = this.processSeriesData(data);
-    } else {
-      processedData = data;
-    }
-    return this.applyFormattersToData(processedData);
-  }
-  processArrayData(data) {
-    const labels = [];
-    const values = [];
-    data.forEach((item) => {
-      const xValue = item[this.xField];
-      const yValue = item[this.yField];
-      labels.push(xValue);
-      values.push(yValue);
-    });
-    this.ensureColorPool(1);
-    const baseColor = this.getColor(0);
-    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
-    return {
-      labels,
-      datasets: [{
-        label: this.title || "Data",
-        data: values,
-        backgroundColor: this.withAlpha(baseColor, backgroundAlpha),
-        borderColor: baseColor,
-        borderWidth: 2,
-        tension: this.chartType === "line" ? this.tension : 0,
-        fill: this.chartType === "line" ? this.fill : false,
-        stepped: this.chartType === "line" ? this.stepped : false
-      }]
-    };
-  }
-  processChartJSData(data) {
-    const processedData = { ...data };
-    if (!processedData.datasets) {
-      processedData.datasets = [];
-      return processedData;
-    }
-    const datasetCount = processedData.datasets.length;
-    this.ensureColorPool(datasetCount);
-    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
-    processedData.datasets = processedData.datasets.map((dataset, index) => {
-      const baseColor = dataset.borderColor || this.getColor(index);
-      return {
-        ...dataset,
-        backgroundColor: dataset.backgroundColor || this.withAlpha(baseColor, backgroundAlpha),
-        borderColor: baseColor,
-        borderWidth: dataset.borderWidth || 2,
-        tension: this.chartType === "line" ? dataset.tension ?? this.tension : 0,
-        fill: this.chartType === "line" ? dataset.fill ?? this.fill : false,
-        stepped: this.chartType === "line" ? dataset.stepped ?? this.stepped : false
-      };
-    });
-    return processedData;
-  }
-  processSeriesData(data) {
-    const labels = data.labels || [];
-    const datasets = [];
-    const count = data.series?.length || 0;
-    this.ensureColorPool(count);
-    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
-    data.series.forEach((series, index) => {
-      const baseColor = series.borderColor || this.getColor(index);
-      datasets.push({
-        label: series.name || series.label || `Series ${index + 1}`,
-        data: series.data || [],
-        backgroundColor: series.backgroundColor || this.withAlpha(baseColor, backgroundAlpha),
-        borderColor: baseColor,
-        borderWidth: series.borderWidth || 2,
-        tension: this.chartType === "line" ? series.tension ?? this.tension : 0,
-        fill: this.chartType === "line" ? series.fill ?? this.fill : false,
-        stepped: this.chartType === "line" ? series.stepped ?? this.stepped : false
-      });
-    });
-    return { labels, datasets };
-  }
-  applyFormattersToData(data) {
-    if (!data) return data;
-    const processedData = { ...data };
-    const xAxisCfg = this.normalizeAxis ? this.normalizeAxis(this.xAxis) : {};
-    if (xAxisCfg.formatter && processedData.labels) {
-      processedData.labels = processedData.labels.map(
-        (label) => this.dataFormatter.pipe(label, xAxisCfg.formatter)
-      );
-    }
-    return processedData;
-  }
-  applySubclassChartOptions(options) {
-    if (this.stacked && this.chartType === "bar" && options.scales) {
-      if (options.scales.x) options.scales.x.stacked = true;
-      if (options.scales.y) options.scales.y.stacked = true;
-    }
-    if (this.chartType === "bar" && this.orientation === "horizontal") {
-      options.indexAxis = "y";
-    }
-    options.interaction = options.interaction || {};
-    options.interaction.intersect = false;
-    options.interaction.mode = this.chartType === "line" ? "index" : "nearest";
-    options.elements = options.elements || {};
-    options.elements.line = {
-      ...options.elements.line || {},
-      tension: this.tension,
-      borderWidth: 2
-    };
-    options.elements.point = {
-      ...options.elements.point || {},
-      radius: this.chartType === "line" ? 4 : 0,
-      hoverRadius: 6,
-      hitRadius: 8
-    };
-    options.elements.bar = {
-      ...options.elements.bar || {},
-      borderWidth: 1,
-      borderSkipped: false
-    };
-  }
-  // Process simple axis configuration into detailed config
-  processAxisConfig(axisConfig) {
-    if (!axisConfig) return {};
-    if (typeof axisConfig === "string") {
-      return { formatter: axisConfig };
-    }
-    if (typeof axisConfig === "object") {
-      return {
-        formatter: axisConfig.formatter,
-        label: axisConfig.label,
-        type: axisConfig.type,
-        beginAtZero: axisConfig.beginAtZero,
-        ...axisConfig
-      };
-    }
-    return {};
-  }
-  _updateTypeSwitcherButtons() {
-    const buttons = this.element?.querySelectorAll('[data-action="set-chart-type"]');
-    if (!buttons || buttons.length === 0) return;
-    buttons.forEach((button) => {
-      const buttonType = button.getAttribute("data-type");
-      const isActive = buttonType === this.chartType;
-      button.classList.toggle("btn-primary", isActive);
-      button.classList.toggle("btn-outline-primary", !isActive);
-      button.classList.toggle("active", isActive);
-    });
-  }
-  // Public API extensions
-  setOrientation(orientation) {
-    if (!["vertical", "horizontal"].includes(orientation)) {
-      throw new Error(`Invalid orientation: ${orientation}`);
-    }
-    this.orientation = orientation;
-    if (this.chart) {
-      this.chart.destroy();
-      this.chart = null;
-      if (this.data) {
-        const processedData = this.processChartData(this.data);
-        this.createChart(processedData);
-      }
-    }
-  }
-  setStacked(stacked) {
-    this.stacked = stacked;
-    if (this.chart) {
-      this.chart.options.scales.x.stacked = stacked;
-      this.chart.options.scales.y.stacked = stacked;
-      this.chart.update();
-    }
-  }
-  addSeries(series) {
-    if (!this.data || !this.data.datasets) return;
-    const newDataset = {
-      label: series.label || series.name || `Series ${this.data.datasets.length + 1}`,
-      data: series.data || [],
-      backgroundColor: series.backgroundColor || this.colors[this.data.datasets.length % this.colors.length].replace("0.8", "0.6"),
-      borderColor: series.borderColor || this.colors[this.data.datasets.length % this.colors.length],
-      borderWidth: series.borderWidth || 2,
-      tension: this.chartType === "line" ? series.tension ?? this.tension : 0,
-      fill: this.chartType === "line" ? series.fill ?? this.fill : false
-    };
-    this.data.datasets.push(newDataset);
-    if (this.chart) {
-      this.chart.data.datasets.push(newDataset);
-      this.chart.update();
-    }
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("chart:series-added", {
-        chart: this,
-        series: newDataset
-      });
-    }
-  }
-  removeSeries(index) {
-    if (!this.data || !this.data.datasets || index < 0 || index >= this.data.datasets.length) {
-      return;
-    }
-    const removedSeries = this.data.datasets.splice(index, 1)[0];
-    if (this.chart) {
-      this.chart.data.datasets.splice(index, 1);
-      this.chart.update();
-    }
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("chart:series-removed", {
-        chart: this,
-        series: removedSeries,
-        index
-      });
-    }
-  }
-  // Static dialog method
-  static async showDialog(options = {}) {
-    const {
-      title = "Chart Viewer",
-      size = "xl",
-      ...chartOptions
-    } = options;
-    const chart = new SeriesChart({
-      ...chartOptions,
-      title
-    });
-    const dialog = new Dialog({
-      title,
-      body: chart,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      buttons: [
-        {
-          text: "Export PNG",
-          action: "export",
-          class: "btn btn-outline-primary"
-        },
-        {
-          text: "Close",
-          action: "close",
-          class: "btn btn-secondary",
-          dismiss: true
-        }
-      ]
-    });
-    await dialog.render();
-    document.body.appendChild(dialog.element);
-    await dialog.mount();
-    dialog.show();
-    return new Promise((resolve) => {
-      dialog.on("hidden", () => {
-        dialog.destroy();
-        resolve(chart);
-      });
-      dialog.on("action:export", () => {
-        chart.exportChart("png");
-      });
-      dialog.on("action:close", () => {
-        dialog.hide();
-      });
-    });
-  }
-}
-class PieChart extends BaseChart {
-  constructor(options = {}) {
-    super({
-      ...options,
-      chartType: "pie"
-    });
-    this.cutout = options.cutout || 0;
-    this.rotation = options.rotation || 0;
-    this.circumference = options.circumference || 360;
-    this.borderWidth = options.borderWidth || 2;
-    this.borderColor = options.borderColor || "#ffffff";
-    this.hoverBorderWidth = options.hoverBorderWidth || 3;
-    this.showLabels = options.showLabels !== false;
-    this.labelPosition = options.labelPosition || "outside";
-    this.labelFormatter = options.labelFormatter || null;
-    this.valueFormatter = options.valueFormatter || null;
-    this.labelField = options.labelField || "label";
-    this.valueField = options.valueField || "value";
-    this.colors = options.colors || [
-      "#FF6384",
-      // Red
-      "#36A2EB",
-      // Blue  
-      "#FFCE56",
-      // Yellow
-      "#4BC0C0",
-      // Teal
-      "#9966FF",
-      // Purple
-      "#FF9F40",
-      // Orange
-      "#C9CBCF",
-      // Grey
-      "#4BC0C0",
-      // Green
-      "#FF6384",
-      // Pink
-      "#36A2EB"
-      // Light Blue
-    ];
-    this.animateRotate = options.animateRotate !== false;
-    this.animateScale = options.animateScale || false;
-    this.clickable = options.clickable !== false;
-    this.hoverable = options.hoverable !== false;
-    this.selectedSegment = null;
-    this.highlightedSegments = /* @__PURE__ */ new Set();
-    this.valueFormatter = options.valueFormatter || null;
-  }
-  processChartData(data) {
-    if (!data) return data;
-    let processedData;
-    if (Array.isArray(data)) {
-      processedData = this.processArrayData(data);
-    } else if (data.labels && data.datasets) {
-      processedData = this.processChartJSData(data);
-    } else if (typeof data === "object" && !data.labels) {
-      processedData = this.processObjectData(data);
-    } else {
-      processedData = data;
-    }
-    return this.applyFormattersToData(processedData);
-  }
-  processArrayData(data) {
-    const labels = [];
-    const values = [];
-    data.forEach((item) => {
-      const label = item[this.labelField];
-      const value = item[this.valueField];
-      if (label !== void 0 && value !== void 0) {
-        labels.push(label);
-        values.push(value);
-      }
-    });
-    return {
-      labels,
-      datasets: [{
-        data: values,
-        backgroundColor: this.generateColors(labels.length),
-        borderColor: this.borderColor,
-        borderWidth: this.borderWidth,
-        hoverBorderWidth: this.hoverBorderWidth
-      }]
-    };
-  }
-  processChartJSData(data) {
-    const processedData = { ...data };
-    processedData.datasets = processedData.datasets.map((dataset) => ({
-      ...dataset,
-      backgroundColor: dataset.backgroundColor || this.generateColors(processedData.labels.length),
-      borderColor: dataset.borderColor || this.borderColor,
-      borderWidth: dataset.borderWidth || this.borderWidth,
-      hoverBorderWidth: dataset.hoverBorderWidth || this.hoverBorderWidth
-    }));
-    return processedData;
-  }
-  processObjectData(data) {
-    const labels = Object.keys(data);
-    const values = Object.values(data);
-    return {
-      labels,
-      datasets: [{
-        data: values,
-        backgroundColor: this.generateColors(labels.length),
-        borderColor: this.borderColor,
-        borderWidth: this.borderWidth,
-        hoverBorderWidth: this.hoverBorderWidth
-      }]
-    };
-  }
-  applyFormattersToData(data) {
-    if (!data) return data;
-    const processedData = { ...data };
-    if (this.labelFormatter && processedData.labels) {
-      processedData.labels = processedData.labels.map(
-        (label) => this.dataFormatter.pipe(label, this.labelFormatter)
-      );
-    }
-    return processedData;
-  }
-  generateColors(count) {
-    const colors = [];
-    for (let i = 0; i < count; i++) {
-      colors.push(this.colors[i % this.colors.length]);
-    }
-    return colors;
-  }
-  buildChartOptions() {
-    const options = super.buildChartOptions();
-    options.cutout = this.cutout;
-    options.rotation = this.rotation;
-    options.circumference = this.circumference;
-    options.animation = {
-      animateRotate: this.animateRotate,
-      animateScale: this.animateScale,
-      duration: this.animations ? 1e3 : 0
-    };
-    options.plugins = {
-      ...options.plugins,
-      legend: {
-        ...options.plugins.legend,
-        position: options.plugins.legend.position || "right",
-        labels: {
-          ...options.plugins.legend.labels,
-          usePointStyle: true,
-          padding: 20,
-          generateLabels: (chart) => {
-            const data = chart.data;
-            if (data.labels.length && data.datasets.length) {
-              return data.labels.map((label, i) => {
-                const dataset = data.datasets[0];
-                const value = dataset.data[i];
-                const backgroundColor = dataset.backgroundColor[i];
-                const total = dataset.data.reduce((sum, val) => sum + val, 0);
-                const percentage = (value / total * 100).toFixed(1);
-                return {
-                  text: `${label} (${percentage}%)`,
-                  fillStyle: backgroundColor,
-                  strokeStyle: backgroundColor,
-                  lineWidth: 0,
-                  hidden: false,
-                  index: i
-                };
-              });
-            }
-            return [];
-          }
-        }
-      },
-      tooltip: {
-        ...options.plugins.tooltip,
-        callbacks: {
-          ...options.plugins.tooltip.callbacks,
-          label: (context) => {
-            const label = context.label || "";
-            const value = context.raw;
-            const dataset = context.dataset;
-            const total = dataset.data.reduce((sum, val) => sum + val, 0);
-            const percentage = (value / total * 100).toFixed(1);
-            let formattedValue = value;
-            if (this.valueFormatter) {
-              formattedValue = this.dataFormatter.pipe(value, this.valueFormatter);
-            } else if (this.tooltipFormatters && this.tooltipFormatters.y) {
-              formattedValue = this.dataFormatter.pipe(value, this.tooltipFormatters.y);
-            }
-            return `${label}: ${formattedValue} (${percentage}%)`;
-          }
-        }
-      }
-    };
-    delete options.scales;
-    return options;
-  }
-  setupChartEventHandlers() {
-    super.setupChartEventHandlers();
-    if (!this.chart || !this.clickable) return;
-    this.chart.options.onClick = (event, elements) => {
-      if (elements.length > 0) {
-        const element = elements[0];
-        const index = element.index;
-        const dataset = this.chart.data.datasets[0];
-        const label = this.chart.data.labels[index];
-        const value = dataset.data[index];
-        const total = dataset.data.reduce((sum, val) => sum + val, 0);
-        const percentage = (value / total * 100).toFixed(1);
-        this.toggleSegmentSelection(index);
-        const eventBus = this.getApp()?.events;
-        if (eventBus) {
-          eventBus.emit("chart:segment-clicked", {
-            chart: this,
-            index,
-            label,
-            value,
-            percentage: parseFloat(percentage),
-            isSelected: this.selectedSegment === index
-          });
-        }
-      }
-    };
-    if (this.hoverable) {
-      this.chart.options.onHover = (event, elements) => {
-        this.canvas.style.cursor = elements.length > 0 ? "pointer" : "default";
-        if (elements.length > 0) {
-          const element = elements[0];
-          const index = element.index;
-          const eventBus = this.getApp()?.events;
-          if (eventBus) {
-            eventBus.emit("chart:segment-hover", {
-              chart: this,
-              index,
-              label: this.chart.data.labels[index],
-              value: this.chart.data.datasets[0].data[index]
-            });
-          }
-        }
-      };
-    }
-  }
-  toggleSegmentSelection(index) {
-    if (this.selectedSegment === index) {
-      this.selectedSegment = null;
-      this.resetSegmentStyle(index);
-    } else {
-      if (this.selectedSegment !== null) {
-        this.resetSegmentStyle(this.selectedSegment);
-      }
-      this.selectedSegment = index;
-      this.highlightSegment(index);
-    }
-  }
-  highlightSegment(index) {
-    if (!this.chart) return;
-    const meta = this.chart.getDatasetMeta(0);
-    const segment = meta.data[index];
-    if (segment) {
-      segment.outerRadius += 10;
-      this.chart.update("none");
-    }
-  }
-  resetSegmentStyle(index) {
-    if (!this.chart) return;
-    const meta = this.chart.getDatasetMeta(0);
-    const segment = meta.data[index];
-    if (segment) {
-      segment.outerRadius -= 10;
-      this.chart.update("none");
-    }
-  }
-  highlightSegments(indices) {
-    if (!Array.isArray(indices)) {
-      indices = [indices];
-    }
-    this.highlightedSegments.clear();
-    indices.forEach((index) => {
-      this.highlightedSegments.add(index);
-      this.highlightSegment(index);
-    });
-  }
-  clearHighlights() {
-    this.highlightedSegments.forEach((index) => {
-      this.resetSegmentStyle(index);
-    });
-    this.highlightedSegments.clear();
-    if (this.selectedSegment !== null) {
-      this.resetSegmentStyle(this.selectedSegment);
-      this.selectedSegment = null;
-    }
-  }
-  // Public API extensions
-  selectSegment(index) {
-    if (index >= 0 && index < this.chart?.data?.labels?.length) {
-      this.toggleSegmentSelection(index);
-    }
-  }
-  getSegmentData(index) {
-    if (!this.chart || !this.chart.data) return null;
-    const dataset = this.chart.data.datasets[0];
-    const label = this.chart.data.labels[index];
-    const value = dataset.data[index];
-    const total = dataset.data.reduce((sum, val) => sum + val, 0);
-    const percentage = (value / total * 100).toFixed(1);
-    return {
-      index,
-      label,
-      value,
-      percentage: parseFloat(percentage),
-      color: dataset.backgroundColor[index],
-      isSelected: this.selectedSegment === index
-    };
-  }
-  getAllSegments() {
-    if (!this.chart || !this.chart.data) return [];
-    return this.chart.data.labels.map((_, index) => this.getSegmentData(index));
-  }
-  updateSegmentColor(index, color) {
-    if (!this.chart || !this.chart.data.datasets[0]) return;
-    this.chart.data.datasets[0].backgroundColor[index] = color;
-    this.chart.update("none");
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("chart:segment-color-changed", {
-        chart: this,
-        index,
-        color,
-        segment: this.getSegmentData(index)
-      });
-    }
-  }
-  addSegment(label, value, color = null) {
-    if (!this.chart || !this.chart.data) return;
-    const dataset = this.chart.data.datasets[0];
-    const segmentColor = color || this.colors[this.chart.data.labels.length % this.colors.length];
-    this.chart.data.labels.push(label);
-    dataset.data.push(value);
-    dataset.backgroundColor.push(segmentColor);
-    this.chart.update();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("chart:segment-added", {
-        chart: this,
-        label,
-        value,
-        color: segmentColor,
-        index: this.chart.data.labels.length - 1
-      });
-    }
-  }
-  removeSegment(index) {
-    if (!this.chart || !this.chart.data || index < 0 || index >= this.chart.data.labels.length) {
-      return;
-    }
-    const dataset = this.chart.data.datasets[0];
-    const label = this.chart.data.labels[index];
-    const value = dataset.data[index];
-    this.chart.data.labels.splice(index, 1);
-    dataset.data.splice(index, 1);
-    dataset.backgroundColor.splice(index, 1);
-    if (this.selectedSegment === index) {
-      this.selectedSegment = null;
-    } else if (this.selectedSegment > index) {
-      this.selectedSegment--;
-    }
-    this.chart.update();
-    const eventBus = this.getApp()?.events;
-    if (eventBus) {
-      eventBus.emit("chart:segment-removed", {
-        chart: this,
-        label,
-        value,
-        index,
-        removedSegment: { label, value, index }
-      });
-    }
-  }
-  // Override applyThemeToOptions for pie chart specific theming
-  applyThemeToOptions(options) {
-    super.applyThemeToOptions(options);
-    const isDark = this.theme === "dark";
-    if (isDark) {
-      this.borderColor = "#404449";
-    } else {
-      this.borderColor = "#ffffff";
-    }
-  }
-  // Static dialog method
-  static async showDialog(options = {}) {
-    const {
-      title = "Pie Chart",
-      size = "lg",
-      ...chartOptions
-    } = options;
-    const chart = new PieChart({
-      ...chartOptions,
-      title
-    });
-    const dialog = new Dialog({
-      title,
-      body: chart,
-      size,
-      centered: true,
-      backdrop: "static",
-      keyboard: true,
-      buttons: [
-        {
-          text: "Export PNG",
-          action: "export",
-          class: "btn btn-outline-primary"
-        },
-        {
-          text: "Close",
-          action: "close",
-          class: "btn btn-secondary",
-          dismiss: true
-        }
-      ]
-    });
-    await dialog.render();
-    document.body.appendChild(dialog.element);
-    await dialog.mount();
-    dialog.show();
-    return new Promise((resolve) => {
-      dialog.on("hidden", () => {
-        dialog.destroy();
-        resolve(chart);
-      });
-      dialog.on("action:export", () => {
-        chart.exportChart("png");
-      });
-      dialog.on("action:close", () => {
-        dialog.hide();
-      });
-    });
-  }
-}
-class MetricsChart extends SeriesChart {
-  constructor(options = {}) {
-    super({
-      ...options,
-      chartType: options.chartType || "line",
-      title: options.title || "Metrics",
-      colors: options.colors,
-      yAxis: options.yAxis || { label: "Count", beginAtZero: true },
-      tooltip: options.tooltip || { y: "number" },
-      width: options.width,
-      height: options.height
-    });
-    this.endpoint = options.endpoint || "/api/metrics/fetch";
-    this.account = options.account || "global";
-    this.granularity = options.granularity || "hours";
-    this.slugs = options.slugs || null;
-    this.category = options.category || null;
-    this.dateStart = options.dateStart || null;
-    this.dateEnd = options.dateEnd || null;
-    this.defaultDateRange = options.defaultDateRange || "24h";
-    this.showGranularity = options.showGranularity !== false;
-    this.showDateRange = options.showDateRange !== false;
-    this.granularityOptions = options.granularityOptions || [
-      { value: "minutes", label: "Minutes" },
-      { value: "hours", label: "Hours" },
-      { value: "days", label: "Days" },
-      { value: "weeks", label: "Weeks" },
-      { value: "months", label: "Months" }
-    ];
-    this.quickRanges = options.quickRanges || [
-      { value: "1h", label: "1H" },
-      { value: "24h", label: "24H" },
-      { value: "7d", label: "7D" },
-      { value: "30d", label: "30D" }
-    ];
-    this.availableMetrics = options.availableMetrics || [
-      { value: "api_calls", label: "API Calls" },
-      { value: "api_errors", label: "API Errors" },
-      { value: "incident_evt", label: "System Events" },
-      { value: "incidents", label: "Incidents" }
-    ];
-    this.maxDatasets = Number.isFinite(options.maxDatasets) ? options.maxDatasets : null;
-    this.groupRemainingLabel = options.groupRemainingLabel || "Other";
-    this.isLoading = false;
-    this.lastFetch = null;
-    if (!this.dateStart || !this.dateEnd) {
-      this.setQuickRange(this.defaultDateRange);
-    }
-  }
-  async onInit() {
-    const controls = [];
-    if (this.showGranularity) {
-      controls.push({
-        type: "select",
-        name: "granularity",
-        action: "granularity-changed",
-        size: "sm",
-        options: this.granularityOptions.map((opt) => ({
-          value: opt.value,
-          label: opt.label,
-          selected: opt.value === this.granularity
-        }))
-      });
-    }
-    if (this.showDateRange) {
-      controls.push({
-        type: "button",
-        action: "show-date-range-dialog",
-        labelHtml: `<i class="bi bi-calendar-range me-1"></i>${this.formatDateRangeDisplay()}`,
-        title: "Select Date Range",
-        variant: "outline-secondary",
-        size: "sm"
-      });
-    }
-    this.headerConfig = {
-      titleHtml: this.title || "Metrics",
-      chartTitle: this.chartTitle || "",
-      showExport: this.exportEnabled === true,
-      showRefresh: this.refreshEnabled,
-      showTheme: false,
-      controls
-    };
-    await super.onInit();
-  }
-  // Action Handlers
-  async onActionGranularityChanged(event, element) {
-    const newGranularity = element.value;
-    if (newGranularity && newGranularity !== this.granularity) {
-      this.granularity = newGranularity;
-      await this.fetchData();
-    }
-  }
-  async onActionShowDateRangeDialog() {
-    try {
-      const result = await Dialog.showForm({
-        title: "Select Date Range",
-        size: "md",
-        fields: [
-          {
-            name: "dateRange",
-            type: "daterange",
-            label: "Date Range",
-            startName: "dt_start",
-            endName: "dt_end",
-            startDate: this.formatDateTimeLocal(this.dateStart),
-            endDate: this.formatDateTimeLocal(this.dateEnd),
-            required: true
-          }
-        ],
-        formConfig: {
-          options: {
-            submitButton: false,
-            resetButton: false
-          }
-        }
-      });
-      if (result && result.startDate && result.endDate) {
-        this.dateStart = new Date(result.startDate);
-        this.dateEnd = new Date(result.endDate);
-        const btn = this.element?.querySelector('[data-action="show-date-range-dialog"]');
-        if (btn) {
-          btn.innerHTML = `<i class="bi bi-calendar-range me-1"></i>${this.formatDateRangeDisplay()}`;
-        }
-        await this.fetchData();
-      }
-    } catch (error) {
-      console.error("Date range dialog error:", error);
-    }
-  }
-  // Data Management
-  buildApiParams() {
-    const params = {
-      granularity: this.granularity,
-      account: this.account,
-      with_labels: true
-    };
-    if (this.slugs) {
-      this.slugs.forEach((slug) => {
-        if (!params["slugs[]"]) params["slugs[]"] = [];
-        params["slugs[]"].push(slug);
-      });
-    }
-    if (this.category) {
-      params.category = this.category;
-    }
-    if (this.dateStart) {
-      params.dr_start = Math.floor(this.dateStart.getTime() / 1e3);
-    }
-    if (this.dateEnd) {
-      params.dr_end = Math.floor(this.dateEnd.getTime() / 1e3);
-    }
-    params._ = Date.now();
-    return params;
-  }
-  async fetchData() {
-    if (!this.endpoint) return;
-    this.isLoading = true;
-    this.showLoading();
-    try {
-      const rest = this.getApp()?.rest;
-      if (!rest) {
-        throw new Error("No REST client available");
-      }
-      const params = this.buildApiParams();
-      const response = await rest.GET(this.endpoint, params);
-      if (!response.success) {
-        throw new Error(response.message || "Network error");
-      }
-      if (!response.data?.status) {
-        throw new Error(response.data?.error || "Server error");
-      }
-      const metricsData = response.data.data;
-      const chartData = this.processMetricsData(metricsData);
-      await this.setData(chartData);
-      this.lastFetch = /* @__PURE__ */ new Date();
-      this.emit("metrics:data-loaded", {
-        chart: this,
-        data: metricsData,
-        params
-      });
-    } catch (error) {
-      console.error("Failed to fetch metrics data:", error);
-      this.showError(`Failed to load metrics: ${error.message}`);
-      this.emit("metrics:error", { chart: this, error });
-    } finally {
-      this.isLoading = false;
-      this.hideLoading();
-    }
-  }
-  processMetricsData(data) {
-    const { data: metricsData, labels } = data;
-    const metricEntries = Object.entries(metricsData || {});
-    const rankedEntries = metricEntries.map(([metric, values]) => {
-      const sanitizedValues = values.map((val) => {
-        if (val === null || val === void 0 || val === "") return 0;
-        return typeof val === "number" ? val : parseFloat(val) || 0;
-      });
-      const total = sanitizedValues.reduce((sum, val) => sum + val, 0);
-      return { metric, values: sanitizedValues, total };
-    });
-    rankedEntries.sort((a, b) => b.total - a.total);
-    let visibleEntries = rankedEntries;
-    let otherEntry = null;
-    if (this.maxDatasets && this.maxDatasets > 0 && rankedEntries.length > this.maxDatasets) {
-      visibleEntries = rankedEntries.slice(0, this.maxDatasets);
-      const remaining = rankedEntries.slice(this.maxDatasets);
-      const otherValues = labels.map(
-        (_, index) => remaining.reduce((sum, entry) => sum + (entry.values[index] || 0), 0)
-      );
-      otherEntry = {
-        metric: this.groupRemainingLabel,
-        values: otherValues,
-        total: otherValues.reduce((sum, val) => sum + val, 0),
-        isGrouped: true
-      };
-    }
-    const datasets = [];
-    const allEntries = otherEntry ? [...visibleEntries, otherEntry] : visibleEntries;
-    this.ensureColorPool(allEntries.length);
-    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
-    allEntries.forEach((entry, index) => {
-      const baseColor = this.getColor(index);
-      datasets.push({
-        label: this.formatMetricLabel(entry.metric),
-        data: entry.values,
-        backgroundColor: this.withAlpha(baseColor, backgroundAlpha),
-        borderColor: baseColor,
-        borderWidth: 2,
-        tension: this.chartType === "line" ? 0.4 : 0,
-        fill: false,
-        pointRadius: this.chartType === "line" ? 3 : 0,
-        pointHoverRadius: 5
-      });
-    });
-    return { labels, datasets };
-  }
-  formatMetricLabel(metric) {
-    return metric.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-  }
-  // Date utilities
-  setQuickRange(range) {
-    const now = /* @__PURE__ */ new Date();
-    let startDate;
-    switch (range) {
-      case "1h":
-        startDate = new Date(now.getTime() - 60 * 60 * 1e3);
-        break;
-      case "24h":
-        startDate = new Date(now.getTime() - 24 * 60 * 60 * 1e3);
-        break;
-      case "7d":
-        startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1e3);
-        break;
-      case "30d":
-        startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1e3);
-        break;
-      default:
-        startDate = new Date(now.getTime() - 24 * 60 * 60 * 1e3);
-    }
-    this.dateStart = startDate;
-    this.dateEnd = now;
-  }
-  formatDateTimeLocal(date) {
-    if (!date) return "";
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-  }
-  // Public API
-  setGranularity(granularity) {
-    this.granularity = granularity;
-    return this.fetchData();
-  }
-  setDateRange(startDate, endDate) {
-    this.dateStart = new Date(startDate);
-    this.dateEnd = new Date(endDate);
-    return this.fetchData();
-  }
-  setMetrics(slugs) {
-    this.slugs = [...slugs];
-    return this.fetchData();
-  }
-  getStats() {
-    const base = super.getStats();
-    return {
-      ...base,
-      lastFetch: this.lastFetch,
-      granularity: this.granularity,
-      slugs: [...this.slugs],
-      dateRange: {
-        start: this.dateStart,
-        end: this.dateEnd
-      }
-    };
-  }
-}
-class MiniChart extends View {
-  constructor(options = {}) {
-    super({
-      className: "mini-chart",
-      ...options
-    });
-    this.chartType = options.chartType || "line";
-    this.data = options.data || [];
-    this.width = options.width || "100%";
-    this.height = options.height || 30;
-    this.maintainAspectRatio = options.maintainAspectRatio || false;
-    this.color = options.color || "rgba(54, 162, 235, 1)";
-    this.fillColor = options.fillColor || "rgba(54, 162, 235, 0.1)";
-    this.strokeWidth = options.strokeWidth || 2;
-    this.barGap = options.barGap || 2;
-    this.fill = options.fill !== false;
-    this.smoothing = options.smoothing || 0.3;
-    this.padding = options.padding || 2;
-    this.minValue = options.minValue;
-    this.maxValue = options.maxValue;
-    this.showDots = options.showDots || false;
-    this.dotRadius = options.dotRadius || 2;
-    this.animate = options.animate !== false;
-    this.animationDuration = options.animationDuration || 300;
-    this.showTooltip = options.showTooltip !== false;
-    this.tooltipFormatter = options.tooltipFormatter || null;
-    this.tooltipTemplate = options.tooltipTemplate || null;
-    this.valueFormat = options.valueFormat || null;
-    this.labelFormat = options.labelFormat || null;
-    this.showCrosshair = options.showCrosshair !== false;
-    this.crosshairColor = options.crosshairColor || "rgba(0, 0, 0, 0.2)";
-    this.crosshairWidth = options.crosshairWidth || 1;
-    this.showXAxis = options.showXAxis || false;
-    this.xAxisColor = options.xAxisColor || this.color;
-    this.xAxisWidth = options.xAxisWidth || 1;
-    this.xAxisDashed = options.xAxisDashed !== false;
-    this.tooltip = null;
-    this.crosshair = null;
-    this.hoveredIndex = -1;
-    this.dataFormatter = dataFormatter;
-    this.labels = options.labels || null;
-  }
-  getTemplate() {
-    const widthStyle = typeof this.width === "number" ? `${this.width}px` : this.width;
-    const heightStyle = typeof this.height === "number" ? `${this.height}px` : this.height;
-    const preserveAspectRatio = this.maintainAspectRatio ? "xMidYMid meet" : "none";
-    return `
-      <div class="mini-chart-wrapper" style="position: relative; display: block; width: ${widthStyle}; height: ${heightStyle};">
-        <svg
-          class="mini-chart-svg"
-          width="100%"
-          height="100%"
-          viewBox="0 0 100 ${this.height}"
-          preserveAspectRatio="${preserveAspectRatio}"
-          style="display: block;">
-        </svg>
-        ${this.showTooltip ? '<div class="mini-chart-tooltip" style="display: none;"></div>' : ""}
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    this.svg = this.element.querySelector(".mini-chart-svg");
-    this.tooltip = this.element.querySelector(".mini-chart-tooltip");
-    this.updateDimensions();
-    if (this.data && this.data.length > 0) {
-      this.renderChart();
-    }
-    if (this.showTooltip && this.svg) {
-      this.setupTooltip();
-    }
-    this.setupResizeObserver();
-  }
-  updateDimensions() {
-    if (!this.svg) return;
-    const rect = this.svg.getBoundingClientRect();
-    this.actualWidth = rect.width || 100;
-    this.actualHeight = rect.height || this.height;
-    this.svg.setAttribute("viewBox", `0 0 ${this.actualWidth} ${this.actualHeight}`);
-  }
-  setupResizeObserver() {
-    if (typeof ResizeObserver === "undefined") return;
-    this.resizeObserver = new ResizeObserver(() => {
-      this.updateDimensions();
-      if (this.data && this.data.length > 0) {
-        this.renderChart();
-      }
-    });
-    if (this.svg) {
-      this.resizeObserver.observe(this.svg);
-    }
-  }
-  renderChart() {
-    if (!this.svg || !this.data || this.data.length === 0) return;
-    this.svg.innerHTML = "";
-    const { min, max } = this.calculateBounds();
-    if (this.showXAxis) {
-      this.renderXAxis(min, max);
-    }
-    if (this.chartType === "line") {
-      this.renderLine(min, max);
-    } else if (this.chartType === "bar") {
-      this.renderBar(min, max);
-    }
-    if (this.showCrosshair) {
-      const height = this.getActualHeight();
-      this.crosshair = this.createSVGElement("line", {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: height,
-        stroke: this.crosshairColor,
-        "stroke-width": this.crosshairWidth,
-        "stroke-dasharray": "3,3",
-        style: "display: none; pointer-events: none;"
-      });
-      this.svg.appendChild(this.crosshair);
-    }
-    if (this.showTooltip && this.tooltip) {
-      this.setupTooltip();
-    }
-    if (this.animate) {
-      this.applyAnimation();
-    }
-  }
-  renderXAxis(min, max) {
-    const width = this.getActualWidth();
-    const height = this.getActualHeight();
-    let yPos;
-    if (min <= 0 && max >= 0) {
-      const range = max - min;
-      const yScale = (height - this.padding * 2) / range;
-      yPos = height - this.padding - (0 - min) * yScale;
-    } else {
-      yPos = height - this.padding;
-    }
-    const xAxis = this.createSVGElement("line", {
-      x1: this.padding,
-      y1: yPos,
-      x2: width - this.padding,
-      y2: yPos,
-      stroke: this.xAxisColor,
-      "stroke-width": this.xAxisWidth,
-      "stroke-dasharray": this.xAxisDashed ? "2,2" : "none",
-      "stroke-opacity": "0.5"
-    });
-    this.svg.appendChild(xAxis);
-  }
-  calculateBounds() {
-    const values = this.data.map((d) => typeof d === "object" ? d.value : d);
-    let min = this.minValue !== void 0 ? this.minValue : Math.min(...values);
-    let max = this.maxValue !== void 0 ? this.maxValue : Math.max(...values);
-    const range = max - min;
-    if (range === 0) {
-      if (this.chartType === "bar") {
-        if (min === 0) {
-          min = 0;
-          max = 1;
-        } else {
-          min = min - 1;
-          max = max + 1;
-        }
-      } else {
-        min = min - 1;
-        max = max + 1;
-      }
-    }
-    return { min, max };
-  }
-  getActualWidth() {
-    return this.actualWidth || this.width || 100;
-  }
-  getActualHeight() {
-    return this.actualHeight || this.height || 30;
-  }
-  renderLine(min, max) {
-    const values = this.data.map((d) => typeof d === "object" ? d.value : d);
-    const points = this.calculatePoints(values, min, max);
-    if (this.fill) {
-      const areaPath = this.createAreaPath(points);
-      const area = this.createSVGElement("path", {
-        d: areaPath,
-        fill: this.fillColor,
-        stroke: "none"
-      });
-      this.svg.appendChild(area);
-    }
-    const linePath = this.smoothing > 0 ? this.createSmoothPath(points) : this.createLinePath(points);
-    const line = this.createSVGElement("path", {
-      d: linePath,
-      fill: "none",
-      stroke: this.color,
-      "stroke-width": this.strokeWidth,
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    });
-    this.svg.appendChild(line);
-    if (this.showDots) {
-      points.forEach((point) => {
-        const dot = this.createSVGElement("circle", {
-          cx: point.x,
-          cy: point.y,
-          r: this.dotRadius,
-          fill: this.color
-        });
-        this.svg.appendChild(dot);
-      });
-    }
-  }
-  renderBar(min, max) {
-    const values = this.data.map((d) => typeof d === "object" ? d.value : d);
-    const points = this.calculatePoints(values, min, max);
-    const width = this.getActualWidth();
-    const height = this.getActualHeight();
-    const barWidth = (width - this.padding * 2 - this.barGap * (values.length - 1)) / values.length;
-    points.forEach((point, index) => {
-      const barHeight = height - this.padding * 2 - point.y + this.padding;
-      const x = point.x - barWidth / 2;
-      const y = point.y;
-      const bar = this.createSVGElement("rect", {
-        x,
-        y,
-        width: barWidth,
-        height: barHeight,
-        fill: this.color,
-        rx: 1,
-        // Slight rounding
-        "data-bar-index": index,
-        class: "mini-chart-bar"
-      });
-      this.svg.appendChild(bar);
-    });
-  }
-  calculatePoints(values, min, max) {
-    const range = max - min;
-    const width = this.getActualWidth();
-    const height = this.getActualHeight();
-    const xStep = (width - this.padding * 2) / (values.length - 1 || 1);
-    const yScale = (height - this.padding * 2) / range;
-    return values.map((value, index) => ({
-      x: this.padding + index * xStep,
-      y: height - this.padding - (value - min) * yScale
-    }));
-  }
-  createLinePath(points) {
-    if (points.length === 0) return "";
-    let path = `M ${points[0].x},${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-      path += ` L ${points[i].x},${points[i].y}`;
-    }
-    return path;
-  }
-  createSmoothPath(points) {
-    if (points.length < 2) return this.createLinePath(points);
-    let path = `M ${points[0].x},${points[0].y}`;
-    for (let i = 0; i < points.length - 1; i++) {
-      const current = points[i];
-      const next = points[i + 1];
-      const cp1x = current.x + (next.x - current.x) * this.smoothing;
-      const cp1y = current.y;
-      const cp2x = next.x - (next.x - current.x) * this.smoothing;
-      const cp2y = next.y;
-      path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
-    }
-    return path;
-  }
-  createAreaPath(points) {
-    if (points.length === 0) return "";
-    const linePath = this.smoothing > 0 ? this.createSmoothPath(points) : this.createLinePath(points);
-    const lastPoint = points[points.length - 1];
-    const firstPoint = points[0];
-    const height = this.getActualHeight();
-    return `${linePath} L ${lastPoint.x},${height - this.padding} L ${firstPoint.x},${height - this.padding} Z`;
-  }
-  createSVGElement(tag, attributes = {}) {
-    const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
-    Object.entries(attributes).forEach(([key, value]) => {
-      element.setAttribute(key, value);
-    });
-    return element;
-  }
-  applyAnimation() {
-    const paths = this.svg.querySelectorAll("path");
-    paths.forEach((path) => {
-      const length = path.getTotalLength();
-      path.style.strokeDasharray = length;
-      path.style.strokeDashoffset = length;
-      path.style.animation = `mini-chart-draw ${this.animationDuration}ms ease-out forwards`;
-    });
-    const bars = this.svg.querySelectorAll("rect");
-    bars.forEach((bar, index) => {
-      bar.style.transformOrigin = "bottom";
-      bar.style.animation = `mini-chart-bar-grow ${this.animationDuration}ms ease-out ${index * 20}ms forwards`;
-      bar.style.transform = "scaleY(0)";
-    });
-  }
-  setupTooltip() {
-    if (!this.svg || !this.tooltip) return;
-    const values = this.data.map((d) => typeof d === "object" ? d.value : d);
-    const points = this.calculatePoints(values, ...Object.values(this.calculateBounds()));
-    const width = this.getActualWidth();
-    const height = this.getActualHeight();
-    const barWidth = width / values.length;
-    points.forEach((point, index) => {
-      const hitArea = this.createSVGElement("rect", {
-        x: index * barWidth,
-        y: 0,
-        width: barWidth,
-        height,
-        fill: "transparent",
-        style: "cursor: pointer;"
-      });
-      hitArea.addEventListener("mouseenter", (e) => {
-        this.showTooltipAtIndex(index, e);
-      });
-      hitArea.addEventListener("mousemove", (e) => {
-        this.updateTooltipPosition(e);
-      });
-      hitArea.addEventListener("mouseleave", () => {
-        this.hideTooltip();
-      });
-      this.svg.appendChild(hitArea);
-    });
-  }
-  showTooltipAtIndex(index, event) {
-    if (!this.tooltip) return;
-    this.hoveredIndex = index;
-    const value = typeof this.data[index] === "object" ? this.data[index].value : this.data[index];
-    const dataLabel = typeof this.data[index] === "object" ? this.data[index].label : null;
-    const label = this.labels ? this.labels[index] : dataLabel;
-    let content;
-    if (this.tooltipTemplate && typeof this.tooltipTemplate === "function") {
-      content = this.tooltipTemplate({ value, label, index, data: this.data[index] });
-    } else {
-      let displayValue = value;
-      if (this.valueFormat && this.dataFormatter) {
-        displayValue = this.dataFormatter.pipe(value, this.valueFormat);
-      } else if (this.tooltipFormatter && typeof this.tooltipFormatter === "function") {
-        displayValue = this.tooltipFormatter(value, index);
-      } else {
-        displayValue = typeof value === "number" ? value.toLocaleString() : value;
-      }
-      let displayLabel = label;
-      if (label && this.labelFormat && this.dataFormatter) {
-        displayLabel = this.dataFormatter.pipe(label, this.labelFormat);
-      }
-      content = `<strong>${displayValue}</strong>`;
-      if (displayLabel) {
-        content = `<div class="mini-chart-tooltip-label">${displayLabel}</div>${content}`;
-      }
-    }
-    this.tooltip.innerHTML = content;
-    this.tooltip.style.display = "block";
-    this.updateTooltipPosition(event);
-    if (this.chartType === "bar") {
-      this.highlightBar(index);
-    }
-    if (this.crosshair && this.showCrosshair) {
-      const width = this.getActualWidth();
-      const barWidth = width / this.data.length;
-      const x = index * barWidth + barWidth / 2;
-      this.crosshair.setAttribute("x1", x);
-      this.crosshair.setAttribute("x2", x);
-      this.crosshair.style.display = "block";
-    }
-  }
-  updateTooltipPosition(event) {
-    if (!this.tooltip || this.tooltip.style.display === "none") return;
-    const rect = this.svg.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    this.tooltip.style.left = `${x}px`;
-    this.tooltip.style.top = `${y - 10}px`;
-    this.tooltip.style.transform = "translate(-50%, -100%)";
-  }
-  hideTooltip() {
-    if (this.tooltip) {
-      this.tooltip.style.display = "none";
-      this.hoveredIndex = -1;
-    }
-    if (this.chartType === "bar") {
-      this.unhighlightBars();
-    }
-    if (this.crosshair) {
-      this.crosshair.style.display = "none";
-    }
-  }
-  highlightBar(index) {
-    if (!this.svg) return;
-    this.unhighlightBars();
-    const bar = this.svg.querySelector(`rect.mini-chart-bar[data-bar-index="${index}"]`);
-    if (bar) {
-      bar.style.opacity = "0.7";
-    }
-  }
-  unhighlightBars() {
-    if (!this.svg) return;
-    const bars = this.svg.querySelectorAll("rect.mini-chart-bar");
-    bars.forEach((bar) => {
-      bar.style.opacity = "1";
-    });
-  }
-  // Public API
-  setData(data) {
-    this.data = data;
-    if (this.svg) {
-      this.renderChart();
-    }
-  }
-  setColor(color) {
-    this.color = color;
-    if (this.svg) {
-      this.renderChart();
-    }
-  }
-  setType(type) {
-    if (["line", "bar"].includes(type)) {
-      this.chartType = type;
-      if (this.svg) {
-        this.renderChart();
-      }
-    }
-  }
-  resize(width, height) {
-    this.width = width;
-    this.height = height;
-    this.updateDimensions();
-    if (this.svg) {
-      this.renderChart();
-    }
-  }
-  async onBeforeDestroy() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    await super.onBeforeDestroy();
-  }
-}
-class MetricsMiniChart extends MiniChart {
-  constructor(options = {}) {
-    super(options);
-    this.endpoint = options.endpoint || "/api/metrics/fetch";
-    this.account = options.account || "global";
-    this.granularity = options.granularity || "hours";
-    this.slugs = options.slugs || null;
-    this.category = options.category || null;
-    this.dateStart = options.dateStart || null;
-    this.dateEnd = options.dateEnd || null;
-    this.defaultDateRange = options.defaultDateRange || null;
-    this.isLoading = false;
-    this.lastFetch = null;
-    this.refreshInterval = options.refreshInterval;
-    if (this.defaultDateRange && !this.dateStart && !this.dateEnd) {
-      this.setQuickRange(this.defaultDateRange);
-    }
-    if (this.slugs && !Array.isArray(this.slugs)) {
-      this.slugs = [this.slugs];
-    }
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    if (this.endpoint && (!this.data || this.data.length === 0)) {
-      this.fetchData();
-    }
-    if (this.refreshInterval && this.endpoint) {
-      this.startAutoRefresh();
-    }
-  }
-  buildApiParams() {
-    const params = {
-      granularity: this.granularity,
-      account: this.account,
-      with_labels: true
-    };
-    if (this.slugs && this.slugs.length > 0) {
-      this.slugs.forEach((slug) => {
-        if (!params["slugs[]"]) params["slugs[]"] = [];
-        params["slugs[]"].push(slug);
-      });
-    }
-    if (this.category) {
-      params.category = this.category;
-    }
-    if (this.dateStart) {
-      params.dr_start = Math.floor(this.dateStart.getTime() / 1e3);
-    }
-    if (this.dateEnd) {
-      params.dr_end = Math.floor(this.dateEnd.getTime() / 1e3);
-    }
-    params._ = Date.now();
-    return params;
-  }
-  async fetchData() {
-    if (!this.endpoint) return;
-    this.isLoading = true;
-    try {
-      const rest = this.getApp()?.rest;
-      if (!rest) {
-        throw new Error("No REST client available");
-      }
-      const params = this.buildApiParams();
-      const response = await rest.GET(this.endpoint, params);
-      if (!response.success) {
-        throw new Error(response.message || "Network error");
-      }
-      if (!response.data?.status) {
-        throw new Error(response.data?.error || "Server error");
-      }
-      const metricsData = response.data.data;
-      this.processMetricsData(metricsData);
-      this.lastFetch = /* @__PURE__ */ new Date();
-      await this.render();
-      this.emit("metrics:loaded", { chart: this, data: metricsData, params });
-    } catch (error) {
-      console.error("Failed to fetch metrics:", error);
-      this.emit("metrics:error", { chart: this, error });
-    } finally {
-      this.isLoading = false;
-    }
-  }
-  processMetricsData(metricsData) {
-    const { data: metrics, labels } = metricsData;
-    if (!metrics) return;
-    const metricKeys = Object.keys(metrics);
-    if (metricKeys.length === 0) return;
-    const metricSlug = metricKeys[0];
-    const values = metrics[metricSlug];
-    const sanitizedValues = values.map((val) => {
-      if (val === null || val === void 0 || val === "") return 0;
-      return typeof val === "number" ? val : parseFloat(val) || 0;
-    });
-    this.labels = labels || null;
-    this.setData(sanitizedValues);
-  }
-  setQuickRange(range) {
-    const now = /* @__PURE__ */ new Date();
-    let startDate;
-    switch (range) {
-      case "1h":
-        startDate = new Date(now.getTime() - 60 * 60 * 1e3);
-        break;
-      case "24h":
-        startDate = new Date(now.getTime() - 24 * 60 * 60 * 1e3);
-        break;
-      case "7d":
-        startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1e3);
-        break;
-      case "30d":
-        startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1e3);
-        break;
-      default:
-        startDate = new Date(now.getTime() - 24 * 60 * 60 * 1e3);
-    }
-    this.dateStart = startDate;
-    this.dateEnd = now;
-  }
-  startAutoRefresh() {
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer);
-    }
-    this.refreshTimer = setInterval(() => {
-      this.fetchData();
-    }, this.refreshInterval);
-  }
-  stopAutoRefresh() {
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-  }
-  // Public API
-  setGranularity(granularity) {
-    this.granularity = granularity;
-    return this.fetchData();
-  }
-  setDateRange(startDate, endDate) {
-    this.dateStart = new Date(startDate);
-    this.dateEnd = new Date(endDate);
-    return this.fetchData();
-  }
-  setMetrics(slugs) {
-    this.slugs = Array.isArray(slugs) ? slugs : [slugs];
-    return this.fetchData();
-  }
-  refresh() {
-    return this.fetchData();
-  }
-  async onBeforeDestroy() {
-    this.stopAutoRefresh();
-    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({
-      ...options,
-      tagName: "div",
-      className: `metrics-mini-chart-widget ${options.className || ""}`.trim()
-    });
-    this.icon = options.icon || null;
-    this.title = options.title || "";
-    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.showRefresh = options.showRefresh !== false;
-    this.showTrending = !!options.showTrending;
-    this.trendRange = options.trendRange ?? null;
-    this.trendOffset = options.trendOffset ?? 0;
-    this.prevTrendOffset = options.prevTrendOffset ?? 0;
-    this.total = 0;
-    this.lastValue = 0;
-    this.prevValue = 0;
-    this.trendingPercent = 0;
-    this.trendingUp = null;
-    this.hasTrending = false;
-    this.trendingClass = "metrics-mini-chart-trending-text";
-    this.trendingIcon = "";
-    this.trendingLabel = "";
-    this.chartOptions = {
-      endpoint: options.endpoint,
-      account: options.account,
-      granularity: options.granularity,
-      slugs: options.slugs,
-      category: options.category,
-      dateStart: options.dateStart,
-      dateEnd: options.dateEnd,
-      defaultDateRange: options.defaultDateRange,
-      refreshInterval: options.refreshInterval,
-      chartType: options.chartType || "line",
-      showTooltip: options.showTooltip !== void 0 ? options.showTooltip : true,
-      showXAxis: options.showXAxis || false,
-      height: options.height || 80,
-      width: options.chartWidth || options.width || "100%",
-      color: options.color,
-      fill: options.fill !== void 0 ? options.fill : true,
-      fillColor: options.fillColor,
-      smoothing: options.smoothing ?? 0.3,
-      strokeWidth: options.strokeWidth,
-      barGap: options.barGap,
-      valueFormat: options.valueFormat,
-      labelFormat: options.labelFormat,
-      tooltipFormatter: options.tooltipFormatter,
-      tooltipTemplate: options.tooltipTemplate,
-      showCrosshair: options.showCrosshair,
-      crosshairColor: options.crosshairColor,
-      crosshairWidth: options.crosshairWidth,
-      xAxisColor: options.xAxisColor,
-      xAxisWidth: options.xAxisWidth,
-      xAxisDashed: options.xAxisDashed,
-      padding: options.padding,
-      minValue: options.minValue,
-      maxValue: options.maxValue,
-      showDots: options.showDots,
-      dotRadius: options.dotRadius,
-      animate: options.animate,
-      animationDuration: options.animationDuration
-    };
-  }
-  async onInit() {
-    if (this.showSettings && this.settingsKey) {
-      this._loadSettings();
-    }
-    this.chart = new MetricsMiniChart({
-      ...this.chartOptions,
-      containerId: "chart"
-    });
-    this.addChild(this.chart);
-    this.header = new View({
-      containerId: "chart-header",
-      title: this.title,
-      icon: this.icon,
-      template: `
-        <div class="d-flex justify-content-between align-items-start mb-2">
-          <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}}
-                <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>`
-    });
-    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);
-    }
-    this.updateFromChartData({ render: false });
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    if (this.showSettings && this.settingsView) {
-      this._initSettingsPopover();
-    }
-  }
-  onChildMetricsLoaded() {
-    this.updateFromChartData({ render: true });
-  }
-  updateFromChartData({ render = true } = {}) {
-    const values = Array.isArray(this.chart?.data) ? this.chart.data : null;
-    if (!values || values.length === 0) {
-      this.total = 0;
-      this.hasTrending = false;
-      this.header.title = this.title;
-      if (render) this.render();
-      return;
-    }
-    const nums = values.map((v) => {
-      if (typeof v === "number") return v;
-      if (v && typeof v.value === "number") return v.value;
-      const n = parseFloat(v);
-      return Number.isNaN(n) ? 0 : n;
-    });
-    this.header.title = this.title;
-    this.header.total = nums.reduce((a, b) => a + b, 0);
-    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;
-    const k = this.trendRange && this.trendRange >= 2 ? Math.max(1, Math.floor(this.trendRange / 2)) : 1;
-    if (endIndex >= 0) {
-      const lastEnd = endIndex;
-      const lastStart = lastEnd - (k - 1);
-      let prevStart, prevEnd;
-      if (this.prevTrendOffset && this.prevTrendOffset > 0) {
-        prevStart = lastStart - this.prevTrendOffset;
-        prevEnd = lastEnd - this.prevTrendOffset;
-      } else {
-        prevEnd = lastStart - 1;
-        prevStart = prevEnd - (k - 1);
-      }
-      if (lastStart >= 0 && prevStart >= 0) {
-        const sumRange = (arr, s, e) => {
-          let sum = 0;
-          for (let i = s; i <= e; i++) sum += arr[i] || 0;
-          return sum;
-        };
-        lastSum = sumRange(nums, lastStart, lastEnd);
-        prevSum = sumRange(nums, prevStart, prevEnd);
-        hasTrend = true;
-      }
-    }
-    if (!hasTrend) {
-      const prevIndex = endIndex - (this.prevTrendOffset && this.prevTrendOffset > 0 ? this.prevTrendOffset : 1);
-      if (prevIndex >= 0) {
-        lastSum = nums[endIndex];
-        prevSum = nums[prevIndex];
-        hasTrend = true;
-      }
-    }
-    if (hasTrend) {
-      this.header.lastValue = lastSum;
-      this.header.prevValue = prevSum;
-      let percent = 0;
-      if (prevSum === 0) {
-        percent = lastSum > 0 ? 100 : 0;
-      } else {
-        percent = (lastSum - prevSum) / Math.abs(prevSum) * 100;
-      }
-      this.header.trendingPercent = percent;
-      this.header.trendingUp = percent >= 0;
-      if (!this.textColor) {
-        this.header.trendingClass = this.header.trendingUp ? "text-success" : "text-danger";
-      } else {
-        this.header.trendingClass = "";
-      }
-      this.header.trendingIcon = this.header.trendingUp ? "bi bi-arrow-up" : "bi bi-arrow-down";
-      const sign = percent > 0 ? "+" : "";
-      this.header.trendingLabel = `${sign}${percent.toFixed(1)}%`;
-      this.header.hasTrending = this.showTrending;
-    } else {
-      this.header.hasTrending = false;
-    }
-    if (render) {
-      this.header.render();
-    }
-  }
-  _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}`);
-    if (this.textColor) styles.push(`color: ${this.textColor}`);
-    styles.push("border: 0");
-    return styles.join("; ");
-  }
-  async getTemplate() {
-    return `
-      <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>
-    `;
-  }
-  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();
-  }
-  /**
-   * 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-action="toggle-settings"]');
-    if (!button || !this.settingsView || !this.settingsView.element) return;
-    if (this._settingsPopover) return;
-    this._settingsPopover = new bootstrap.Popover(button, {
-      content: this.settingsView.element,
-      html: true,
-      placement: "bottom",
-      trigger: "manual",
-      sanitize: false,
-      customClass: "metrics-chart-settings-popover"
-    });
-  }
-  /**
-   * Handle settings apply
-   * @private
-   */
-  async _handleSettingsApply(data) {
-    if (this._settingsPopover) {
-      this._settingsPopover.hide();
-    }
-    let hasChanges = false;
-    let granularityChanged = false;
-    let datesExplicitlySet = false;
-    if (data.dateStart && data.dateStart !== this.chartOptions.dateStart || data.dateEnd && data.dateEnd !== this.chartOptions.dateEnd) {
-      datesExplicitlySet = true;
-    }
-    if (data.granularity && data.granularity !== this.chartOptions.granularity) {
-      this.chartOptions.granularity = data.granularity;
-      this.chart.granularity = data.granularity;
-      granularityChanged = true;
-      hasChanges = true;
-    }
-    if (data.chartType && data.chartType !== this.chartOptions.chartType) {
-      this.chartOptions.chartType = data.chartType;
-      this.chart.chartType = data.chartType;
-      hasChanges = true;
-    }
-    if (datesExplicitlySet) {
-      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.chartOptions.dateStart || this.chartOptions.dateEnd)) {
-      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();
-    }
-  }
-  /**
-   * Handle settings cancel
-   * @private
-   */
-  _handleSettingsCancel() {
-    if (this._settingsPopover) {
-      this._settingsPopover.hide();
-    }
-  }
-  /**
-   * Handle refresh button click
-   */
-  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");
-    }
-  }
-  refresh() {
-    if (this.chart) {
-      if (this.account) this.chart.account = this.account;
-      this.chart.refresh();
-    }
-  }
-  _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);
-    }
-  }
-  _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,
-  MetricsChart as M,
-  PieChart as P,
-  SeriesChart as S,
-  MiniChart as a,
-  MetricsMiniChart as b,
-  MetricsMiniChartWidget as c
-};
-//# sourceMappingURL=MetricsMiniChartWidget-DvKd7Qrk.js.map