web-mojo 2.1.46

package/dist/chunks/MetricsChart-CM4CI6eA.js

@@ -0,0 +1,2095 @@
+import Dialog from "./Dialog-DSlctbon.js";
+import { V as View, d as dataFormatter } from "./WebApp-B6mgbNn2.js";
+import { W as WebSocketClient } from "./WebSocketClient-Dvl3AYx1.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;");
+  }
+}
+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";
+    this.colors = options.colors || [
+      "rgba(54, 162, 235, 0.8)",
+      // Blue
+      "rgba(255, 99, 132, 0.8)",
+      // Red
+      "rgba(75, 192, 192, 0.8)",
+      // Green
+      "rgba(255, 206, 86, 0.8)",
+      // Yellow
+      "rgba(153, 102, 255, 0.8)",
+      // Purple
+      "rgba(255, 159, 64, 0.8)",
+      // Orange
+      "rgba(199, 199, 199, 0.8)",
+      // Grey
+      "rgba(83, 102, 255, 0.8)"
+      // Indigo
+    ];
+    this.tooltipFormatters = options.tooltip || {};
+  }
+  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);
+    });
+    return {
+      labels,
+      datasets: [{
+        label: this.title || "Data",
+        data: values,
+        backgroundColor: this.colors[0].replace("0.8", "0.6"),
+        borderColor: this.colors[0],
+        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 };
+    processedData.datasets = processedData.datasets.map((dataset, index) => ({
+      ...dataset,
+      backgroundColor: dataset.backgroundColor || this.colors[index % this.colors.length].replace("0.8", "0.6"),
+      borderColor: dataset.borderColor || this.colors[index % this.colors.length],
+      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 = [];
+    data.series.forEach((series, index) => {
+      datasets.push({
+        label: series.name || series.label || `Series ${index + 1}`,
+        data: series.data || [],
+        backgroundColor: series.backgroundColor || this.colors[index % this.colors.length].replace("0.8", "0.6"),
+        borderColor: series.borderColor || this.colors[index % 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,
+        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 || [
+        "rgba(54, 162, 235, 0.8)",
+        // Blue
+        "rgba(255, 99, 132, 0.8)",
+        // Red
+        "rgba(75, 192, 192, 0.8)",
+        // Green
+        "rgba(255, 206, 86, 0.8)",
+        // Yellow
+        "rgba(153, 102, 255, 0.8)",
+        // Purple
+        "rgba(255, 159, 64, 0.8)",
+        // Orange
+        "rgba(199, 199, 199, 0.8)",
+        // Grey
+        "rgba(83, 102, 255, 0.8)"
+        // Indigo
+      ],
+      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 || ["api_calls", "api_errors"];
+    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.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
+    };
+    this.slugs.forEach((slug) => {
+      if (!params["slugs[]"]) params["slugs[]"] = [];
+      params["slugs[]"].push(slug);
+    });
+    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 datasets = [];
+    Object.keys(metricsData).forEach((metric, index) => {
+      const values = metricsData[metric];
+      const sanitizedValues = values.map((val) => {
+        if (val === null || val === void 0 || val === "") return 0;
+        return typeof val === "number" ? val : parseFloat(val) || 0;
+      });
+      datasets.push({
+        label: this.formatMetricLabel(metric),
+        data: sanitizedValues,
+        backgroundColor: this.colors[index % this.colors.length].replace("0.8", "0.6"),
+        borderColor: this.colors[index % this.colors.length],
+        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
+      }
+    };
+  }
+}
+export {
+  BaseChart as B,
+  MetricsChart as M,
+  PieChart as P,
+  SeriesChart as S
+};
+//# sourceMappingURL=MetricsChart-CM4CI6eA.js.map