web-mojo 2.1.627 → 2.1.675

package/dist/chunks/{MetricsChart-DS6rz7HC.js → MetricsMiniChartWidget-0QE0WL-x.js}

@@ -1,5 +1,5 @@
-import Dialog from "./Dialog-Cj0Qxc7O.js";
-import { V as View, d as dataFormatter } from "./WebApp-DeoEYrl6.js";
+import Dialog from "./Dialog-CaQZlPs8.js";
+import { V as View, d as dataFormatter } from "./WebApp-BWnjZ-UU.js";
 import { W as WebSocketClient } from "./WebSocketClient-B6ribe3B.js";
 class BaseChart extends View {
   constructor(options = {}) {
@@ -2092,10 +2092,777 @@ class MetricsChart extends SeriesChart {
     };
   }
 }
+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 || "24h";
+    this.isLoading = false;
+    this.lastFetch = null;
+    this.refreshInterval = options.refreshInterval;
+    if (!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)) {
+      await 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 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.showTrending = !!options.showTrending;
+    this.total = 0;
+    this.lastValue = 0;
+    this.prevValue = 0;
+    this.trendingPercent = 0;
+    this.trendingUp = null;
+    this.hasTrending = false;
+    this.trendingClass = "";
+    this.trendingIcon = "";
+    this.trendingLabel = "";
+    this.chartOptions = {
+      endpoint: options.endpoint,
+      // defaults inside MetricsMiniChart
+      account: options.account,
+      granularity: options.granularity,
+      slugs: options.slugs,
+      category: options.category,
+      dateStart: options.dateStart,
+      dateEnd: options.dateEnd,
+      defaultDateRange: options.defaultDateRange,
+      refreshInterval: options.refreshInterval,
+      // Visuals and interactions
+      chartType: options.chartType || "line",
+      showTooltip: options.showTooltip !== void 0 ? options.showTooltip : true,
+      showXAxis: options.showXAxis || false,
+      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,
+      // Optional formatters and templates
+      valueFormat: options.valueFormat,
+      labelFormat: options.labelFormat,
+      tooltipFormatter: options.tooltipFormatter,
+      tooltipTemplate: options.tooltipTemplate,
+      // Crosshair and axis styling overrides (optional passthroughs)
+      showCrosshair: options.showCrosshair,
+      crosshairColor: options.crosshairColor,
+      crosshairWidth: options.crosshairWidth,
+      xAxisColor: options.xAxisColor,
+      xAxisWidth: options.xAxisWidth,
+      xAxisDashed: options.xAxisDashed,
+      // Other rendering params
+      padding: options.padding,
+      minValue: options.minValue,
+      maxValue: options.maxValue,
+      showDots: options.showDots,
+      dotRadius: options.dotRadius,
+      animate: options.animate,
+      animationDuration: options.animationDuration
+    };
+  }
+  async onInit() {
+    this.chart = new MetricsMiniChart({
+      ...this.chartOptions,
+      containerId: "chart"
+      // mount inside our template container
+    });
+    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="me-3">
+            <h6 class="card-title mb-1" style="${this.textColor ? `color: ${this.textColor}` : ""}">{{title}}</h6>
+            <div class="card-subtitle" style="${this.textColor ? `color: ${this.textColor}` : ""}">${this.subtitle}</div>
+              {{#hasTrending}}
+                <div class="small mt-1 fw-semibold {{trendingClass}}"  style="${this.textColor ? `color: ${this.textColor}` : ""}">
+                  <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.chart?.on) {
+      this.chart.on("metrics:loaded", this.onChildMetricsLoaded, this);
+    }
+    this.updateFromChartData({ render: false });
+  }
+  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);
+    this.header.now_value = nums[nums.length - 1];
+    if (nums.length >= 2) {
+      const last = nums[nums.length - 1];
+      const prev = nums[nums.length - 2];
+      this.header.lastValue = last;
+      this.header.prevValue = prev;
+      let percent = 0;
+      if (prev === 0) {
+        percent = last > 0 ? 100 : 0;
+      } else {
+        percent = (last - prev) / Math.abs(prev) * 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 = true;
+    } else {
+      this.header.hasTrending = false;
+    }
+    if (render) {
+      this.header.render();
+    }
+  }
+  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}">
+        <div class="card-body p-3">
+          <div data-container="chart-header"></div>
+          <div data-container="chart"></div>
+        </div>
+      </div>
+    `;
+  }
+  async onBeforeDestroy() {
+    if (this.chart?.off) {
+      this.chart.off("metrics:loaded", this.onChildMetricsLoaded, this);
+    }
+    await super.onBeforeDestroy();
+  }
+}
 export {
   BaseChart as B,
   MetricsChart as M,
   PieChart as P,
-  SeriesChart as S
+  SeriesChart as S,
+  MiniChart as a,
+  MetricsMiniChart as b,
+  MetricsMiniChartWidget as c
 };
-//# sourceMappingURL=MetricsChart-DS6rz7HC.js.map
+//# sourceMappingURL=MetricsMiniChartWidget-0QE0WL-x.js.map