web-mojo 2.2.57 → 2.2.59

package/dist/charts.es.js

@@ -1,572 +1,2 @@
-import { B, M, b, c, a, P, S } from "./chunks/MetricsMiniChartWidget-DvKd7Qrk.js";
-import { V as View, d as dataFormatter } from "./chunks/Rest-W-sPfGh9.js";
-import { W } from "./chunks/WebApp-6qvqmOts.js";
-import { B as B2, a as a2, V, b as b2, c as c2, d } from "./chunks/version-OyPGnx30.js";
-class CircularProgress extends View {
-  constructor(options = {}) {
-    super({
-      className: `circular-progress ${options.className || ""}`,
-      ...options
-    });
-    this.SIZE_PRESETS = {
-      "xs": 40,
-      "sm": 60,
-      "md": 80,
-      "lg": 120,
-      "xl": 180
-    };
-    this.STROKE_PRESETS = {
-      "xs": 4,
-      "sm": 6,
-      "md": 8,
-      "lg": 12,
-      "xl": 16
-    };
-    this.value = options.value !== void 0 ? options.value : 0;
-    this.min = options.min !== void 0 ? options.min : 0;
-    this.max = options.max !== void 0 ? options.max : 100;
-    this.sizePreset = typeof options.size === "string" && this.SIZE_PRESETS[options.size] ? options.size : null;
-    this.size = this.resolveSize(options.size !== void 0 ? options.size : "md");
-    this.strokeWidth = options.strokeWidth === "auto" || options.strokeWidth === void 0 ? this.getAutoStrokeWidth(options.size) : options.strokeWidth;
-    this.theme = options.theme || "basic";
-    this.variant = options.variant || "default";
-    this.color = options.color;
-    this.trackColor = options.trackColor;
-    this.textColor = options.textColor;
-    this.gradientColors = options.gradientColors || null;
-    this.applyTheme();
-    this.applyVariant();
-    this.rotation = options.rotation !== void 0 ? options.rotation : -90;
-    this.gap = options.gap || 0;
-    this.showValue = options.showValue !== false;
-    this.valueFormat = options.valueFormat || "percentage";
-    this.valueFormatter = options.valueFormatter || null;
-    this.label = options.label || null;
-    this.labelHtml = options.labelHtml || null;
-    this.icon = options.icon || null;
-    this.animate = options.animate !== false;
-    this.animationDuration = options.animationDuration || 600;
-    this.animationEasing = options.animationEasing || "ease-out";
-    this.rounded = options.rounded !== false;
-    this.shadow = options.shadow || false;
-    this.clickable = options.clickable || false;
-    this.tooltip = options.tooltip || null;
-    this.tooltipPlacement = options.tooltipPlacement || "top";
-    this.segments = options.segments || null;
-    this.segmentGap = options.segmentGap || 2;
-    this.dataFormatter = dataFormatter;
-    this.svg = null;
-    this.centerElement = null;
-    this.popover = null;
-    this.gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;
-  }
-  resolveSize(size) {
-    if (typeof size === "string" && this.SIZE_PRESETS[size]) {
-      return this.SIZE_PRESETS[size];
-    }
-    return typeof size === "number" ? size : this.SIZE_PRESETS.md;
-  }
-  getAutoStrokeWidth(size) {
-    if (typeof size === "string" && this.STROKE_PRESETS[size]) {
-      return this.STROKE_PRESETS[size];
-    }
-    const actualSize = this.resolveSize(size);
-    if (actualSize <= 40) return 4;
-    if (actualSize <= 60) return 6;
-    if (actualSize <= 80) return 8;
-    if (actualSize <= 120) return 12;
-    return 16;
-  }
-  applyTheme() {
-    const themes = {
-      "basic": {
-        trackColor: "#e9ecef",
-        textColor: null,
-        // Use default
-        backgroundColor: null
-      },
-      "shadowed": {
-        trackColor: "#d1d5db",
-        textColor: null,
-        backgroundColor: null,
-        shadow: true
-      },
-      "dark": {
-        trackColor: "#374151",
-        textColor: "#e5e7eb",
-        backgroundColor: "#1f2937"
-      },
-      "light": {
-        trackColor: "#f3f4f6",
-        textColor: "#111827",
-        backgroundColor: "#ffffff"
-      }
-    };
-    const themeConfig = themes[this.theme] || themes.basic;
-    if (!this.trackColor) {
-      this.trackColor = themeConfig.trackColor;
-    }
-    if (!this.textColor && themeConfig.textColor) {
-      this.textColor = themeConfig.textColor;
-    }
-    if (themeConfig.shadow && this.shadow === false) {
-      this.shadow = themeConfig.shadow;
-    }
-  }
-  applyVariant() {
-    const variants = {
-      "success": { color: "#198754", trackColor: "rgba(25, 135, 84, 0.1)" },
-      "danger": { color: "#dc3545", trackColor: "rgba(220, 53, 69, 0.1)" },
-      "warning": { color: "#ffc107", trackColor: "rgba(255, 193, 7, 0.1)" },
-      "info": { color: "#0dcaf0", trackColor: "rgba(13, 202, 240, 0.1)" },
-      "default": { color: "#0d6efd" }
-      // Default blue color
-    };
-    if (variants[this.variant]) {
-      const variantColors = variants[this.variant];
-      if (!this.color) {
-        this.color = variantColors.color;
-      }
-      if (variantColors.trackColor && this.trackColor === this.applyTheme.trackColor) {
-        this.trackColor = variantColors.trackColor;
-      }
-    }
-    if (!this.color) {
-      this.color = "#0d6efd";
-    }
-  }
-  getTemplate() {
-    const sizeClass = this.sizePreset ? `circular-progress-${this.sizePreset}` : "";
-    const variantClass = this.variant !== "default" ? `circular-progress-${this.variant}` : "";
-    const themeClass = this.theme !== "basic" ? `circular-progress-theme-${this.theme}` : "";
-    const clickableClass = this.clickable ? "circular-progress-clickable" : "";
-    const shadowClass = this.shadow ? "circular-progress-shadow" : "";
-    const textColorStyle = this.textColor ? `color: ${this.textColor};` : "";
-    return `
-      <div class="circular-progress-container ${sizeClass} ${variantClass} ${themeClass} ${clickableClass} ${shadowClass}"
-           style="width: ${this.size}px; height: ${this.size}px;">
-        <svg class="circular-progress-svg" 
-             width="${this.size}" 
-             height="${this.size}"
-             viewBox="0 0 ${this.size} ${this.size}">
-        </svg>
-        <div class="circular-progress-center" style="${textColorStyle}">
-          <div class="circular-progress-content"></div>
-        </div>
-      </div>
-    `;
-  }
-  async onAfterRender() {
-    this.svg = this.element.querySelector(".circular-progress-svg");
-    this.centerElement = this.element.querySelector(".circular-progress-content");
-    this.containerElement = this.element.querySelector(".circular-progress-container");
-    this.renderProgress();
-    this.renderCenterContent();
-    if (this.clickable) {
-      this.setupClickHandler();
-    }
-    if (this.tooltip && this.clickable) {
-      this.setupTooltip();
-    }
-  }
-  renderProgress() {
-    if (!this.svg) return;
-    this.svg.innerHTML = "";
-    const center = this.size / 2;
-    const radius = (this.size - this.strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    if (this.gradientColors && this.gradientColors.length > 1) {
-      this.createGradient();
-    }
-    if (this.segments && Array.isArray(this.segments) && this.segments.length > 0) {
-      this.renderSegments(center, radius, circumference);
-    } else {
-      this.renderSingleProgress(center, radius, circumference);
-    }
-  }
-  renderSingleProgress(center, radius, circumference) {
-    const arcLength = this.gap > 0 ? 360 - this.gap : 360;
-    const arcCircumference = arcLength / 360 * circumference;
-    const track = this.createCircle(center, radius, {
-      stroke: this.trackColor,
-      strokeWidth: this.strokeWidth,
-      fill: "none",
-      strokeLinecap: this.rounded ? "round" : "butt",
-      strokeDasharray: this.gap > 0 ? `${arcCircumference} ${circumference}` : "none",
-      transform: `rotate(${this.rotation} ${center} ${center})`
-    });
-    this.svg.appendChild(track);
-    const percentage = this.getPercentage();
-    const progressLength = percentage / 100 * arcCircumference;
-    const dashOffset = arcCircumference - progressLength;
-    const strokeColor = this.gradientColors ? `url(#${this.gradientId})` : this.color;
-    const progress = this.createCircle(center, radius, {
-      stroke: strokeColor,
-      strokeWidth: this.strokeWidth,
-      fill: "none",
-      strokeLinecap: this.rounded ? "round" : "butt",
-      strokeDasharray: `${arcCircumference} ${circumference}`,
-      strokeDashoffset: this.animate ? arcCircumference : dashOffset,
-      transform: `rotate(${this.rotation} ${center} ${center})`,
-      class: "circular-progress-bar"
-    });
-    this.svg.appendChild(progress);
-    if (this.animate) {
-      this.animateProgress(progress, dashOffset);
-    }
-  }
-  renderSegments(center, radius, circumference) {
-    const arcLength = this.gap > 0 ? 360 - this.gap : 360;
-    const arcCircumference = arcLength / 360 * circumference;
-    const track = this.createCircle(center, radius, {
-      stroke: this.trackColor,
-      strokeWidth: this.strokeWidth,
-      fill: "none",
-      strokeLinecap: this.rounded ? "round" : "butt",
-      strokeDasharray: this.gap > 0 ? `${arcCircumference} ${circumference}` : "none",
-      transform: `rotate(${this.rotation} ${center} ${center})`
-    });
-    this.svg.appendChild(track);
-    const total = this.segments.reduce((sum, seg) => sum + (seg.value || 0), 0);
-    if (total > this.max) {
-      console.warn("CircularProgress: Segment total exceeds max value. Clamping to max.");
-    }
-    let currentOffset = 0;
-    this.segments.forEach((segment, index) => {
-      const segmentPercentage = (segment.value || 0) / (this.max - this.min) * 100;
-      const segmentLength = segmentPercentage / 100 * arcCircumference;
-      const gapLength = this.segmentGap / 360 * circumference;
-      if (segmentLength > 0) {
-        const segmentCircle = this.createCircle(center, radius, {
-          stroke: segment.color || this.color,
-          strokeWidth: this.strokeWidth,
-          fill: "none",
-          strokeLinecap: this.rounded ? "round" : "butt",
-          strokeDasharray: `${segmentLength} ${circumference}`,
-          strokeDashoffset: this.animate ? arcCircumference : -currentOffset,
-          transform: `rotate(${this.rotation} ${center} ${center})`,
-          class: `circular-progress-segment circular-progress-segment-${index}`,
-          "data-segment-index": index
-        });
-        this.svg.appendChild(segmentCircle);
-        if (this.animate) {
-          this.animateProgress(segmentCircle, -currentOffset, index * 100);
-        }
-        currentOffset += segmentLength + gapLength;
-      }
-    });
-  }
-  createCircle(cx, cy, attributes = {}) {
-    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-    circle.setAttribute("cx", cx);
-    circle.setAttribute("cy", cx);
-    circle.setAttribute("r", cy);
-    Object.entries(attributes).forEach(([key, value]) => {
-      if (key === "strokeWidth") {
-        circle.setAttribute("stroke-width", value);
-      } else if (key === "strokeLinecap") {
-        circle.setAttribute("stroke-linecap", value);
-      } else if (key === "strokeDasharray") {
-        circle.setAttribute("stroke-dasharray", value);
-      } else if (key === "strokeDashoffset") {
-        circle.setAttribute("stroke-dashoffset", value);
-      } else {
-        circle.setAttribute(key, value);
-      }
-    });
-    return circle;
-  }
-  createGradient() {
-    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
-    gradient.setAttribute("id", this.gradientId);
-    gradient.setAttribute("x1", "0%");
-    gradient.setAttribute("y1", "0%");
-    gradient.setAttribute("x2", "100%");
-    gradient.setAttribute("y2", "100%");
-    this.gradientColors.forEach((color, index) => {
-      const stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-      const offset = index / (this.gradientColors.length - 1) * 100;
-      stop.setAttribute("offset", `${offset}%`);
-      stop.setAttribute("stop-color", color);
-      gradient.appendChild(stop);
-    });
-    defs.appendChild(gradient);
-    this.svg.appendChild(defs);
-  }
-  animateProgress(circle, targetOffset, delay = 0) {
-    setTimeout(() => {
-      circle.style.transition = `stroke-dashoffset ${this.animationDuration}ms ${this.animationEasing}`;
-      circle.style.strokeDashoffset = targetOffset;
-    }, delay);
-  }
-  renderCenterContent() {
-    if (!this.centerElement) return;
-    if (this.labelHtml) {
-      this.centerElement.innerHTML = this.labelHtml;
-    } else if (this.icon) {
-      this.centerElement.innerHTML = `<i class="${this.icon}"></i>`;
-    } else if (this.showValue) {
-      const formattedValue = this.getFormattedValue();
-      let html = `<div class="circular-progress-value">${formattedValue}</div>`;
-      if (this.label) {
-        html += `<div class="circular-progress-label">${this.label}</div>`;
-      }
-      this.centerElement.innerHTML = html;
-    }
-  }
-  getFormattedValue() {
-    const value = this.value;
-    const min = this.min;
-    const max = this.max;
-    if (this.valueFormatter && typeof this.valueFormatter === "function") {
-      return this.valueFormatter(value, min, max);
-    }
-    switch (this.valueFormat) {
-      case "percentage":
-        return `${Math.round(this.getPercentage())}%`;
-      case "fraction":
-        return `${value}/${max}`;
-      case "value":
-        return value.toString();
-      default:
-        if (this.dataFormatter) {
-          try {
-            return this.dataFormatter.pipe(value, this.valueFormat);
-          } catch (error) {
-            console.warn("CircularProgress: DataFormatter error, falling back to percentage", error);
-            return `${Math.round(this.getPercentage())}%`;
-          }
-        }
-        return `${Math.round(this.getPercentage())}%`;
-    }
-  }
-  getPercentage() {
-    const range = this.max - this.min;
-    if (range === 0) return 0;
-    return (this.value - this.min) / range * 100;
-  }
-  setupClickHandler() {
-    if (!this.containerElement) return;
-    this.containerElement.style.cursor = "pointer";
-    this.containerElement.addEventListener("click", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const percentage = this.getPercentage();
-      this.emit("progress:clicked", {
-        value: this.value,
-        percentage,
-        min: this.min,
-        max: this.max
-      });
-      if (this.tooltip) {
-        this.togglePopover();
-      }
-    });
-  }
-  setupTooltip() {
-  }
-  togglePopover() {
-    if (!this.containerElement || typeof window.bootstrap === "undefined") {
-      console.warn("CircularProgress: Bootstrap is required for tooltip support");
-      return;
-    }
-    if (!this.popover) {
-      const content = this.getTooltipContent();
-      const title = typeof this.tooltip === "object" && this.tooltip.title ? this.tooltip.title : void 0;
-      const popoverConfig = {
-        content,
-        html: true,
-        placement: this.tooltipPlacement,
-        trigger: "manual",
-        container: "body"
-      };
-      if (title) {
-        popoverConfig.title = title;
-      }
-      this.popover = new window.bootstrap.Popover(this.containerElement, popoverConfig);
-    }
-    const popoverElement = window.bootstrap.Popover.getInstance(this.containerElement);
-    if (popoverElement && this.containerElement.getAttribute("aria-describedby")) {
-      this.popover.hide();
-    } else {
-      this.popover.setContent({
-        ".popover-body": this.getTooltipContent()
-      });
-      this.popover.show();
-    }
-  }
-  getTooltipContent() {
-    if (typeof this.tooltip === "function") {
-      return this.tooltip(this.value, {
-        min: this.min,
-        max: this.max,
-        percentage: this.getPercentage()
-      });
-    }
-    if (typeof this.tooltip === "object") {
-      return this.tooltip.html || this.tooltip.content || "";
-    }
-    return this.tooltip || "";
-  }
-  // Public API
-  setValue(value, animate = true) {
-    this.value;
-    this.value = Math.max(this.min, Math.min(this.max, value));
-    this.renderCenterContent();
-    if (this.svg && !this.segments) {
-      const progressBar = this.svg.querySelector(".circular-progress-bar");
-      if (progressBar) {
-        const radius = this.size / 2 - this.strokeWidth / 2;
-        const circumference = 2 * Math.PI * radius;
-        const arcLength = this.gap > 0 ? 360 - this.gap : 360;
-        const arcCircumference = arcLength / 360 * circumference;
-        const percentage = this.getPercentage();
-        const progressLength = percentage / 100 * arcCircumference;
-        const dashOffset = arcCircumference - progressLength;
-        if (animate) {
-          progressBar.style.transition = `stroke-dashoffset ${this.animationDuration}ms ${this.animationEasing}`;
-          progressBar.style.strokeDashoffset = dashOffset;
-        } else {
-          progressBar.style.transition = "none";
-          progressBar.style.strokeDashoffset = dashOffset;
-        }
-      }
-    } else {
-      const oldAnimate = this.animate;
-      this.animate = animate;
-      this.renderProgress();
-      this.animate = oldAnimate;
-    }
-  }
-  setRange(min, max) {
-    this.min = min;
-    this.max = max;
-    this.renderProgress();
-    this.renderCenterContent();
-  }
-  increment(amount = 1) {
-    this.setValue(this.value + amount);
-  }
-  decrement(amount = 1) {
-    this.setValue(this.value - amount);
-  }
-  setColor(color) {
-    this.color = color;
-    this.gradientColors = null;
-    if (this.svg && !this.segments) {
-      const progressBar = this.svg.querySelector(".circular-progress-bar");
-      if (progressBar) {
-        progressBar.setAttribute("stroke", color);
-      }
-    } else {
-      this.renderProgress();
-    }
-  }
-  setGradient(colors) {
-    if (Array.isArray(colors) && colors.length > 1) {
-      this.gradientColors = colors;
-      this.gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;
-      this.renderProgress();
-    }
-  }
-  setSize(size) {
-    if (this.containerElement && this.sizePreset) {
-      this.containerElement.classList.remove(`circular-progress-${this.sizePreset}`);
-    }
-    this.sizePreset = typeof size === "string" && this.SIZE_PRESETS[size] ? size : null;
-    this.size = this.resolveSize(size);
-    this.strokeWidth = this.getAutoStrokeWidth(size);
-    if (this.containerElement) {
-      this.containerElement.style.width = `${this.size}px`;
-      this.containerElement.style.height = `${this.size}px`;
-      if (this.sizePreset) {
-        this.containerElement.classList.add(`circular-progress-${this.sizePreset}`);
-      }
-    }
-    if (this.svg) {
-      this.svg.setAttribute("width", this.size);
-      this.svg.setAttribute("height", this.size);
-      this.svg.setAttribute("viewBox", `0 0 ${this.size} ${this.size}`);
-    }
-    this.renderProgress();
-  }
-  animateTo(targetValue, duration = 1e3) {
-    const startValue = this.value;
-    const diff = targetValue - startValue;
-    const startTime = performance.now();
-    const animate = (currentTime) => {
-      const elapsed = currentTime - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const easeProgress = 1 - Math.pow(1 - progress, 3);
-      const newValue = startValue + diff * easeProgress;
-      this.setValue(newValue, false);
-      if (progress < 1) {
-        requestAnimationFrame(animate);
-      } else {
-        this.setValue(targetValue, false);
-      }
-    };
-    requestAnimationFrame(animate);
-  }
-  pulse() {
-    if (!this.containerElement) return;
-    this.containerElement.style.animation = "none";
-    setTimeout(() => {
-      this.containerElement.style.animation = "circular-progress-pulse 0.5s ease-out";
-    }, 10);
-    setTimeout(() => {
-      this.containerElement.style.animation = "";
-    }, 500);
-  }
-  complete() {
-    this.variant = "success";
-    this.applyVariant();
-    this.setValue(this.max);
-    this.pulse();
-  }
-  reset() {
-    this.setValue(this.min);
-  }
-  hide() {
-    if (this.element) {
-      this.element.style.display = "none";
-    }
-  }
-  show() {
-    if (this.element) {
-      this.element.style.display = "";
-    }
-  }
-  getValue() {
-    return this.value;
-  }
-  getPercentageValue() {
-    return this.getPercentage();
-  }
-  async onBeforeDestroy() {
-    if (this.popover) {
-      this.popover.dispose();
-      this.popover = null;
-    }
-    await super.onBeforeDestroy();
-  }
-}
-export {
-  B2 as BUILD_TIME,
-  B as BaseChart,
-  CircularProgress,
-  M as MetricsChart,
-  b as MetricsMiniChart,
-  c as MetricsMiniChartWidget,
-  a as MiniChart,
-  P as PieChart,
-  S as SeriesChart,
-  a2 as VERSION,
-  V as VERSION_INFO,
-  b2 as VERSION_MAJOR,
-  c2 as VERSION_MINOR,
-  d as VERSION_REVISION,
-  W as WebApp
-};
+import{B as t,M as e,a as s,b as i,c as r,P as o,S as a}from"./chunks/MetricsMiniChartWidget-x2gFjHOU.js";import{V as n,d as h}from"./chunks/Rest-DHbszkuP.js";import{W as l}from"./chunks/WebApp-CULZpO_0.js";import{B as c,V as u,a as g,b as d,c as m,d as p}from"./chunks/version-C3dnl1bg.js";class CircularProgress extends n{constructor(t={}){super({className:`circular-progress ${t.className||""}`,...t}),this.SIZE_PRESETS={xs:40,sm:60,md:80,lg:120,xl:180},this.STROKE_PRESETS={xs:4,sm:6,md:8,lg:12,xl:16},this.value=void 0!==t.value?t.value:0,this.min=void 0!==t.min?t.min:0,this.max=void 0!==t.max?t.max:100,this.sizePreset="string"==typeof t.size&&this.SIZE_PRESETS[t.size]?t.size:null,this.size=this.resolveSize(void 0!==t.size?t.size:"md"),this.strokeWidth="auto"===t.strokeWidth||void 0===t.strokeWidth?this.getAutoStrokeWidth(t.size):t.strokeWidth,this.theme=t.theme||"basic",this.variant=t.variant||"default",this.color=t.color,this.trackColor=t.trackColor,this.textColor=t.textColor,this.gradientColors=t.gradientColors||null,this.applyTheme(),this.applyVariant(),this.rotation=void 0!==t.rotation?t.rotation:-90,this.gap=t.gap||0,this.showValue=!1!==t.showValue,this.valueFormat=t.valueFormat||"percentage",this.valueFormatter=t.valueFormatter||null,this.label=t.label||null,this.labelHtml=t.labelHtml||null,this.icon=t.icon||null,this.animate=!1!==t.animate,this.animationDuration=t.animationDuration||600,this.animationEasing=t.animationEasing||"ease-out",this.rounded=!1!==t.rounded,this.shadow=t.shadow||!1,this.clickable=t.clickable||!1,this.tooltip=t.tooltip||null,this.tooltipPlacement=t.tooltipPlacement||"top",this.segments=t.segments||null,this.segmentGap=t.segmentGap||2,this.dataFormatter=h,this.svg=null,this.centerElement=null,this.popover=null,this.gradientId=`gradient-${Math.random().toString(36).substr(2,9)}`}resolveSize(t){return"string"==typeof t&&this.SIZE_PRESETS[t]?this.SIZE_PRESETS[t]:"number"==typeof t?t:this.SIZE_PRESETS.md}getAutoStrokeWidth(t){if("string"==typeof t&&this.STROKE_PRESETS[t])return this.STROKE_PRESETS[t];const e=this.resolveSize(t);return e<=40?4:e<=60?6:e<=80?8:e<=120?12:16}applyTheme(){const t={basic:{trackColor:"#e9ecef",textColor:null,backgroundColor:null},shadowed:{trackColor:"#d1d5db",textColor:null,backgroundColor:null,shadow:!0},dark:{trackColor:"#374151",textColor:"#e5e7eb",backgroundColor:"#1f2937"},light:{trackColor:"#f3f4f6",textColor:"#111827",backgroundColor:"#ffffff"}},e=t[this.theme]||t.basic;this.trackColor||(this.trackColor=e.trackColor),!this.textColor&&e.textColor&&(this.textColor=e.textColor),e.shadow&&!1===this.shadow&&(this.shadow=e.shadow)}applyVariant(){const t={success:{color:"#198754",trackColor:"rgba(25, 135, 84, 0.1)"},danger:{color:"#dc3545",trackColor:"rgba(220, 53, 69, 0.1)"},warning:{color:"#ffc107",trackColor:"rgba(255, 193, 7, 0.1)"},info:{color:"#0dcaf0",trackColor:"rgba(13, 202, 240, 0.1)"},default:{color:"#0d6efd"}};if(t[this.variant]){const e=t[this.variant];this.color||(this.color=e.color),e.trackColor&&this.trackColor===this.applyTheme.trackColor&&(this.trackColor=e.trackColor)}this.color||(this.color="#0d6efd")}getTemplate(){const t=this.sizePreset?`circular-progress-${this.sizePreset}`:"",e="default"!==this.variant?`circular-progress-${this.variant}`:"",s="basic"!==this.theme?`circular-progress-theme-${this.theme}`:"",i=this.clickable?"circular-progress-clickable":"",r=this.shadow?"circular-progress-shadow":"",o=this.textColor?`color: ${this.textColor};`:"";return`\n      <div class="circular-progress-container ${t} ${e} ${s} ${i} ${r}"\n           style="width: ${this.size}px; height: ${this.size}px;">\n        <svg class="circular-progress-svg" \n             width="${this.size}" \n             height="${this.size}"\n             viewBox="0 0 ${this.size} ${this.size}">\n        </svg>\n        <div class="circular-progress-center" style="${o}">\n          <div class="circular-progress-content"></div>\n        </div>\n      </div>\n    `}async onAfterRender(){this.svg=this.element.querySelector(".circular-progress-svg"),this.centerElement=this.element.querySelector(".circular-progress-content"),this.containerElement=this.element.querySelector(".circular-progress-container"),this.renderProgress(),this.renderCenterContent(),this.clickable&&this.setupClickHandler(),this.tooltip&&this.clickable&&this.setupTooltip()}renderProgress(){if(!this.svg)return;this.svg.innerHTML="";const t=this.size/2,e=(this.size-this.strokeWidth)/2,s=2*Math.PI*e;this.gradientColors&&this.gradientColors.length>1&&this.createGradient(),this.segments&&Array.isArray(this.segments)&&this.segments.length>0?this.renderSegments(t,e,s):this.renderSingleProgress(t,e,s)}renderSingleProgress(t,e,s){const i=(this.gap>0?360-this.gap:360)/360*s,r=this.createCircle(t,e,{stroke:this.trackColor,strokeWidth:this.strokeWidth,fill:"none",strokeLinecap:this.rounded?"round":"butt",strokeDasharray:this.gap>0?`${i} ${s}`:"none",transform:`rotate(${this.rotation} ${t} ${t})`});this.svg.appendChild(r);const o=i-this.getPercentage()/100*i,a=this.gradientColors?`url(#${this.gradientId})`:this.color,n=this.createCircle(t,e,{stroke:a,strokeWidth:this.strokeWidth,fill:"none",strokeLinecap:this.rounded?"round":"butt",strokeDasharray:`${i} ${s}`,strokeDashoffset:this.animate?i:o,transform:`rotate(${this.rotation} ${t} ${t})`,class:"circular-progress-bar"});this.svg.appendChild(n),this.animate&&this.animateProgress(n,o)}renderSegments(t,e,s){const i=(this.gap>0?360-this.gap:360)/360*s,r=this.createCircle(t,e,{stroke:this.trackColor,strokeWidth:this.strokeWidth,fill:"none",strokeLinecap:this.rounded?"round":"butt",strokeDasharray:this.gap>0?`${i} ${s}`:"none",transform:`rotate(${this.rotation} ${t} ${t})`});this.svg.appendChild(r),this.segments.reduce((t,e)=>t+(e.value||0),0)>this.max&&console.warn("CircularProgress: Segment total exceeds max value. Clamping to max.");let o=0;this.segments.forEach((r,a)=>{const n=(r.value||0)/(this.max-this.min)*100/100*i,h=this.segmentGap/360*s;if(n>0){const l=this.createCircle(t,e,{stroke:r.color||this.color,strokeWidth:this.strokeWidth,fill:"none",strokeLinecap:this.rounded?"round":"butt",strokeDasharray:`${n} ${s}`,strokeDashoffset:this.animate?i:-o,transform:`rotate(${this.rotation} ${t} ${t})`,class:`circular-progress-segment circular-progress-segment-${a}`,"data-segment-index":a});this.svg.appendChild(l),this.animate&&this.animateProgress(l,-o,100*a),o+=n+h}})}createCircle(t,e,s={}){const i=document.createElementNS("http://www.w3.org/2000/svg","circle");return i.setAttribute("cx",t),i.setAttribute("cy",t),i.setAttribute("r",e),Object.entries(s).forEach(([t,e])=>{"strokeWidth"===t?i.setAttribute("stroke-width",e):"strokeLinecap"===t?i.setAttribute("stroke-linecap",e):"strokeDasharray"===t?i.setAttribute("stroke-dasharray",e):"strokeDashoffset"===t?i.setAttribute("stroke-dashoffset",e):i.setAttribute(t,e)}),i}createGradient(){const t=document.createElementNS("http://www.w3.org/2000/svg","defs"),e=document.createElementNS("http://www.w3.org/2000/svg","linearGradient");e.setAttribute("id",this.gradientId),e.setAttribute("x1","0%"),e.setAttribute("y1","0%"),e.setAttribute("x2","100%"),e.setAttribute("y2","100%"),this.gradientColors.forEach((t,s)=>{const i=document.createElementNS("http://www.w3.org/2000/svg","stop"),r=s/(this.gradientColors.length-1)*100;i.setAttribute("offset",`${r}%`),i.setAttribute("stop-color",t),e.appendChild(i)}),t.appendChild(e),this.svg.appendChild(t)}animateProgress(t,e,s=0){setTimeout(()=>{t.style.transition=`stroke-dashoffset ${this.animationDuration}ms ${this.animationEasing}`,t.style.strokeDashoffset=e},s)}renderCenterContent(){if(this.centerElement)if(this.labelHtml)this.centerElement.innerHTML=this.labelHtml;else if(this.icon)this.centerElement.innerHTML=`<i class="${this.icon}"></i>`;else if(this.showValue){let t=`<div class="circular-progress-value">${this.getFormattedValue()}</div>`;this.label&&(t+=`<div class="circular-progress-label">${this.label}</div>`),this.centerElement.innerHTML=t}}getFormattedValue(){const t=this.value,e=this.min,s=this.max;if(this.valueFormatter&&"function"==typeof this.valueFormatter)return this.valueFormatter(t,e,s);switch(this.valueFormat){case"percentage":return`${Math.round(this.getPercentage())}%`;case"fraction":return`${t}/${s}`;case"value":return t.toString();default:if(this.dataFormatter)try{return this.dataFormatter.pipe(t,this.valueFormat)}catch(i){return console.warn("CircularProgress: DataFormatter error, falling back to percentage",i),`${Math.round(this.getPercentage())}%`}return`${Math.round(this.getPercentage())}%`}}getPercentage(){const t=this.max-this.min;return 0===t?0:(this.value-this.min)/t*100}setupClickHandler(){this.containerElement&&(this.containerElement.style.cursor="pointer",this.containerElement.addEventListener("click",t=>{t.preventDefault(),t.stopPropagation();const e=this.getPercentage();this.emit("progress:clicked",{value:this.value,percentage:e,min:this.min,max:this.max}),this.tooltip&&this.togglePopover()}))}setupTooltip(){}togglePopover(){if(this.containerElement&&void 0!==window.bootstrap){if(!this.popover){const t=this.getTooltipContent(),e="object"==typeof this.tooltip&&this.tooltip.title?this.tooltip.title:void 0,s={content:t,html:!0,placement:this.tooltipPlacement,trigger:"manual",container:"body"};e&&(s.title=e),this.popover=new window.bootstrap.Popover(this.containerElement,s)}window.bootstrap.Popover.getInstance(this.containerElement)&&this.containerElement.getAttribute("aria-describedby")?this.popover.hide():(this.popover.setContent({".popover-body":this.getTooltipContent()}),this.popover.show())}else console.warn("CircularProgress: Bootstrap is required for tooltip support")}getTooltipContent(){return"function"==typeof this.tooltip?this.tooltip(this.value,{min:this.min,max:this.max,percentage:this.getPercentage()}):"object"==typeof this.tooltip?this.tooltip.html||this.tooltip.content||"":this.tooltip||""}setValue(t,e=!0){if(this.value,this.value=Math.max(this.min,Math.min(this.max,t)),this.renderCenterContent(),this.svg&&!this.segments){const t=this.svg.querySelector(".circular-progress-bar");if(t){const s=this.size/2-this.strokeWidth/2,i=2*Math.PI*s,r=(this.gap>0?360-this.gap:360)/360*i,o=r-this.getPercentage()/100*r;e?(t.style.transition=`stroke-dashoffset ${this.animationDuration}ms ${this.animationEasing}`,t.style.strokeDashoffset=o):(t.style.transition="none",t.style.strokeDashoffset=o)}}else{const t=this.animate;this.animate=e,this.renderProgress(),this.animate=t}}setRange(t,e){this.min=t,this.max=e,this.renderProgress(),this.renderCenterContent()}increment(t=1){this.setValue(this.value+t)}decrement(t=1){this.setValue(this.value-t)}setColor(t){if(this.color=t,this.gradientColors=null,this.svg&&!this.segments){const e=this.svg.querySelector(".circular-progress-bar");e&&e.setAttribute("stroke",t)}else this.renderProgress()}setGradient(t){Array.isArray(t)&&t.length>1&&(this.gradientColors=t,this.gradientId=`gradient-${Math.random().toString(36).substr(2,9)}`,this.renderProgress())}setSize(t){this.containerElement&&this.sizePreset&&this.containerElement.classList.remove(`circular-progress-${this.sizePreset}`),this.sizePreset="string"==typeof t&&this.SIZE_PRESETS[t]?t:null,this.size=this.resolveSize(t),this.strokeWidth=this.getAutoStrokeWidth(t),this.containerElement&&(this.containerElement.style.width=`${this.size}px`,this.containerElement.style.height=`${this.size}px`,this.sizePreset&&this.containerElement.classList.add(`circular-progress-${this.sizePreset}`)),this.svg&&(this.svg.setAttribute("width",this.size),this.svg.setAttribute("height",this.size),this.svg.setAttribute("viewBox",`0 0 ${this.size} ${this.size}`)),this.renderProgress()}animateTo(t,e=1e3){const s=this.value,i=t-s,r=performance.now(),o=a=>{const n=a-r,h=Math.min(n/e,1),l=1-Math.pow(1-h,3),c=s+i*l;this.setValue(c,!1),h<1?requestAnimationFrame(o):this.setValue(t,!1)};requestAnimationFrame(o)}pulse(){this.containerElement&&(this.containerElement.style.animation="none",setTimeout(()=>{this.containerElement.style.animation="circular-progress-pulse 0.5s ease-out"},10),setTimeout(()=>{this.containerElement.style.animation=""},500))}complete(){this.variant="success",this.applyVariant(),this.setValue(this.max),this.pulse()}reset(){this.setValue(this.min)}hide(){this.element&&(this.element.style.display="none")}show(){this.element&&(this.element.style.display="")}getValue(){return this.value}getPercentageValue(){return this.getPercentage()}async onBeforeDestroy(){this.popover&&(this.popover.dispose(),this.popover=null),await super.onBeforeDestroy()}}export{c as BUILD_TIME,t as BaseChart,CircularProgress,e as MetricsChart,s as MetricsMiniChart,i as MetricsMiniChartWidget,r as MiniChart,o as PieChart,a as SeriesChart,u as VERSION,g as VERSION_INFO,d as VERSION_MAJOR,m as VERSION_MINOR,p as VERSION_REVISION,l as WebApp};
 //# sourceMappingURL=charts.es.js.map