web-mojo 2.1.626 → 2.1.675

package/dist/charts.es.js

@@ -1,599 +1,17 @@
-import { B, M, P, S } from "./chunks/MetricsChart-DJ_AMjGg.js";
-import { V as View, d as dataFormatter } from "./chunks/WebApp-ciExPk0c.js";
-import { B as B2, b, a, c, e, f, W } from "./chunks/WebApp-ciExPk0c.js";
-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) {
-      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", (e2) => {
-        this.showTooltipAtIndex(index, e2);
-      });
-      hitArea.addEventListener("mousemove", (e2) => {
-        this.updateTooltipPosition(e2);
-      });
-      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();
-  }
-}
+import { B, M, b, c, a, P, S } from "./chunks/MetricsMiniChartWidget-0QE0WL-x.js";
+import { B as B2, b as b2, a as a2, c as c2, e, f, W } from "./chunks/WebApp-BWnjZ-UU.js";
 export {
   B2 as BUILD_TIME,
   B as BaseChart,
   M as MetricsChart,
-  MetricsMiniChart,
-  MiniChart,
+  b as MetricsMiniChart,
+  c as MetricsMiniChartWidget,
+  a as MiniChart,
   P as PieChart,
   S as SeriesChart,
-  b as VERSION,
-  a as VERSION_INFO,
-  c as VERSION_MAJOR,
+  b2 as VERSION,
+  a2 as VERSION_INFO,
+  c2 as VERSION_MAJOR,
   e as VERSION_MINOR,
   f as VERSION_REVISION,
   W as WebApp