web-mojo 2.1.528 → 2.1.529

package/dist/charts.es.js

@@ -1,9 +1,686 @@
-import { B, M, P, S } from "./chunks/MetricsChart-DGCKUIiB.js";
-import { B as B2, b, a, c, e, f, W } from "./chunks/WebApp-DyegmBiJ.js";
+import { B, M, P, S } from "./chunks/MetricsChart-fDEOs6eG.js";
+import { V as View } from "./chunks/WebApp-tr4cjBu1.js";
+import { B as B2, b, a, c, e, f, W } from "./chunks/WebApp-tr4cjBu1.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.showCrosshair = options.showCrosshair !== false;
+    this.crosshairColor = options.crosshairColor || "rgba(0, 0, 0, 0.2)";
+    this.crosshairWidth = options.crosshairWidth || 1;
+    this.tooltip = null;
+    this.crosshair = null;
+    this.hoveredIndex = -1;
+  }
+  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.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();
+    }
+  }
+  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 label = typeof this.data[index] === "object" ? this.data[index].label : null;
+    let displayValue = value;
+    if (this.tooltipFormatter) {
+      if (typeof this.tooltipFormatter === "function") {
+        displayValue = this.tooltipFormatter(value, index);
+      }
+    } else {
+      displayValue = typeof value === "number" ? value.toLocaleString() : value;
+    }
+    let content = `<strong>${displayValue}</strong>`;
+    if (label) {
+      content = `${label}<br>${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 View {
+  constructor(options = {}) {
+    super({
+      className: "metrics-mini-chart",
+      ...options
+    });
+    this.label = options.label || "";
+    this.value = options.value || 0;
+    this.data = options.data || [];
+    this.trend = options.trend;
+    this.trendValue = options.trendValue;
+    this.chartType = options.chartType || "line";
+    this.chartWidth = options.chartWidth || 100;
+    this.chartHeight = options.chartHeight || 40;
+    this.chartColor = options.chartColor || "rgba(54, 162, 235, 1)";
+    this.fill = options.fill !== false;
+    this.smoothing = options.smoothing || 0.3;
+    this.valueFormatter = options.valueFormatter || null;
+    this.suffix = options.suffix || "";
+    this.prefix = options.prefix || "";
+    this.variant = options.variant || "default";
+    this.size = options.size || "md";
+    this.layout = options.layout || "horizontal";
+    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];
+    }
+    this.miniChart = null;
+  }
+  getTemplate() {
+    const sizeClass = `metrics-mini-chart-${this.size}`;
+    const variantClass = this.variant !== "default" ? `metrics-mini-chart-${this.variant}` : "";
+    const layoutClass = `metrics-mini-chart-${this.layout}`;
+    return `
+      <div class="metrics-mini-chart-container ${sizeClass} ${variantClass} ${layoutClass}">
+        <div class="metrics-info">
+          <div class="metrics-label">${this.escapeHtml(this.label)}</div>
+          <div class="metrics-value-row">
+            <div class="metrics-value" data-ref="value">
+              ${this.formatValue(this.value)}
+            </div>
+            ${this.renderTrendBadge()}
+          </div>
+        </div>
+        <div class="metrics-chart" data-container="chart"></div>
+      </div>
+    `;
+  }
+  async onInit() {
+    this.miniChart = new MiniChart({
+      chartType: this.chartType,
+      data: this.data,
+      width: this.chartWidth,
+      height: this.chartHeight,
+      color: this.getChartColor(),
+      fillColor: this.getFillColor(),
+      fill: this.fill,
+      smoothing: this.smoothing,
+      animate: true
+    });
+    this.addChild(this.miniChart, "chart");
+    if (this.refreshInterval && this.endpoint) {
+      this.startAutoRefresh();
+    }
+  }
+  async onAfterRender() {
+    await super.onAfterRender();
+    if (this.endpoint && this.data.length === 0) {
+      await this.fetchData();
+    }
+  }
+  renderTrendBadge() {
+    if (!this.trend && this.trendValue === void 0) {
+      return "";
+    }
+    const trend = this.trend || (this.trendValue > 0 ? "up" : "down");
+    const trendIcon = trend === "up" ? "bi-arrow-up" : "bi-arrow-down";
+    const trendClass = trend === "up" ? "trend-up" : "trend-down";
+    const trendValueStr = this.trendValue !== void 0 ? `${Math.abs(this.trendValue)}%` : "";
+    return `
+      <span class="metrics-trend ${trendClass}">
+        <i class="bi ${trendIcon}"></i>
+        ${trendValueStr}
+      </span>
+    `;
+  }
+  getChartColor() {
+    const colorMap = {
+      success: "rgba(75, 192, 192, 1)",
+      danger: "rgba(255, 99, 132, 1)",
+      warning: "rgba(255, 206, 86, 1)",
+      info: "rgba(54, 162, 235, 1)",
+      default: this.chartColor
+    };
+    return colorMap[this.variant] || this.chartColor;
+  }
+  getFillColor() {
+    const color = this.getChartColor();
+    return color.replace(/[\d.]+\)$/, "0.1)");
+  }
+  formatValue(value) {
+    let formatted = value;
+    if (this.valueFormatter) {
+      if (typeof this.valueFormatter === "function") {
+        formatted = this.valueFormatter(value);
+      } else if (this.dataFormatter) {
+        formatted = this.dataFormatter.pipe(value, this.valueFormatter);
+      }
+    } else {
+      if (typeof value === "number") {
+        formatted = value.toLocaleString();
+      }
+    }
+    return `${this.prefix}${formatted}${this.suffix}`;
+  }
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+  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.setData(sanitizedValues);
+    const currentValue = sanitizedValues[sanitizedValues.length - 1] || 0;
+    this.setValue(currentValue);
+    if (sanitizedValues.length >= 2) {
+      const firstValue = sanitizedValues[0];
+      const lastValue = sanitizedValues[sanitizedValues.length - 1];
+      if (firstValue !== 0) {
+        this.trendValue = parseFloat(((lastValue - firstValue) / firstValue * 100).toFixed(1));
+        this.trend = this.trendValue >= 0 ? "up" : "down";
+      }
+    }
+  }
+  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
+  setValue(value) {
+    this.value = value;
+    const valueElement = this.element?.querySelector('[data-ref="value"]');
+    if (valueElement) {
+      valueElement.textContent = this.formatValue(value);
+    }
+  }
+  setData(data) {
+    this.data = data;
+    if (this.miniChart) {
+      this.miniChart.setData(data);
+    }
+    if (data.length >= 2 && this.trendValue === void 0) {
+      const first = typeof data[0] === "object" ? data[0].value : data[0];
+      const last = typeof data[data.length - 1] === "object" ? data[data.length - 1].value : data[data.length - 1];
+      if (first !== 0) {
+        this.trendValue = ((last - first) / first * 100).toFixed(1);
+        this.trend = this.trendValue > 0 ? "up" : "down";
+      }
+    }
+  }
+  setLabel(label) {
+    this.label = label;
+    const labelElement = this.element?.querySelector(".metrics-label");
+    if (labelElement) {
+      labelElement.textContent = label;
+    }
+  }
+  setVariant(variant) {
+    if (this.element) {
+      this.element.querySelector(".metrics-mini-chart-container")?.classList.remove(`metrics-mini-chart-${this.variant}`);
+      this.element.querySelector(".metrics-mini-chart-container")?.classList.add(`metrics-mini-chart-${variant}`);
+    }
+    this.variant = variant;
+    if (this.miniChart) {
+      this.miniChart.setColor(this.getChartColor());
+    }
+  }
+  refresh() {
+    return this.fetchData();
+  }
+  async onBeforeDestroy() {
+    this.stopAutoRefresh();
+    await super.onBeforeDestroy();
+  }
+}
 export {
   B2 as BUILD_TIME,
   B as BaseChart,
   M as MetricsChart,
+  MetricsMiniChart,
+  MiniChart,
   P as PieChart,
   S as SeriesChart,
   b as VERSION,